Retrieve default comment to get correct project stats

frontend/.env.expand

@@ -40,3 +40,4 @@ REACT_APP_ID_EDITOR_URL=$ID_EDITOR_URL
 REACT_APP_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL
 REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN
 REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT
+REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT

frontend/src/components/projectStats/edits.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import projectMessages from './messages';
 import userDetailMessages from '../userDetail/messages';
-import { MappingIcon, HomeIcon, RoadIcon, EditIcon } from '../svgIcons';
+import { MappingIcon, HomeIcon, RoadIcon, EditIcon, InfoIcon } from '../svgIcons';
 import { StatsCard } from '../statsCard';
 
 export const EditsStats = ({ data }) => {
+  const intl = useIntl();
   const { changesets, buildings, roads, edits } = data;
 
   const iconClass = 'h-50 w-50';
@@ -16,7 +18,12 @@ export const EditsStats = ({ data }) => {
     <div className="cf w-100 pb4 ph2 ph4-ns blue-dark">
       <h3 className="barlow-condensed ttu f3">
         <FormattedMessage {...projectMessages.edits} />
+        <InfoIcon
+          data-tip={intl.formatMessage(projectMessages.editsStats)}
+          className="blue-grey h1 w1 v-mid pb1 ml2"
+        />
       </h3>
+      <ReactTooltip place="top" className="mw6" effect="solid" />
       <div className="cf db pb2">
         <StatsCard
           field={'changesets'}

frontend/src/components/projectStats/messages.js

@@ -89,4 +89,8 @@ export default defineMessages({
     id: 'project.stats.edits',
     defaultMessage: 'Edits',
   },
+  editsStats: {
+    id: 'project.stats.edits.info',
+    defaultMessage: 'These stats are retrieved using the default changeset comment of the project',
+  },
 });

frontend/src/config/index.js

@@ -43,6 +43,8 @@ export const ORG_GITHUB = process.env.REACT_APP_ORG_GITHUB || '';
 export const MATOMO_ID = process.env.REACT_APP_MATOMO_ID || '';
 export const SERVICE_DESK = process.env.REACT_APP_SERVICE_DESK || '';
 export const IMAGE_UPLOAD_SERVICE = process.env.REACT_APP_IMAGE_UPLOAD_API_URL || '';
+export const TM_DEFAULT_CHANGESET_COMMENT =
+  process.env.REACT_APP_TM_DEFAULT_CHANGESET_COMMENT || '';
 export const HOMEPAGE_VIDEO_URL = process.env.REACT_APP_HOMEPAGE_VIDEO_URL || '';
 // Sentry.io DSN
 export const SENTRY_FRONTEND_DSN = process.env.REACT_APP_SENTRY_FRONTEND_DSN;

frontend/src/network/tests/mockData/projects.js

@@ -1,3 +1,5 @@
+import { TM_DEFAULT_CHANGESET_COMMENT } from '../../../config';
+
 export const getProjectSummary = (id) => ({
   projectId: id,
   defaultLocale: 'en',
@@ -22,7 +24,7 @@ export const getProjectSummary = (id) => ({
   countryTag: ['Bolivia'],
   osmchaFilterId: '9322aa63-cccc-4d0d-9f93-403678e52345',
   mappingTypes: ['BUILDINGS'],
-  changesetComment: `#hotosm-project-${id} #brumado-buildings`,
+  changesetComment: `${TM_DEFAULT_CHANGESET_COMMENT}-${id} #brumado-buildings`,
   percentMapped: 16,
   percentValidated: 6,
   percentBadImagery: 0,

frontend/src/utils/defaultChangesetComment.js

@@ -0,0 +1,6 @@
+import { TM_DEFAULT_CHANGESET_COMMENT } from '../config';
+
+export const retrieveDefaultChangesetComment = (changesetComment, projectId) => {
+  const regex = new RegExp(`${TM_DEFAULT_CHANGESET_COMMENT}-${projectId}`);
+  return changesetComment.split(' ').filter((c) => c.match(regex) !== null);
+};

frontend/src/utils/tests/defaultChangesetComment.test.js

@@ -0,0 +1,17 @@
+import { retrieveDefaultChangesetComment } from '../defaultChangesetComment';
+import { TM_DEFAULT_CHANGESET_COMMENT } from '../../config';
+
+describe('retrieveDefaultChangesetComment', () => {
+  // defaultChangesetComment structure: organisation-project-projectId
+  it('returns the default comment included in the changeset comment', () => {
+    let changesetComment = `#volunteers ${TM_DEFAULT_CHANGESET_COMMENT}-1000 #builldings`;
+    expect(retrieveDefaultChangesetComment(changesetComment, 1000)).toEqual([
+      `${TM_DEFAULT_CHANGESET_COMMENT}-1000`,
+    ]);
+  });
+
+  it('returns an empty array for changeset comment without the default comment ', () => {
+    let changesetComment = '#volunteers #builldings';
+    expect(retrieveDefaultChangesetComment(changesetComment, 1000)).toEqual([]);
+  });
+});

frontend/src/views/projectStats.js

@@ -11,6 +11,7 @@ import { ProjectHeader } from '../components/projectDetail/header';
 import { TimeStats } from '../components/projectStats/timeStats';
 import { CompletionStats } from '../components/projectStats/completion';
 import { EditsStats } from '../components/projectStats/edits';
+import { retrieveDefaultChangesetComment } from '../utils/defaultChangesetComment';
 
 const ContributorsStats = React.lazy(() => import('../components/projectStats/contributorsStats'));
 const TasksByStatus = React.lazy(() => import('../components/projectStats/taskStatus'));
@@ -33,16 +34,20 @@ export function ProjectStats({ id }: Object) {
   const [edits, setEdits] = useState({});
   useEffect(() => {
     if (project && project.changesetComment !== undefined) {
+      let defaultComment = retrieveDefaultChangesetComment(project.changesetComment, id);
       // To fix: set this URL with an ENV VAR later
-      fetchExternalJSONAPI(
-        `https://osm-stats-production-api.azurewebsites.net/stats/${
-          project.changesetComment.replace('#', '').split(' ')[0]
-        }`,
-      )
-        .then((res) => setEdits(res))
-        .catch((e) => console.log(e));
+      if (defaultComment.length) {
+        fetchExternalJSONAPI(
+          `https://osm-stats-production-api.azurewebsites.net/stats/${defaultComment[0].replace(
+            '#',
+            '',
+          )}`,
+        )
+          .then((res) => setEdits(res))
+          .catch((e) => console.log(e));
+      }
     }
-  }, [project]);
+  }, [project, id]);
 
   return (
     <ReactPlaceholder