Datacatalog & Lint followup

app/scripts/components/common/browse-controls/index.tsx

@@ -93,7 +93,7 @@ function BrowseControls(props: BrowseControlsProps) {
         key={name}
         prefix={name}
         items={[optionAll].concat(values)}
-        currentId={(taxonomies[name].length ? taxonomies[name][0] as string : 'all')}
+        currentId={(taxonomies[name] as string[] | null)?.length ? taxonomies[name][0] as string : 'all'}
         onChange={(v) => {
           onAction(FilterActions.TAXONOMY, { key: name, value: v });
         }}

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

@@ -11,6 +11,7 @@ import {
   themeVal,
   listReset,
 } from '@devseed-ui/theme-provider';
+import SmartLink from '../smart-link';
 import { CardBody, CardBlank, CardHeader, CardHeadline, CardTitle, CardOverline } from './styles';
 import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card';
 import { variableBaseType, variableGlsp } from '$styles/variable-utils';
@@ -225,11 +226,9 @@ export interface LinkProperties {
   onLinkClick?: MouseEventHandler;
 }
 
-export interface CardComponentProps {
+export interface CardComponentBaseProps {
   title: JSX.Element | string;
-  linkProperties: {
-    linkTo: string,
-  } & LinkProperties;
+
   linkLabel?: string;
   className?: string;
   cardType?: CardType;
@@ -244,7 +243,25 @@ export interface CardComponentProps {
   onCardClickCapture?: MouseEventHandler;
 }
 
-function CardComponent(props: CardComponentProps) {
+// @TODO: Consolidate these props when the instance adapts the new syntax
+export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
+  linkTo: string;
+  onLinkClick?: MouseEventHandler;
+}
+export interface CardComponentProps extends CardComponentBaseProps {
+  linkProperties: {
+    linkTo: string,
+  } & LinkProperties;
+}
+
+type CardComponentPropsType = CardComponentProps | CardComponentPropsDeprecated;
+
+// Type guard to check if props has linkProperties
+function hasLinkProperties(props: CardComponentPropsType): props is CardComponentProps {
+  return !!((props as CardComponentProps).linkProperties);
+}
+
+function CardComponent(props: CardComponentPropsType) {
   const {
     className,
     title,
@@ -258,10 +275,25 @@ function CardComponent(props: CardComponentProps) {
     tagLabels,
     parentTo,
     footerContent,
-    onCardClickCapture,
-    linkProperties
+    onCardClickCapture
   } = props;
 
+  let linkProperties;
+
+  if (hasLinkProperties(props)) {
+    // Handle new props with linkProperties
+    const { linkProperties: linkPropertiesProps } = props;
+    linkProperties = linkPropertiesProps;
+  } else {
+    const { linkTo, onLinkClick,  } = props;
+    linkProperties = {
+      to: linkTo,
+      onLinkClick,
+      pathAttributeKeyName: 'to',
+      linkComponent: SmartLink
+    };
+  }
+
   const isExternalLink = /^https?:\/\//.test(linkProperties.linkTo);
 
   return (

app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts

@@ -33,21 +33,13 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
 }
 
   export function useFiltersWithQS({
-    navigate,
-    push=false
+    navigate
   }: {
-    navigate: any,
-    push?: boolean,
+    navigate: any
   }): UseFiltersWithQueryResult {
 
-    let navCommit = navigate;
-
-    if (push) {
-      navCommit = ({ search }) => navigate.push(`?${search}`);
-    }
-
     const useQsState = useQsStateCreator({
-      commit: navCommit
+      commit: navigate
     });
 
   const [search, setSearch] = useQsState.memo(
@@ -68,9 +60,10 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
     []
   );
 
+
   const onAction = useCallback<FilterAction>(
-    (action, value) =>
-      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies),
+    (action, value) => {
+      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies);},
     [setSearch, setTaxonomies, taxonomies]
   );