chore: Remove linkProperties from DataCatalog Component (#1310)

**Related Ticket:** #1108
**Related PR:** developmentseed/next-veda-ui#25

 **v5.11.3-alpha.0** published from this branch

### Description of Changes
As part of the greater holistic approach - I think its best to move away
from having our library components tightly integrated w/ routing. This
is the first iteration to remove **linkProperties**. This PR only
worries about removing **linkProps** the **DataCatalog Component**.
DataCatalog view no longer has to pass in linkProperties or have to
directly worry about routing, we can just pass in a callback now that
decides what to do during some action.

This is an iterative approach, i've created tickets to remove routing
from the other core components. But we can't remove routing directly
from the Card component itself easily as GHG uses the card component
directly
[here](https://github.com/US-GHG-Center/veda-config-ghg/blob/dfe611f27f910bc6428a2b13fe50678710511e68/custom-pages/news-and-events/component.tsx#L5).
So that should be its own separate ticket BUT... we are to be redoing
the card component for the new instances - where its probably best to
rewrite it. As currently its not in an ideal place to scale... so i'll
create a placeholder ticket for card component for now but we can
probably tackle removing routing when rewriting the card component.

cc @vgeorge @hanbyul-here @dzole0311 

Follow-up tickets created: 
* #1325
* #1326
* #1327

### Notes & Questions About Changes
_{Add additonal notes and outstanding questions here related to changes
in this pull request}_

### Validation / Testing
- [ ] Validate DataCatalog cards are linking correctly
- [ ] Validate selecting cards in DatasetSelectorModal is working as it
should

app/scripts/components/common/card/index.tsx

@@ -301,6 +301,7 @@ function CardComponent(props: CardComponentPropsType) {
     const { linkProperties: linkPropertiesProps } = props;
     linkProperties = linkPropertiesProps;
   } else {
+    // @NOTE: This currently just exists for GHG which uses the Card component
     const { linkTo } = props;
     linkProperties = linkTo
       ? {

app/scripts/components/common/catalog/catalog-card.tsx

@@ -3,17 +3,12 @@ import styled, { css } from "styled-components";
 import { CollecticonPlus, CollecticonTickSmall, iconDataURI } from "@devseed-ui/collecticons";
 import { glsp, themeVal } from "@devseed-ui/theme-provider";
 import { Card } from "../card";
-import { CardMeta, CardTopicsList } from "../card/styles";
-import { DatasetClassification } from "../dataset-classification";
-import { CardSourcesList } from "../card-sources";
+import { CardTopicsList } from "../card/styles";
 import TextHighlight from "../text-highlight";
 import { getDatasetDescription, getMediaProperty } from './utils';
-import { LinkProperties } from '$types/veda';
 import { DatasetData, DatasetLayer } from "$types/veda";
-import { getDatasetPath } from "$utils/routes";
-import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies";
+import { TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies";
 import { Pill } from "$styles/pill";
-import { usePathname } from "$utils/use-pathname";
 
 interface CatalogCardProps {
   dataset: DatasetData;
@@ -22,7 +17,6 @@ interface CatalogCardProps {
   selectable?: boolean;
   selected?: boolean;
   onDatasetClick?: () => void;
-  linkProperties?: LinkProperties;
 }
 
 const CardSelectable = styled(Card)<{
@@ -101,14 +95,10 @@ export const CatalogCard = (props: CatalogCardProps) => {
     searchTerm,
     selectable,
     selected,
-    onDatasetClick,
-    linkProperties
+    onDatasetClick
   } = props;
 
-  const pathname = usePathname();
-
   const topics = getTaxonomy(dataset, TAXONOMY_TOPICS)?.values;
-  const sources = getTaxonomy(dataset, TAXONOMY_SOURCE)?.values;
   const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name);
 
   const title = layer ? layer.name : dataset.name;
@@ -123,20 +113,12 @@ export const CatalogCard = (props: CatalogCardProps) => {
     }
   };
 
-  const linkTo = getDatasetPath(dataset, pathname);
-
   return (
     <CardSelectable
       cardType='horizontal-info'
       checked={selectable ? selected : undefined}
       selectable={selectable}
       tagLabels={allTaxonomyValues}
-      overline={
-        <CardMeta>
-          <DatasetClassification dataset={dataset} />
-          <CardSourcesList sources={sources} linkProperties={linkProperties} />
-        </CardMeta>
-      }
       linkLabel='View dataset'
       onClick={handleClick}
       title={
@@ -172,7 +154,6 @@ export const CatalogCard = (props: CatalogCardProps) => {
           ) : null}
         </>
       }
-      {...(linkProperties ? {linkProperties: {...linkProperties, linkTo: linkTo}} : {})}
     />
   );
 };

app/scripts/components/common/catalog/catalog-content.tsx

@@ -9,7 +9,6 @@ import { CatalogCard } from './catalog-card';
 import CatalogTagsContainer from './catalog-tags';
 
 import { FilterActions } from './utils';
-import { LinkProperties } from '$types/veda';
 import { DatasetData, DatasetDataWithEnhancedLayers } from '$types/veda';
 import { CardList } from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';
@@ -22,6 +21,8 @@ import {
 import { OptionItem } from '$components/common/form/checkable-filter';
 import { Pill } from '$styles/pill';
 import { usePreviousValue } from '$utils/use-effect-previous';
+import { getDatasetPath } from '$utils/routes';
+import { usePathname } from "$utils/use-pathname";
 
 const EXCLUSIVE_SOURCE_WARNING = "Can only be analyzed with layers from the same source";
 
@@ -34,7 +35,7 @@ export interface CatalogContentProps {
   search: string;
   taxonomies: Record<string, string[]>;
   onAction: (action: FilterActions, value?: any) => void;
-  linkProperties: LinkProperties;
+  onCardNavigate?: (path: string) => void;
 }
 
 const DEFAULT_SORT_OPTION = 'asc';
@@ -71,7 +72,7 @@ function CatalogContent({
   search,
   taxonomies,
   onAction,
-  linkProperties
+  onCardNavigate
 }: CatalogContentProps) {
   const [exclusiveSourceSelected, setExclusiveSourceSelected] = useState<string | null>(null);
   const isSelectable = selectedIds !== undefined;
@@ -95,6 +96,8 @@ function CatalogContent({
 
   const prevSelectedFilters = usePreviousValue(selectedFilters) ?? [];
 
+  const pathname = usePathname();
+
   // Handlers
   const updateSelectedFilters = useCallback((item: OptionItem, action: 'add' | 'remove') => {
     if (action == 'add') {
@@ -275,7 +278,7 @@ function CatalogContent({
                   <CatalogCard
                     dataset={d}
                     searchTerm={search}
-                    linkProperties={linkProperties}
+                    {...(onCardNavigate && {onDatasetClick: () => onCardNavigate(getDatasetPath(d, pathname))})}
                   />
                 </li>
               ))}

app/scripts/components/common/catalog/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
 import CatalogContent from './catalog-content';
-import { DatasetData, LinkProperties } from '$types/veda';
+import { DatasetData } from '$types/veda';
 import {
   useSlidingStickyHeaderProps
 } from '$components/common/layout-root/useSlidingStickyHeaderProps';
@@ -41,13 +41,13 @@ export interface CatalogViewProps {
     taxonomies: Record<string, string[]> | Record<string, never>,
     onAction: () => void,
   } | any;
-  linkProperties: LinkProperties;
+  onCardNavigate?: (path: string) => void;
 }
 
 function CatalogView({
   datasets,
   onFilterChanges,
-  linkProperties,
+  onCardNavigate
 }: CatalogViewProps) {
 
   const { headerHeight } = useSlidingStickyHeaderProps();
@@ -70,7 +70,7 @@ function CatalogView({
         search={search}
         taxonomies={taxonomies}
         onAction={onAction}
-        linkProperties={linkProperties}
+        onCardNavigate={onCardNavigate}
       />
     </CatalogWrapper>
   );

app/scripts/components/data-catalog/container.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from "react-router-dom";
 import { getString } from 'veda';
 import { getAllDatasetsProps } from '$utils/veda-data';
 import CatalogView from '$components/common/catalog';
@@ -8,7 +9,6 @@ import PageHero from '$components/common/page-hero';
 import { FeaturedDatasets } from '$components/common/featured-slider-section';
 import { veda_faux_module_datasets } from '$data-layer/datasets';
 import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-filters-with-query';
-import SmartLink from '$components/common/smart-link';
 
 /**
  * @VEDA2-REFACTOR-WORK
@@ -20,6 +20,11 @@ import SmartLink from '$components/common/smart-link';
 export default function DataCatalogContainer() {
   const allDatasets = getAllDatasetsProps(veda_faux_module_datasets);
   const controlVars = useFiltersWithQS();
+  const navigate = useNavigate();
+
+  const handleCardNavigation = (path: string) => {
+    navigate(path);
+  };
 
   return (
     <PageMainContent>
@@ -35,10 +40,7 @@ export default function DataCatalogContainer() {
       <CatalogView
         datasets={allDatasets}
         onFilterChanges={() => controlVars}
-        linkProperties={{
-          LinkElement: SmartLink,
-          pathAttributeKeyName: 'to'
-        }}
+        onCardNavigate={handleCardNavigation}
       />
     </PageMainContent>
   );

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

@@ -66,7 +66,7 @@ const DatasetModal = styled(Modal)`
 interface DatasetSelectorModalProps {
   revealed: boolean;
   close: () => void;
-  linkProperties: LinkProperties;
+  linkProperties?: LinkProperties;
   datasets: DatasetData[];
   datasetPathName: string;
   timelineDatasets: TimelineDataset[];
@@ -126,7 +126,6 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
           setSelectedIds={setSelectedIds}
           onAction={onAction}
           filterLayers={true}
-          linkProperties={linkProperties}
           emptyStateContent={
             <>
               <p>There are no datasets to show with the selected filters.</p>