Add RoutesConfig interface to VedaUI provider and hook up layer info …

…modal to use context for route

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 {
@@ -94,19 +94,15 @@ const LayerInfoLinerModal = styled.div`
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
   const { revealed, close, layerData, onNavigation } = 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 +130,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/context/veda-ui-provider.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, ReactNode, useContext } from 'react';
+import { DATASETS_PATH, STORIES_PATH } from '$utils/routes';
 
 interface EnvironmentConfig {
   envMapboxToken: string;
@@ -17,23 +18,35 @@ interface NavigationConfig {
   linkPropName: string;
 }
 
-const defaultNavigation: NavigationConfig = {
-  LinkComponent: 'a',
-  linkPropName: 'href'
-};
+interface RoutesConfig {
+  dataCatalogPath?: string;
+  storiesCatalogPath?: string;
+}
 
 interface VedaUIConfig extends EnvironmentConfig {
   navigation: NavigationConfig;
+  routes: RoutesConfig;
   Link: React.FC<LinkProps>;
 }
 
 interface VedaUIProviderProps {
   config: EnvironmentConfig & {
     navigation?: Partial<NavigationConfig>;
+    routes?: RoutesConfig;
   };
   children: ReactNode;
 }
 
+const defaultNavigation: NavigationConfig = {
+  LinkComponent: 'a',
+  linkPropName: 'href'
+};
+
+const defaultRoutes: RoutesConfig = {
+  dataCatalogPath: DATASETS_PATH,
+  storiesCatalogPath: STORIES_PATH
+};
+
 const VedaUIContext = createContext<VedaUIConfig | null>(null);
 VedaUIContext.displayName = 'VedaUIContext';
 
@@ -67,6 +80,11 @@ export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
     ...config.navigation
   };
 
+  const routes = {
+    ...defaultRoutes,
+    ...config.routes
+  }
+
   const Link: React.FC<LinkProps> = ({ to, children, ...props }) => {
     const { LinkComponent, linkPropName } = navigation;
     return (
@@ -79,6 +97,7 @@ export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
   const fullConfig: VedaUIConfig = {
     ...config,
     navigation,
+    routes,
     Link
   };