enhancement/projects more filter

backend/__init__.py

@@ -360,6 +360,7 @@ def add_api_endpoints(app):
         UsersStatisticsAPI,
         UsersStatisticsInterestsAPI,
         UsersStatisticsAllAPI,
+        OhsomeProxyAPI,
     )
 
     # System API endpoint
@@ -900,6 +901,9 @@ def add_api_endpoints(app):
         UsersStatisticsAllAPI,
         format_url("users/statistics/"),
     )
+    api.add_resource(
+        OhsomeProxyAPI, format_url("users/statistics/ohsome/"), methods=["GET"]
+    )
     # User RecommendedProjects endpoint
     api.add_resource(
         UsersRecommendedProjectsAPI,

backend/api/users/statistics.py

@@ -1,12 +1,14 @@
 from json import JSONEncoder
 from datetime import date, timedelta
 from flask_restful import Resource, request
+import requests
 
 from backend.services.users.user_service import UserService
 from backend.services.stats_service import StatsService
 from backend.services.interests_service import InterestService
 from backend.services.users.authentication_service import token_auth
 from backend.api.utils import validate_date_input
+from backend.config import EnvironmentConfig
 
 
 class UsersStatisticsAPI(Resource, JSONEncoder):
@@ -138,3 +140,43 @@ def get(self):
             return stats.to_primitive(), 200
         except (KeyError, ValueError) as e:
             return {"Error": str(e).split("-")[1], "SubCode": str(e).split("-")[0]}, 400
+
+
+class OhsomeProxyAPI(Resource):
+    @token_auth.login_required
+    def get(self):
+        """
+        Get HomePage Stats
+        ---
+        tags:
+          - system
+        produces:
+          - application/json
+        parameters:
+        - in: header
+          name: Authorization
+          description: Base64 encoded session token
+          required: true
+          type: string
+          default: Token sessionTokenHere==
+        - in: query
+          name: url
+          type: string
+          description: get user stats for osm contributions
+        responses:
+            200:
+                description: User stats
+            500:
+                description: Internal Server Error
+        """
+        url = request.args.get("url")
+        if not url:
+            return {"Error": "URL is None", "SubCode": "URL not provided"}, 400
+        try:
+            headers = {"Authorization": f"Basic {EnvironmentConfig.OHSOME_STATS_TOKEN}"}
+
+            # Make the GET request with headers
+            response = requests.get(url, headers=headers)
+            return response.json(), 200
+        except Exception as e:
+            return {"Error": str(e), "SubCode": "Error fetching data"}, 400

backend/config.py

@@ -237,6 +237,9 @@ class EnvironmentConfig:
     # Sentry backend DSN
     SENTRY_BACKEND_DSN = os.getenv("TM_SENTRY_BACKEND_DSN", None)
 
+    # Ohsome Stats Token
+    OHSOME_STATS_TOKEN = os.getenv("OHSOME_STATS_TOKEN", None)
+
 
 class TestEnvironmentConfig(EnvironmentConfig):
     POSTGRES_TEST_DB = os.getenv("POSTGRES_TEST_DB", None)

backend/services/messaging/message_service.py

@@ -1,6 +1,7 @@
 import re
 import time
 import datetime
+import bleach
 
 from cachetools import TTLCache, cached
 from typing import List
@@ -243,6 +244,34 @@ def send_message_after_comment(
             task_link = MessageService.get_task_link(project_id, task_id)
             project_link = MessageService.get_project_link(project_id, project_name)
 
+            # Clean comment and convert to html
+            allowed_tags = [
+                "a",
+                "b",
+                "blockquote",
+                "br",
+                "code",
+                "em",
+                "h1",
+                "h2",
+                "h3",
+                "img",
+                "i",
+                "li",
+                "ol",
+                "p",
+                "pre",
+                "strong",
+                "ul",
+            ]
+            allowed_atrributes = {"a": ["href", "rel"], "img": ["src", "alt"]}
+            clean_comment = bleach.clean(
+                markdown(comment, output_format="html"),
+                tags=allowed_tags,
+                attributes=allowed_atrributes,
+            )  # Bleach input to ensure no nefarious script tags etc
+            clean_comment = bleach.linkify(clean_comment)
+
             messages = []
             for username in usernames:
                 try:
@@ -260,7 +289,7 @@ def send_message_after_comment(
                     f"You were mentioned in a comment in {task_link} "
                     + f"of Project {project_link}"
                 )
-                message.message = comment
+                message.message = clean_comment
                 messages.append(
                     dict(message=message, user=user, project_name=project_name)
                 )

frontend/src/api/projects.js

@@ -7,7 +7,7 @@ import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
 import { UNDERPASS_URL } from '../config';
 
-export const useProjectsQuery = (fullProjectsQuery, action) => {
+export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences['locale']);
 
@@ -35,6 +35,7 @@ export const useProjectsQuery = (fullProjectsQuery, action) => {
     queryKey: ['projects', fullProjectsQuery, action],
     queryFn: ({ signal, queryKey }) => fetchProjects(signal, queryKey),
     keepPreviousData: true,
+    ...queryOptions,
   });
 };
 

