feat: add expandable rows support in table

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -19,6 +19,7 @@ import Draggable, { DraggableProps } from 'react-draggable'
 import { ReactComponent as SortIcon } from '@Icons/ic-arrow-up-down.svg'
 import { ReactComponent as SortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
 import { Tooltip } from '@Common/Tooltip'
+import { Icon } from '@Shared/Components/Icon'
 
 import { SortingOrder } from '../Constants'
 import { noop } from '../Helper'
@@ -68,6 +69,7 @@ const SortableTableHeaderCell = ({
     id,
     handleResize,
     isResizable,
+    infoTooltipText,
 }: SortableTableHeaderCellProps) => {
     const isCellResizable = !!(isResizable && id && handleResize)
 
@@ -107,7 +109,18 @@ const SortableTableHeaderCell = ({
                 data-testid={title}
             >
                 <Tooltip showOnTruncate={showTippyOnTruncate} content={title}>
-                    <span className="dc__uppercase dc__truncate">{title}</span>
+                    <div className="dc__gap-4 flex left">
+                        <span className="dc__uppercase dc__truncate">{title}</span>
+
+                        {infoTooltipText && (
+                            <Icon
+                                name="ic-help-outline"
+                                color="N600"
+                                size={12}
+                                tooltipProps={{ content: infoTooltipText, alwaysShowTippyOnHover: true }}
+                            />
+                        )}
+                    </div>
                 </Tooltip>
                 {renderSortIcon()}
             </button>

src/Common/SortableTableHeaderCell/types.ts

@@ -26,6 +26,10 @@ export type SortableTableHeaderCellProps = {
      * @default false
      */
     showTippyOnTruncate?: boolean
+    /**
+     * If provided, shown in a tooltip on info-icon-outline beside the label
+     */
+    infoTooltipText?: string
 } & (
     | {
           /**

src/Shared/Components/Icon/Icon.tsx

@@ -252,9 +252,12 @@ import { ReactComponent as ICSecurityPolicy } from '@IconsV2/ic-security-policy.
 import { ReactComponent as ICSecurityScan } from '@IconsV2/ic-security-scan.svg'
 import { ReactComponent as ICSecurityVulnerability } from '@IconsV2/ic-security-vulnerability.svg'
 import { ReactComponent as ICSelected } from '@IconsV2/ic-selected.svg'
+import { ReactComponent as ICSes } from '@IconsV2/ic-ses.svg'
 import { ReactComponent as ICShapes } from '@IconsV2/ic-shapes.svg'
 import { ReactComponent as ICShieldCheck } from '@IconsV2/ic-shield-check.svg'
+import { ReactComponent as ICSlack } from '@IconsV2/ic-slack.svg'
 import { ReactComponent as ICSlidersVertical } from '@IconsV2/ic-sliders-vertical.svg'
+import { ReactComponent as ICSmtp } from '@IconsV2/ic-smtp.svg'
 import { ReactComponent as ICSoftwareReleaseManagement } from '@IconsV2/ic-software-release-management.svg'
 import { ReactComponent as ICSortAscending } from '@IconsV2/ic-sort-ascending.svg'
 import { ReactComponent as ICSortDescending } from '@IconsV2/ic-sort-descending.svg'
@@ -308,6 +311,7 @@ import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg'
 import { ReactComponent as ICWarningFill } from '@IconsV2/ic-warning-fill.svg'
 import { ReactComponent as ICWarningStroke } from '@IconsV2/ic-warning-stroke.svg'
 import { ReactComponent as ICWebhook } from '@IconsV2/ic-webhook.svg'
+import { ReactComponent as ICWebhookConfig } from '@IconsV2/ic-webhook-config.svg'
 import { ReactComponent as ICWifiSlash } from '@IconsV2/ic-wifi-slash.svg'
 import { ReactComponent as ICWorldGlobe } from '@IconsV2/ic-world-globe.svg'
 
@@ -568,9 +572,12 @@ export const iconMap = {
     'ic-security-scan': ICSecurityScan,
     'ic-security-vulnerability': ICSecurityVulnerability,
     'ic-selected': ICSelected,
+    'ic-ses': ICSes,
     'ic-shapes': ICShapes,
     'ic-shield-check': ICShieldCheck,
+    'ic-slack': ICSlack,
     'ic-sliders-vertical': ICSlidersVertical,
+    'ic-smtp': ICSmtp,
     'ic-software-release-management': ICSoftwareReleaseManagement,
     'ic-sort-ascending': ICSortAscending,
     'ic-sort-descending': ICSortDescending,
@@ -623,6 +630,7 @@ export const iconMap = {
     'ic-warning-fill': ICWarningFill,
     'ic-warning-stroke': ICWarningStroke,
     'ic-warning': ICWarning,
+    'ic-webhook-config': ICWebhookConfig,
     'ic-webhook': ICWebhook,
     'ic-wifi-slash': ICWifiSlash,
     'ic-world-globe': ICWorldGlobe,

src/Shared/Components/Table/InternalTable.tsx

@@ -56,6 +56,8 @@ const InternalTable = <
     rowActionOnHoverConfig,
     pageSizeOptions,
     clearFilters: userGivenUrlClearFilters,
+    rowStartIconConfig,
+    onRowClick,
 }: InternalTableProps<RowData, FilterVariant, AdditionalProps>) => {
     const {
         sortBy,
@@ -158,7 +160,8 @@ const InternalTable = <
             searchKey,
             sortBy,
             sortOrder,
-            getRows,
+            // !TODO: functions in queryKey cannot trigger refetch
+            // getRows,
             offset,
             pageSize,
             JSON.stringify(otherFilters),
@@ -219,6 +222,8 @@ const InternalTable = <
                     stylesConfig={stylesConfig}
                     getRows={getRows}
                     totalRows={totalRows}
+                    rowStartIconConfig={rowStartIconConfig}
+                    onRowClick={onRowClick}
                 />
             </UseRegisterShortcutProvider>
         )