PORTALS-3385: [CCKP Homepage_V1] Add icons to CCKP cards for data types

packages/synapse-react-client/src/components/IconList.tsx

@@ -1,6 +1,8 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import IconSvg, { IconSvgProps } from './IconSvg/IconSvg'
 import { merge } from 'lodash-es'
+import { useQueryContext } from './QueryContext'
+import { UniqueFacetIdentifier } from '../utils'
 
 type IconConfigs = {
   [index: string]: IconSvgProps // if the icon option has the "label" set, it will show tooltip in IconSvg
@@ -29,6 +31,18 @@ function IconList(props: IconListProps) {
   let noMatch: boolean = false
   const css = useTheme ? 'icon-list themed' : 'icon-list'
   const componentCss = useBackground ? `${css} bg-circle` : css
+  const queryContext = useQueryContext()
+  const { addValueToSelectedFacet } = queryContext
+
+  const handleIconClick = useCallback(
+    (dataType: 'string') => {
+      const facet: UniqueFacetIdentifier = {
+        columnName: 'dataType',
+      }
+      addValueToSelectedFacet(facet, dataType)
+    },
+    [addValueToSelectedFacet],
+  )
 
   const mergedIconConfigs: IconConfigs = useMemo(() => {
     const mergedIconConfigs: IconConfigs = {}
@@ -47,7 +61,13 @@ function IconList(props: IconListProps) {
         noMatch = true
         return
       } else {
-        return <IconSvg key={el} {...iconConfig} />
+        return (
+          <IconSvg
+            key={el}
+            {...iconConfig}
+            onClick={() => handleIconClick(el)}
+          />
+        )
       }
     })
   }

packages/synapse-react-client/src/components/IconSvg/IconSvg.tsx

@@ -260,6 +260,7 @@ export type IconName = (typeof IconStrings)[number]
 export type IconSvgProps = {
   icon: IconName
   // If provided, will be shown in tooltip
+  onClick?: () => void
   label?: string
   wrap?: boolean
 } & SvgIconProps
@@ -539,7 +540,7 @@ function IconMapping(props: { icon: string } & SvgIconProps) {
 }
 
 function IconSvg(props: IconSvgProps) {
-  const { icon, label = '', wrap = true, ...svgIconProps } = props
+  const { icon, label = '', onClick, wrap = true, ...svgIconProps } = props
 
   const Wrapper = wrap ? 'span' : Fragment
   const wrapperProps = wrap
@@ -548,6 +549,8 @@ function IconSvg(props: IconSvgProps) {
         className: 'styled-svg-wrapper',
         id: `icon-${icon}`,
         role: 'img',
+        onClick,
+        style: onClick ? { cursor: 'pointer' } : {},
       }
     : {}