feat: use Table in devtron, argo & flux listings

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.22.0-alpha-11",
+    "version": "1.22.0-alpha-12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

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/CICDHistory/ConflictedResourcesTable.tsx

@@ -10,7 +10,6 @@ import './ConflictedResourcesTable.scss'
 const Wrapper = ({ children }: TableViewWrapperProps<unknown, FiltersTypeEnum.STATE>) => (
     <div className="dc__overflow-hidden flexbox-col flex-grow-1">{children}</div>
 )
-const filter = () => true
 
 const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourcesTableProps) => {
     const rows: RowsType<ResourceConflictItemType> = useMemo(
@@ -42,7 +41,7 @@ const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourc
             }}
             filtersVariant={FiltersTypeEnum.STATE}
             ViewWrapper={Wrapper}
-            filter={filter}
+            filter={null}
         />
     )
 }

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,9 @@ const InternalTable = <
     rowActionOnHoverConfig,
     pageSizeOptions,
     clearFilters: userGivenUrlClearFilters,
+    rowStartIconConfig,
+    onRowClick,
+    areFiltersApplied: userProvidedAreFiltersApplied,
 }: InternalTableProps<RowData, FilterVariant, AdditionalProps>) => {
     const {
         sortBy,
@@ -124,6 +127,7 @@ const InternalTable = <
                     rows,
                     filter,
                     filterData,
+                    additionalProps,
                     visibleColumns.find(({ field }) => field === sortBy)?.comparator,
                 )
 
@@ -138,10 +142,14 @@ const InternalTable = <
     // useAsync hook for 'rows' scenario
     const [_areRowsLoading, rowsResult, rowsError, reloadRows] = useAsync(
         handleFiltering,
-        [searchKey, sortBy, sortOrder, rows, JSON.stringify(otherFilters), visibleColumns],
+        [searchKey, filter, sortBy, sortOrder, rows, JSON.stringify(otherFilters), visibleColumns],
         !!rows,
     )
 
+    // NOTE: passing getRows to queryKey won't trigger a refetch
+    // since it is a function
+    const lastUpdatedGetRowsInstance = useMemo(() => new Date().toISOString(), [getRows])
+
     // useAsync hook for 'getRows' scenario
     const {
         isFetching: _areGetRowsLoading,
@@ -158,7 +166,7 @@ const InternalTable = <
             searchKey,
             sortBy,
             sortOrder,
-            getRows,
+            lastUpdatedGetRowsInstance,
             offset,
             pageSize,
             JSON.stringify(otherFilters),
@@ -188,7 +196,8 @@ const InternalTable = <
         }
 
         if (!areFilteredRowsLoading && !filteredRows?.length && !loading) {
-            return filtersVariant !== FiltersTypeEnum.NONE && areFiltersApplied ? (
+            return filtersVariant !== FiltersTypeEnum.NONE &&
+                (userProvidedAreFiltersApplied !== undefined ? userProvidedAreFiltersApplied : areFiltersApplied) ? (
                 <GenericFilterEmptyState
                     {...emptyStateConfig.noRowsForFilterConfig}
                     handleClearFilters={userGivenUrlClearFilters ?? clearFilters}
@@ -219,6 +228,8 @@ const InternalTable = <
                     stylesConfig={stylesConfig}
                     getRows={getRows}
                     totalRows={totalRows}
+                    rowStartIconConfig={rowStartIconConfig}
+                    onRowClick={onRowClick}
                 />
             </UseRegisterShortcutProvider>
         )