fix: better table states

Author: Amrit Borah

src/Shared/Components/Table/InternalTable.tsx

@@ -58,6 +58,7 @@ const InternalTable = <
     clearFilters: userGivenUrlClearFilters,
     rowStartIconConfig,
     onRowClick,
+    areFiltersApplied: userProvidedAreFiltersApplied,
 }: InternalTableProps<RowData, FilterVariant, AdditionalProps>) => {
     const {
         sortBy,
@@ -126,6 +127,7 @@ const InternalTable = <
                     rows,
                     filter,
                     filterData,
+                    additionalProps,
                     visibleColumns.find(({ field }) => field === sortBy)?.comparator,
                 )
 
@@ -140,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,
@@ -160,8 +166,7 @@ const InternalTable = <
             searchKey,
             sortBy,
             sortOrder,
-            // !TODO: functions in queryKey cannot trigger refetch
-            // getRows,
+            lastUpdatedGetRowsInstance,
             offset,
             pageSize,
             JSON.stringify(otherFilters),
@@ -191,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}

src/Shared/Components/Table/TableContent.tsx

@@ -152,9 +152,10 @@ const TableContent = <
         ? `${initialGridTemplateColumns} ${typeof rowOnHoverComponentWidth === 'number' ? `minmax(${rowOnHoverComponentWidth}px, 1fr)` : rowOnHoverComponentWidth}`
         : initialGridTemplateColumns
 
-    const gridTemplateColumns = isAnyRowExpandable
-        ? `${ACTION_GUTTER_SIZE}px ${gridTemplateColumnsWithoutExpandButton}`
-        : gridTemplateColumnsWithoutExpandButton
+    const gridTemplateColumns =
+        isAnyRowExpandable || rowStartIconConfig
+            ? `${ACTION_GUTTER_SIZE}px ${gridTemplateColumnsWithoutExpandButton}`
+            : gridTemplateColumnsWithoutExpandButton
 
     useEffect(() => {
         const scrollEventHandler = () => {
@@ -248,21 +249,23 @@ const TableContent = <
     }
 
     const renderRows = () => {
-        if (loading) {
+        if (loading && !visibleColumns.length) {
             return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
                 <div
                     key={shimmerRowLabel}
-                    className={`px-20 flexbox py-12 dc__gap-16 ${showSeparatorBetweenRows ? 'border__secondary--bottom' : ''}`}
+                    className={`px-20 flex left py-12 dc__gap-16 ${showSeparatorBetweenRows ? 'border__secondary--bottom' : ''}`}
                 >
-                    {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
+                    {isBulkSelectionConfigured || rowStartIconConfig || isAnyRowExpandable ? (
+                        <div className="shimmer w-20" />
+                    ) : null}
                     {SHIMMER_DUMMY_ARRAY.map((shimmerCellLabel) => (
                         <div key={shimmerCellLabel} className="shimmer w-200" />
                     ))}
                 </div>
             ))
         }
 
-        if (areFilteredRowsLoading) {
+        if (areFilteredRowsLoading || (loading && visibleColumns.length)) {
             return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
                 <div
                     key={shimmerRowLabel}
@@ -271,6 +274,11 @@ const TableContent = <
                         gridTemplateColumns,
                     }}
                 >
+                    {isBulkSelectionConfigured || rowStartIconConfig || isAnyRowExpandable ? (
+                        <div className="py-12 flex" aria-label="Loading...">
+                            <div className="shimmer h-16 w-20" />
+                        </div>
+                    ) : null}
                     {visibleColumns.map(({ label }) => (
                         <div key={label} className="py-12 flex" aria-label="Loading...">
                             <div className="shimmer h-16 w-100" />
@@ -364,7 +372,7 @@ const TableContent = <
                                 ariaLabel="Expand/Collapse row"
                                 showAriaLabelInTippy={false}
                                 variant={ButtonVariantType.borderLess}
-                                size={ComponentSizeType.xs}
+                                size={ComponentSizeType.xxs}
                                 style={ButtonStyleType.neutral}
                                 onClick={toggleExpandRow}
                             />
@@ -467,9 +475,11 @@ const TableContent = <
                         ref={headerRef}
                         className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0 generic-table__header"
                     >
-                        {loading ? (
+                        {loading && !visibleColumns.length ? (
                             <div className="flexbox py-12 dc__gap-16">
-                                {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
+                                {isBulkSelectionConfigured || rowStartIconConfig || isAnyRowExpandable ? (
+                                    <div className="shimmer w-20" />
+                                ) : null}
                                 {SHIMMER_DUMMY_ARRAY.map((label) => (
                                     <div key={label} className="shimmer w-200" />
                                 ))}
@@ -498,13 +508,15 @@ const TableContent = <
                                             ariaLabel="Expand/Collapse all rows"
                                             showAriaLabelInTippy={false}
                                             variant={ButtonVariantType.borderLess}
-                                            size={ComponentSizeType.xs}
+                                            size={ComponentSizeType.xxs}
                                             style={ButtonStyleType.neutral}
                                             onClick={toggleExpandAll}
                                         />
                                     </div>
                                 ) : null}
 
+                                {!isAnyRowExpandable && rowStartIconConfig && <div />}
+
                                 {visibleColumns.map(
                                     (
                                         {

src/Shared/Components/Table/types.ts

@@ -237,7 +237,11 @@ export type ViewWrapperProps<
             : {})
 >
 
-type FilterConfig<FilterVariant extends FiltersTypeEnum, RowData extends unknown> = {
+type FilterConfig<
+    FilterVariant extends FiltersTypeEnum,
+    RowData extends unknown,
+    AdditionalProps extends Record<string, any>,
+> = {
     filtersVariant: FilterVariant
     /**
      * Props for useUrlFilters/useStateFilters hooks
@@ -251,12 +255,14 @@ type FilterConfig<FilterVariant extends FiltersTypeEnum, RowData extends unknown
      */
     filter: FilterVariant extends FiltersTypeEnum.NONE
         ? null
-        : (row: RowType<RowData>, filterData: UseFiltersReturnType) => boolean
+        : (row: RowType<RowData>, filterData: UseFiltersReturnType, additionalProps: AdditionalProps) => boolean
     clearFilters?: FilterVariant extends FiltersTypeEnum.URL
         ? () => void
         : FilterVariant extends FiltersTypeEnum.STATE
           ? never
           : never
+
+    areFiltersApplied?: FilterVariant extends FiltersTypeEnum.NONE ? never : boolean
 }
 
 export type InternalTableProps<
@@ -360,7 +366,7 @@ export type InternalTableProps<
               pageSizeOptions?: never
           }
     ) &
-    FilterConfig<FilterVariant, RowData>
+    FilterConfig<FilterVariant, RowData, AdditionalProps>
 
 export type UseResizableTableConfigWrapperProps<
     RowData extends unknown,

src/Shared/Components/Table/utils.ts

@@ -42,11 +42,12 @@ export const searchAndSortRows = <
     rows: TableProps<RowData, FilterVariant, AdditionalProps>['rows'],
     filter: TableProps<RowData, FilterVariant, AdditionalProps>['filter'],
     filterData: UseFiltersReturnType,
+    additionalProps: AdditionalProps,
     comparator?: Column<RowData, FilterVariant, AdditionalProps>['comparator'],
 ): Awaited<ReturnType<TableProps<RowData>['getRows']>> => {
     const { sortBy, sortOrder } = filterData ?? {}
 
-    const filteredRows = filter ? rows.filter((row) => filter(row, filterData)) : rows
+    const filteredRows = filter ? rows.filter((row) => filter(row, filterData, additionalProps)) : rows
 
     return {
         rows: