refactor: enable routing config via provider, remove linkProps from DatasetSelectorModal

app/scripts/components/common/blocks/block-map.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useContext } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { MapboxOptions } from 'mapbox-gl';
 import * as dateFns from 'date-fns';
@@ -37,7 +37,7 @@
 } from '$components/exploration/data-utils-no-faux-module';
 import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
 import { ProjectionOptions, VedaDatum, DatasetData } from '$types/veda';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 export const mapHeight = '32rem';
 const Carto = styled.div`
@@ -87,7 +87,7 @@
 
   // zoom is not required, but if provided must be in the correct range.
   const zoomError = zoom && (isNaN(zoom) || zoom < 0);
   ('- Invalid zoom. Use number greater than 0');
 
   const compareDateError =
     compareDateTime &&
@@ -181,11 +181,11 @@
       totalLayers = [...totalLayers, compareMapStaticData];
     }
     return totalLayers;
   }, [layerId]);
 
   const [layers, setLayers] = useState<VizDataset[]>(layersToFetch);
 
-  const { envApiStacEndpoint } = useContext(EnvConfigContext);
+  const { envApiStacEndpoint } = useVedaUI();
 
   useReconcileWithStacMetadata(layers, setLayers, envApiStacEndpoint);
 

app/scripts/components/common/blocks/scrollytelling/index.tsx

@@ -2,7 +2,6 @@ import React, {
   Children,
   ReactElement,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -52,7 +51,7 @@ import {
   formatSingleDate,
   reconcileVizDataset
 } from '$components/common/map/utils';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 type ResolvedScrollyMapLayer = {
   vizDataset: VizDatasetSuccess;
@@ -260,7 +259,7 @@ const MAP_OPTIONS = {
 function Scrollytelling(props) {
   const { children } = props;
 
-  const { envApiStacEndpoint } = useContext(EnvConfigContext);
+  const { envApiStacEndpoint } = useVedaUI();
 
   const { isHeaderHidden, headerHeight, wrapperHeight } =
     useSlidingStickyHeaderProps();

app/scripts/components/common/map/map-component.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  ReactElement,
-  useMemo,
-  Ref,
-  useContext
-} from 'react';
+import React, { useCallback, ReactElement, useMemo, Ref } from 'react';
 import ReactMapGlMap, { LngLatBoundsLike, MapRef } from 'react-map-gl';
 import { debounce } from 'lodash';
 import useMapStyle from './hooks/use-map-style';
@@ -13,7 +7,7 @@ import { convertProjectionToMapbox } from './controls/map-options/projections';
 import { ProjectionOptions } from '$types/veda';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 const maxMapBounds: LngLatBoundsLike = [
   [-540, -90], // SW
@@ -35,7 +29,7 @@ export default function MapComponent({
   onMapLoad?: () => void;
   interactive?: boolean;
 }) {
-  const { envMapboxToken } = useContext(EnvConfigContext);
+  const { envMapboxToken } = useVedaUI();
 
   const { initialViewState, setInitialViewState, mainId, comparedId } =
     useMapsContext();

app/scripts/components/common/map/style-generators/basemap.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { AnySourceImpl, Layer, Style } from 'mapbox-gl';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   BasemapId,
   getStyleUrl,
@@ -9,7 +9,7 @@ import {
 } from '../controls/map-options/basemap';
 import { ExtendedLayer } from '../types';
 import useMapStyle from '../hooks/use-map-style';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface BasemapProps {
   basemapStyleId?: BasemapId;
@@ -33,7 +33,7 @@ export function Basemap({
   labelsOption = true,
   boundariesOption = true
 }: BasemapProps) {
-  const { envMapboxToken } = useContext(EnvConfigContext);
+  const { envMapboxToken } = useVedaUI();
   const { updateStyle } = useMapStyle();
   const [baseStyle, setBaseStyle] = useState<Style | undefined>(undefined);
 

app/scripts/components/exploration/components/dataset-selector-modal/index.tsx

@@ -1,12 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import {
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader
-} from '@devseed-ui/modal';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
+
 import {
   reconcileDatasets,
   getLayersFromDataset
@@ -19,7 +15,7 @@ import CatalogContent from '$components/common/catalog/catalog-content';
 import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 import { FilterActions } from '$components/common/catalog/utils';
 
-import { DatasetData, LinkProperties, DatasetLayer } from '$types/veda';
+import { DatasetData, DatasetLayer } from '$types/veda';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -66,33 +62,32 @@ const DatasetModal = styled(Modal)`
 interface DatasetSelectorModalProps {
   revealed: boolean;
   close: () => void;
-  linkProperties?: LinkProperties;
   datasets: DatasetData[];
-  datasetPathName: string;
   timelineDatasets: TimelineDataset[];
   setTimelineDatasets: (datasets: TimelineDataset[]) => void;
+  emptyStateContent?: React.ReactNode;
 }
 
 export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
