v4.8.3 staging setup

Dockerfile

@@ -60,6 +60,7 @@ ENV PYTHONDONTWRITEBYTECODE=1 \
     PYTHONUNBUFFERED=1 \
     PYTHONFAULTHANDLER=1 \
     PATH="/home/appuser/.local/bin:$PATH" \
+    PYTHONPATH="/usr/src/app:$PYTHONPATH" \
     PYTHON_LIB="/home/appuser/.local/lib/python$PYTHON_IMG_TAG/site-packages" \
     SSL_CERT_FILE=/etc/ssl/certs/ca-certificates.crt \
     REQUESTS_CA_BUNDLE=/etc/ssl/certs/ca-certificates.crt

docker-compose.yml

@@ -40,6 +40,7 @@ services:
       - ./pyproject.toml:/usr/src/app/pyproject.toml:ro
       - ./backend:/usr/src/app/backend:ro
       - ./tests:/usr/src/app/tests:ro
+      - ./migrations:/src/migrations
     restart: unless-stopped
     healthcheck:
       test: curl --fail http://localhost:5000 || exit 1

frontend/src/api/projects.js

@@ -39,7 +39,7 @@ export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
   });
 };
 
-export const useProjectQuery = (projectId) => {
+export const useProjectQuery = (projectId, otherOptions) => {
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences['locale']);
   const fetchProject = ({ signal }) => {
@@ -51,6 +51,7 @@ export const useProjectQuery = (projectId) => {
   return useQuery({
     queryKey: ['project', projectId],
     queryFn: fetchProject,
+    ...otherOptions,
   });
 };
 export const useProjectSummaryQuery = (projectId, otherOptions = {}) => {

frontend/src/components/footer/index.js

@@ -36,6 +36,8 @@ export function Footer() {
 
   const footerDisabledPaths = [
     'projects/:id/tasks',
+    'projects/:id/instructions',
+    'projects/:id/contributions',
     'projects/:id/map',
     'projects/:id/validate',
     'projects/:id/live',

frontend/src/components/homepage/stats.js

@@ -3,6 +3,7 @@ import shortNumber from 'short-number';
 
 import messages from './messages';
 import { useOsmStatsQuery, useSystemStatisticsQuery } from '../../api/stats';
+import StatsInfoFooter from '../statsInfoFooter';
 
 export const StatsNumber = (props) => {
   const value = shortNumber(props.value);
@@ -38,8 +39,10 @@ export const StatsSection = () => {
   const hasStatsLoaded = hasTmStatsLoaded && hasOsmStatsLoaded;
 
   return (
-    <>
-      <div className="pt5 pb2 ph6-l ph4 flex justify-around flex-wrap flex-nowrap-ns stats-container">
+    <div className="pt5 pb2 ph6-l ph4 ">
+      <StatsInfoFooter className="mb4" />
+
+      <div className="flex justify-around flex-wrap flex-nowrap-ns stats-container">
         <StatsColumn
           label={messages.buildingsStats}
           value={hasStatsLoaded ? osmStatsData?.buildings : undefined}
@@ -61,6 +64,6 @@ export const StatsSection = () => {
           value={hasStatsLoaded ? tmStatsData.data.mappersOnline : undefined}
         />
       </div>
-    </>
+    </div>
   );
 };

frontend/src/components/partnerMapswipeStats/overview.js

@@ -30,7 +30,7 @@ export const formatSecondsToTwoUnits = (seconds, shortFormat = false) => {
     years: 'yrs',
     months: 'mos',
     weeks: 'wks',
-    days: 'ds',
+    days: 'days',
     hours: 'hrs',
     minutes: 'mins',
     seconds: 'secs',
@@ -82,8 +82,11 @@ export const Overview = () => {
       customPlaceholder={<OverviewPlaceholder />}
       ready={!isLoading && !isRefetching}
     >
+      <h3 class="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib mb3">
+        {data?.nameInsideProvider}
+      </h3>
       <div
-        className="flex justify-between items-stretch flex-wrap flex-nowrap-ns"
+        className="flex justify-between items-stretch flex-wrap flex-nowrap-l"
         style={{ gap: '1.6rem' }}
       >
         <div

frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js

@@ -46,7 +46,7 @@ export const ProjectTypeAreaStats = ({
 
   return (
     <div
-      className="flex justify-between items-center flex-wrap flex-nowrap-ns"
+      className="flex justify-between items-center flex-wrap flex-nowrap-l"
       style={{ gap: '1.6rem' }}
     >
       <div className="pa4 flex items-center bg-white shadow-6 w-100" style={{ gap: '1.75rem' }}>

frontend/src/components/partnerMapswipeStats/swipesByOrganization.js

@@ -80,11 +80,10 @@ export const SwipesByOrganization = ({ contributionsByOrganization = [] }) => {
   }, []);
 
   return (
-    <div style={{ width: '48.5%' }}>
+    <div className="mapswipe-stats-piechart">
       <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
         <FormattedMessage {...messages.swipesByOrganization} />
       </h3>
-
       <div className="bg-white pa4 shadow-6 relative" style={{ height: '450px' }}>
         <canvas ref={chartRef}></canvas>
         {contributionsByOrganization.length === 0 && (

frontend/src/components/partnerMapswipeStats/swipesByProjectType.js

@@ -82,7 +82,7 @@ export const SwipesByProjectType = ({ contributionsByProjectType = [] }) => {
   }, []);
 
   return (
-    <div style={{ width: '48.5%' }}>
+    <div className="mapswipe-stats-piechart">
       <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
         <FormattedMessage {...messages.swipesByProjectType} />
       </h3>

frontend/src/components/partners/leaderboard.js

@@ -4,10 +4,13 @@ import messages from '../../views/messages';
 import { StatsSection } from './partnersStats';
 import { Activity } from './partnersActivity';
 import { CurrentProjects } from './currentProjects';
+import StatsInfoFooter from '../statsInfoFooter';
 
 export const Leaderboard = ({ partner, partnerStats }) => {
   return (
     <div className="pa4 bg-tan flex flex-column gap-1.25">
+      <StatsInfoFooter className="mv3" />
+
       <div className="flex justify-between items-center">
         <h3 className="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib">
           {partner.primary_hashtag

frontend/src/components/partners/partners.js

@@ -95,7 +95,7 @@ export function PartnersCard({ details }) {
             <FormattedMessage {...messages.edit} />
           </CustomButton>
         </Link>
-        <Link to={`/partners/${details.permalink}/stats/leaderboard`}>
+        <Link to={`/partners/${details.permalink}/stats`}>
           <CustomButton
             style={{ backgroundColor: '#e2e2e2' }}
             className="blue-dark ba b--grey-light pa2 br1 f5 pointer"

frontend/src/components/partners/partnersStats.js

@@ -4,7 +4,6 @@ import shortNumber from 'short-number';
 import messages from './messages';
 import { StatsCard } from '../statsCard';
 import { MappingIcon, EditIcon, RoadIcon, HomeIcon } from '../svgIcons';
-import StatsInfoFooter from '../statsInfoFooter';
 
 const iconClass = 'h-50 w-50';
 const iconStyle = { height: '45px' };
@@ -71,7 +70,6 @@ export const StatsSection = ({ partner }) => {
           className={'w-25-l w-50-m w-100 mv1'}
         />
       </div>
-      <StatsInfoFooter />
     </div>
   );
 };

frontend/src/components/projectDetail/footer.js

@@ -1,5 +1,5 @@
 import { useRef, Fragment } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
@@ -58,6 +58,7 @@ const menuItems = [
 export const ProjectDetailFooter = ({ className, projectId }) => {
   const userIsloggedIn = useSelector((state) => state.auth.token);
   const menuItemsContainerRef = useRef(null);
+  const { pathname } = useLocation();
 
   return (
     <div
@@ -92,7 +93,12 @@ export const ProjectDetailFooter = ({ className, projectId }) => {
       <div className="flex items-center ml-auto gap-1">
         <ShareButton projectId={projectId} />
         {userIsloggedIn && <AddToFavorites projectId={projectId} />}
-        <Link to={`./tasks`} className="">
+        <Link
+          to={`./tasks`}
+          // add previous path to history location to track
+          // if the user is from project detail page
+          state={{ from: pathname }}
+        >
           <Button className="white bg-red h3 w5">
             <FormattedMessage {...messages.contribute} />
           </Button>

frontend/src/components/projectDetail/index.js

@@ -1,5 +1,5 @@
-import { lazy, Suspense, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { lazy, Suspense, useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
 import ReactPlaceholder from 'react-placeholder';
 import centroid from '@turf/centroid';
 import { FormattedMessage } from 'react-intl';
@@ -35,9 +35,14 @@ import { ENABLE_EXPORT_TOOL } from '../../config/index.js';
 /* lazy imports must be last import */
 const ProjectTimeline = lazy(() => import('./timeline' /* webpackChunkName: "timeline" */));
 
-const ProjectDetailMap = (props) => {
+export const ProjectDetailMap = (props) => {
   const [taskBordersOnly, setTaskBordersOnly] = useState(true);
 
+  useEffect(() => {
+    if (typeof props.taskBordersOnly !== 'boolean') return;
+    setTaskBordersOnly(props.taskBordersOnly);
+  }, [props.taskBordersOnly]);
+
   const taskBordersGeoJSON = props.project.areaOfInterest && {
     type: 'FeatureCollection',
     features: [
@@ -139,6 +144,7 @@ export const ProjectDetailLeft = ({ project, contributors, className, type }) =>
 export const ProjectDetail = (props) => {
   useSetProjectPageTitleTag(props.project);
   const size = useWindowSize();
+  const { id: projectId } = useParams();
   const { data: contributors, status: contributorsStatus } = useProjectContributionsQuery(
     props.project.projectId,
   );
@@ -181,6 +187,12 @@ export const ProjectDetail = (props) => {
         className="ph4 w-60-l w-80-m w-100 lh-title markdown-content blue-dark-abbey"
         dangerouslySetInnerHTML={htmlDescription}
       />
+      <a
+        href={`/projects/${projectId}/instructions`}
+        className="ph4 ttu db f5 blue-dark fw6 project-instructions-link"
+      >
+        <FormattedMessage {...messages.viewProjectSpecificInstructions} />
+      </a>
       <a href="#coordination" style={{ visibility: 'hidden' }} name="coordination">
         <FormattedMessage {...messages.coordination} />
       </a>
@@ -435,6 +447,7 @@ ProjectDetailMap.propTypes = {
   type: PropTypes.string,
   tasksError: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   projectLoading: PropTypes.bool,
+  taskBordersOnly: PropTypes.bool,
 };
 
 ProjectDetailLeft.propTypes = {

frontend/src/components/projectDetail/messages.js

@@ -344,4 +344,8 @@ export default defineMessages({
     id: 'project.noSimilarProjectsFound',
     defaultMessage: 'Could not find any similar projects for this project',
   },
+  viewProjectSpecificInstructions: {
+    id: 'project.viewProjectSpecificInstructions',
+    defaultMessage: 'View project specific instructions',
+  },
 });

frontend/src/components/projectDetail/styles.scss

@@ -36,3 +36,7 @@
 .react-tooltip#dueDateBoxTooltip {
   z-index: 999;
 }
+
+.project-instructions-link {
+  letter-spacing: -0.0857513px;
+}

frontend/src/components/projectStats/edits.js

@@ -4,7 +4,7 @@ import projectMessages from './messages';
 import userDetailMessages from '../userDetail/messages';
 import { MappingIcon, HomeIcon, RoadIcon, EditIcon } from '../svgIcons';
 import { StatsCard } from '../statsCard';
-import StatsTimestamp from '../statsTimestamp';
+import StatsInfoFooter from '../statsInfoFooter';
 
 export const EditsStats = ({ data }) => {
   const { changesets, buildings, roads, edits } = data;
@@ -18,30 +18,32 @@ export const EditsStats = ({ data }) => {
         <h3 className="barlow-condensed ttu f3">
           <FormattedMessage {...projectMessages.edits} />
         </h3>
-        <StatsTimestamp messageType="project" />
       </div>
-      <div className="db pb2 project-edit-stats">
-        <StatsCard
-          field={'changesets'}
-          icon={<MappingIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...projectMessages.changesets} />}
-          value={changesets || 0}
-        />
-        <StatsCard
-          icon={<EditIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...projectMessages.totalEdits} />}
-          value={edits || 0}
-        />
-        <StatsCard
-          icon={<HomeIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
-          value={buildings || 0}
-        />
-        <StatsCard
-          icon={<RoadIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.roadMapped} />}
-          value={roads || 0}
-        />
+      <div>
+        <StatsInfoFooter className="mb4" />
+        <div className="db pb2 project-edit-stats">
+          <StatsCard
+            field={'changesets'}
+            icon={<MappingIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...projectMessages.changesets} />}
+            value={changesets || 0}
+          />
+          <StatsCard
+            icon={<EditIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...projectMessages.totalEdits} />}
+            value={edits || 0}
+          />
+          <StatsCard
+            icon={<HomeIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
+            value={buildings || 0}
+          />
+          <StatsCard
+            icon={<RoadIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.roadMapped} />}
+            value={roads || 0}
+          />
+        </div>
       </div>
     </div>
   );

frontend/src/components/statsInfoFooter/index.jsx

@@ -2,27 +2,37 @@ import { useIntl } from 'react-intl';
 
 import { useOsmStatsMetadataQuery } from '../../api/stats';
 import { dateOptions } from '../statsTimestamp';
+import { InfoIcon } from '../svgIcons';
+import '../../views/partnersMapswipeStats.scss';
 
-export default function StatsInfoFooter() {
+export default function StatsInfoFooter({ className }) {
   const intl = useIntl();
 
   const { data: osmStatsMetadata } = useOsmStatsMetadataQuery();
 
   return (
-    <div className="cf w-100 relative tr pt3">
-      <span className="ma0 f7 fw4 blue-grey mb1 i">
-        These statistics come from{' '}
-        <a
-          className="blue-grey fw7"
-          href="https://stats.now.ohsome.org/about"
-          target="_blank"
-          rel="noreferrer"
-        >
-          ohsomeNow Stats
-        </a>{' '}
-        and were last updated at{' '}
-        <strong>{intl.formatDate(osmStatsMetadata?.max_timestamp, dateOptions)}</strong> (
-        {intl.timeZone}).
+    <div
+      className={`pr3 pv2 pl0 relative inline-flex mapswipe-stats-info-banner
+      blue-dark ${className}`}
+    >
+      <span className="inline-flex items-center ">
+        <InfoIcon className="mr2" style={{ height: '20px' }} />
+        <span>
+          These statistics come from{' '}
+          <a
+            className="blue-grey"
+            href="https://stats.now.ohsome.org/about"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ohsomeNow Stats
+          </a>{' '}
+          and were last updated at{' '}
+          <span className="fw5 stats-info-datetime">
+            {intl.formatDate(osmStatsMetadata?.max_timestamp, dateOptions)}
+          </span>{' '}
+          ({intl.timeZone})
+        </span>
       </span>
     </div>
   );