Merge pull request #6490 from hotosm/fix/6462-partners-page-issues

Fixes for Partners Page UI

.github/pull_request_template.md

@@ -36,6 +36,6 @@ Notes for the reviewer. How to test this change?
 - ✅ Provide tests for your changes.
 - 📝 Use descriptive commit messages.
 - 📗 Update any related documentation and include any relevant screenshots.
-- 🔠 Does this PR introduce or change any environment variables? If so, make sure to specify this change in the description. 
+- 🔠 Does this PR introduce or change any environment variables? If so, make sure to specify this change in the description.
 
 ## [optional] What gif best describes this PR or how it makes you feel?

.github/workflows/ecs-deploy.yml

@@ -97,6 +97,3 @@ jobs:
           service: ${{ env.ECS_SERVICE }}
           cluster: ${{ env.ECS_CLUSTER }}
           wait-for-service-stability: true
-
-
-

docs/sysadmins/ci-cd.md

@@ -10,7 +10,7 @@ We use CircleCI to manage Continuous Integration and Continuous Deployment.
 | TeachOSM            | deployment/teachosm-tasking-manager     |
 | Indonesia           | deployment/id-tasking-manager           |
 
-Each environment has its own set of environment variables which are stored as secrets in the CircleCI Organization Settings under Contexts. At the moment, these variables are for the frontend builds only. See the [deployment docs](deployment.md) for updating backend variables. 
+Each environment has its own set of environment variables which are stored as secrets in the CircleCI Organization Settings under Contexts. At the moment, these variables are for the frontend builds only. See the [deployment docs](deployment.md) for updating backend variables.
 
 - OPSGENIE_API
 - TM_APP_API_URL

docs/sysadmins/deployment.md

@@ -36,7 +36,7 @@ aws s3 sync build/ <TaskingManagerReactBucket> --delete
 When deploying updates to the infrastructure or code, follow the steps below.
 
 #### Backup Database
