fix: remove TABLE_ID_MAP, add reload to ErrorScreenManager & more

Author: Elessar1802

src/Shared/Components/Table/InternalTable.tsx

@@ -102,7 +102,7 @@ const InternalTable = ({
         [visibleColumns],
     )
 
-    const [areFilteredRowsLoading, filteredRows, filteredRowsError] = useAsync(async () => {
+    const [areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
         if (!rows && !getRows) {
             throw new Error('Neither rows nor getRows function provided')
         }
@@ -117,7 +117,7 @@ const InternalTable = ({
                   }
                 : () => getRows(filterData),
         })
-    }, [searchKey, sortBy, sortOrder, rows, sortByToColumnIndexMap, ...Object.values(otherFilters)])
+    }, [searchKey, sortBy, sortOrder, rows, sortByToColumnIndexMap, JSON.stringify(otherFilters)])
 
     const bulkSelectionCount = getSelectedIdentifiersCount?.() ?? 0
 
@@ -192,8 +192,9 @@ const InternalTable = ({
                         gridTemplateColumns,
                     }}
                 >
-                    {visibleColumns.map(({ horizontallySticky }) => (
+                    {visibleColumns.map(({ horizontallySticky, label }) => (
                         <div
+                            key={label}
                             className={`${horizontallySticky ? 'dc__position-sticky dc__left-0 dc__zi-1' : ''} pr-12 py-12 flex`}
                             aria-label="Loading..."
                         >
@@ -289,7 +290,7 @@ const InternalTable = ({
         }
 
         if (filteredRowsError && !areFilteredRowsLoading) {
-            return <ErrorScreenManager code={filteredRowsError.code} />
+            return <ErrorScreenManager code={filteredRowsError.code} reload={reloadFilteredRows} />
         }
 
         return (

src/Shared/Components/Table/constants.ts

@@ -10,8 +10,4 @@ export const EVENT_TARGET = new EventTarget()
 
 export const DRAG_SELECTOR_IDENTIFIER = 'table-drag-selector'
 
-export const TABLE_ID_MAP = {
-    STORYBOOK: 'storybook-table',
-} as const
-
 export const SHIMMER_DUMMY_ARRAY = [1, 2, 3]

src/Shared/Components/Table/index.ts

@@ -6,4 +6,3 @@ export type {
     TableProps,
     CellComponentProps as TableCellComponentProps,
 } from './types'
-export { TABLE_ID_MAP } from './constants'

src/Shared/Components/Table/types.ts

@@ -3,7 +3,6 @@ import { SortableTableHeaderCellProps, useResizableTableConfig } from '@Common/S
 import { UseStateFiltersProps, UseStateFiltersReturnType, UseUrlFiltersProps } from '@Common/Hooks'
 import { GenericEmptyStateType } from '@Common/index'
 import { GenericFilterEmptyStateProps } from '@Common/EmptyState/types'
-import { TABLE_ID_MAP } from './constants'
 import { useBulkSelection, UseBulkSelectionProps } from '../BulkSelection'
 
 export interface UseFiltersReturnType extends UseStateFiltersReturnType<string> {}
@@ -147,7 +146,7 @@ export type ViewWrapperProps = PropsWithChildren<
 >
 
 export type InternalTableProps = Required<Pick<ConfigurableColumnsType, 'visibleColumns' | 'setVisibleColumns'>> & {
-    id: (typeof TABLE_ID_MAP)[keyof typeof TABLE_ID_MAP]
+    id: `table__${string}`
 
     loading?: boolean