-  const { revealed, linkProperties, datasets, datasetPathName, timelineDatasets, setTimelineDatasets, close } = props;
-  const { LinkElement , pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
+  const { revealed, datasets, timelineDatasets, setTimelineDatasets, close, emptyStateContent } =
+    props;
 
   const datasetLayers = getLayersFromDataset(datasets);
 
   const [selectedIds, setSelectedIds] = useState<string[]>(
     timelineDatasets.map((dataset) => dataset.data.id)
   );
-  const enhancedDatasetLayers = datasetLayers.flatMap(e => e);
+  const enhancedDatasetLayers = datasetLayers.flatMap((e) => e);
 
   // Use Jotai controlled atoms for query parameter manipulation on new E&A page
-  const {search: searchTerm, taxonomies, onAction } = useFiltersWithURLAtom();
+  const { search: searchTerm, taxonomies, onAction } = useFiltersWithURLAtom();
 
   useEffect(() => {
     // Reset filter when modal is hidden
-    if(!revealed) {
+    if (!revealed) {
       onAction(FilterActions.CLEAR);
     }
-  },[revealed, onAction]);
+  }, [revealed, onAction]);
 
   useEffect(() => {
     setSelectedIds(timelineDatasets.map((dataset) => dataset.data.id));
@@ -104,19 +99,23 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
     );
     onAction(FilterActions.CLEAR);
     close();
-  }, [close, selectedIds, timelineDatasets, enhancedDatasetLayers, setTimelineDatasets, onAction]);
+  }, [
+    close,
+    selectedIds,
+    timelineDatasets,
+    enhancedDatasetLayers,
+    setTimelineDatasets,
+    onAction
+  ]);
 