-Before updating it's always recommended to backup the database. You can make a snapshot in AWS RDS console, or run the database dump directly. You will need sufficient access to a server on the same VPC as the RDS instance in order to connect to it directly. 
+Before updating it's always recommended to backup the database. You can make a snapshot in AWS RDS console, or run the database dump directly. You will need sufficient access to a server on the same VPC as the RDS instance in order to connect to it directly.
 
 ```
 PGPASSWORD=<PostgresPassword> pg_dump -Fc \
@@ -48,7 +48,7 @@ PGPASSWORD=<PostgresPassword> pg_dump -Fc \
 
 #### Update backend infrastructure
 
-If the deployment contains any changes to the cloudformation template, including new or changes to environment variables, then we must update the infrastructure prior to deployment. These changes are deliberately set outside the CI/CD process to prevent accidental deletion of data. For the HOT Tasking Manager, only staff with sufficient AWS privileges have the ability to perform these functions. 
+If the deployment contains any changes to the cloudformation template, including new or changes to environment variables, then we must update the infrastructure prior to deployment. These changes are deliberately set outside the CI/CD process to prevent accidental deletion of data. For the HOT Tasking Manager, only staff with sufficient AWS privileges have the ability to perform these functions.
 
 1. Pull the latest changes locally
 2. Run the `cfn-config update` command, keeping in mind to update any new parameters that were added.

frontend/src/assets/styles/_colors.scss

@@ -102,6 +102,9 @@ Background colors
 .bg-grey-light {
   background-color: $grey-light;
 }
+.bg-grey-dark {
+  background-color: #43474e;
+}
 .bg-white {
   background-color: $white;
 }

frontend/src/assets/styles/_extra.scss

@@ -448,12 +448,12 @@ a[href="https://www.mapbox.com/map-feedback/"]
 .two-column {
   grid-template-columns: 6fr 4fr;
 }
-.graphics-container{
+.graphics-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 600px));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
 }
-.input-container{
+.input-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 600px));
 }

frontend/src/components/footer/index.js

@@ -45,6 +45,7 @@ export function Footer() {
     'manage/projects/new',
     'manage/categories/new',
     'manage/licenses/new',
+    'manage/partners/new',
     'teams/:id/membership',
     '/api-docs/',
   ];

frontend/src/components/formInputs.js

@@ -29,7 +29,7 @@ export const SwitchToggle = ({
   labelPosition,
   small = false,
 }: Object) => (
-  <div className="v-mid justify-center bg-grey-dark">
+  <div className="v-mid justify-center">
     {label && labelPosition !== 'right' && <span className="di mr2 nowrap f6 dn-m">{label}</span>}
     <div className="relative dib">
       <input

frontend/src/components/partners/currentProjects.js

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { TasksMap } from '../taskSelection/map';
+import { Link } from 'react-router-dom';
+import ReactPlaceholder from 'react-placeholder';
 import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
+
+import { TasksMap } from '../taskSelection/map';
 import { Button } from '../button';
-import { Link } from 'react-router-dom';
 import { API_URL } from '../../config';
-
 import messages from './messages';
-import ReactPlaceholder from 'react-placeholder';
 import ProjectProgressBar from '../projectCard/projectProgressBar';
+import { HeaderLine } from '../projectDetail/header';
 
 // Import Swiper styles
 import './styles.scss';
@@ -24,13 +25,9 @@ export function CurrentProjects({ currentProjects }) {
   const [error, setError] = useState(false);
   const pagination = {
     clickable: true,
-    renderBullet: function (index, className) {
-      return '<span class="' + className + '">' + (index + 1) + '</span>';
-    },
+    el: '.swiper-custom-pagination',
   };
 
-  const text = `This remote mapping of buildings will support the implementation of planned activities and
-  largely the generation of data for humanitarian activities in the identified provinces. `;
   const fetchData = async () => {
     try {
       const projectIds = currentProjects.split(',').map((id) => parseInt(id.trim(), 10));
@@ -54,6 +51,7 @@ export function CurrentProjects({ currentProjects }) {
           percentMapped: jsonInfo.percentMapped,
           percentValidated: jsonInfo.percentValidated,
           percentBadImagery: jsonInfo.percentBadImagery,
+          organisationName: jsonInfo.organisationName,
         };
       });
 
@@ -65,11 +63,15 @@ export function CurrentProjects({ currentProjects }) {
   };
 
   useEffect(() => {
+    if (!currentProjects) return;
     fetchData();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentProjects]);
 
+  if (!currentProjects)
+    return <h3 className="f3 barlow-condensed blue-dark fw6">There are no current projects.</h3>;
+
   return (
     <ReactPlaceholder
       showLoadingAnimation={true}
@@ -84,48 +86,88 @@ export function CurrentProjects({ currentProjects }) {
           pagination={pagination}
           modules={[Pagination]}
           swipeHandler={{ draggable: false }}
+          className="shadow-4"
           style={{
             backgroundColor: 'white',
             width: '100%',
             borderColor: 'gray',
-            borderRadius: 5,
-            height: 500,
-            border: '1px solid',
           }}
         >
           {projectsData.map((project) => (
-            <SwiperSlide key={project.id}>
-              <TasksMap className="w-100 h-50 m2-l" mapResults={project.tasks} />
-              <div className="mv2-l mh2 flex justify-between items-center">
-                <h4>
-                  {project.id} - {project.info.name}
-                </h4>
-                <Link to={`/projects/` + project.id}>
-                  <Button className="bg-red ba b--red white pv2 ph3">
-                    <FormattedMessage {...messages.startMapping} />
-                  </Button>
-                </Link>
+            <SwiperSlide
+              key={project.id}
+              className="pa3"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
+                gap: '2rem',
+              }}
+            >
+              <div style={{ gridColumn: 'span 3' }}>
+                <HeaderLine
+                  author={project.author}
+                  projectId={project.id}
+                  priority={project.projectPriority}
+                  organisation={project.organisationName}
+                />
+                <div>
+                  <h3
+                    className="f2 fw5 mt3 mt2-ns mb3 ttu barlow-condensed blue-dark dib mr3"
+                    // lang={project.info.locale}
+                  >
+                    {project.info && project.info.name}
+                  </h3>
+                </div>
+                <section className="lh-title h5 overflow-y-auto mt3 mb3 flex flex-column">
+                  <div
+                    className="pr2 blue-dark-abbey markdown-content"
+                    dangerouslySetInnerHTML={{ __html: project.info.description }}
+                  />
+
+                  <a
+                    href="#description"
+                    className="link base-font bg-white f6 bn pn red pointer mt2"
+                  >
+                    <span className="pr2 ttu f6 fw6 ">
+                      <FormattedMessage {...messages.readMore} />
+                    </span>
+                  </a>
+
+                  <div style={{ marginTop: 'auto' }}>
+                    <ProjectProgressBar
+                      small={false}
+                      className="pb3 bg-white"
+                      percentMapped={project.percentMapped}
+                      percentValidated={project.percentValidated}
+                      percentBadImagery={project.percentBadImagery}
+                    />
+                  </div>
+                </section>
               </div>
-              <div className="mh3-l mv3-l">
-                <ProjectProgressBar
-                  percentMapped={project.percentMapped}
-                  percentValidated={project.percentValidated}
-                  percentBadImagery={project.percentBadImagery}
+              <div style={{ width: '100%', position: 'relative', gridColumn: 'span 2' }}>
+                <TasksMap
+                  className="w-100 h-100 m2-l"
+                  mapResults={project.tasks}
+                  style={{ height: '5rem' }}
                 />
-                <p>{text}</p>
                 <Link
                   to={`/projects/` + project.id}
-                  className="link base-font f6 mt3 bn pn red pointer"
+                  style={{ position: 'absolute', bottom: '1.5rem', right: '0.75rem' }}
                 >
-                  <span className="pr2 ttu f6 fw6">
-                    <FormattedMessage {...messages.readMore} />
-                  </span>
+                  <Button className="bg-red ba b--red white pv2 ph3">
+                    <FormattedMessage {...messages.startMapping} />
+                  </Button>
                 </Link>
               </div>
             </SwiperSlide>
           ))}
         </Swiper>
       )}
+
+      <div
+        className="swiper-custom-pagination mt2"
+        style={{ width: '100%', display: 'flex', justifyContent: 'center', gap: '0.5rem' }}
+      />
     </ReactPlaceholder>
   );
 }

frontend/src/components/partners/messages.js

@@ -55,7 +55,7 @@ export default defineMessages({
   },
   editsStats: {
     id: 'management.partners.filter.editsStats',
-    defaultMessage: 'Total Edits',
+    defaultMessage: 'Total map edits',
   },
   noPartnersGroup: {
     id: 'partners.group.zero',
@@ -67,7 +67,7 @@ export default defineMessages({
   },
   buildings: {
     id: 'management.partners.activity.buildings',
-    defaultMessage: 'Buildings Added',
+    defaultMessage: 'Buildings mapped',
   },
   roads: {
     id: 'management.partners.activity.roads',
@@ -84,7 +84,7 @@ export default defineMessages({
   learnToMap: {
     id: 'management.partners.learnToMap',
     defaultMessage: 'Learn to Map',
-  }, 
+  },
   myPartners: {
     id: 'management.filter.buttons.myPartners',
     defaultMessage: 'My Partners',
@@ -109,7 +109,7 @@ export default defineMessages({
     id: 'management.partners.titles.partner_information',
     defaultMessage: 'Partner information',
   },
-  permalink:{
+  permalink: {
     id: 'management.partners.titles.partner_permalink',
     defaultMessage: 'Permalink',
   },