frontend/src/api/stats.js

@@ -1,9 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import { fetchExternalJSONAPI } from '../network/genericJSONRequest';
 
+import { fetchExternalJSONAPI } from '../network/genericJSONRequest';
 import api from './apiClient';
 import { OHSOME_STATS_BASE_URL } from '../config';
 
+const ohsomeProxyAPI = (url) => {
+  const token = localStorage.getItem('token');
+  return api(token).get(`users/statistics/ohsome/?url=${url}`);
+};
+
 export const useSystemStatisticsQuery = () => {
   const fetchSystemStats = ({ signal }) => {
     return api().get(`system/statistics/`, {
@@ -65,17 +70,17 @@ export const useOsmHashtagStatsQuery = (defaultComment) => {
 
 export const useUserOsmStatsQuery = (id) => {
   const fetchUserOsmStats = () => {
-    return fetchExternalJSONAPI(
+    return ohsomeProxyAPI(
       `${OHSOME_STATS_BASE_URL}/topic/poi,highway,building,waterway/user?userId=${id}`,
-      true,
     );
   };
 
   return useQuery({
     queryKey: ['user-osm-stats'],
     queryFn: fetchUserOsmStats,
-    useErrorBoundary: true,
-    select: (data) => data.result,
+    // userDetail.test.js fails on CI when useErrorBoundary=true
+    useErrorBoundary: process.env.NODE_ENV !== 'test',
+    select: (data) => data.data.result,
     enabled: !!id,
   });
 };

frontend/src/components/footer/index.js

@@ -23,7 +23,7 @@ import {
 import './styles.scss';
 
 const socialNetworks = [
-  { link: ORG_TWITTER, icon: <TwitterIcon style={{ height: '20px', width: '20px' }} /> },
+  { link: ORG_TWITTER, icon: <TwitterIcon style={{ height: '20px', width: '20px' }} noBg /> },
   { link: ORG_FB, icon: <FacebookIcon style={{ height: '20px', width: '20px' }} /> },
   { link: ORG_YOUTUBE, icon: <YoutubeIcon style={{ height: '20px', width: '20px' }} /> },
   { link: ORG_INSTAGRAM, icon: <InstagramIcon style={{ height: '20px', width: '20px' }} /> },
@@ -38,6 +38,7 @@ export function Footer() {
     'projects/:id/tasks',
     'projects/:id/map',
     'projects/:id/validate',
+    'projects/:id/live',
     'manage/organisations/new/',
     'manage/teams/new',
     'manage/campaigns/new',

frontend/src/components/header/index.js

@@ -89,7 +89,7 @@ export const Header = () => {
     ) : null;
 
   return (
-    <header className="w-100 bb b--grey-light">
+    <header id="top-header" className="w-100 bb b--grey-light">
       <UpdateDialog />
       {checkUserEmail()}
       {showOrgBar && (

frontend/src/components/projectDetail/shareButton.js

@@ -6,7 +6,7 @@ import messages from './messages';
 import { ORG_CODE } from '../../config';
 import { createPopup } from '../../utils/login';
 import { getTwitterLink, getLinkedInLink, getFacebookLink } from '../../utils/shareFunctions';
-import { TwitterIconNoBg, FacebookIcon, LinkedinIcon, ShareIcon } from '../svgIcons';
+import { TwitterIcon, FacebookIcon, LinkedinIcon, ShareIcon } from '../svgIcons';
 
 export function ShareButton({ projectId }: Object) {
   const iconStyle = { width: '1.4em', height: '1.4em' };
@@ -41,7 +41,7 @@ export function ShareButton({ projectId }: Object) {
                 className="link no-underline base-font f6 pointer pv1"
                 onClick={() => twitterPopup(msg)}
               >
-                <TwitterIconNoBg style={iconStyle} className="light-blue v-mid pb1 pr2" />
+                <TwitterIcon style={iconStyle} className="light-blue v-mid pb1 pr2" />
                 Tweet
               </div>
               <div

frontend/src/components/projects/moreFiltersForm.js

@@ -116,7 +116,7 @@ export const MoreFiltersForm = (props) => {
           />
         </fieldset>
       )}
-      <div className="tr w-100 mt3">
+      <div className="tr w-100 mt3 pb3 ph2">
         <Link to="/explore">
           <Button className="bg-white blue-dark mr1 f6 pv2">
             <FormattedMessage {...messages.clear} />

frontend/src/components/projects/projectNav.js

@@ -90,12 +90,12 @@ export const ProjectNav = (props) => {
     setQuery(
       {
         ...fullProjectsQuery,
-        omitMapResults:!isMapShown
+        omitMapResults: !isMapShown,
       },
       'pushIn',
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  },[isMapShown])
+  }, [isMapShown]);
   const linkCombo = 'link ph3 f6 pv2 ba b--tan br1 ph3 fw5';
 
   const moreFiltersAnyActive =
@@ -115,7 +115,7 @@ export const ProjectNav = (props) => {
   // onSelectedItemChange={(changes) => console.log(changes)}
   return (
     /* mb1 mb2-ns (removed for map, but now small gap for more-filters) */
-    <header className="bt bb b--tan w-100 ">
+    <header id="explore-nav" className="bt bb b--tan w-100 ">
       <div className="mt2 mb1 ph3 dib lh-copy w-100 cf">
         <div className="w-80-l w-90-m w-100 fl dib">
           <div className="dib">
@@ -125,6 +125,7 @@ export const ProjectNav = (props) => {
             <ProjectsActionFilter setQuery={setQuery} fullProjectsQuery={fullProjectsQuery} />
             <Link
               to={filterRouteToggled}
+              id="more-filter-id"
               className={`dn mr3 dib-l lh-title f6 ${linkCombo} ${moreFiltersCurrentActiveStyle} blue-dark`}
             >
               <FormattedMessage {...messages.moreFilters} />

frontend/src/components/svgIcons/index.js

@@ -69,7 +69,6 @@ export { LoadingIcon } from './loading';
 export { EnvelopeIcon } from './envelope';
 export { LinkedinIcon } from './linkedin';
 export { MarkerIcon } from './marker';
-export { TwitterIconNoBg } from './twitterNoBg';
 export { ZoomPlusIcon } from './zoomPlus';
 export { SidebarIcon } from './sidebar';
 export { QuestionCircleIcon } from './questionCircle';

frontend/src/components/svgIcons/twitter.js

@@ -3,15 +3,20 @@ import React from 'react';
 export class TwitterIcon extends React.PureComponent {
   render() {
     return (
-      <svg width="15" height="14" viewBox="0 0 15 14" {...this.props} aria-label="Twitter">
-        <g fill="none" fillRule="evenodd">
-          <path d="M-13-13h40v40h-40z" />
-          <path
-            d="M12.394 14h-10.5a1.75 1.75 0 0 1-1.75-1.75V1.75C.144.784.928 0 1.894 0h10.5c.966 0 1.75.784 1.75 1.75v10.5a1.75 1.75 0 0 1-1.75 1.75zM5.52 10.556c3.3 0 5.107-2.737 5.107-5.106 0-.078 0-.154-.004-.232.35-.252.655-.57.896-.93a3.637 3.637 0 0 1-1.032.283c.37-.22.654-.574.79-.994a3.57 3.57 0 0 1-1.14.434 1.797 1.797 0 0 0-3.059 1.638 5.096 5.096 0 0 1-3.7-1.876 1.8 1.8 0 0 0 .556 2.398 1.815 1.815 0 0 1-.811-.224v.024c0 .868.619 1.596 1.438 1.76a1.75 1.75 0 0 1-.808.032 1.795 1.795 0 0 0 1.676 1.246 3.6 3.6 0 0 1-2.656.745 5.105 5.105 0 0 0 2.747.802z"
-            fill="currentColor"
-            fillRule="nonzero"
-          />
-        </g>
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...this.props}
+        aria-label="Twitter"
+      >
+        {!this.props.noBg && <rect width="15" height="15" rx="1" fill="black" />}
+        <path
+          d="M8.54822 6.66248L12.644 2H11.6735L8.1156 6.04753L5.27595 2H2L6.29505 8.12111L2 13.01H2.97043L6.72541 8.7347L9.72488 13.01H13.0008L8.54822 6.66248ZM7.21864 8.17485L6.7828 7.56494L3.32038 2.71647H4.81116L7.60626 6.63082L8.04027 7.24073L11.6731 12.3285H10.1823L7.21864 8.17485Z"
+          fill="white"
+        />
       </svg>
     );
   }

frontend/src/components/taskSelection/index.js

@@ -260,7 +260,7 @@ export function TaskSelection({ project }: Object) {
           )}
         <div className="w-100 w-50-ns fl pt3 overflow-y-auto-ns vh-minus-200-ns h-100">
           <div className="pl4-l pl2 pr4">
-            <ProjectHeader project={project} />
+            <ProjectHeader project={project} showEditLink />
             <div className="mt3">
               <TabSelector activeSection={activeSection} setActiveSection={setActiveSection} />
               <div className="pt3">

frontend/src/components/teamsAndOrgs/featureStats.js

@@ -13,9 +13,7 @@ export const FeatureStats = () => {
   const [stats, setStats] = useState({ edits: 0, buildings: 0, roads: 0, pois: 0, waterways: 0 });
   const getStats = async () => {
     try {
-      const response = await axios.get(
-        `${OHSOME_STATS_BASE_URL}/stats/hotosm-project-%2A`,
-      );
+      const response = await axios.get(`${OHSOME_STATS_BASE_URL}/stats/hotosm-project-%2A`);
       const { edits, buildings, roads } = response.data.result;
       setStats({
         edits,

frontend/src/components/userDetail/headerProfile.js

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from '../user/messages';
-import { TwitterIconNoBg, FacebookIcon, LinkedinIcon, ProfilePictureIcon } from '../svgIcons';
+import { TwitterIcon, FacebookIcon, LinkedinIcon, ProfilePictureIcon } from '../svgIcons';
 import { MappingLevelMessage } from '../mappingLevel';
 import { NextMappingLevel } from '../user/topBar';
 import { UserOrganisations } from './userTeamsOrgs';
@@ -26,7 +26,7 @@ export const SocialMedia = ({ data }) => {
 
     switch (field) {
       case 'twitterId':
-        return <TwitterIconNoBg style={iconStyle} className="light-blue v-mid" />;
+        return <TwitterIcon style={iconStyle} className="light-blue v-mid" />;
       case 'facebookId':
         return <FacebookIcon style={iconStyle} className="dark-blue v-mid" />;
       case 'linkedinId':

frontend/src/config/index.js

@@ -5,7 +5,6 @@ export const API_URL = process.env.REACT_APP_API_URL
   : 'http://127.0.0.1:5000/api/' + API_VERSION + '/';
 export const OHSOME_STATS_BASE_URL =
   process.env.REACT_APP_OHSOME_STATS_BASE_URL || 'https://stats.now.ohsome.org/api';
-export const OHSOME_STATS_TOKEN = process.env.REACT_APP_OHSOME_STATS_TOKEN || '';
 
 // APPLICATION SETTINGS
 export const DEFAULT_LOCALE = process.env.REACT_APP_DEFAULT_LOCALE || 'en';

frontend/src/network/genericJSONRequest.js

@@ -1,16 +1,11 @@
 import { handleErrors } from '../utils/promise';
-import { API_URL, OHSOME_STATS_TOKEN } from '../config';
+import { API_URL } from '../config';
 
-export function fetchExternalJSONAPI(url, isSetToken = false): Promise<*> {
+export function fetchExternalJSONAPI(url): Promise<*> {
   const headers = {
     'Content-Type': 'application/json',
   };
 
-  // Passing token only for ohsomeNow stats
-  if (isSetToken) {
-    headers['Authorization'] = `Basic ${OHSOME_STATS_TOKEN}`;
-  }
-
   return fetch(url, {
     method: 'GET',
     headers: headers,