-  const linkElementProps = {[pathAttributeKeyName]: datasetPathName};
   return (
     <DatasetModal
       id='modal'
       size='xlarge'
       title='Select data layers'
       revealed={revealed}
       onCloseClick={close}
-      renderHeadline={() => (
-        <RenderModalHeader />
-      )}
+      renderHeadline={() => <RenderModalHeader />}
       content={
         <CatalogContent
           datasets={datasets}
@@ -126,12 +125,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
           setSelectedIds={setSelectedIds}
           onAction={onAction}
           filterLayers={true}
-          emptyStateContent={
-            <>
-              <p>There are no datasets to show with the selected filters.</p>
-              <p>This tool allows the exploration and analysis of time-series datasets in raster format. For a comprehensive list of available datasets, please visit the <LinkElement {...linkElementProps} target='_blank'>Data Catalog</LinkElement>.</p>
-            </>
-          }
+          {...(emptyStateContent ? {emptyStateContent} : {})}
         />
       }
       footerContent={
@@ -150,4 +144,4 @@ export interface DatasetLayerCardProps {
   searchTerm: string;
   selected: boolean;
   onDatasetClick: () => void;
-}
+}

app/scripts/components/exploration/components/datasets/dataset-list-item.tsx

@@ -94,11 +94,10 @@ interface DatasetListItemProps {
   xScaled?: ScaleTime<number, number>;
   onDragStart?: () => void;
   onDragEnd?: () => void;
-  onNavigation?: (path: string) => void;
 }
 
 export function DatasetListItem(props: DatasetListItemProps) {
-  const { datasetId, width, xScaled, onDragStart, onDragEnd, onNavigation } = props;
+  const { datasetId, width, xScaled, onDragStart, onDragEnd } = props;
 
   const datasetAtom = useTimelineDatasetAtom(datasetId);
   const dataset = useAtomValue(datasetAtom);
@@ -236,7 +235,6 @@ export function DatasetListItem(props: DatasetListItemProps) {
                 revealed={!!modalLayerInfo}
                 close={() => setModalLayerInfo(undefined)}
                 layerData={modalLayerInfo}
-                onNavigation={onNavigation}
               />
             )}
           </DatasetHeaderInner>

app/scripts/components/exploration/components/datasets/dataset-list.tsx

@@ -16,11 +16,10 @@ const DatasetListSelf = styled.ul`
 interface DatasetListProps {
   width: number;
   xScaled?: ScaleTime<number, number>;
-  onNavigation?: (path: string) => void;
 }
 
 export function DatasetList(props: DatasetListProps) {
-  const { width, xScaled, onNavigation } = props;
+  const { width, xScaled } = props;
   const [isDragging, setIsDragging] = useState(false);
 
   const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
@@ -41,7 +40,6 @@ export function DatasetList(props: DatasetListProps) {
           xScaled={xScaled}
           onDragStart={() => setIsDragging(true)}
           onDragEnd={() => setIsDragging(false)}
-          onNavigation={onNavigation}
         />
       ))}
     </Reorder.Group>

app/scripts/components/exploration/components/layer-info-modal.tsx

@@ -9,13 +9,13 @@ import {
   ModalHeadline
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { Button } from '@devseed-ui/button';
 import { LayerInfo } from 'veda';
-import { getDatasetPath } from '$utils/routes';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
+import { useVedaUI } from '$context/veda-ui-provider';
+import { USWDSButton } from '$components/common/uswds/button';
 
-const DatasetModal = styled(Modal)`
+const StyledModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
   /* Override ModalContents */
   > div {
@@ -66,8 +66,7 @@ export interface LayerInfoModalData {
 interface LayerInfoModalProps {
   revealed: boolean;
   close: () => void;
-  layerData: LayerInfoModalData
-  onNavigation?: (path: string) => void;
+  layerData: LayerInfoModalData;
 }
 
 export function LayerInfoLiner(props: { info: LayerInfo }) {
@@ -93,20 +92,16 @@ const LayerInfoLinerModal = styled.div`
 `;
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
-  const { revealed, close, layerData, onNavigation } = props;
+  const { revealed, close, layerData } = props;
+  const {
+    navigation: { LinkComponent },
+    routes: { dataCatalogPath }
+  } = useVedaUI();
 
   const { parentData } = layerData;
-  const dataCatalogPage = getDatasetPath(parentData.id);
-
-  const handleButtonClick = () => {
-    close();
-    if (onNavigation) {
-      onNavigation(dataCatalogPage);
-    }
-  };
 
   return (
-    <DatasetModal
+    <StyledModal
       id='modal'
       size='xlarge'
       revealed={revealed}
@@ -134,9 +129,18 @@ export default function LayerInfoModal(props: LayerInfoModalProps) {
         <div dangerouslySetInnerHTML={{__html: parentData.infoDescription?? 'Currently, we are unable to display the layer information, but you can find it in the data catalog.' }} />
       }
       footerContent={
-        <Button onClick={handleButtonClick} variation='primary-fill' size='medium'>
-          Open in Data Catalog
-        </Button>
+        <LinkComponent to={dataCatalogPath}>
+          <USWDSButton
+            onClick={close}
+            type='button'
+            size='small'
+            inverse={true}
+            outline={false}
+            tabindex='-1'
+          >
+            Open in Data Catalog
+          </USWDSButton>
+        </LinkComponent>
       }
     />
   );

app/scripts/components/exploration/components/map/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { ProjectionOptions } from 'veda';
 import { useReconcileWithStacMetadata } from '../../hooks/use-stac-metadata-datasets';
@@ -26,7 +26,7 @@ import { usePreviousValue } from '$utils/use-effect-previous';
 import { ExtendedStyle } from '$components/common/map/styles';
 import DrawControl from '$components/common/map/controls/aoi';
 import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface ExplorationMapProps {
   datasets: TimelineDataset[];
@@ -36,8 +36,7 @@ interface ExplorationMapProps {
 }
 
 export function ExplorationMap(props: ExplorationMapProps) {
-  const { envApiStacEndpoint, envMapboxToken } =
-    useContext(EnvConfigContext);
+  const { envApiStacEndpoint, envMapboxToken } = useVedaUI();
 
   const { datasets, setDatasets, selectedDay, selectedCompareDay } = props;
 

app/scripts/components/exploration/components/map/layer.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 // Avoid error: node_modules/date-fns/esm/index.js does not export 'default'
 import * as dateFns from 'date-fns';
 
@@ -11,7 +11,7 @@ import { VectorTimeseries } from '$components/common/map/style-generators/vector
 import { ZarrTimeseries } from '$components/common/map/style-generators/zarr-timeseries';
 import { CMRTimeseries } from '$components/common/map/style-generators/cmr-timeseries';
 import { ActionStatus } from '$utils/status';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface LayerProps {
   id: string;
@@ -22,8 +22,7 @@ interface LayerProps {
 }
 
 export function Layer(props: LayerProps) {
-  const { envApiStacEndpoint, envApiRasterEndpoint } =
-    useContext(EnvConfigContext);
+  const { envApiStacEndpoint, envApiRasterEndpoint } = useVedaUI();
 
   const { id: layerId, dataset, order, selectedDay, onStatusChange } = props;
   const { isVisible, opacity, colorMap, scale } = dataset.settings;