Add layer config access in legend

frontend/package.json

@@ -126,45 +126,45 @@
     ]
   },
   "devDependencies": {
+    "@react-pdf/types": "^2.1.0",
     "@testing-library/dom": "^6.15.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-config-react-app": "^5.2.0",
-    "eslint-plugin-flowtype": "^3.0",
-    "eslint-plugin-fp": "^2.3.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^1.7",
-    "typescript": "^3.9.7",
-    "@react-pdf/types": "^2.1.0",
     "@turf/helpers": "^6.5.0",
     "@types/chart.js": "^2.9.21",
-    "@types/dompurify": "^2.2.3",
-    "@typescript-eslint/eslint-plugin": "^2.23.0",
-    "@typescript-eslint/parser": "^2.25.0",
     "@types/colormap": "^2.3.1",
     "@types/d3": "^5.7.2",
+    "@types/dompurify": "^2.2.3",
     "@types/geojson": "^7946.0.7",
     "@types/jest": "^24.0.0",
     "@types/lodash": "^4.14.149",
     "@types/mapbox-gl": "^1.8.0",
     "@types/marked": "^4.0.2",
     "@types/node": "^16.0.0",
     "@types/papaparse": "^5.0.3",
-    "@types/react": "^16.9.0",
+    "@types/react": "^16.13.0",
     "@types/react-datepicker": "^2.11.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-pdf": "^5.7.2",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
+    "@typescript-eslint/eslint-plugin": "^2.23.0",
+    "@typescript-eslint/parser": "^2.25.0",
     "cross-env": "^7.0.2",
-    "eslint-import-resolver-typescript": "^2.0.0"
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-react-app": "^5.2.0",
+    "eslint-import-resolver-typescript": "^2.0.0",
+    "eslint-plugin-flowtype": "^3.0",
+    "eslint-plugin-fp": "^2.3.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^1.7",
+    "typescript": "^3.9.7"
   },
   "engines": {
     "node": "16.x"

frontend/src/components/404Page/__snapshots__/index.test.tsx.snap

@@ -35,13 +35,15 @@ exports[`renders as expected 1`] = `
       <div
         class="MuiGrid-root MuiGrid-item"
       >
-        <mock-button
-          component="[object Object]"
-          to="/"
-          variant="contained"
+        <a
+          href="/"
         >
-          Back To Home
-        </mock-button>
+          <mock-button
+            variant="contained"
+          >
+            Back To Home
+          </mock-button>
+        </a>
       </div>
       <div
         class="MuiGrid-root MuiGrid-item"

frontend/src/components/404Page/index.test.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
 import NotFound from '.';
 
 test('renders as expected', () => {
-  const { container } = render(<NotFound />);
+  const { container } = render(
+    <BrowserRouter>
+      <NotFound />
+    </BrowserRouter>,
+  );
   expect(container).toMatchSnapshot();
 });

frontend/src/components/404Page/index.tsx

@@ -32,9 +32,9 @@ function NotFound({ classes }: NotFoundProps) {
         </Grid>
 
         <Grid item>
-          <Button variant="contained" component={Link} to="/">
-            Back To Home
-          </Button>
+          <Link to="/">
+            <Button variant="contained">Back To Home</Button>
+          </Link>
         </Grid>
 
         <Grid item>

frontend/src/components/MapView/LeftPanel/layersPanel/MenuSwitch/SwitchItem/LayerDownloadOptions.tsx

@@ -38,6 +38,7 @@ function LayerDownloadOptions({
   layer,
   extent,
   selected,
+  size,
 }: LayerDownloadOptionsProps) {
   const { t } = useSafeTranslation();
   const dispatch = useDispatch();
@@ -131,8 +132,9 @@ function LayerDownloadOptions({
           <IconButton
             disabled={!selected || isGeotiffLoading}
             onClick={handleDownloadMenuOpen}
+            size={size || 'medium'}
           >
-            <GetAppIcon />
+            <GetAppIcon fontSize={size || 'medium'} />
           </IconButton>
         </Tooltip>
       )}
@@ -172,6 +174,7 @@ interface LayerDownloadOptionsProps {
   layer: LayerType;
   extent: Extent | undefined;
   selected: boolean;
+  size?: 'small' | undefined;
 }
 
 export default LayerDownloadOptions;

frontend/src/components/MapView/LeftPanel/layersPanel/MenuSwitch/SwitchItem/index.tsx

@@ -22,26 +22,18 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { LayerKey, LayerType } from 'config/types';
-import {
-  getDisplayBoundaryLayers,
-  LayerDefinitions,
-  ReportsDefinitions,
-} from 'config/utils';
+import { LayerDefinitions, ReportsDefinitions } from 'config/utils';
 import { clearDataset } from 'context/datasetStateSlice';
-import { removeLayer } from 'context/mapStateSlice';
 import { layersSelector, mapSelector } from 'context/mapStateSlice/selectors';
 import { useSafeTranslation } from 'i18n';
-import {
-  refreshBoundaries,
-  safeDispatchAddLayer,
-  safeDispatchRemoveLayer,
-} from 'utils/map-utils';
+import { refreshBoundaries } from 'utils/map-utils';
 import { getUrlKey, useUrlHistory } from 'utils/url-utils';
 import { handleChangeOpacity } from 'components/MapView/Legends/handleChangeOpacity';
 import { Extent } from 'components/MapView/Layers/raster-utils';
 import { availableDatesSelector } from 'context/serverStateSlice';
 import { checkLayerAvailableDatesAndContinueOrRemove } from 'components/MapView/utils';
 import { LocalError } from 'utils/error-utils';
+import { toggleRemoveLayer } from './utils';
 import LayerDownloadOptions from './LayerDownloadOptions';
 import ExposureAnalysisOption from './ExposureAnalysisOption';
 
@@ -131,32 +123,13 @@ const SwitchItem = memo(({ classes, layer, extent }: SwitchItemProps) => {
       const urlLayerKey = getUrlKey(selectedLayer);
 
       if (!checked) {
-        removeLayerFromUrl(urlLayerKey, selectedLayer.id);
-        dispatch(removeLayer(selectedLayer));
-
-        // For admin boundary layers with boundary property
-        // we have to de-activate the unique boundary and re-activate
-        // default boundaries
-        if (!('boundary' in selectedLayer)) {
-          return;
-        }
-        const boundaryId = selectedLayer.boundary || '';
-
-        if (!Object.keys(LayerDefinitions).includes(boundaryId)) {
-          return;
-        }
-        const displayBoundaryLayers = getDisplayBoundaryLayers();
-        const uniqueBoundaryLayer = LayerDefinitions[boundaryId as LayerKey];
-
-        if (
-          !displayBoundaryLayers.map(l => l.id).includes(uniqueBoundaryLayer.id)
-        ) {
-          safeDispatchRemoveLayer(map, uniqueBoundaryLayer, dispatch);
-        }
-
-        displayBoundaryLayers.forEach(l => {
-          safeDispatchAddLayer(map, l, dispatch);
-        });
+        toggleRemoveLayer(
+          selectedLayer,
+          map,
+          urlLayerKey,
+          dispatch,
+          removeLayerFromUrl,
+        );
         return;
       }
       try {

frontend/src/components/MapView/LeftPanel/layersPanel/MenuSwitch/SwitchItem/utils.ts

@@ -0,0 +1,44 @@
+import { Map as MapBoxMap } from 'mapbox-gl';
+import { UrlLayerKey } from '../../../../../../utils/url-utils';
+import { LayerKey, LayerType } from '../../../../../../config/types';
+import { removeLayer } from '../../../../../../context/mapStateSlice';
+import {
+  getDisplayBoundaryLayers,
+  LayerDefinitions,
+} from '../../../../../../config/utils';
+import {
+  safeDispatchAddLayer,
+  safeDispatchRemoveLayer,
+} from '../../../../../../utils/map-utils';
+
+export function toggleRemoveLayer(
+  layer: LayerType,
+  _map: MapBoxMap | undefined,
+  urlLayerKey: UrlLayerKey,
+  dispatcher: Function,
+  removeLayerFromUrl: Function,
+) {
+  removeLayerFromUrl(urlLayerKey, layer.id);
+  dispatcher(removeLayer(layer));
+
+  // For admin boundary layers with boundary property
+  // we have to de-activate the unique boundary and re-activate
+  // default boundaries
+  if (!('boundary' in layer)) {
+    return;
+  }
+  const boundaryId = layer.boundary || '';
+  if (!Object.keys(LayerDefinitions).includes(boundaryId)) {
+    return;
+  }
+  const displayBoundaryLayers = getDisplayBoundaryLayers();
+  const uniqueBoundaryLayer = LayerDefinitions[boundaryId as LayerKey];
+
+  if (!displayBoundaryLayers.map(l => l.id).includes(uniqueBoundaryLayer.id)) {
+    safeDispatchRemoveLayer(_map, uniqueBoundaryLayer, dispatcher);
+  }
+
+  displayBoundaryLayers.forEach(l => {
+    safeDispatchAddLayer(_map, l, dispatcher);
+  });
+}

frontend/src/components/MapView/Legends/AnalysisDownloadButton.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
+import { IconButton, Menu, MenuItem, Tooltip } from '@material-ui/core';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
   analysisResultSelector,
@@ -18,7 +19,6 @@ import {
   PolygonAnalysisResult,
   useAnalysisTableColumns,
 } from 'utils/analysis-utils';
-import MultiOptionsButton from 'components/Common/MultiOptionsButton';
 import {
   downloadToFile,
   getExposureAnalysisColumnsToRender,
@@ -27,6 +27,7 @@ import {
 } from 'components/MapView/utils';
 import { snakeCase } from 'lodash';
 import { getExposureAnalysisCsvData } from 'utils/csv-utils';
+import GetAppIcon from '@material-ui/icons/GetApp';
 
 function AnalysisDownloadButton() {
   const analysisResult = useSelector(analysisResultSelector);
@@ -42,6 +43,19 @@ function AnalysisDownloadButton() {
   );
   const analysisDefinition = useSelector(getCurrentDefinition);
 
+  const [
+    downloadMenuAnchorEl,
+    setDownloadMenuAnchorEl,
+  ] = useState<HTMLElement | null>(null);
+
+  const handleDownloadMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setDownloadMenuAnchorEl(event.currentTarget);
+  };
+
+  const handleDownloadMenuClose = () => {
+    setDownloadMenuAnchorEl(null);
+  };
+
   const exposureAnalysisTableData = getExposureAnalysisTableData(
     (analysisResult?.tableData || []) as TableRow[],
     exposureAnalysisResultSortByKey,
@@ -91,9 +105,11 @@ function AnalysisDownloadButton() {
       fileName ?? 'prism_extract',
       'application/json',
     );
+    handleDownloadMenuClose();
   }, [featureCollection, fileName]);
 
   const handleAnalysisDownloadCsv = useCallback((): void => {
+    handleDownloadMenuClose();
     if (!analysisResult) {
       return;
     }
@@ -132,19 +148,30 @@ function AnalysisDownloadButton() {
   ]);
 
   return (
-    <MultiOptionsButton
-      mainLabel={t('Download')}
-      options={[
-        {
-          label: 'GEOJSON',
-          onClick: handleAnalysisDownloadGeoJson,
-        },
-        {
-          label: 'CSV',
-          onClick: handleAnalysisDownloadCsv,
-        },
-      ]}
-    />
+    <>
+      <Tooltip title="Download">
+        <IconButton onClick={handleDownloadMenuOpen} size="small">
+          <GetAppIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        id="download-menu"
+        anchorEl={downloadMenuAnchorEl}
+        keepMounted
+        open={Boolean(downloadMenuAnchorEl)}
+        onClose={handleDownloadMenuClose}
+      >
+        <MenuItem key="download-as-csv" onClick={handleAnalysisDownloadCsv}>
+          {t('Download as CSV')}
+        </MenuItem>
+        <MenuItem
+          key="download-as-geojson"
+          onClick={handleAnalysisDownloadGeoJson}
+        >
+          {t('Download as GeoJSON')}
+        </MenuItem>
+      </Menu>
+    </>
   );
 }