Merge pull request #1638 from Vizzuality/chore/client/feedback-mapp

[N/A]: MaPP feedback

app/components/map/component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 
-import ReactMapGL, { FlyToInterpolator, TRANSITION_EVENTS, ViewportProps } from 'react-map-gl';
+import ReactMapGL, { FlyToInterpolator, TRANSITION_EVENTS } from 'react-map-gl';
 
 import { fitBounds } from '@math.gl/web-mercator';
 import { easeCubic } from 'd3-ease';

app/components/map/scale/index.tsx

@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+
+import { ScaleControl } from 'react-map-gl';
+
+import { cn } from 'utils/cn';
+
+const MapScale = ({ className, ...props }: ComponentProps<typeof ScaleControl>): JSX.Element => (
+  <ScaleControl
+    {...props}
+    className={cn({
+      'absolute bottom-6 right-[305px]': true,
+      [className]: !!className,
+    })}
+  />
+);
+
+export default MapScale;

app/components/scenarios/item/component.tsx

@@ -122,7 +122,7 @@ export const Item: React.FC<ItemProps> = ({
     const clone = jobs.find((j) => j.kind === 'clone');
     const run = jobs.find((j) => j.kind === 'run');
 
-    // PROTECTED AREAS
+    // Conservation areas
     if (planningAreaProtectedCalculation && planningAreaProtectedCalculation.status === 'running')
       return 'pa-running';
     if (planningAreaProtectedCalculation && planningAreaProtectedCalculation.status === 'failure')

app/components/scroll-area/index.tsx

@@ -37,7 +37,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-gray-400/30" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

app/hoc/scenarios.ts

@@ -1,9 +1,10 @@
 import { QueryClient } from 'react-query';
 
-import { NAVIGATION_TREE } from 'layout/project/navigation/constants';
 import { Session } from 'next-auth';
 import { getSession } from 'next-auth/react';
 import { dehydrate } from 'react-query/hydration';
+
+import { NAVIGATION_TREE } from 'layout/project/navigation/constants';
 import { Project } from 'types/api/project';
 import { Scenario } from 'types/api/scenario';
 
@@ -276,7 +277,7 @@ export function withSolutions(getServerSidePropsFunc?: Function) {
       return {
         props: {},
         redirect: {
-          destination: `/projects/${pid}/scenarios/${sid}/edit?tab=protected-areas`,
+          destination: `/projects/${pid}/scenarios/${sid}/edit?tab=conservation-areas`,
           permanent: false,
         },
       };

app/hooks/map/constants.tsx

@@ -190,7 +190,7 @@ export const LEGEND_LAYERS = {
 
     return {
       id: 'wdpa-preview',
-      name: 'Protected areas preview',
+      name: 'Conservation areas preview',
       icon: (
         <Icon
           icon={SQUARE_SVG}
@@ -210,7 +210,7 @@ export const LEGEND_LAYERS = {
 
     return {
       id: 'wdpa-percentage',
-      name: 'Protected areas',
+      name: 'Conservation areas',
       icon: (
         <Icon
           icon={HEXAGON_SVG}

app/hooks/map/index.ts

@@ -858,7 +858,7 @@ export function usePUGridLayer({
               ]
             : []),
 
-          // PROTECTED AREAS
+          // Conservation Areas
           ...(sublayers.includes('wdpa-percentage') &&
           wdpaThreshold !== null &&
           !!wdpaIucnCategories.length

app/hooks/scenarios/index.ts

@@ -407,7 +407,7 @@ export function useScenarios(pId, options: UseScenariosOptionsProps = {}) {
           ranAtLeastOnce,
           numberOfRuns,
           onEdit: () => {
-            push(`/projects/${projectId}/scenarios/${id}/edit?tab=protected-areas`);
+            push(`/projects/${projectId}/scenarios/${id}/edit?tab=conservation-areas`);
           },
         };
       });

app/layout/info/upload-wdpas.tsx

@@ -2,7 +2,7 @@ export const UploadWDPAsInfoButtonContent = (): JSX.Element => {
   return (
     <div className="space-y-2.5 text-xs">
       <h4 className="mb-2.5 font-heading">
-        When uploading shapefiles of protected areas, please make sure that:
+        When uploading shapefiles of conservation areas, please make sure that:
       </h4>
       <ul className="list-disc space-y-1 pl-6">
         <li>this is a single zip file that includes all the components of a single shapefile;</li>

app/layout/project/navigation/constants.ts

@@ -1,10 +1,10 @@
 import { NavigationTreeCategories } from './types';
 
 export const TABS = {
-  'project-protected-areas': 'protected-areas',
+  'project-conservation-areas': 'conservation-areas',
   'project-cost-surface': 'cost-surface',
   'project-features': 'features',
-  'scenario-protected-areas': 'protected-areas',
+  'scenario-conservation-areas': 'conservation-areas',
   'scenario-cost-surface': 'cost-surface',
   'scenario-planning-unit-status': 'planning-unit-status',
   'scenario-features': 'features',
@@ -19,12 +19,12 @@ export const TABS = {
 export const NAVIGATION_TREE = {
   user: [],
   inventory: [
-    TABS['project-protected-areas'],
+    TABS['project-conservation-areas'],
     TABS['project-cost-surface'],
     TABS['project-features'],
   ],
   gridSetup: [
-    TABS['scenario-protected-areas'],
+    TABS['scenario-conservation-areas'],
     TABS['scenario-cost-surface'],
     TABS['scenario-planning-unit-status'],
     TABS['scenario-features'],

app/layout/project/navigation/hooks.tsx

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router';
 
 import BLM_CALIBRATION_SVG from 'svgs/navigation/blm-calibration.svg?sprite';
+import CONSERVATION_AREAS_SVG from 'svgs/navigation/conservation-areas.svg?sprite';
 import COST_SURFACE_SVG from 'svgs/navigation/cost-surface.svg?sprite';
 import FEATURES_SVG from 'svgs/navigation/features.svg?sprite';
 import OVERVIEW_SVG from 'svgs/navigation/overview.svg?sprite';
 import PLANNING_UNITS_SVG from 'svgs/navigation/planning-units.svg?sprite';
-import PROTECTED_AREA_SVG from 'svgs/navigation/protected-areas.svg?sprite';
 import TARGET_SVG from 'svgs/navigation/target.svg?sprite';
 
 import { TABS } from './constants';
@@ -20,13 +20,13 @@ export const useInventoryItems = (): SubMenuItem[] => {
 
   return [
     {
-      name: 'Protected areas',
-      route: `/projects/${pid}?tab=${TABS['project-protected-areas']}`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isProjectRoute && tab === TABS['project-protected-areas'],
+      name: 'Conservation Areas',
+      route: `/projects/${pid}?tab=${TABS['project-conservation-areas']}`,
+      icon: CONSERVATION_AREAS_SVG,
+      selected: isProjectRoute && tab === TABS['project-conservation-areas'],
     },
     {
-      name: 'Cost surface',
+      name: 'Cost Surface',
       route: `/projects/${pid}?tab=${TABS['project-cost-surface']}`,
       icon: COST_SURFACE_SVG,
       selected: isProjectRoute && tab === TABS['project-cost-surface'],
@@ -47,10 +47,10 @@ export const useGridSetupItems = (): SubMenuItem[] => {
 
   return [
     {
-      name: 'Protected Areas',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=${TABS['scenario-protected-areas']}`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === TABS['scenario-protected-areas'],
+      name: 'Conservation Areas',
+      route: `/projects/${pid}/scenarios/${sid}/edit?tab=${TABS['scenario-conservation-areas']}`,
+      icon: CONSERVATION_AREAS_SVG,
+      selected: isScenarioRoute && tab === TABS['scenario-conservation-areas'],
     },
     {
       name: 'Planning Unit Status',

app/layout/project/navigation/types.ts

@@ -5,4 +5,4 @@ export type NavigationTreeCategories =
   | 'solutions'
   | 'marxanSettings';
 
-export type NavigationInventoryTabs = 'protected-areas' | 'cost-surface' | 'features';
+export type NavigationInventoryTabs = 'conservation-areas' | 'cost-surface' | 'features';

app/layout/project/reports/comparison/map/index.tsx

@@ -14,6 +14,7 @@ import { useProject } from 'hooks/projects';
 import { useScenarios } from 'hooks/scenarios';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ScreenshotComparisionMap = ({ id }: { id: string }): JSX.Element => {
   const [cache] = useState<number>(Date.now());
@@ -145,11 +146,15 @@ export const ScreenshotComparisionMap = ({ id }: { id: string }): JSX.Element =>
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                {LAYERS.map((l) => (
-                  <Layer key={l.id} {...l} />
-                ))}
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  {LAYERS.map((l) => (
+                    <Layer key={l.id} {...l} />
+                  ))}
+                </LayerManager>
+
+                <MapScale />
+              </>
             );
           }}
         </Map>

app/layout/project/sidebar/project/inventory-panel/wdpas/actions-menu/index.tsx → app/layout/project/sidebar/project/inventory-panel/conservation-areas/actions-menu/index.tsx

@@ -2,8 +2,8 @@ import { ComponentProps, useCallback, useState } from 'react';
 
 import Icon from 'components/icon';
 import Modal from 'components/modal/component';
-import DeleteModal from 'layout/project/sidebar/project/inventory-panel/wdpas/modals/delete';
-import EditModal from 'layout/project/sidebar/project/inventory-panel/wdpas/modals/edit';
+import DeleteModal from 'layout/project/sidebar/project/inventory-panel/conservation-areas/modals/delete';
+import EditModal from 'layout/project/sidebar/project/inventory-panel/conservation-areas/modals/edit';
 import { cn } from 'utils/cn';
 
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
@@ -57,7 +57,7 @@ const ActionsMenu = ({
         </button>
         <Modal
           id="edit-wdpa-modal"
-          title="Protected area"
+          title="Conservation area"
           open={modalState.edit}
           size="narrow"
           onDismiss={() => handleModal('edit', false)}

app/layout/project/sidebar/project/inventory-panel/wdpas/bulk-action-menu/index.tsx → app/layout/project/sidebar/project/inventory-panel/conservation-areas/bulk-action-menu/index.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 import Button from 'components/button';
 import Icon from 'components/icon';
 import Modal from 'components/modal/component';
-import DeleteModal from 'layout/project/sidebar/project/inventory-panel/wdpas/modals/delete';
+import DeleteModal from 'layout/project/sidebar/project/inventory-panel/conservation-areas/modals/delete';
 import { WDPA } from 'types/api/wdpa';
 
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';

app/layout/project/sidebar/project/inventory-panel/wdpas/footer/index.tsx → app/layout/project/sidebar/project/inventory-panel/conservation-areas/footer/index.tsx

@@ -1,4 +1,4 @@
-const ProtectedAreasFooter = (): JSX.Element => {
+const ConservationAreasFooter = (): JSX.Element => {
   return (
     <div className="mt-8 text-xs">
       <p className="text-gray-400">
@@ -21,4 +21,4 @@ const ProtectedAreasFooter = (): JSX.Element => {
   );
 };
 
-export default ProtectedAreasFooter;
+export default ConservationAreasFooter;

app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx → app/layout/project/sidebar/project/inventory-panel/conservation-areas/index.tsx

@@ -21,11 +21,7 @@ const WDPA_TABLE_COLUMNS = [
   },
 ];
 
-const InventoryPanelProtectedAreas = ({
-  noData: noDataMessage,
-}: {
-  noData: string;
-}): JSX.Element => {
+const ConservationAreasTable = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
   const dispatch = useAppDispatch();
 
   const {
@@ -146,4 +142,4 @@ const InventoryPanelProtectedAreas = ({
   );
 };
 
-export default InventoryPanelProtectedAreas;
+export default ConservationAreasTable;

app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx → app/layout/project/sidebar/project/inventory-panel/conservation-areas/modals/delete/index.tsx

@@ -12,7 +12,7 @@ import { useProjectWDPAs } from 'hooks/wdpa';
 import { Button } from 'components/button/component';
 import Icon from 'components/icon/component';
 import { ModalProps } from 'components/modal';
-import { bulkDeleteWDPAFromProject } from 'layout/project/sidebar/project/inventory-panel/wdpas/bulk-action-menu/utils';
+import { bulkDeleteWDPAFromProject } from 'layout/project/sidebar/project/inventory-panel/conservation-areas/bulk-action-menu/utils';
 import { WDPA } from 'types/api/wdpa';
 
 import ALERT_SVG from 'svgs/ui/new-layout/alert.svg?sprite';
@@ -38,7 +38,7 @@ const DeleteModal = ({
 
   const WDPAsNames = selectedWDPAs.map(({ name }) => name);
 
-  // ? the user will be able to delete the protected areas only if they are not being used by any scenario.
+  // ? the user will be able to delete the conservation areas only if they are not being used by any scenario.
   const haveScenarioAssociated = selectedWDPAs.some(({ scenarioUsageCount }) =>
     Boolean(scenarioUsageCount)
   );
@@ -56,7 +56,7 @@ const DeleteModal = ({
           'delete-bulk-project-wdpas',
           <>
             <h2 className="font-medium">Success</h2>
-            <p className="text-sm">The protected areas were deleted successfully.</p>
+            <p className="text-sm">The conservation areas were deleted successfully.</p>
           </>,
           {
             level: 'success',
@@ -68,7 +68,7 @@ const DeleteModal = ({
           'delete-bulk-project-wdpas',
           <>
             <h2 className="font-medium">Error!</h2>
-            <p className="text-sm">Something went wrong deleting the protected areas</p>
+            <p className="text-sm">Something went wrong deleting the conservation areas</p>
           </>,
           {
             level: 'error',
@@ -79,14 +79,14 @@ const DeleteModal = ({
 
   return (
     <div className="flex flex-col space-y-5 px-8 py-1">
-      <h2 className="font-heading font-bold text-black">{`Delete protected area${
+      <h2 className="font-heading font-bold text-black">{`Delete conservation area${
         selectedWDPAIds.length > 1 ? 's' : ''
       }`}</h2>
       <p className="font-heading text-sm font-medium text-black">
         {selectedWDPAIds.length > 1 ? (
           <div className="space-y-2">
             <span>
-              Are you sure you want to delete the following protected areas? <br />
+              Are you sure you want to delete the following conservation areas? <br />
               This action cannot be undone.
             </span>
             <ul>
@@ -97,15 +97,15 @@ const DeleteModal = ({
           </div>
         ) : (
           <span>
-            Are you sure you want to delete &quot;{WDPAsNames[0]}&quot; protected area? <br />
+            Are you sure you want to delete &quot;{WDPAsNames[0]}&quot; conservation area? <br />
             This action cannot be undone.
           </span>
         )}
       </p>
       <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-700 bg-red-100/50 px-1.5 py-4">
         <Icon className="h-10 w-10 text-red-700" icon={ALERT_SVG} />
         <p className="font-sans text-xs font-medium text-black">
-          A protected area can be deleted ONLY if it&apos;s not being used by any scenario
+          A conservation area can be deleted ONLY if it&apos;s not being used by any scenario
         </p>
       </div>
       <div className="flex w-full justify-between space-x-3 px-10 py-2">

app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx → app/layout/project/sidebar/project/inventory-panel/conservation-areas/modals/edit/index.tsx

@@ -51,7 +51,7 @@ const EditModal = ({
               'success-edit-wdpa',
               <>
                 <h2 className="font-medium">Success!</h2>
-                <p className="text-sm">Protected area edited</p>
+                <p className="text-sm">Conservation area edited</p>
               </>,
               {
                 level: 'success',
@@ -63,7 +63,7 @@ const EditModal = ({
               'error-edit-wdpa',
               <>
                 <h2 className="font-medium">Error!</h2>
-                <p className="text-sm">It is not possible to edit this protected area</p>
+                <p className="text-sm">It is not possible to edit this conservation area</p>
               </>,
               {
                 level: 'error',
@@ -89,7 +89,7 @@ const EditModal = ({
         return (
           <form onSubmit={handleSubmit} className="relative">
             <div className="flex flex-col space-y-5 px-8 py-1">
-              <h2 className="font-heading font-bold text-black">Edit protected area</h2>
+              <h2 className="font-heading font-bold text-black">Edit conservation area</h2>
 
               <div>
                 <FieldRFF<string> name="name" validate={composeValidators([{ presence: true }])}>

app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx → app/layout/project/sidebar/project/inventory-panel/conservation-areas/modals/upload/index.tsx

@@ -188,7 +188,7 @@ export const WDPAUploadModal = ({
             <form onSubmit={handleSubmit}>
               <div className="space-y-5 p-9">
                 <div className="mb-5 flex items-center space-x-3">
-                  <h4 className="font-heading text-lg text-black">Upload protected area</h4>
+                  <h4 className="font-heading text-lg text-black">Upload conservation area</h4>
                   <InfoButton size="base" theme="primary">
                     <UploadWDPAsInfoButtonContent />
                   </InfoButton>