From 5c397607c4875fdb3d26c9c231ebc2179519be87 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 7 May 2025 18:28:01 +0530
Subject: [PATCH 01/25] yoyoy

---
 src/Common/Helper.tsx                         |  2 +-
 src/Common/PopupMenu.tsx                      | 24 +++++++++++++++----
 .../Table/useTableWithKeyboardShortcuts.ts    |  2 +-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
index 76cd26c9d..d1a7d4516 100644
--- a/src/Common/Helper.tsx
+++ b/src/Common/Helper.tsx
@@ -450,7 +450,7 @@ export function useAsync<T>(
             setState((state) => ({ ...state, loading: false }))
             return
         }
-        setState((state) => ({ ...state, dependencies: dependencyArray }))
+        setState((state) => ({ ...state, loading: true, dependencies: dependencyArray }))
         reload()
         return () =>
             setState((state) => ({
diff --git a/src/Common/PopupMenu.tsx b/src/Common/PopupMenu.tsx
index 12d4e3107..be3a6b8c4 100644
--- a/src/Common/PopupMenu.tsx
+++ b/src/Common/PopupMenu.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { Modal } from './Modals/Modal'
 import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types'
 
@@ -155,7 +155,7 @@ const PopupMenu = ({
     )
 }
 
-const Button = ({
+const Button = forwardRef(({
     children = null,
     disabled = false,
     rootClassName = '',
@@ -163,11 +163,25 @@ const Button = ({
     onHover = false,
     isKebab = false,
     dataTestId = '',
-}: PopupMenuButtonType) => {
+}: PopupMenuButtonType, forwardedRef) => {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
+
+    const refCallback = (node) => {
+        initialiseButtonWidth.current = node
+
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node)
+            return
+        }
+
+        if (forwardedRef && typeof forwardedRef === 'object') {
+            forwardedRef.current = node
+        }
+    }
+
     return (
         <button
-            ref={initialiseButtonWidth}
+            ref={refCallback}
             type="button"
             tabIndex={tabIndex}
             disabled={disabled}
@@ -181,7 +195,7 @@ const Button = ({
             {children}
         </button>
     )
-}
+})
 
 const Body = ({
     children = null,
diff --git a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
index 8d5127f65..d618b6cc3 100644
--- a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
+++ b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
@@ -19,7 +19,7 @@ const useTableWithKeyboardShortcuts = (
 
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
-    const { handleBulkSelection } = bulkSelectionReturnValue
+    const { handleBulkSelection } = bulkSelectionReturnValue ?? {}
 
     const [activeRowIndex, setActiveRowIndex] = useState<number>(0)
 

From a0d351a85f4a34cae0b811a5b426cd90dda52494 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Tue, 13 May 2025 18:57:30 +0530
Subject: [PATCH 02/25] feat: table in RB

---
 src/Shared/Components/Table/InternalTable.tsx |  11 +-
 src/Shared/Components/Table/types.ts          | 183 +++++++++---------
 src/Shared/Components/Table/utils.ts          |   8 +-
 3 files changed, 105 insertions(+), 97 deletions(-)

diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 999fad96d..72c66003f 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -42,6 +42,7 @@ const InternalTable = ({
     handleToggleBulkSelectionOnRow,
     paginationVariant,
     RowActionsOnHoverComponent,
+    children,
 }: InternalTableProps) => {
     const rowsContainerRef = useRef<HTMLDivElement>(null)
     const parentRef = useRef<HTMLDivElement>(null)
@@ -170,7 +171,7 @@ const InternalTable = ({
         paginationVariant === PaginationEnum.PAGINATED && filteredRows?.length > DEFAULT_BASE_PAGE_SIZE
 
     const renderRows = () => {
-        if (loading && !visibleColumns.length) {
+        if (loading) {
             return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
                 <div
                     key={shimmerRowLabel}
@@ -298,7 +299,7 @@ const InternalTable = ({
             <div tabIndex={0} role="grid" className="generic-table flexbox-col dc__overflow-hidden flex-grow-1">
                 <div className="flexbox-col flex-grow-1 w-100 dc__overflow-auto" ref={parentRef}>
                     <div className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom">
-                        {loading && !visibleColumns.length ? (
+                        {loading ? (
                             <div className="flexbox py-12 dc__gap-16">
                                 {SHIMMER_DUMMY_ARRAY.map((label) => (
                                     <div key={label} className="shimmer w-180" />
@@ -312,7 +313,7 @@ const InternalTable = ({
                                 }}
                             >
                                 {visibleColumns.map(({ label, field, isSortable, size, showTippyOnTruncate }) => {
-                                    const isResizable = !!size.range
+                                    const isResizable = !!size?.range
 
                                     if (field === BULK_ACTION_GUTTER_LABEL) {
                                         return <BulkSelection key={field} showPagination={showPagination} />
@@ -361,10 +362,12 @@ const InternalTable = ({
                         changePage={changePage}
                         changePageSize={changePageSize}
                         offset={offset}
-                        rootClassName="border__primary--top flex dc__content-space px-20"
+                        rootClassName="border__secondary--top flex dc__content-space px-20"
                         size={filteredRows.length}
                     />
                 )}
+
+                {children}
             </div>
         )
     }
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index d32d09362..9b6d75cac 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -147,107 +147,109 @@ export type ViewWrapperProps = PropsWithChildren<
         }
 >
 
-export type InternalTableProps = Required<Pick<ConfigurableColumnsType, 'visibleColumns' | 'setVisibleColumns'>> & {
-    id: `table__${string}`
-
-    loading?: boolean
-
-    paginationVariant: PaginationEnum
-
-    /**
-     * Memoize columns before passing as props.
-     *
-     * For columns from backend: initialize as empty array and set loading
-     * to true until API call completes.
-     */
-    columns: Column[]
-
-    /** If bulk selections are not a concern omit this prop */
-    bulkSelectionConfig?: BulkSelectionConfigType
-
-    emptyStateConfig: {
-        noRowsConfig: Omit<GenericEmptyStateType, 'children'>
-        noRowsForFilterConfig?: Pick<GenericFilterEmptyStateProps, 'title' | 'subTitle'> & {
-            clearFilters: () => void
+export type InternalTableProps = PropsWithChildren<
+    Required<Pick<ConfigurableColumnsType, 'visibleColumns' | 'setVisibleColumns'>> & {
+        id: `table__${string}`
+
+        loading?: boolean
+
+        paginationVariant: PaginationEnum
+
+        /**
+         * Memoize columns before passing as props.
+         *
+         * For columns from backend: initialize as empty array and set loading
+         * to true until API call completes.
+         */
+        columns: Column[]
+
+        /** If bulk selections are not a concern omit this prop */
+        bulkSelectionConfig?: BulkSelectionConfigType
+
+        emptyStateConfig: {
+            noRowsConfig: Omit<GenericEmptyStateType, 'children'>
+            noRowsForFilterConfig?: Pick<GenericFilterEmptyStateProps, 'title' | 'subTitle'> & {
+                clearFilters: () => void
+            }
         }
-    }
-
-    filterData: UseFiltersReturnType | null
-
-    resizableConfig: ReturnType<typeof useResizableTableConfig> | null
 
-    /**
-     * Enable this to let users choose which columns to display.
-     * Example: Resource Browser > Node Listing
-     *
-     * Using the provided id for this table, we will store the user's preference in localStorage
-     */
-    areColumnsConfigurable?: boolean
+        filterData: UseFiltersReturnType | null
 
-    additionalProps?: AdditionalProps
+        resizableConfig: ReturnType<typeof useResizableTableConfig> | null
 
-    /** Control the look of the table using this prop */
-    stylesConfig?: {
-        showSeparatorBetweenRows: boolean
-    }
+        /**
+         * Enable this to let users choose which columns to display.
+         * Example: Resource Browser > Node Listing
+         *
+         * Using the provided id for this table, we will store the user's preference in localStorage
+         */
+        areColumnsConfigurable?: boolean
 
-    /**
-     * Use this component to display additional content at the end of a row when it is hovered over.
-     */
-    RowActionsOnHoverComponent?: FunctionComponent<{ row: RowType }>
+        additionalProps?: AdditionalProps
 
-    bulkSelectionReturnValue: ReturnType<typeof useBulkSelection> | null
+        /** Control the look of the table using this prop */
+        stylesConfig?: {
+            showSeparatorBetweenRows: boolean
+        }
 
-    handleClearBulkSelection: () => void
+        /**
+         * Use this component to display additional content at the end of a row when it is hovered over.
+         */
+        RowActionsOnHoverComponent?: FunctionComponent<{ row: RowType }>
 
-    handleToggleBulkSelectionOnRow: (row: RowType) => void
+        bulkSelectionReturnValue: ReturnType<typeof useBulkSelection> | null
 
-    ViewWrapper?: FunctionComponent<ViewWrapperProps>
-} & (
-        | {
-              /**
-               * Direct rows data for frontend-only datasets like resource browser.
-               */
-              rows: RowsType
-              /**
-               * Use `getRows` function instead for data that needs to be fetched from backend with pagination/sorting/filtering.
-               */
-              getRows?: never
-          }
-        | {
-              rows?: never
-              /** NOTE: Sorting on frontend is only handled if rows is provided instead of getRows */
-              getRows: (props: GetRowsProps) => Promise<RowsType>
-          }
-    ) &
-    (
-        | {
-              filtersVariant: FiltersTypeEnum.URL
+        handleClearBulkSelection: () => void
 
-              /**
-               * props for useUrlFilters/useStateFilters hooks
-               */
-              additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.URL>
+        handleToggleBulkSelectionOnRow: (row: RowType) => void
 
-              /**
-               * This func is used to filter the rows based on filter data.
-               * Only applicable if filtersVariant is NOT set to NONE
-               *
-               * If filter is only being used for sorting, then send `noop` in this prop
-               */
-              filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
-          }
-        | {
-              filtersVariant: FiltersTypeEnum.STATE
-              additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.STATE>
-              filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
-          }
-        | {
-              filtersVariant: FiltersTypeEnum.NONE
-              additionalFilterProps?: never
-              filter?: never
-          }
-    )
+        ViewWrapper?: FunctionComponent<ViewWrapperProps>
+    } & (
+            | {
+                  /**
+                   * Direct rows data for frontend-only datasets like resource browser.
+                   */
+                  rows: RowsType
+                  /**
+                   * Use `getRows` function instead for data that needs to be fetched from backend with pagination/sorting/filtering.
+                   */
+                  getRows?: never
+              }
+            | {
+                  rows?: never
+                  /** NOTE: Sorting on frontend is only handled if rows is provided instead of getRows */
+                  getRows: (props: GetRowsProps) => Promise<RowsType>
+              }
+        ) &
+        (
+            | {
+                  filtersVariant: FiltersTypeEnum.URL
+
+                  /**
+                   * props for useUrlFilters/useStateFilters hooks
+                   */
+                  additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.URL>
+
+                  /**
+                   * This func is used to filter the rows based on filter data.
+                   * Only applicable if filtersVariant is NOT set to NONE
+                   *
+                   * If filter is only being used for sorting, then send `noop` in this prop
+                   */
+                  filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
+              }
+            | {
+                  filtersVariant: FiltersTypeEnum.STATE
+                  additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.STATE>
+                  filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
+              }
+            | {
+                  filtersVariant: FiltersTypeEnum.NONE
+                  additionalFilterProps?: never
+                  filter?: never
+              }
+        )
+>
 
 export type UseResizableTableConfigWrapperProps = Omit<InternalTableProps, 'resizableConfig'>
 
@@ -278,6 +280,7 @@ export type TableProps = Pick<
     | 'RowActionsOnHoverComponent'
     | 'loading'
     | 'ViewWrapper'
+    | 'children'
 >
 
 export interface BulkSelectionActionWidgetProps extends Pick<BulkSelectionConfigType, 'BulkActionsComponent'> {
diff --git a/src/Shared/Components/Table/utils.ts b/src/Shared/Components/Table/utils.ts
index b99a1dd02..4095c3ae2 100644
--- a/src/Shared/Components/Table/utils.ts
+++ b/src/Shared/Components/Table/utils.ts
@@ -23,9 +23,9 @@ export const searchAndSortRows = (
     filterData: UseFiltersReturnType,
     comparator?: Column['comparator'],
 ) => {
-    const { searchKey, sortBy, sortOrder } = filterData ?? {}
+    const { sortBy, sortOrder, isFilterApplied } = filterData ?? {}
 
-    const filteredRows = searchKey ? rows.filter((row) => filter(row, filterData)) : rows
+    const filteredRows = isFilterApplied ? rows.filter((row) => filter(row, filterData)) : rows
 
     return comparator && sortBy
         ? filteredRows.sort(
@@ -62,7 +62,9 @@ export const getVisibleColumnsFromLocalStorage = ({
             throw new Error()
         }
 
-        return visibleColumns
+        const visibleColumnsFieldSet = new Set(visibleColumns.map((column) => column.field))
+
+        return allColumns.filter((column) => visibleColumnsFieldSet.has(column.field))
     } catch {
         // NOTE: show all headers by default
         return allColumns

From 3747f387970f406a5cd069f3d57fdd5ea550802e Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Thu, 15 May 2025 11:49:25 +0530
Subject: [PATCH 03/25] fix: keep rows loading until rows is provided

---
 src/Shared/Components/Table/InternalTable.tsx | 20 +++++-----
 src/Shared/Components/Table/constants.ts      |  2 +
 src/Shared/Components/Table/types.ts          | 40 ++++++++++++-------
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 72c66003f..99038cd8d 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -15,7 +15,7 @@ import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
 
 import { BulkSelection } from '../BulkSelection'
 import BulkSelectionActionWidget from './BulkSelectionActionWidget'
-import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, SHIMMER_DUMMY_ARRAY } from './constants'
+import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, NO_ROWS_OR_GET_ROWS_ERROR, SHIMMER_DUMMY_ARRAY } from './constants'
 import { FiltersTypeEnum, InternalTableProps, PaginationEnum, SignalsType } from './types'
 import useTableWithKeyboardShortcuts from './useTableWithKeyboardShortcuts'
 import { getFilteringPromise, searchAndSortRows } from './utils'
@@ -104,9 +104,9 @@ const InternalTable = ({
         [visibleColumns],
     )
 
-    const [areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
+    const [_areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
         if (!rows && !getRows) {
-            throw new Error('Neither rows nor getRows function provided')
+            throw NO_ROWS_OR_GET_ROWS_ERROR
         }
 
         return getFilteringPromise({
@@ -121,6 +121,8 @@ const InternalTable = ({
         })
     }, [searchKey, sortBy, sortOrder, rows, sortByToColumnIndexMap, JSON.stringify(otherFilters)])
 
+    const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
+
     const bulkSelectionCount = getSelectedIdentifiersCount?.() ?? 0
 
     const visibleRows = useMemo(() => {
@@ -258,7 +260,7 @@ const InternalTable = ({
                                     value={row.data[field]}
                                     signals={EVENT_TARGET as SignalsType}
                                     row={row}
-                                    filterData={filterData}
+                                    filterData={filterData as any}
                                     isRowActive={isRowActive}
                                     {...additionalProps}
                                 />
@@ -283,7 +285,11 @@ const InternalTable = ({
     }
 
     const renderContent = () => {
-        if (!areFilteredRowsLoading && !filteredRows?.length) {
+        if (filteredRowsError && !areFilteredRowsLoading && !loading) {
+            return <ErrorScreenManager code={filteredRowsError.code} reload={reloadFilteredRows} />
+        }
+
+        if (!areFilteredRowsLoading && !filteredRows?.length && !loading) {
             return filtersVariant !== FiltersTypeEnum.NONE && isFilterApplied ? (
                 <GenericFilterEmptyState handleClearFilters={clearFilters} />
             ) : (
@@ -291,10 +297,6 @@ const InternalTable = ({
             )
         }
 
-        if (filteredRowsError && !areFilteredRowsLoading) {
-            return <ErrorScreenManager code={filteredRowsError.code} reload={reloadFilteredRows} />
-        }
-
         return (
             <div tabIndex={0} role="grid" className="generic-table flexbox-col dc__overflow-hidden flex-grow-1">
                 <div className="flexbox-col flex-grow-1 w-100 dc__overflow-auto" ref={parentRef}>
diff --git a/src/Shared/Components/Table/constants.ts b/src/Shared/Components/Table/constants.ts
index 69cd2cc7a..d6e3c516f 100644
--- a/src/Shared/Components/Table/constants.ts
+++ b/src/Shared/Components/Table/constants.ts
@@ -11,3 +11,5 @@ export const EVENT_TARGET = new EventTarget()
 export const DRAG_SELECTOR_IDENTIFIER = 'table-drag-selector'
 
 export const SHIMMER_DUMMY_ARRAY = [1, 2, 3]
+
+export const NO_ROWS_OR_GET_ROWS_ERROR = new Error('Neither rows nor getRows function provided')
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index 9b6d75cac..0337ee71f 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -1,7 +1,12 @@
 import { Dispatch, FunctionComponent, PropsWithChildren, SetStateAction } from 'react'
 
 import { GenericFilterEmptyStateProps } from '@Common/EmptyState/types'
-import { UseStateFiltersProps, UseStateFiltersReturnType, UseUrlFiltersProps } from '@Common/Hooks'
+import {
+    UseStateFiltersProps,
+    UseStateFiltersReturnType,
+    UseUrlFiltersProps,
+    UseUrlFiltersReturnType,
+} from '@Common/Hooks'
 import { GenericEmptyStateType } from '@Common/index'
 import { SortableTableHeaderCellProps, useResizableTableConfig } from '@Common/SortableTableHeaderCell'
 
@@ -78,11 +83,21 @@ export type RowType = {
 
 export type RowsType = RowType[]
 
-export interface CellComponentProps extends Pick<BaseColumnType, 'field'>, AdditionalProps {
+export enum FiltersTypeEnum {
+    STATE = 'state',
+    URL = 'url',
+    NONE = 'none',
+}
+
+export interface CellComponentProps<T = FiltersTypeEnum.NONE> extends Pick<BaseColumnType, 'field'>, AdditionalProps {
     signals: SignalsType
     value: unknown
     row: RowType
-    filterData: UseFiltersReturnType
+    filterData: T extends FiltersTypeEnum.NONE
+        ? null
+        : T extends FiltersTypeEnum.STATE
+          ? UseFiltersReturnType
+          : UseUrlFiltersReturnType<string>
     isRowActive: boolean
 }
 
@@ -106,8 +121,6 @@ export type Column = Pick<SortableTableHeaderCellProps, 'showTippyOnTruncate'> &
     )
 
 type BulkSelectionConfigType = Pick<UseBulkSelectionProps<unknown>, 'getSelectAllDialogStatus'> & {
-    /** Make sure to wrap it in useCallback */
-    onBulkSelectionChanged: (selectedRows: RowsType) => void
     BulkActionsComponent: FunctionComponent<{}>
 }
 
@@ -117,12 +130,6 @@ export enum PaginationEnum {
     NOT_PAGINATED = 'not-paginated',
 }
 
-export enum FiltersTypeEnum {
-    STATE = 'state',
-    URL = 'url',
-    NONE = 'none',
-}
-
 export interface ConfigurableColumnsType {
     allColumns: Column[]
     visibleColumns: Column[]
@@ -139,12 +146,17 @@ type AdditionalFilterPropsType<T extends Exclude<FiltersTypeEnum, FiltersTypeEnu
       >
     : Pick<UseStateFiltersProps<string>, 'initialSortKey'>
 
-export type ViewWrapperProps = PropsWithChildren<
-    Pick<UseFiltersReturnType, 'offset' | 'handleSearch' | 'searchKey' | 'sortBy' | 'sortOrder' | 'clearFilters'> &
+export type ViewWrapperProps<T = FiltersTypeEnum.STATE> = PropsWithChildren<
+    (T extends FiltersTypeEnum.NONE
+        ? {}
+        : Pick<
+              UseFiltersReturnType,
+              'offset' | 'handleSearch' | 'searchKey' | 'sortBy' | 'sortOrder' | 'clearFilters'
+          >) &
         AdditionalProps &
         Partial<ConfigurableColumnsType> & {
             areRowsLoading: boolean
-        }
+        } & (T extends FiltersTypeEnum.URL ? Pick<UseUrlFiltersReturnType<string>, 'updateSearchParams'> : {})
 >
 
 export type InternalTableProps = PropsWithChildren<

From 98a16158844bab76e098be69e6e97436112c8784 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Mon, 19 May 2025 19:21:01 +0530
Subject: [PATCH 04/25] fix: popup menu ref

---
 src/Common/PopupMenu.tsx                      |  2 +-
 src/Shared/Components/Table/InternalTable.tsx | 38 +++++++------------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/src/Common/PopupMenu.tsx b/src/Common/PopupMenu.tsx
index be3a6b8c4..0fb4923cc 100644
--- a/src/Common/PopupMenu.tsx
+++ b/src/Common/PopupMenu.tsx
@@ -167,7 +167,7 @@ const Button = forwardRef(({
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
 
     const refCallback = (node) => {
-        initialiseButtonWidth.current = node
+        buttonRef.current = node
 
         if (typeof forwardedRef === 'function') {
             forwardedRef(node)
diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 99038cd8d..68f9f4f87 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -94,16 +94,6 @@ const InternalTable = ({
         [],
     )
 
-    const sortByToColumnIndexMap: Record<string, number> = useMemo(
-        () =>
-            visibleColumns.reduce((acc, column, index) => {
-                acc[column.field] = index
-
-                return acc
-            }, {}),
-        [visibleColumns],
-    )
-
     const [_areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
         if (!rows && !getRows) {
             throw NO_ROWS_OR_GET_ROWS_ERROR
@@ -112,18 +102,20 @@ const InternalTable = ({
         return getFilteringPromise({
             searchSortTimeoutRef,
             callback: rows
-                ? () => {
-                      const sortByColumnIndex = sortByToColumnIndexMap[sortBy]
-
-                      return searchAndSortRows(rows, filter, filterData, visibleColumns[sortByColumnIndex]?.comparator)
-                  }
+                ? () =>
+                      searchAndSortRows(
+                          rows,
+                          filter,
+                          filterData,
+                          visibleColumns.find(({ field }) => field === sortBy)?.comparator,
+                      )
                 : () => getRows(filterData),
         })
-    }, [searchKey, sortBy, sortOrder, rows, sortByToColumnIndexMap, JSON.stringify(otherFilters)])
+    }, [searchKey, sortBy, sortOrder, rows, JSON.stringify(otherFilters)])
 
     const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
 
-    const bulkSelectionCount = getSelectedIdentifiersCount?.() ?? 0
+    const bulkSelectionCount = isBulkSelectionApplied && rows ? rows.length : (getSelectedIdentifiersCount?.() ?? 0)
 
     const visibleRows = useMemo(() => {
         const normalizedFilteredRows = filteredRows ?? []
@@ -196,13 +188,11 @@ const InternalTable = ({
                         gridTemplateColumns,
                     }}
                 >
-                    {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..."
-                        >
-                            <div className="shimmer h-16 w-100" />
+                    {visibleColumns.map(({ label, field }) => (
+                        <div key={label} className="pr-6 py-12 flex" aria-label="Loading...">
+                            <div
+                                className={`shimmer h-16 ${field === BULK_ACTION_GUTTER_LABEL ? 'w-20 mr-6' : 'w-100'}`}
+                            />
                         </div>
                     ))}
                 </div>

From 0d590b3c0e91551f1dfc8e6e778f1c6da0608fba Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Mon, 19 May 2025 19:30:19 +0530
Subject: [PATCH 05/25] revert: change in useAsync

---
 src/Common/Helper.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
index 81f61cdb7..6e1c2a904 100644
--- a/src/Common/Helper.tsx
+++ b/src/Common/Helper.tsx
@@ -451,7 +451,7 @@ export function useAsync<T>(
             setState((state) => ({ ...state, loading: false }))
             return
         }
-        setState((state) => ({ ...state, loading: true, dependencies: dependencyArray }))
+        setState((state) => ({ ...state, dependencies: dependencyArray }))
         reload()
         return () =>
             setState((state) => ({
@@ -1002,7 +1002,7 @@ export const getBranchIcon = (sourceType, _isRegex?: boolean, webhookEventName?:
             return <ICPullRequest className="scn-6" />
         }
         if (webhookEventName === WebhookEventNameType.TAG_CREATION) {
-        return <ICTag className="scn-6" />
+            return <ICTag className="scn-6" />
         }
         return <ICWebhook />
     }

From b5820c64aa03186566c6dad5d056c301bf75c1f8 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Tue, 20 May 2025 17:53:00 +0530
Subject: [PATCH 06/25] fix: RB table bulk actions props

---
 src/Assets/IconV2/ic-info-filled-color.svg    |   8 +
 .../UseRegisterShortcutProvider.tsx           |   8 +-
 .../BulkSelection/BulkSelection.tsx           | 135 ++++++------
 .../BulkSelectionDropdownItems.tsx            |   4 +-
 src/Shared/Components/Icon/Icon.tsx           |   2 +
 .../Table/BulkSelectionActionWidget.tsx       |  13 +-
 src/Shared/Components/Table/InternalTable.tsx |  56 ++++-
 src/Shared/Components/Table/index.ts          |   2 +
 src/Shared/Components/Table/types.ts          | 203 ++++++++++--------
 .../Table/useTableWithKeyboardShortcuts.ts    |  19 ++
 10 files changed, 276 insertions(+), 174 deletions(-)
 create mode 100644 src/Assets/IconV2/ic-info-filled-color.svg

diff --git a/src/Assets/IconV2/ic-info-filled-color.svg b/src/Assets/IconV2/ic-info-filled-color.svg
new file mode 100644
index 000000000..a4d6bf344
--- /dev/null
+++ b/src/Assets/IconV2/ic-info-filled-color.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle data-style-override="false" cx="12" cy="12" r="10" fill="var(--B500)" />
+    <path
+        data-style-override="false"
+        d="M11.9924 8.07053C11.7103 8.07053 11.4685 7.96977 11.267 7.76826C11.0655 7.56675 10.9647 7.3199 10.9647 7.02771C10.9647 6.73552 11.0655 6.4937 11.267 6.30227C11.4685 6.10076 11.7103 6 11.9924 6C12.2846 6 12.5315 6.10076 12.733 6.30227C12.9345 6.4937 13.0353 6.73552 13.0353 7.02771C13.0353 7.3199 12.9345 7.56675 12.733 7.76826C12.5315 7.96977 12.2846 8.07053 11.9924 8.07053ZM12.869 15.34H14.2368C14.6583 15.34 15 15.6818 15 16.1033C15 16.5248 14.6583 16.8665 14.2368 16.8665H9.76322C9.34171 16.8665 9 16.5248 9 16.1033C9 15.6818 9.34171 15.34 9.76322 15.34H11.131V10.67H9.76322C9.34171 10.67 9 10.3283 9 9.9068C9 9.48528 9.34171 9.14358 9.76322 9.14358H11.869C12.4213 9.14358 12.869 9.59129 12.869 10.1436V15.34Z"
+        fill="var(--N0)"
+    />
+</svg>
diff --git a/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx b/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx
index ff53f1ce7..64272e1c3 100644
--- a/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx
+++ b/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx
@@ -117,10 +117,6 @@ const UseRegisterShortcutProvider = ({
     }, [])
 
     const handleKeydownEvent = useCallback((event: KeyboardEvent) => {
-        if (preventDefault) {
-            event.preventDefault()
-        }
-
         if (
             // NOTE: in case of custom events generated by password managers autofill, the event.key is not set
             !event.key ||
@@ -132,6 +128,10 @@ const UseRegisterShortcutProvider = ({
             return
         }
 
+        if (preventDefault) {
+            event.preventDefault()
+        }
+
         keysDownRef.current.add(event.key.toUpperCase() as Uppercase<string>)
 
         if (event.ctrlKey) {
diff --git a/src/Shared/Components/BulkSelection/BulkSelection.tsx b/src/Shared/Components/BulkSelection/BulkSelection.tsx
index 866b89cb9..c10d9496b 100644
--- a/src/Shared/Components/BulkSelection/BulkSelection.tsx
+++ b/src/Shared/Components/BulkSelection/BulkSelection.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react'
+
 import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.svg'
 import { ReactComponent as ICCheckSquare } from '../../../Assets/Icon/ic-check-square.svg'
 import { ReactComponent as ICChevronDown } from '../../../Assets/Icon/ic-chevron-down.svg'
@@ -24,74 +26,77 @@ import { useBulkSelection } from './BulkSelectionProvider'
 import { BULK_DROPDOWN_TEST_ID, BulkSelectionOptionsLabels } from './constants'
 import { BulkSelectionDropdownItemsType, BulkSelectionEvents, BulkSelectionProps } from './types'
 
-const BulkSelection = <T,>({ showPagination, disabled = false, showChevronDownIcon = true }: BulkSelectionProps) => {
-    const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection<T>()
-    const areOptionsSelected = getSelectedIdentifiersCount() > 0
-    const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
-        {
-            locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
-            label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ON_PAGE],
-            isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.CHECKED,
-            icon: ICCheckSquare,
-        },
-        ...(showPagination
-            ? [
-                  {
-                      locator: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
-                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES],
-                      isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.BULK_CHECKED,
-                      icon: ICCheckAll,
-                  },
-              ]
-            : []),
-        ...(areOptionsSelected
-            ? [
-                  {
-                      locator: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
-                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
-                      isSelected: false,
-                      icon: ICClose,
-                      iconClass: 'icon-use-fill-n6',
-                  },
-              ]
-            : []),
-    ]
+const BulkSelection = forwardRef(
+    ({ showPagination, disabled = false, showChevronDownIcon = true }: BulkSelectionProps, forwardedRef) => {
+        const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection()
+        const areOptionsSelected = getSelectedIdentifiersCount() > 0
+        const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
+            {
+                locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+                label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ON_PAGE],
+                isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.CHECKED,
+                icon: ICCheckSquare,
+            },
+            ...(showPagination
+                ? [
+                      {
+                          locator: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
+                          label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES],
+                          isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.BULK_CHECKED,
+                          icon: ICCheckAll,
+                      },
+                  ]
+                : []),
+            ...(areOptionsSelected
+                ? [
+                      {
+                          locator: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
+                          label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
+                          isSelected: false,
+                          icon: ICClose,
+                          iconClass: 'icon-use-fill-n6',
+                      },
+                  ]
+                : []),
+        ]
 
-    return (
-        <PopupMenu autoClose>
-            <PopupMenu.Button
-                isKebab
-                rootClassName="h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp"
-                dataTestId={BULK_DROPDOWN_TEST_ID}
-                disabled={disabled}
-            >
-                <Checkbox
-                    isChecked={isChecked}
-                    onChange={noop}
-                    rootClassName="icon-dim-20 m-0"
-                    value={checkboxValue}
+        return (
+            <PopupMenu autoClose>
+                <PopupMenu.Button
+                    ref={forwardedRef}
+                    isKebab
+                    rootClassName="h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp"
+                    dataTestId={BULK_DROPDOWN_TEST_ID}
                     disabled={disabled}
-                    // Ideally should be disabled but was giving issue with cursor
-                />
+                >
+                    <Checkbox
+                        isChecked={isChecked}
+                        onChange={noop}
+                        rootClassName="icon-dim-20 m-0"
+                        value={checkboxValue}
+                        disabled={disabled}
+                        // Ideally should be disabled but was giving issue with cursor
+                    />
 
-                {showChevronDownIcon && <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />}
-            </PopupMenu.Button>
+                    {showChevronDownIcon && <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />}
+                </PopupMenu.Button>
 
-            <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bg__primary flex column dc__content-start dc__align-start dc__position-abs bg__primary dc__border dc__border-radius-4-imp">
-                {BulkSelectionItems.map((item) => (
-                    <BulkSelectionDropdownItems<T>
-                        key={item.locator}
-                        locator={item.locator}
-                        label={item.label}
-                        isSelected={item.isSelected}
-                        icon={item.icon}
-                        handleBulkSelection={handleBulkSelection}
-                        iconClass={item.iconClass}
-                    />
-                ))}
-            </PopupMenu.Body>
-        </PopupMenu>
-    )
-}
+                <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bg__primary flex column dc__content-start dc__align-start dc__position-abs bg__primary dc__border dc__border-radius-4-imp">
+                    {BulkSelectionItems.map((item) => (
+                        <BulkSelectionDropdownItems
+                            key={item.locator}
+                            locator={item.locator}
+                            label={item.label}
+                            isSelected={item.isSelected}
+                            icon={item.icon}
+                            handleBulkSelection={handleBulkSelection}
+                            iconClass={item.iconClass}
+                        />
+                    ))}
+                </PopupMenu.Body>
+            </PopupMenu>
+        )
+    },
+)
 
 export default BulkSelection
diff --git a/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx b/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx
index a3b4fd9a3..322515038 100644
--- a/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx
+++ b/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx
@@ -16,14 +16,14 @@
 
 import { BulkSelectionDropdownItemsProps } from './types'
 
-const BulkSelectionDropdownItems = <T,>({
+const BulkSelectionDropdownItems = ({
     locator,
     label,
     isSelected,
     handleBulkSelection,
     icon: Icon,
     iconClass,
-}: BulkSelectionDropdownItemsProps<T>) => {
+}: BulkSelectionDropdownItemsProps<unknown>) => {
     const handleSelect = () => {
         handleBulkSelection({
             action: locator,
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index c3953b9fa..45b0fa7ef 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -89,6 +89,7 @@ import { ReactComponent as ICHelpOutline } from '@IconsV2/ic-help-outline.svg'
 import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
 import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
 import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg'
+import { ReactComponent as ICInfoFilledColor } from '@IconsV2/ic-info-filled-color.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICInstall } from '@IconsV2/ic-install.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
@@ -245,6 +246,7 @@ export const iconMap = {
     'ic-help-outline': ICHelpOutline,
     'ic-hibernate': ICHibernate,
     'ic-in-progress': ICInProgress,
+    'ic-info-filled-color': ICInfoFilledColor,
     'ic-info-filled': ICInfoFilled,
     'ic-info-outline': ICInfoOutline,
     'ic-install': ICInstall,
diff --git a/src/Shared/Components/Table/BulkSelectionActionWidget.tsx b/src/Shared/Components/Table/BulkSelectionActionWidget.tsx
index 0e09b1f03..7cf71e4c1 100644
--- a/src/Shared/Components/Table/BulkSelectionActionWidget.tsx
+++ b/src/Shared/Components/Table/BulkSelectionActionWidget.tsx
@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { useEffect } from 'react'
+import { MouseEvent, useEffect } from 'react'
 
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { DraggableButton, DraggablePositionVariant, DraggableWrapper } from '@Common/DraggableWrapper'
@@ -18,6 +18,8 @@ const BulkSelectionActionWidget = ({
     handleClearBulkSelection,
     parentRef,
     BulkActionsComponent,
+    bulkActionsData,
+    setBulkActionState,
 }: BulkSelectionActionWidgetProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
@@ -29,6 +31,13 @@ const BulkSelectionActionWidget = ({
         }
     }, [])
 
+    const onActionClick = (event: MouseEvent<HTMLButtonElement>) => {
+        const {
+            dataset: { key },
+        } = event.currentTarget
+        setBulkActionState(key)
+    }
+
     return (
         <DraggableWrapper
             dragSelector={`.${DRAG_SELECTOR_IDENTIFIER}`}
@@ -46,7 +55,7 @@ const BulkSelectionActionWidget = ({
                     </div>
                 </div>
 
-                <BulkActionsComponent />
+                <BulkActionsComponent onActionClick={onActionClick} bulkActionsData={bulkActionsData} />
 
                 <Button
                     icon={<ICClose />}
diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 68f9f4f87..dd95e3589 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo, useRef } from 'react'
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Checkbox } from '@Common/Checkbox'
 import { DEFAULT_BASE_PAGE_SIZE } from '@Common/Constants'
@@ -16,7 +16,7 @@ import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
 import { BulkSelection } from '../BulkSelection'
 import BulkSelectionActionWidget from './BulkSelectionActionWidget'
 import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, NO_ROWS_OR_GET_ROWS_ERROR, SHIMMER_DUMMY_ARRAY } from './constants'
-import { FiltersTypeEnum, InternalTableProps, PaginationEnum, SignalsType } from './types'
+import { BulkActionStateType, FiltersTypeEnum, InternalTableProps, PaginationEnum, SignalsType } from './types'
 import useTableWithKeyboardShortcuts from './useTableWithKeyboardShortcuts'
 import { getFilteringPromise, searchAndSortRows } from './utils'
 
@@ -42,13 +42,20 @@ const InternalTable = ({
     handleToggleBulkSelectionOnRow,
     paginationVariant,
     RowActionsOnHoverComponent,
-    children,
 }: InternalTableProps) => {
     const rowsContainerRef = useRef<HTMLDivElement>(null)
     const parentRef = useRef<HTMLDivElement>(null)
     const activeRowRef = useRef<HTMLDivElement>(null)
+    const bulkSelectionButtonRef = useRef<HTMLButtonElement>(null)
 
-    const { BulkActionsComponent } = bulkSelectionConfig ?? {}
+    const [bulkActionState, setBulkActionState] = useState<BulkActionStateType>(null)
+
+    const {
+        BulkActionsComponent,
+        bulkActionsData = null,
+        BulkOperationModal,
+        bulkOperationModalData = null,
+    } = bulkSelectionConfig ?? {}
 
     const { showSeparatorBetweenRows = true } = stylesConfig ?? {}
 
@@ -115,7 +122,8 @@ const InternalTable = ({
 
     const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
 
-    const bulkSelectionCount = isBulkSelectionApplied && rows ? rows.length : (getSelectedIdentifiersCount?.() ?? 0)
+    const bulkSelectionCount =
+        isBulkSelectionApplied && rows ? filteredRows.length : (getSelectedIdentifiersCount?.() ?? 0)
 
     const visibleRows = useMemo(() => {
         const normalizedFilteredRows = filteredRows ?? []
@@ -128,9 +136,14 @@ const InternalTable = ({
         return paginatedRows
     }, [paginationVariant, offset, pageSize, filteredRows])
 
+    const showPagination =
+        paginationVariant === PaginationEnum.PAGINATED && filteredRows?.length > DEFAULT_BASE_PAGE_SIZE
+
     const { activeRowIndex, setActiveRowIndex } = useTableWithKeyboardShortcuts(
         { bulkSelectionConfig, bulkSelectionReturnValue, handleToggleBulkSelectionOnRow },
         visibleRows,
+        showPagination,
+        bulkSelectionButtonRef,
     )
 
     useEffectAfterMount(() => {
@@ -161,8 +174,17 @@ const InternalTable = ({
         activeRowRef.current?.focus()
     }, [activeRowIndex])
 
-    const showPagination =
-        paginationVariant === PaginationEnum.PAGINATED && filteredRows?.length > DEFAULT_BASE_PAGE_SIZE
+    const onBulkOperationModalClose = () => {
+        setBulkActionState(null)
+    }
+
+    const getBulkSelections = () => {
+        if (isBulkSelectionApplied && rows) {
+            return filteredRows
+        }
+
+        return Object.values(bulkSelectionState)
+    }
 
     const renderRows = () => {
         if (loading) {
@@ -308,7 +330,13 @@ const InternalTable = ({
                                     const isResizable = !!size?.range
 
                                     if (field === BULK_ACTION_GUTTER_LABEL) {
-                                        return <BulkSelection key={field} showPagination={showPagination} />
+                                        return (
+                                            <BulkSelection
+                                                ref={bulkSelectionButtonRef}
+                                                key={field}
+                                                showPagination={showPagination}
+                                            />
+                                        )
                                     }
 
                                     return (
@@ -344,6 +372,8 @@ const InternalTable = ({
                             handleClearBulkSelection={handleClearBulkSelection}
                             parentRef={parentRef}
                             BulkActionsComponent={BulkActionsComponent}
+                            setBulkActionState={setBulkActionState}
+                            bulkActionsData={bulkActionsData}
                         />
                     )}
                 </div>
@@ -359,7 +389,15 @@ const InternalTable = ({
                     />
                 )}
 
-                {children}
+                {bulkActionState && (
+                    <BulkOperationModal
+                        action={bulkActionState}
+                        onClose={onBulkOperationModalClose}
+                        bulkOperationModalData={bulkOperationModalData}
+                        isBulkSelectionApplied={isBulkSelectionApplied}
+                        selections={getBulkSelections()}
+                    />
+                )}
             </div>
         )
     }
diff --git a/src/Shared/Components/Table/index.ts b/src/Shared/Components/Table/index.ts
index c19e84928..a34f6bc86 100644
--- a/src/Shared/Components/Table/index.ts
+++ b/src/Shared/Components/Table/index.ts
@@ -1,5 +1,7 @@
 export { default as Table } from './Table.component'
 export type {
+    BulkActionsComponentProps as TableBulkActionsComponentProps,
+    BulkOperationModalProps as TableBulkOperationModalProps,
     CellComponentProps as TableCellComponentProps,
     Column as TableColumnType,
     TableProps,
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index 0337ee71f..affe4394e 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -1,4 +1,4 @@
-import { Dispatch, FunctionComponent, PropsWithChildren, SetStateAction } from 'react'
+import { Dispatch, FunctionComponent, MouseEvent, PropsWithChildren, SetStateAction } from 'react'
 
 import { GenericFilterEmptyStateProps } from '@Common/EmptyState/types'
 import {
@@ -120,10 +120,27 @@ export type Column = Pick<SortableTableHeaderCellProps, 'showTippyOnTruncate'> &
           }
     )
 
-type BulkSelectionConfigType = Pick<UseBulkSelectionProps<unknown>, 'getSelectAllDialogStatus'> & {
-    BulkActionsComponent: FunctionComponent<{}>
+export interface BulkActionsComponentProps {
+    onActionClick: (event: MouseEvent<HTMLButtonElement>) => void
+    bulkActionsData: unknown
 }
 
+type BulkSelectionReturnValueType = ReturnType<typeof useBulkSelection>
+
+export interface BulkOperationModalProps<T = string>
+    extends Pick<BulkSelectionReturnValueType, 'isBulkSelectionApplied'> {
+    action: T
+    onClose: () => void
+    selections: RowsType | null
+    bulkOperationModalData: unknown
+}
+
+type BulkSelectionConfigType = Pick<UseBulkSelectionProps<unknown>, 'getSelectAllDialogStatus'> & {
+    BulkActionsComponent: FunctionComponent<BulkActionsComponentProps>
+    BulkOperationModal: FunctionComponent<BulkOperationModalProps>
+} & Pick<BulkActionsComponentProps, 'bulkActionsData'> &
+    Pick<BulkOperationModalProps, 'bulkOperationModalData'>
+
 export enum PaginationEnum {
     PAGINATED = 'paginated',
     INFINITE = 'infinite',
@@ -159,109 +176,107 @@ export type ViewWrapperProps<T = FiltersTypeEnum.STATE> = PropsWithChildren<
         } & (T extends FiltersTypeEnum.URL ? Pick<UseUrlFiltersReturnType<string>, 'updateSearchParams'> : {})
 >
 
-export type InternalTableProps = PropsWithChildren<
-    Required<Pick<ConfigurableColumnsType, 'visibleColumns' | 'setVisibleColumns'>> & {
-        id: `table__${string}`
+export type InternalTableProps = Required<Pick<ConfigurableColumnsType, 'visibleColumns' | 'setVisibleColumns'>> & {
+    id: `table__${string}`
 
-        loading?: boolean
+    loading?: boolean
 
-        paginationVariant: PaginationEnum
+    paginationVariant: PaginationEnum
 
-        /**
-         * Memoize columns before passing as props.
-         *
-         * For columns from backend: initialize as empty array and set loading
-         * to true until API call completes.
-         */
-        columns: Column[]
+    /**
+     * Memoize columns before passing as props.
+     *
+     * For columns from backend: initialize as empty array and set loading
+     * to true until API call completes.
+     */
+    columns: Column[]
 
-        /** If bulk selections are not a concern omit this prop */
-        bulkSelectionConfig?: BulkSelectionConfigType
+    /** If bulk selections are not a concern omit this prop */
+    bulkSelectionConfig?: BulkSelectionConfigType
 
-        emptyStateConfig: {
-            noRowsConfig: Omit<GenericEmptyStateType, 'children'>
-            noRowsForFilterConfig?: Pick<GenericFilterEmptyStateProps, 'title' | 'subTitle'> & {
-                clearFilters: () => void
-            }
+    emptyStateConfig: {
+        noRowsConfig: Omit<GenericEmptyStateType, 'children'>
+        noRowsForFilterConfig?: Pick<GenericFilterEmptyStateProps, 'title' | 'subTitle'> & {
+            clearFilters: () => void
         }
+    }
 
-        filterData: UseFiltersReturnType | null
+    filterData: UseFiltersReturnType | null
 
-        resizableConfig: ReturnType<typeof useResizableTableConfig> | null
+    resizableConfig: ReturnType<typeof useResizableTableConfig> | null
 
-        /**
-         * Enable this to let users choose which columns to display.
-         * Example: Resource Browser > Node Listing
-         *
-         * Using the provided id for this table, we will store the user's preference in localStorage
-         */
-        areColumnsConfigurable?: boolean
+    /**
+     * Enable this to let users choose which columns to display.
+     * Example: Resource Browser > Node Listing
+     *
+     * Using the provided id for this table, we will store the user's preference in localStorage
+     */
+    areColumnsConfigurable?: boolean
 
-        additionalProps?: AdditionalProps
+    additionalProps?: AdditionalProps
 
-        /** Control the look of the table using this prop */
-        stylesConfig?: {
-            showSeparatorBetweenRows: boolean
-        }
+    /** Control the look of the table using this prop */
+    stylesConfig?: {
+        showSeparatorBetweenRows: boolean
+    }
 
-        /**
-         * Use this component to display additional content at the end of a row when it is hovered over.
-         */
-        RowActionsOnHoverComponent?: FunctionComponent<{ row: RowType }>
+    /**
+     * Use this component to display additional content at the end of a row when it is hovered over.
+     */
+    RowActionsOnHoverComponent?: FunctionComponent<{ row: RowType }>
 
-        bulkSelectionReturnValue: ReturnType<typeof useBulkSelection> | null
+    bulkSelectionReturnValue: BulkSelectionReturnValueType | null
 
-        handleClearBulkSelection: () => void
+    handleClearBulkSelection: () => void
 
-        handleToggleBulkSelectionOnRow: (row: RowType) => void
+    handleToggleBulkSelectionOnRow: (row: RowType) => void
 
-        ViewWrapper?: FunctionComponent<ViewWrapperProps>
-    } & (
-            | {
-                  /**
-                   * Direct rows data for frontend-only datasets like resource browser.
-                   */
-                  rows: RowsType
-                  /**
-                   * Use `getRows` function instead for data that needs to be fetched from backend with pagination/sorting/filtering.
-                   */
-                  getRows?: never
-              }
-            | {
-                  rows?: never
-                  /** NOTE: Sorting on frontend is only handled if rows is provided instead of getRows */
-                  getRows: (props: GetRowsProps) => Promise<RowsType>
-              }
-        ) &
-        (
-            | {
-                  filtersVariant: FiltersTypeEnum.URL
-
-                  /**
-                   * props for useUrlFilters/useStateFilters hooks
-                   */
-                  additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.URL>
-
-                  /**
-                   * This func is used to filter the rows based on filter data.
-                   * Only applicable if filtersVariant is NOT set to NONE
-                   *
-                   * If filter is only being used for sorting, then send `noop` in this prop
-                   */
-                  filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
-              }
-            | {
-                  filtersVariant: FiltersTypeEnum.STATE
-                  additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.STATE>
-                  filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
-              }
-            | {
-                  filtersVariant: FiltersTypeEnum.NONE
-                  additionalFilterProps?: never
-                  filter?: never
-              }
-        )
->
+    ViewWrapper?: FunctionComponent<ViewWrapperProps>
+} & (
+        | {
+              /**
+               * Direct rows data for frontend-only datasets like resource browser.
+               */
+              rows: RowsType
+              /**
+               * Use `getRows` function instead for data that needs to be fetched from backend with pagination/sorting/filtering.
+               */
+              getRows?: never
+          }
+        | {
+              rows?: never
+              /** NOTE: Sorting on frontend is only handled if rows is provided instead of getRows */
+              getRows: (props: GetRowsProps) => Promise<RowsType>
+          }
+    ) &
+    (
+        | {
+              filtersVariant: FiltersTypeEnum.URL
+
+              /**
+               * props for useUrlFilters/useStateFilters hooks
+               */
+              additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.URL>
+
+              /**
+               * This func is used to filter the rows based on filter data.
+               * Only applicable if filtersVariant is NOT set to NONE
+               *
+               * If filter is only being used for sorting, then send `noop` in this prop
+               */
+              filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
+          }
+        | {
+              filtersVariant: FiltersTypeEnum.STATE
+              additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.STATE>
+              filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
+          }
+        | {
+              filtersVariant: FiltersTypeEnum.NONE
+              additionalFilterProps?: never
+              filter?: never
+          }
+    )
 
 export type UseResizableTableConfigWrapperProps = Omit<InternalTableProps, 'resizableConfig'>
 
@@ -292,13 +307,17 @@ export type TableProps = Pick<
     | 'RowActionsOnHoverComponent'
     | 'loading'
     | 'ViewWrapper'
-    | 'children'
 >
 
-export interface BulkSelectionActionWidgetProps extends Pick<BulkSelectionConfigType, 'BulkActionsComponent'> {
+export type BulkActionStateType = string | null
+
+export interface BulkSelectionActionWidgetProps
+    extends Pick<BulkSelectionConfigType, 'BulkActionsComponent' | 'bulkActionsData'> {
     count: number
     handleClearBulkSelection: () => void
     parentRef: React.RefObject<HTMLDivElement>
+    /** If it is null, we can say no bulk action has been selected yet */
+    setBulkActionState: Dispatch<SetStateAction<BulkActionStateType>>
 }
 
 export type ConfigurableColumnsConfigType = Record<string, ConfigurableColumnsType['visibleColumns']>
diff --git a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
index d618b6cc3..afb1117bf 100644
--- a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
+++ b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
@@ -14,6 +14,8 @@ const useTableWithKeyboardShortcuts = (
         bulkSelectionReturnValue,
     }: Pick<InternalTableProps, 'bulkSelectionConfig' | 'bulkSelectionReturnValue' | 'handleToggleBulkSelectionOnRow'>,
     visibleRows: RowsType,
+    showPagination: boolean,
+    bulkSelectionButtonRef: React.RefObject<HTMLButtonElement>,
 ) => {
     const isBulkSelectionConfigured = !!bulkSelectionConfig
 
@@ -150,6 +152,20 @@ const useTableWithKeyboardShortcuts = (
             },
         })
 
+        registerShortcut({
+            keys: ['Control', 'A'],
+            callback: () => {
+                if (showPagination) {
+                    bulkSelectionButtonRef.current?.click()
+                    return
+                }
+
+                handleBulkSelection({
+                    action: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+                })
+            },
+        })
+
         registerShortcut({
             keys: ['Shift', 'ArrowUp'],
             callback: () => {
@@ -186,6 +202,7 @@ const useTableWithKeyboardShortcuts = (
             unregisterShortcut(['Shift', 'ArrowUp'])
             unregisterShortcut(['Shift', 'ArrowDown'])
             unregisterShortcut(['X'])
+            unregisterShortcut(['Control', 'A'])
         }
     }, [
         getMoveFocusToNextRowHandler,
@@ -193,6 +210,8 @@ const useTableWithKeyboardShortcuts = (
         activeRowIndex,
         visibleRows,
         handleToggleBulkSelectionOnRow,
+        handleBulkSelection,
+        showPagination,
     ])
 
     return {

From cf594e386378ddb7f23b6d61ed8f016efdc1f8d7 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 21 May 2025 12:48:45 +0530
Subject: [PATCH 07/25] fix: sticky columns in table

---
 src/Shared/Components/Table/InternalTable.tsx | 192 +++++++++++-------
 src/Shared/Components/Table/styles.scss       |  20 +-
 src/Shared/Components/Table/utils.ts          |  16 ++
 3 files changed, 151 insertions(+), 77 deletions(-)

diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index dd95e3589..9a6c33e00 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -18,7 +18,7 @@ import BulkSelectionActionWidget from './BulkSelectionActionWidget'
 import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, NO_ROWS_OR_GET_ROWS_ERROR, SHIMMER_DUMMY_ARRAY } from './constants'
 import { BulkActionStateType, FiltersTypeEnum, InternalTableProps, PaginationEnum, SignalsType } from './types'
 import useTableWithKeyboardShortcuts from './useTableWithKeyboardShortcuts'
-import { getFilteringPromise, searchAndSortRows } from './utils'
+import { getFilteringPromise, getStickyColumnConfig, searchAndSortRows } from './utils'
 
 const InternalTable = ({
     filtersVariant,
@@ -238,7 +238,7 @@ const InternalTable = ({
                     key={row.id}
                     ref={isRowActive ? activeRowRef : null}
                     onClick={handleChangeActiveRowIndex}
-                    className={`dc__grid px-20 checkbox__parent-container ${
+                    className={`dc__grid px-20 dc__min-width-fit-content checkbox__parent-container ${
                         showSeparatorBetweenRows ? 'border__secondary--bottom' : ''
                     } fs-13 fw-4 lh-20 cn-9 generic-table__row dc__gap-16 ${
                         isRowActive ? 'generic-table__row--active checkbox__parent-container--active' : ''
@@ -252,37 +252,48 @@ const InternalTable = ({
                     // NOTE: by giving it a negative tabIndex we can programmatically focus it through .focus()
                     tabIndex={-1}
                 >
-                    {visibleColumns.map(({ field, CellComponent }) => {
-                        if (field === BULK_ACTION_GUTTER_LABEL) {
+                    {visibleColumns.map(({ field, horizontallySticky: isStickyColumn, CellComponent }, index) => {
+                        const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
+                        const horizontallySticky = isStickyColumn || isBulkActionGutter
+                        const { className: stickyClassName = '', left: stickyLeftValue = '' } = horizontallySticky
+                            ? getStickyColumnConfig(gridTemplateColumns, index)
+                            : {}
+
+                        if (isBulkActionGutter) {
                             return (
-                                <Checkbox
+                                <div
+                                    className={`flex ${stickyClassName}`}
+                                    style={{ left: stickyLeftValue }}
                                     key={field}
-                                    isChecked={isRowBulkSelected}
-                                    onChange={handleToggleBulkSelectionForRow}
-                                    rootClassName="mb-0"
-                                    value={CHECKBOX_VALUE.CHECKED}
-                                />
-                            )
-                        }
-
-                        if (CellComponent) {
-                            return (
-                                <CellComponent
-                                    field={field}
-                                    value={row.data[field]}
-                                    signals={EVENT_TARGET as SignalsType}
-                                    row={row}
-                                    filterData={filterData as any}
-                                    isRowActive={isRowActive}
-                                    {...additionalProps}
-                                />
+                                >
+                                    <Checkbox
+                                        isChecked={isRowBulkSelected}
+                                        onChange={handleToggleBulkSelectionForRow}
+                                        rootClassName="mb-0"
+                                        value={CHECKBOX_VALUE.CHECKED}
+                                    />
+                                </div>
                             )
                         }
 
                         return (
-                            <span key={field} className="py-12">
-                                {row.data[field]}
-                            </span>
+                            <div className={`${stickyClassName}`} style={{ left: stickyLeftValue }} key={field}>
+                                {CellComponent ? (
+                                    <CellComponent
+                                        field={field}
+                                        value={row.data[field]}
+                                        signals={EVENT_TARGET as SignalsType}
+                                        row={row}
+                                        filterData={filterData as any}
+                                        isRowActive={isRowActive}
+                                        {...additionalProps}
+                                    />
+                                ) : (
+                                    <span key={field} className="py-12">
+                                        {row.data[field]}
+                                    </span>
+                                )}
+                            </div>
                         )
                     })}
 
@@ -311,58 +322,87 @@ const InternalTable = ({
 
         return (
             <div tabIndex={0} role="grid" className="generic-table flexbox-col dc__overflow-hidden flex-grow-1">
-                <div className="flexbox-col flex-grow-1 w-100 dc__overflow-auto" ref={parentRef}>
-                    <div className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom">
-                        {loading ? (
-                            <div className="flexbox py-12 dc__gap-16">
-                                {SHIMMER_DUMMY_ARRAY.map((label) => (
-                                    <div key={label} className="shimmer w-180" />
-                                ))}
-                            </div>
-                        ) : (
-                            <div
-                                className="dc__grid fw-6 cn-7 fs-12 lh-20 py-8 dc__gap-16"
-                                style={{
-                                    gridTemplateColumns,
-                                }}
-                            >
-                                {visibleColumns.map(({ label, field, isSortable, size, showTippyOnTruncate }) => {
-                                    const isResizable = !!size?.range
-
-                                    if (field === BULK_ACTION_GUTTER_LABEL) {
-                                        return (
-                                            <BulkSelection
-                                                ref={bulkSelectionButtonRef}
-                                                key={field}
-                                                showPagination={showPagination}
-                                            />
-                                        )
-                                    }
-
-                                    return (
-                                        <SortableTableHeaderCell
-                                            key={field}
-                                            title={label}
-                                            isSortable={!!isSortable}
-                                            sortOrder={sortOrder}
-                                            isSorted={sortBy === field}
-                                            triggerSorting={getTriggerSortingHandler(field)}
-                                            showTippyOnTruncate={showTippyOnTruncate}
-                                            disabled={areFilteredRowsLoading}
-                                            {...(isResizable
-                                                ? { isResizable, handleResize, id: label }
-                                                : { isResizable: false })}
-                                        />
-                                    )
-                                })}
-                            </div>
-                        )}
-                    </div>
-
+                <div className="flexbox-col flex-grow-1 w-100 dc__overflow-hidden" ref={parentRef}>
                     <div
                         ref={rowsContainerRef}
-                        className="flex-grow-1 flexbox-col dc__min-width-fit-content dc__overflow-auto"
+                        className={`flex-grow-1 flexbox-col dc__overflow-auto ${rowsContainerRef.current?.scrollLeft > 0}`}
                     >
+                        <div className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0">
+                            {loading ? (
+                                <div className="flexbox py-12 dc__gap-16">
+                                    {SHIMMER_DUMMY_ARRAY.map((label) => (
+                                        <div key={label} className="shimmer w-180" />
+                                    ))}
+                                </div>
+                            ) : (
+                                <div
+                                    className="dc__grid fw-6 cn-7 fs-12 lh-20 py-8 dc__gap-16"
+                                    style={{
+                                        gridTemplateColumns,
+                                    }}
+                                >
+                                    {visibleColumns.map(
+                                        (
+                                            {
+                                                label,
+                                                field,
+                                                isSortable,
+                                                size,
+                                                showTippyOnTruncate,
+                                                horizontallySticky: isStickyColumn,
+                                            },
+                                            index,
+                                        ) => {
+                                            const isResizable = !!size?.range
+                                            const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
+                                            const horizontallySticky = isStickyColumn || isBulkActionGutter
+                                            const { className: stickyClassName = '', left: stickyLeftValue = '' } =
+                                                horizontallySticky
+                                                    ? getStickyColumnConfig(gridTemplateColumns, index)
+                                                    : {}
+
+                                            if (field === BULK_ACTION_GUTTER_LABEL) {
+                                                return (
+                                                    <div
+                                                        className={`flex ${stickyClassName}`}
+                                                        style={{ left: stickyLeftValue }}
+                                                        key={field}
+                                                    >
+                                                        <BulkSelection
+                                                            ref={bulkSelectionButtonRef}
+                                                            key={field}
+                                                            showPagination={showPagination}
+                                                        />
+                                                    </div>
+                                                )
+                                            }
+
+                                            return (
+                                                <div
+                                                    className={`${stickyClassName}`}
+                                                    style={{ left: stickyLeftValue }}
+                                                    key={field}
+                                                >
+                                                    <SortableTableHeaderCell
+                                                        key={field}
+                                                        title={label}
+                                                        isSortable={!!isSortable}
+                                                        sortOrder={sortOrder}
+                                                        isSorted={sortBy === field}
+                                                        triggerSorting={getTriggerSortingHandler(field)}
+                                                        showTippyOnTruncate={showTippyOnTruncate}
+                                                        disabled={areFilteredRowsLoading}
+                                                        {...(isResizable
+                                                            ? { isResizable, handleResize, id: label }
+                                                            : { isResizable: false })}
+                                                    />
+                                                </div>
+                                            )
+                                        },
+                                    )}
+                                </div>
+                            )}
+                        </div>
                         {renderRows()}
                     </div>
 
diff --git a/src/Shared/Components/Table/styles.scss b/src/Shared/Components/Table/styles.scss
index 171cf26fd..edf1b5507 100644
--- a/src/Shared/Components/Table/styles.scss
+++ b/src/Shared/Components/Table/styles.scss
@@ -1,4 +1,22 @@
 .generic-table {
+    &__cell--sticky {
+        background-color: var(--bg-primary);
+
+        &::before {
+            position: absolute;
+            content: '';
+            left: -16px;
+            width: 16px;
+            height: 100%;
+            background-color: inherit;
+        }
+
+        &:first-of-type::before {
+            left: -20px;
+            width: 20px;
+        }
+    }
+
     &__row {
         &:focus {
             outline: none;
@@ -23,4 +41,4 @@
             background-color: var(--B100);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/Shared/Components/Table/utils.ts b/src/Shared/Components/Table/utils.ts
index 4095c3ae2..5d156b235 100644
--- a/src/Shared/Components/Table/utils.ts
+++ b/src/Shared/Components/Table/utils.ts
@@ -118,3 +118,19 @@ export const getFilteringPromise = ({ searchSortTimeoutRef, callback }: GetFilte
             searchSortTimeoutRef.current = -1
         }, SEARCH_SORT_CHANGE_DEBOUNCE_TIME)
     })
+
+export const getStickyColumnConfig = (gridTemplateColumns: string, columnIndex: number) => ({
+    className: 'dc__position-sticky dc__zi-1 generic-table__cell--sticky',
+    // NOTE: container has a padding left of 20px and the gap between columns is 16px
+    // so we want each sticky column to stick to the left of the previous column
+    left: `${
+        Number(
+            gridTemplateColumns
+                .split(' ')
+                .slice(0, columnIndex)
+                .reduce((acc, num) => acc + Number(num.split('px')[0]), 0) ?? 1,
+        ) +
+        20 +
+        16 * columnIndex
+    }px`,
+})

From a28de9bd30d9b5a231a8e24ac14e89c3ca2e6db2 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 21 May 2025 13:43:06 +0530
Subject: [PATCH 08/25] fix: loading state of table & checkbox alignment

---
 src/Shared/Components/Table/InternalTable.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 9a6c33e00..f689cdc97 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -262,7 +262,7 @@ const InternalTable = ({
                         if (isBulkActionGutter) {
                             return (
                                 <div
-                                    className={`flex ${stickyClassName}`}
+                                    className={`flexbox dc__align-items-center ${stickyClassName}`}
                                     style={{ left: stickyLeftValue }}
                                     key={field}
                                 >
@@ -330,8 +330,9 @@ const InternalTable = ({
                         <div className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0">
                             {loading ? (
                                 <div className="flexbox py-12 dc__gap-16">
+                                    {isBulkSelectionConfigured ? <div className="shimmer w-20 mr-20" /> : null}
                                     {SHIMMER_DUMMY_ARRAY.map((label) => (
-                                        <div key={label} className="shimmer w-180" />
+                                        <div key={label} className="shimmer w-200" />
                                     ))}
                                 </div>
                             ) : (

From a2ee31471d1b7f3a708b2cb47f63a62d2c0eb28f Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 21 May 2025 13:50:30 +0530
Subject: [PATCH 09/25] fix: alignment for CellComponents

---
 src/Shared/Components/Table/InternalTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index f689cdc97..ba7bce2aa 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -277,7 +277,7 @@ const InternalTable = ({
                         }
 
                         return (
-                            <div className={`${stickyClassName}`} style={{ left: stickyLeftValue }} key={field}>
+                            <div className={`${stickyClassName} flexbox`} style={{ left: stickyLeftValue }} key={field}>
                                 {CellComponent ? (
                                     <CellComponent
                                         field={field}

From 06f00590c128df219a43d8630f1c87de4f7c145f Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Tue, 27 May 2025 13:58:01 +0530
Subject: [PATCH 10/25] feat: add icons to Icon component & fix style in table

---
 src/Assets/IconV2/ic-bug.svg                  |  3 +++
 src/Assets/IconV2/ic-clean-brush.svg          |  3 +++
 src/Assets/IconV2/ic-file-code.svg            |  3 +++
 src/Assets/IconV2/ic-logs.svg                 |  3 +++
 src/Assets/IconV2/ic-pause-circle.svg         |  3 +++
 src/Assets/IconV2/ic-play-outline.svg         |  3 +++
 src/Assets/IconV2/ic-spray-can.svg            |  3 +++
 .../Components/Button/Button.component.tsx    | 25 ++++++++++++++++---
 src/Shared/Components/Button/types.ts         |  5 +++-
 src/Shared/Components/Icon/Icon.tsx           | 14 +++++++++++
 .../Components/Popover/usePopover.hook.ts     | 14 ++++++++---
 src/Shared/Components/Table/InternalTable.tsx |  8 ++++--
 src/Shared/Components/Table/styles.scss       |  5 ++++
 src/Shared/Components/Table/utils.ts          |  2 +-
 14 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 src/Assets/IconV2/ic-bug.svg
 create mode 100644 src/Assets/IconV2/ic-clean-brush.svg
 create mode 100644 src/Assets/IconV2/ic-file-code.svg
 create mode 100644 src/Assets/IconV2/ic-logs.svg
 create mode 100644 src/Assets/IconV2/ic-pause-circle.svg
 create mode 100644 src/Assets/IconV2/ic-play-outline.svg
 create mode 100644 src/Assets/IconV2/ic-spray-can.svg

diff --git a/src/Assets/IconV2/ic-bug.svg b/src/Assets/IconV2/ic-bug.svg
new file mode 100644
index 000000000..6b7544817
--- /dev/null
+++ b/src/Assets/IconV2/ic-bug.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8.00001 14C10.4853 14 12.5 11.9853 12.5 9.50001V6.5C12.5 4.01472 10.4853 2 8 2C5.51472 2 3.5 4.01472 3.5 6.5V9.50001C3.5 11.9853 5.51472 14 8.00001 14ZM8.00001 14L8 8.5M2 10.5H3.61153M2 6.5H14M12.3885 10.5H14M3.49561 1.75L4.98094 3.16303M12.4956 1.75L11.0146 3.15896" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-clean-brush.svg b/src/Assets/IconV2/ic-clean-brush.svg
new file mode 100644
index 000000000..198d53f81
--- /dev/null
+++ b/src/Assets/IconV2/ic-clean-brush.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4456 7.21004L13.4956 4.7645C13.8018 4.44416 13.9828 4.01911 13.9988 3.58285C14.0149 3.1466 13.8646 2.73488 13.5811 2.43826C13.2976 2.14165 12.9041 1.98444 12.4872 2.00122C12.0702 2.018 11.664 2.20739 11.3578 2.52773L9.02041 5.71886M11.2295 11.609L4.81604 4.89872M3.64023 9.93144L5.2436 8.25386M3.85325 14L2 14M2.66667 12L2 12M7.07047 13.5204L2.11459 8.33521C2.03727 8.25431 1.99615 8.14217 2.00028 8.02344C2.00441 7.90472 2.05345 7.78914 2.13661 7.70214L6.21274 3.43736C6.2959 3.35035 6.40637 3.29905 6.51984 3.29472C6.63331 3.2904 6.7405 3.33342 6.81782 3.41432L12.6483 9.5146C12.7256 9.59549 12.7667 9.70764 12.7626 9.82636C12.7584 9.94508 12.7094 10.0607 12.6262 10.1477L9.49075 13.4283C9.15812 13.7763 8.71626 13.9815 8.26236 13.9988C7.80847 14.0161 7.37973 13.844 7.07047 13.5204Z" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
+</svg>
\ No newline at end of file
diff --git a/src/Assets/IconV2/ic-file-code.svg b/src/Assets/IconV2/ic-file-code.svg
new file mode 100644
index 000000000..a6869d798
--- /dev/null
+++ b/src/Assets/IconV2/ic-file-code.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21h13.25a.75.75 0 0 0 .75-.75v-12M15.75 3h-9a.75.75 0 0 0-.75.75v4.125M15.75 3 21 8.25M15.75 3v5.25H21M4.96 11.714 3 14.347l1.96 2.633m4.08-5.266L11 14.347 9.04 16.98" vector-effect="non-scaling-stroke"/>
+</svg>
\ No newline at end of file
diff --git a/src/Assets/IconV2/ic-logs.svg b/src/Assets/IconV2/ic-logs.svg
new file mode 100644
index 000000000..53cac8f34
--- /dev/null
+++ b/src/Assets/IconV2/ic-logs.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.333 6a3.333 3.333 0 0 1 2.775 5.18l.03.02.057.052 1.886 1.886a.667.667 0 0 1-.885.995l-.058-.052-1.886-1.886a.671.671 0 0 1-.073-.086A3.333 3.333 0 1 1 9.333 6zm0 1.333a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-6 1.334c.367 0 .667.3.667.666C4 9.7 3.7 10 3.333 10h-.666A.669.669 0 0 1 2 9.333c0-.366.3-.666.667-.666zm2-3.334c.367 0 .667.3.667.667 0 .367-.3.667-.667.667H2.667A.669.669 0 0 1 2 6c0-.367.3-.667.667-.667zm8-3.333c.367 0 .667.3.667.667 0 .366-.3.666-.667.666H2.667A.669.669 0 0 1 2 2.667C2 2.3 2.3 2 2.667 2z" fill="#000A14" fill-rule="evenodd"/>
+</svg>
\ No newline at end of file
diff --git a/src/Assets/IconV2/ic-pause-circle.svg b/src/Assets/IconV2/ic-pause-circle.svg
new file mode 100644
index 000000000..44995c308
--- /dev/null
+++ b/src/Assets/IconV2/ic-pause-circle.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 6V10M9.5 6V10M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-play-outline.svg b/src/Assets/IconV2/ic-play-outline.svg
new file mode 100644
index 000000000..fc9212760
--- /dev/null
+++ b/src/Assets/IconV2/ic-play-outline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.639 11.36 7.14 3.111a.75.75 0 0 0-1.14.64v16.498a.75.75 0 0 0 1.141.64l13.498-8.25a.751.751 0 0 0 0-1.279Z" vector-effect="non-scaling-stroke"/>
+</svg>
\ No newline at end of file
diff --git a/src/Assets/IconV2/ic-spray-can.svg b/src/Assets/IconV2/ic-spray-can.svg
new file mode 100644
index 000000000..97842c9ce
--- /dev/null
+++ b/src/Assets/IconV2/ic-spray-can.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.322 6.826.61-1.046c.735-1.113 1.802-1.291 2.773-.736a2.001 2.001 0 0 1 .744 2.748l-.61 1.045m-.743 5.025-6.498-3.62M21 7.021h-2.11M20.565 3l-1.898 1m1.898 7.046L18.667 10m-8.45 11 4.848-8.318a3.202 3.202 0 0 0-1.189-4.396l-1.59-.91c-1.554-.888-3.541-.36-4.438 1.179L3 16.872 10.218 21Z" vector-effect="non-scaling-stroke"/>
+</svg>
\ No newline at end of file
diff --git a/src/Shared/Components/Button/Button.component.tsx b/src/Shared/Components/Button/Button.component.tsx
index 525f96440..0c0c00aca 100644
--- a/src/Shared/Components/Button/Button.component.tsx
+++ b/src/Shared/Components/Button/Button.component.tsx
@@ -34,6 +34,7 @@ const ButtonElement = ({
     buttonProps,
     onClick,
     elementRef,
+    buttonRef,
     ...props
 }: PropsWithChildren<
     Omit<
@@ -60,6 +61,24 @@ const ButtonElement = ({
     // Added the specific class to ensure that the link override is applied
     const linkOrAnchorClassName = `${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`
 
+    const refCallback = (el: HTMLButtonElement | HTMLAnchorElement) => {
+        if (!el) {
+            return
+        }
+
+        if (buttonRef) {
+            if (typeof buttonRef === 'function') {
+                buttonRef(el)
+            } else {
+                // eslint-disable-next-line no-param-reassign
+                buttonRef.current = el
+            }
+        }
+
+        // eslint-disable-next-line no-param-reassign
+        elementRef.current = el
+    }
+
     if (component === ButtonComponentType.link) {
         return (
             <Link
@@ -67,7 +86,7 @@ const ButtonElement = ({
                 {...props}
                 className={linkOrAnchorClassName}
                 onClick={onClick as ButtonProps<typeof component>['onClick']}
-                ref={elementRef as MutableRefObject<HTMLAnchorElement>}
+                ref={refCallback}
             />
         )
     }
@@ -81,7 +100,7 @@ const ButtonElement = ({
                 {...props}
                 className={linkOrAnchorClassName}
                 onClick={onClick as ButtonProps<typeof component>['onClick']}
-                ref={elementRef as MutableRefObject<HTMLAnchorElement>}
+                ref={refCallback}
             >
                 {props.children}
             </a>
@@ -95,7 +114,7 @@ const ButtonElement = ({
             // eslint-disable-next-line react/button-has-type
             type={buttonProps?.type || 'button'}
             onClick={onClick as ButtonProps<typeof component>['onClick']}
-            ref={elementRef as MutableRefObject<HTMLButtonElement>}
+            ref={refCallback}
         />
     )
 }
diff --git a/src/Shared/Components/Button/types.ts b/src/Shared/Components/Button/types.ts
index 5ed004be5..5348ee018 100644
--- a/src/Shared/Components/Button/types.ts
+++ b/src/Shared/Components/Button/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react'
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, MutableRefObject, ReactElement, RefCallback } from 'react'
 import { LinkProps } from 'react-router-dom'
 
 import { TooltipProps } from '@Common/Tooltip/types'
@@ -141,6 +141,9 @@ export type ButtonProps<ComponentType extends ButtonComponentType = ButtonCompon
          * Use from useTriggerAutoClickTimestamp hook
          */
         triggerAutoClickTimestamp?: number | null
+        buttonRef?:
+            | RefCallback<HTMLButtonElement | HTMLAnchorElement>
+            | MutableRefObject<HTMLButtonElement | HTMLAnchorElement>
     } & (
             | {
                   /**
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index 45b0fa7ef..e11a86772 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -18,6 +18,7 @@ import { ReactComponent as ICBharatpe } from '@IconsV2/ic-bharatpe.svg'
 import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg'
 import { ReactComponent as ICBookOpen } from '@IconsV2/ic-book-open.svg'
 import { ReactComponent as ICBrowser } from '@IconsV2/ic-browser.svg'
+import { ReactComponent as ICBug } from '@IconsV2/ic-bug.svg'
 import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg'
 import { ReactComponent as ICCalendar } from '@IconsV2/ic-calendar.svg'
 import { ReactComponent as ICCancelled } from '@IconsV2/ic-cancelled.svg'
@@ -33,6 +34,7 @@ import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg'
 import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg'
 import { ReactComponent as ICCiWebhook } from '@IconsV2/ic-ci-webhook.svg'
 import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg'
+import { ReactComponent as ICCleanBrush } from '@IconsV2/ic-clean-brush.svg'
 import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg'
 import { ReactComponent as ICCloseLarge } from '@IconsV2/ic-close-large.svg'
 import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg'
@@ -64,6 +66,7 @@ import { ReactComponent as ICExpandRightSm } from '@IconsV2/ic-expand-right-sm.s
 import { ReactComponent as ICExpandSm } from '@IconsV2/ic-expand-sm.svg'
 import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg'
 import { ReactComponent as ICFile } from '@IconsV2/ic-file.svg'
+import { ReactComponent as ICFileCode } from '@IconsV2/ic-file-code.svg'
 import { ReactComponent as ICFileEdit } from '@IconsV2/ic-file-edit.svg'
 import { ReactComponent as ICFileKey } from '@IconsV2/ic-file-key.svg'
 import { ReactComponent as ICFiles } from '@IconsV2/ic-files.svg'
@@ -103,6 +106,7 @@ import { ReactComponent as ICLightning } from '@IconsV2/ic-lightning.svg'
 import { ReactComponent as ICLightningFill } from '@IconsV2/ic-lightning-fill.svg'
 import { ReactComponent as ICLivspace } from '@IconsV2/ic-livspace.svg'
 import { ReactComponent as ICLogout } from '@IconsV2/ic-logout.svg'
+import { ReactComponent as ICLogs } from '@IconsV2/ic-logs.svg'
 import { ReactComponent as ICMediumDelete } from '@IconsV2/ic-medium-delete.svg'
 import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg'
 import { ReactComponent as ICMegaphoneLeft } from '@IconsV2/ic-megaphone-left.svg'
@@ -122,7 +126,9 @@ import { ReactComponent as ICOpenshift } from '@IconsV2/ic-openshift.svg'
 import { ReactComponent as ICOutOfSync } from '@IconsV2/ic-out-of-sync.svg'
 import { ReactComponent as ICPaperPlaneColor } from '@IconsV2/ic-paper-plane-color.svg'
 import { ReactComponent as ICPath } from '@IconsV2/ic-path.svg'
+import { ReactComponent as ICPauseCircle } from '@IconsV2/ic-pause-circle.svg'
 import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg'
+import { ReactComponent as ICPlayOutline } from '@IconsV2/ic-play-outline.svg'
 import { ReactComponent as ICQuay } from '@IconsV2/ic-quay.svg'
 import { ReactComponent as ICQuote } from '@IconsV2/ic-quote.svg'
 import { ReactComponent as ICRocketLaunch } from '@IconsV2/ic-rocket-launch.svg'
@@ -134,6 +140,7 @@ import { ReactComponent as ICSortDescending } from '@IconsV2/ic-sort-descending.
 import { ReactComponent as ICSortable } from '@IconsV2/ic-sortable.svg'
 import { ReactComponent as ICSparkleColor } from '@IconsV2/ic-sparkle-color.svg'
 import { ReactComponent as ICSpinny } from '@IconsV2/ic-spinny.svg'
+import { ReactComponent as ICSprayCan } from '@IconsV2/ic-spray-can.svg'
 import { ReactComponent as ICStack } from '@IconsV2/ic-stack.svg'
 import { ReactComponent as ICStamp } from '@IconsV2/ic-stamp.svg'
 import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
@@ -176,6 +183,7 @@ export const iconMap = {
     'ic-bitbucket': ICBitbucket,
     'ic-book-open': ICBookOpen,
     'ic-browser': ICBrowser,
+    'ic-bug': ICBug,
     'ic-build-color': ICBuildColor,
     'ic-calendar': ICCalendar,
     'ic-cancelled': ICCancelled,
@@ -191,6 +199,7 @@ export const iconMap = {
     'ic-ci-linked': ICCiLinked,
     'ic-ci-webhook': ICCiWebhook,
     'ic-circle-loader': ICCircleLoader,
+    'ic-clean-brush': ICCleanBrush,
     'ic-clock': ICClock,
     'ic-close-large': ICCloseLarge,
     'ic-close-small': ICCloseSmall,
@@ -221,6 +230,7 @@ export const iconMap = {
     'ic-expand-right-sm': ICExpandRightSm,
     'ic-expand-sm': ICExpandSm,
     'ic-failure': ICFailure,
+    'ic-file-code': ICFileCode,
     'ic-file-edit': ICFileEdit,
     'ic-file-key': ICFileKey,
     'ic-file': ICFile,
@@ -261,6 +271,7 @@ export const iconMap = {
     'ic-lightning': ICLightning,
     'ic-livspace': ICLivspace,
     'ic-logout': ICLogout,
+    'ic-logs': ICLogs,
     'ic-medium-delete': ICMediumDelete,
     'ic-medium-paintbucket': ICMediumPaintbucket,
     'ic-megaphone-left': ICMegaphoneLeft,
@@ -280,7 +291,9 @@ export const iconMap = {
     'ic-out-of-sync': ICOutOfSync,
     'ic-paper-plane-color': ICPaperPlaneColor,
     'ic-path': ICPath,
+    'ic-pause-circle': ICPauseCircle,
     'ic-pencil': ICPencil,
+    'ic-play-outline': ICPlayOutline,
     'ic-quay': ICQuay,
     'ic-quote': ICQuote,
     'ic-rocket-launch': ICRocketLaunch,
@@ -292,6 +305,7 @@ export const iconMap = {
     'ic-sortable': ICSortable,
     'ic-sparkle-color': ICSparkleColor,
     'ic-spinny': ICSpinny,
+    'ic-spray-can': ICSprayCan,
     'ic-stack': ICStack,
     'ic-stamp': ICStamp,
     'ic-success': ICSuccess,
diff --git a/src/Shared/Components/Popover/usePopover.hook.ts b/src/Shared/Components/Popover/usePopover.hook.ts
index d95ff93b2..75d0b8156 100644
--- a/src/Shared/Components/Popover/usePopover.hook.ts
+++ b/src/Shared/Components/Popover/usePopover.hook.ts
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react'
+import { MouseEvent, useLayoutEffect, useRef, useState } from 'react'
 
 import { UsePopoverProps, UsePopoverReturnType } from './types'
 import {
@@ -36,9 +36,17 @@ export const usePopover = ({
         onOpen?.(openState)
     }
 
-    const togglePopover = () => updateOpenState(!open)
+    const togglePopover = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        updateOpenState(!open)
+    }
 
-    const closePopover = () => updateOpenState(false)
+    const closePopover = () => {
+        updateOpenState(false)
+        const triggerButton = triggerRef.current?.querySelector('button')
+        triggerButton?.blur()
+        triggerRef.current?.blur()
+    }
 
     const handleTriggerKeyDown = (e: React.KeyboardEvent) => {
         if (!open && (e.key === 'Enter' || e.key === ' ')) {
diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index ba7bce2aa..39647d133 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -277,7 +277,11 @@ const InternalTable = ({
                         }
 
                         return (
-                            <div className={`${stickyClassName} flexbox`} style={{ left: stickyLeftValue }} key={field}>
+                            <div
+                                className={`${stickyClassName} generic-table__cell`}
+                                style={{ left: stickyLeftValue }}
+                                key={field}
+                            >
                                 {CellComponent ? (
                                     <CellComponent
                                         field={field}
@@ -298,7 +302,7 @@ const InternalTable = ({
                     })}
 
                     {RowActionsOnHoverComponent && (
-                        <div className="dc__position-fixed dc__left-0 dc__zi-1 dc__opacity-hover--child">
+                        <div className="dc__position-fixed dc__right-0 dc__zi-1 dc__opacity-hover--child">
                             <RowActionsOnHoverComponent row={row} />
                         </div>
                     )}
diff --git a/src/Shared/Components/Table/styles.scss b/src/Shared/Components/Table/styles.scss
index edf1b5507..6487b9800 100644
--- a/src/Shared/Components/Table/styles.scss
+++ b/src/Shared/Components/Table/styles.scss
@@ -1,4 +1,9 @@
 .generic-table {
+    &__cell > * {
+        height: 100%;
+        width: 100%;
+    }
+
     &__cell--sticky {
         background-color: var(--bg-primary);
 
diff --git a/src/Shared/Components/Table/utils.ts b/src/Shared/Components/Table/utils.ts
index 5d156b235..ae5f87d6d 100644
--- a/src/Shared/Components/Table/utils.ts
+++ b/src/Shared/Components/Table/utils.ts
@@ -120,7 +120,7 @@ export const getFilteringPromise = ({ searchSortTimeoutRef, callback }: GetFilte
     })
 
 export const getStickyColumnConfig = (gridTemplateColumns: string, columnIndex: number) => ({
-    className: 'dc__position-sticky dc__zi-1 generic-table__cell--sticky',
+    className: `dc__position-sticky dc__zi-1 generic-table__cell--sticky`,
     // NOTE: container has a padding left of 20px and the gap between columns is 16px
     // so we want each sticky column to stick to the left of the previous column
     left: `${

From 53d3548208094cb4d0af631db318e39494cf2cc4 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 28 May 2025 15:55:36 +0530
Subject: [PATCH 11/25] fix: uat changes

---
 src/Common/Hooks/UseRegisterShortcut/types.ts |  1 +
 src/Common/Hooks/useStateFilters/types.ts     |  5 +-
 .../Hooks/useStateFilters/useStateFilters.tsx |  5 +-
 src/Common/Hooks/useUrlFilters/types.ts       |  3 +-
 .../Hooks/useUrlFilters/useUrlFilters.ts      |  5 +-
 src/Common/Pagination/PageSizeSelector.tsx    |  2 +-
 .../SortableTableHeaderCell.tsx               |  4 +-
 .../sortableTableHeaderCell.scss              |  4 ++
 src/Shared/Components/Table/InternalTable.tsx | 70 ++++++++++++++-----
 .../Components/Table/Table.component.tsx      |  2 +-
 src/Shared/Components/Table/styles.scss       | 10 +++
 src/Shared/Components/Table/types.ts          | 18 +++--
 src/Shared/Components/Table/utils.ts          | 31 +++++++-
 13 files changed, 126 insertions(+), 34 deletions(-)

diff --git a/src/Common/Hooks/UseRegisterShortcut/types.ts b/src/Common/Hooks/UseRegisterShortcut/types.ts
index 4888e4056..51083b60e 100644
--- a/src/Common/Hooks/UseRegisterShortcut/types.ts
+++ b/src/Common/Hooks/UseRegisterShortcut/types.ts
@@ -28,6 +28,7 @@ export const KEYBOARD_KEYS_MAP = {
     K: 'K',
     X: 'X',
     A: 'A',
+    N: 'N',
     Escape: 'Esc',
     Enter: '↩',
     ArrowLeft: '←',
diff --git a/src/Common/Hooks/useStateFilters/types.ts b/src/Common/Hooks/useStateFilters/types.ts
index 3720c70c1..782df3344 100644
--- a/src/Common/Hooks/useStateFilters/types.ts
+++ b/src/Common/Hooks/useStateFilters/types.ts
@@ -16,7 +16,8 @@
 
 import { UseUrlFiltersProps, UseUrlFiltersReturnType } from '../useUrlFilters'
 
-export interface UseStateFiltersProps<T> extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey'> {}
+export interface UseStateFiltersProps<T>
+    extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey' | 'defaultPageSize'> {}
 
 export interface UseStateFiltersReturnType<T>
     extends Pick<
@@ -31,7 +32,7 @@ export interface UseStateFiltersReturnType<T>
         | 'pageSize'
         | 'searchKey'
         | 'handleSearch'
-        | 'isFilterApplied'
+        | 'areFiltersApplied'
     > {}
 
 export interface PaginationType<T> extends Pick<UseUrlFiltersReturnType<T>, 'pageSize'> {
diff --git a/src/Common/Hooks/useStateFilters/useStateFilters.tsx b/src/Common/Hooks/useStateFilters/useStateFilters.tsx
index 864e1b3af..485e3c7ac 100644
--- a/src/Common/Hooks/useStateFilters/useStateFilters.tsx
+++ b/src/Common/Hooks/useStateFilters/useStateFilters.tsx
@@ -35,6 +35,7 @@ import { PaginationType, UseStateFiltersProps, UseStateFiltersReturnType } from
  */
 const useStateFilters = <T = string,>({
     initialSortKey,
+    defaultPageSize = DEFAULT_BASE_PAGE_SIZE,
 }: UseStateFiltersProps<T> = {}): UseStateFiltersReturnType<T> => {
     const [sortingConfig, setSortingConfig] = useState({
         sortOrder: SortingOrder.ASC,
@@ -45,7 +46,7 @@ const useStateFilters = <T = string,>({
     const { sortBy, sortOrder } = sortingConfig
 
     const [pagination, setPagination] = useState<PaginationType<T>>({
-        pageSize: DEFAULT_BASE_PAGE_SIZE,
+        pageSize: defaultPageSize,
         pageNumber: DEFAULT_PAGE_NUMBER,
     })
     const offset = pagination.pageSize * (pagination.pageNumber - 1)
@@ -117,7 +118,7 @@ const useStateFilters = <T = string,>({
         changePage,
         changePageSize,
         offset,
-        isFilterApplied: !!searchKey,
+        areFiltersApplied: !!searchKey,
     }
 }
 
diff --git a/src/Common/Hooks/useUrlFilters/types.ts b/src/Common/Hooks/useUrlFilters/types.ts
index 46beb8a00..57c6ea50c 100644
--- a/src/Common/Hooks/useUrlFilters/types.ts
+++ b/src/Common/Hooks/useUrlFilters/types.ts
@@ -35,6 +35,7 @@ export interface UseUrlFiltersProps<T, K extends {}> {
      * @default 'replace'
      */
     redirectionMethod?: 'replace' | 'push'
+    defaultPageSize?: number
 }
 
 export type UpdateSearchParamsOptionsType<T, K = {}> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>
@@ -86,5 +87,5 @@ export type UseUrlFiltersReturnType<T, K = {}> = K & {
      * Update the search params with the passed object
      */
     updateSearchParams: (paramsToSerialize: Partial<K>, options?: UpdateSearchParamsOptionsType<T, K>) => void
-    isFilterApplied: boolean
+    areFiltersApplied: boolean
 }
diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts
index 85e9acb75..b502e4833 100644
--- a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts
+++ b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts
@@ -49,6 +49,7 @@ const useUrlFilters = <T = string, K = {}>({
     parseSearchParams,
     localStorageKey,
     redirectionMethod = 'replace',
+    defaultPageSize = DEFAULT_BASE_PAGE_SIZE,
 }: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
@@ -108,7 +109,7 @@ const useUrlFilters = <T = string, K = {}>({
         const _parsedParams = getParsedSearchParams(searchParams)
 
         return {
-            pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
+            pageSize: Number(_pageSize) || defaultPageSize,
             pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
             searchKey: _searchKey || '',
             sortBy: sortByKey,
@@ -223,7 +224,7 @@ const useUrlFilters = <T = string, K = {}>({
         clearFilters,
         ...parsedParams,
         updateSearchParams,
-        isFilterApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams),
+        areFiltersApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams),
     }
 }
 
diff --git a/src/Common/Pagination/PageSizeSelector.tsx b/src/Common/Pagination/PageSizeSelector.tsx
index 4b9108e54..bf7c0093f 100644
--- a/src/Common/Pagination/PageSizeSelector.tsx
+++ b/src/Common/Pagination/PageSizeSelector.tsx
@@ -82,7 +82,7 @@ const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSiz
                 </div>
             )}
 
-            <button type="button" className="select__button" onClick={handleDropdownToggle}>
+            <button type="button" className="select__button flexbox" onClick={handleDropdownToggle}>
                 <span>{selectedOption ? selectedOption.value : ''}</span>
                 <span className="select__icon">
                     <i className={font} />
diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx
index 621aca797..d1ef75b28 100644
--- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx
+++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx
@@ -95,7 +95,9 @@ const SortableTableHeaderCell = ({
 
     return (
         // Added w-100, h-100 when isResizable is true to ensure the cell takes full dimensions in wrapper flex layout (if any)
-        <div className={`flex dc__content-space dc__gap-6 dc__position-rel ${isResizable ? 'w-100 h-100' : ''}`}>
+        <div
+            className={`flex dc__content-space dc__gap-6 dc__position-rel ${isResizable ? 'w-100 h-100 sortable-table-header__container' : ''}`}
+        >
             <button
                 type="button"
                 className={`dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text ${!isSortable ? 'cursor-default' : ''} dc__position-rel`}
diff --git a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
index f5f8a2ae7..edbaf7d3c 100644
--- a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
+++ b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
@@ -15,6 +15,10 @@
  */
 
 .sortable-table-header {
+    &__container > :first-child {
+        margin-right: 6px;
+    }
+
     &__resize-btn {
         > div {
             transition: all 0.1s ease-out;
diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 39647d133..e4d196704 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -18,7 +18,12 @@ import BulkSelectionActionWidget from './BulkSelectionActionWidget'
 import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, NO_ROWS_OR_GET_ROWS_ERROR, SHIMMER_DUMMY_ARRAY } from './constants'
 import { BulkActionStateType, FiltersTypeEnum, InternalTableProps, PaginationEnum, SignalsType } from './types'
 import useTableWithKeyboardShortcuts from './useTableWithKeyboardShortcuts'
-import { getFilteringPromise, getStickyColumnConfig, searchAndSortRows } from './utils'
+import {
+    getFilteringPromise,
+    getStickyColumnConfig,
+    scrollToShowActiveElementIfNeeded,
+    searchAndSortRows,
+} from './utils'
 
 const InternalTable = ({
     filtersVariant,
@@ -42,13 +47,16 @@ const InternalTable = ({
     handleToggleBulkSelectionOnRow,
     paginationVariant,
     RowActionsOnHoverComponent,
+    pageSizeOptions,
 }: InternalTableProps) => {
     const rowsContainerRef = useRef<HTMLDivElement>(null)
     const parentRef = useRef<HTMLDivElement>(null)
     const activeRowRef = useRef<HTMLDivElement>(null)
     const bulkSelectionButtonRef = useRef<HTMLButtonElement>(null)
+    const headerRef = useRef<HTMLDivElement>(null)
 
     const [bulkActionState, setBulkActionState] = useState<BulkActionStateType>(null)
+    const [showBorderRightOnStickyElements, setShowBorderRightOnStickyElements] = useState(false)
 
     const {
         BulkActionsComponent,
@@ -69,7 +77,7 @@ const InternalTable = ({
         changePage,
         changePageSize,
         clearFilters,
-        isFilterApplied,
+        areFiltersApplied,
         // Destructuring specific filters, grouping the rest with the rest operator
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         handleSearch,
@@ -94,12 +102,24 @@ const InternalTable = ({
 
     const searchSortTimeoutRef = useRef<number>(-1)
 
-    useEffect(
-        () => () => {
+    useEffect(() => {
+        const scrollEventHandler = () => {
+            setShowBorderRightOnStickyElements(rowsContainerRef.current?.scrollLeft > 0)
+        }
+
+        const preventScrollByKeyboard = (event: KeyboardEvent) => {
+            if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                event.preventDefault()
+            }
+        }
+
+        rowsContainerRef.current.addEventListener('scroll', scrollEventHandler)
+        rowsContainerRef.current.addEventListener('keydown', preventScrollByKeyboard)
+
+        return () => {
             clearTimeout(searchSortTimeoutRef.current)
-        },
-        [],
-    )
+        }
+    }, [])
 
     const [_areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
         if (!rows && !getRows) {
@@ -148,6 +168,12 @@ const InternalTable = ({
 
     useEffectAfterMount(() => {
         setActiveRowIndex(0)
+        activeRowRef.current?.focus({ preventScroll: true })
+        scrollToShowActiveElementIfNeeded(
+            activeRowRef.current,
+            rowsContainerRef.current,
+            headerRef.current.offsetHeight,
+        )
     }, [offset, visibleRows])
 
     useEffect(() => {
@@ -171,7 +197,12 @@ const InternalTable = ({
         // with loading shimmers, causing activeRowRef to be null. During this time, activeRowIndex might reset to 0, but focus
         // will not shift. However, when navigating with arrow keys, activeRowIndex changes, and activeRowRef will point to the
         // correct row once it is mounted, allowing focus to update appropriately.
-        activeRowRef.current?.focus()
+        activeRowRef.current?.focus({ preventScroll: true })
+        scrollToShowActiveElementIfNeeded(
+            activeRowRef.current,
+            rowsContainerRef.current,
+            headerRef.current.offsetHeight,
+        )
     }, [activeRowIndex])
 
     const onBulkOperationModalClose = () => {
@@ -193,7 +224,7 @@ const InternalTable = ({
                     key={shimmerRowLabel}
                     className={`px-20 flexbox py-12 dc__gap-16 ${showSeparatorBetweenRows ? 'border__secondary--bottom' : ''}`}
                 >
-                    {isBulkSelectionConfigured ? <div className="shimmer w-20 mr-20" /> : null}
+                    {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
                     {SHIMMER_DUMMY_ARRAY.map((shimmerCellLabel) => (
                         <div key={shimmerCellLabel} className="shimmer w-200" />
                     ))}
@@ -210,11 +241,9 @@ const InternalTable = ({
                         gridTemplateColumns,
                     }}
                 >
-                    {visibleColumns.map(({ label, field }) => (
-                        <div key={label} className="pr-6 py-12 flex" aria-label="Loading...">
-                            <div
-                                className={`shimmer h-16 ${field === BULK_ACTION_GUTTER_LABEL ? 'w-20 mr-6' : 'w-100'}`}
-                            />
+                    {visibleColumns.map(({ label }) => (
+                        <div key={label} className="py-12 flex" aria-label="Loading...">
+                            <div className="shimmer h-16 w-100" />
                         </div>
                     ))}
                 </div>
@@ -317,7 +346,7 @@ const InternalTable = ({
         }
 
         if (!areFilteredRowsLoading && !filteredRows?.length && !loading) {
-            return filtersVariant !== FiltersTypeEnum.NONE && isFilterApplied ? (
+            return filtersVariant !== FiltersTypeEnum.NONE && areFiltersApplied ? (
                 <GenericFilterEmptyState handleClearFilters={clearFilters} />
             ) : (
                 <GenericEmptyState {...emptyStateConfig.noRowsConfig} />
@@ -329,12 +358,15 @@ const InternalTable = ({
                 <div className="flexbox-col flex-grow-1 w-100 dc__overflow-hidden" ref={parentRef}>
                     <div
                         ref={rowsContainerRef}
-                        className={`flex-grow-1 flexbox-col dc__overflow-auto ${rowsContainerRef.current?.scrollLeft > 0}`}
+                        className={`flex-grow-1 flexbox-col dc__overflow-auto ${showBorderRightOnStickyElements ? 'generic-table--scrolled' : ''}`}
                     >
-                        <div className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0">
+                        <div
+                            ref={headerRef}
+                            className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0"
+                        >
                             {loading ? (
                                 <div className="flexbox py-12 dc__gap-16">
-                                    {isBulkSelectionConfigured ? <div className="shimmer w-20 mr-20" /> : null}
+                                    {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
                                     {SHIMMER_DUMMY_ARRAY.map((label) => (
                                         <div key={label} className="shimmer w-200" />
                                     ))}
@@ -377,6 +409,7 @@ const InternalTable = ({
                                                             ref={bulkSelectionButtonRef}
                                                             key={field}
                                                             showPagination={showPagination}
+                                                            showChevronDownIcon={false}
                                                         />
                                                     </div>
                                                 )
@@ -431,6 +464,7 @@ const InternalTable = ({
                         offset={offset}
                         rootClassName="border__secondary--top flex dc__content-space px-20"
                         size={filteredRows.length}
+                        pageSizeOptions={pageSizeOptions}
                     />
                 )}
 
diff --git a/src/Shared/Components/Table/Table.component.tsx b/src/Shared/Components/Table/Table.component.tsx
index 8da192b5f..1ba8872b7 100644
--- a/src/Shared/Components/Table/Table.component.tsx
+++ b/src/Shared/Components/Table/Table.component.tsx
@@ -61,7 +61,7 @@ const TableWithResizableConfigWrapper = (tableProps: UseResizableTableConfigWrap
     const visibleColumns = useMemo(
         () =>
             bulkActionsConfig
-                ? [{ size: { fixed: 40 }, field: BULK_ACTION_GUTTER_LABEL }, ...columnsWithoutBulkActionGutter]
+                ? [{ size: { fixed: 20 }, field: BULK_ACTION_GUTTER_LABEL }, ...columnsWithoutBulkActionGutter]
                 : columnsWithoutBulkActionGutter,
         [!!bulkActionsConfig, columnsWithoutBulkActionGutter],
     )
diff --git a/src/Shared/Components/Table/styles.scss b/src/Shared/Components/Table/styles.scss
index 6487b9800..1473ba0f4 100644
--- a/src/Shared/Components/Table/styles.scss
+++ b/src/Shared/Components/Table/styles.scss
@@ -6,6 +6,7 @@
 
     &__cell--sticky {
         background-color: var(--bg-primary);
+        transition: box-shadow 0.1s ease-in-out;
 
         &::before {
             position: absolute;
@@ -14,6 +15,7 @@
             width: 16px;
             height: 100%;
             background-color: inherit;
+            z-index: -1;
         }
 
         &:first-of-type::before {
@@ -22,6 +24,14 @@
         }
     }
 
+    &--scrolled .generic-table__row > .generic-table__cell--sticky:not(:has(+ .generic-table__cell--sticky)) {
+        // Show a right border on the last sticky cell when the table is scrolled
+        // Using box-shadow to avoid layout issues with borders, since borders can affect the width of the cell
+        box-shadow:
+            0px 0px 0px 0px transparent,
+            1px 0px 0px 0px var(--border-primary);
+    }
+
     &__row {
         &:focus {
             outline: none;
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index affe4394e..097fa9b63 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -8,6 +8,7 @@ import {
     UseUrlFiltersReturnType,
 } from '@Common/Hooks'
 import { GenericEmptyStateType } from '@Common/index'
+import { PageSizeOption } from '@Common/Pagination/types'
 import { SortableTableHeaderCellProps, useResizableTableConfig } from '@Common/SortableTableHeaderCell'
 
 import { useBulkSelection, UseBulkSelectionProps } from '../BulkSelection'
@@ -159,9 +160,9 @@ interface GetRowsProps
 type AdditionalFilterPropsType<T extends Exclude<FiltersTypeEnum, FiltersTypeEnum.NONE>> = T extends FiltersTypeEnum.URL
     ? Pick<
           UseUrlFiltersProps<string, unknown>,
-          'parseSearchParams' | 'localStorageKey' | 'redirectionMethod' | 'initialSortKey'
+          'parseSearchParams' | 'localStorageKey' | 'redirectionMethod' | 'initialSortKey' | 'defaultPageSize'
       >
-    : Pick<UseStateFiltersProps<string>, 'initialSortKey'>
+    : Pick<UseStateFiltersProps<string>, 'initialSortKey' | 'defaultPageSize'>
 
 export type ViewWrapperProps<T = FiltersTypeEnum.STATE> = PropsWithChildren<
     (T extends FiltersTypeEnum.NONE
@@ -181,8 +182,6 @@ export type InternalTableProps = Required<Pick<ConfigurableColumnsType, 'visible
 
     loading?: boolean
 
-    paginationVariant: PaginationEnum
-
     /**
      * Memoize columns before passing as props.
      *
@@ -276,6 +275,16 @@ export type InternalTableProps = Required<Pick<ConfigurableColumnsType, 'visible
               additionalFilterProps?: never
               filter?: never
           }
+    ) &
+    (
+        | {
+              paginationVariant: PaginationEnum.PAGINATED
+              pageSizeOptions?: PageSizeOption[]
+          }
+        | {
+              paginationVariant: Omit<PaginationEnum, 'PAGINATED'>
+              pageSizeOptions?: never
+          }
     )
 
 export type UseResizableTableConfigWrapperProps = Omit<InternalTableProps, 'resizableConfig'>
@@ -307,6 +316,7 @@ export type TableProps = Pick<
     | 'RowActionsOnHoverComponent'
     | 'loading'
     | 'ViewWrapper'
+    | 'pageSizeOptions'
 >
 
 export type BulkActionStateType = string | null
diff --git a/src/Shared/Components/Table/utils.ts b/src/Shared/Components/Table/utils.ts
index ae5f87d6d..c959d87c0 100644
--- a/src/Shared/Components/Table/utils.ts
+++ b/src/Shared/Components/Table/utils.ts
@@ -23,9 +23,9 @@ export const searchAndSortRows = (
     filterData: UseFiltersReturnType,
     comparator?: Column['comparator'],
 ) => {
-    const { sortBy, sortOrder, isFilterApplied } = filterData ?? {}
+    const { sortBy, sortOrder, areFiltersApplied } = filterData ?? {}
 
-    const filteredRows = isFilterApplied ? rows.filter((row) => filter(row, filterData)) : rows
+    const filteredRows = areFiltersApplied ? rows.filter((row) => filter(row, filterData)) : rows
 
     return comparator && sortBy
         ? filteredRows.sort(
@@ -134,3 +134,30 @@ export const getStickyColumnConfig = (gridTemplateColumns: string, columnIndex:
         16 * columnIndex
     }px`,
 })
+
+export const scrollToShowActiveElementIfNeeded = (
+    activeElement: HTMLDivElement,
+    parent: HTMLDivElement,
+    topMargin: number,
+) => {
+    if (!activeElement || !parent) {
+        return
+    }
+
+    // NOTE: we can't use scrollIntoView since that will also scroll it vertically
+    // therefore we need to conditionally scroll and that too in the horizontal direction only
+    const { bottom, top } = activeElement.getBoundingClientRect()
+    const { bottom: parentBottom, top: parentTop } = parent.getBoundingClientRect()
+
+    // NOTE: please look into https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
+    // for more information what left and right pertain to
+    if (top < parentTop) {
+        // eslint-disable-next-line no-param-reassign
+        parent.scrollTop += top - parentTop - topMargin
+    }
+
+    if (bottom > parentBottom) {
+        // eslint-disable-next-line no-param-reassign
+        parent.scrollTop += bottom - parentBottom
+    }
+}

From 6fcae356b1ee02707462491cbe2d6e1ab15b2524 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 28 May 2025 17:49:14 +0530
Subject: [PATCH 12/25] fix: loading during search causes search bar focus loss

---
 src/Shared/Components/Table/InternalTable.tsx | 406 ++---------------
 src/Shared/Components/Table/TableContent.tsx  | 408 ++++++++++++++++++
 src/Shared/Components/Table/types.ts          |  22 +
 3 files changed, 463 insertions(+), 373 deletions(-)
 create mode 100644 src/Shared/Components/Table/TableContent.tsx

diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index e4d196704..d6b48626f 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -1,29 +1,12 @@
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useEffect, useMemo, useRef } from 'react'
 
-import { Checkbox } from '@Common/Checkbox'
-import { DEFAULT_BASE_PAGE_SIZE } from '@Common/Constants'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
-import {
-    CHECKBOX_VALUE,
-    GenericEmptyState,
-    GenericFilterEmptyState,
-    useAsync,
-    useEffectAfterMount,
-} from '@Common/index'
-import { Pagination } from '@Common/Pagination'
-import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
+import { GenericEmptyState, GenericFilterEmptyState, useAsync } from '@Common/index'
 
-import { BulkSelection } from '../BulkSelection'
-import BulkSelectionActionWidget from './BulkSelectionActionWidget'
-import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, NO_ROWS_OR_GET_ROWS_ERROR, SHIMMER_DUMMY_ARRAY } from './constants'
-import { BulkActionStateType, FiltersTypeEnum, InternalTableProps, PaginationEnum, SignalsType } from './types'
-import useTableWithKeyboardShortcuts from './useTableWithKeyboardShortcuts'
-import {
-    getFilteringPromise,
-    getStickyColumnConfig,
-    scrollToShowActiveElementIfNeeded,
-    searchAndSortRows,
-} from './utils'
+import { NO_ROWS_OR_GET_ROWS_ERROR } from './constants'
+import TableContent from './TableContent'
+import { FiltersTypeEnum, InternalTableProps, PaginationEnum } from './types'
+import { getFilteringPromise, searchAndSortRows } from './utils'
 
 const InternalTable = ({
     filtersVariant,
@@ -49,32 +32,17 @@ const InternalTable = ({
     RowActionsOnHoverComponent,
     pageSizeOptions,
 }: InternalTableProps) => {
-    const rowsContainerRef = useRef<HTMLDivElement>(null)
-    const parentRef = useRef<HTMLDivElement>(null)
-    const activeRowRef = useRef<HTMLDivElement>(null)
-    const bulkSelectionButtonRef = useRef<HTMLButtonElement>(null)
-    const headerRef = useRef<HTMLDivElement>(null)
-
-    const [bulkActionState, setBulkActionState] = useState<BulkActionStateType>(null)
-    const [showBorderRightOnStickyElements, setShowBorderRightOnStickyElements] = useState(false)
-
-    const {
-        BulkActionsComponent,
-        bulkActionsData = null,
-        BulkOperationModal,
-        bulkOperationModalData = null,
-    } = bulkSelectionConfig ?? {}
-
-    const { showSeparatorBetweenRows = true } = stylesConfig ?? {}
-
     const {
         sortBy,
         sortOrder,
         searchKey = '',
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         handleSorting,
         pageSize,
         offset,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         changePage,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         changePageSize,
         clearFilters,
         areFiltersApplied,
@@ -84,42 +52,16 @@ const InternalTable = ({
         ...otherFilters
     } = filterData ?? {}
 
-    const isBulkSelectionConfigured = !!bulkSelectionConfig
-
-    const {
-        selectedIdentifiers: bulkSelectionState = {},
-        isBulkSelectionApplied = false,
-        setIdentifiers,
-        getSelectedIdentifiersCount,
-    } = bulkSelectionReturnValue ?? {}
-
-    const {
-        handleResize,
-        gridTemplateColumns = visibleColumns
-            .map((column) => (typeof column.size?.fixed === 'number' ? `${column.size.fixed}px` : '1fr'))
-            .join(' '),
-    } = resizableConfig ?? {}
+    const { setIdentifiers } = bulkSelectionReturnValue ?? {}
 
     const searchSortTimeoutRef = useRef<number>(-1)
 
-    useEffect(() => {
-        const scrollEventHandler = () => {
-            setShowBorderRightOnStickyElements(rowsContainerRef.current?.scrollLeft > 0)
-        }
-
-        const preventScrollByKeyboard = (event: KeyboardEvent) => {
-            if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
-                event.preventDefault()
-            }
-        }
-
-        rowsContainerRef.current.addEventListener('scroll', scrollEventHandler)
-        rowsContainerRef.current.addEventListener('keydown', preventScrollByKeyboard)
-
-        return () => {
+    useEffect(
+        () => () => {
             clearTimeout(searchSortTimeoutRef.current)
-        }
-    }, [])
+        },
+        [],
+    )
 
     const [_areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
         if (!rows && !getRows) {
@@ -142,9 +84,6 @@ const InternalTable = ({
 
     const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
 
-    const bulkSelectionCount =
-        isBulkSelectionApplied && rows ? filteredRows.length : (getSelectedIdentifiersCount?.() ?? 0)
-
     const visibleRows = useMemo(() => {
         const normalizedFilteredRows = filteredRows ?? []
 
@@ -156,26 +95,6 @@ const InternalTable = ({
         return paginatedRows
     }, [paginationVariant, offset, pageSize, filteredRows])
 
-    const showPagination =
-        paginationVariant === PaginationEnum.PAGINATED && filteredRows?.length > DEFAULT_BASE_PAGE_SIZE
-
-    const { activeRowIndex, setActiveRowIndex } = useTableWithKeyboardShortcuts(
-        { bulkSelectionConfig, bulkSelectionReturnValue, handleToggleBulkSelectionOnRow },
-        visibleRows,
-        showPagination,
-        bulkSelectionButtonRef,
-    )
-
-    useEffectAfterMount(() => {
-        setActiveRowIndex(0)
-        activeRowRef.current?.focus({ preventScroll: true })
-        scrollToShowActiveElementIfNeeded(
-            activeRowRef.current,
-            rowsContainerRef.current,
-            headerRef.current.offsetHeight,
-        )
-    }, [offset, visibleRows])
-
     useEffect(() => {
         setIdentifiers?.(
             visibleRows.reduce((acc, row) => {
@@ -187,159 +106,6 @@ const InternalTable = ({
 
     const Wrapper = ViewWrapper ?? Fragment
 
-    const getTriggerSortingHandler = (newSortBy: string) => () => {
-        handleSorting(newSortBy)
-    }
-
-    useEffect(() => {
-        // Focus the active row only when activeRowIndex changes. This ensures that focus is not stolen from other elements,
-        // such as the search bar, when it is already focused. For example, when typing in the search bar, the rows may be replaced
-        // with loading shimmers, causing activeRowRef to be null. During this time, activeRowIndex might reset to 0, but focus
-        // will not shift. However, when navigating with arrow keys, activeRowIndex changes, and activeRowRef will point to the
-        // correct row once it is mounted, allowing focus to update appropriately.
-        activeRowRef.current?.focus({ preventScroll: true })
-        scrollToShowActiveElementIfNeeded(
-            activeRowRef.current,
-            rowsContainerRef.current,
-            headerRef.current.offsetHeight,
-        )
-    }, [activeRowIndex])
-
-    const onBulkOperationModalClose = () => {
-        setBulkActionState(null)
-    }
-
-    const getBulkSelections = () => {
-        if (isBulkSelectionApplied && rows) {
-            return filteredRows
-        }
-
-        return Object.values(bulkSelectionState)
-    }
-
-    const renderRows = () => {
-        if (loading) {
-            return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
-                <div
-                    key={shimmerRowLabel}
-                    className={`px-20 flexbox py-12 dc__gap-16 ${showSeparatorBetweenRows ? 'border__secondary--bottom' : ''}`}
-                >
-                    {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
-                    {SHIMMER_DUMMY_ARRAY.map((shimmerCellLabel) => (
-                        <div key={shimmerCellLabel} className="shimmer w-200" />
-                    ))}
-                </div>
-            ))
-        }
-
-        if (areFilteredRowsLoading) {
-            return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
-                <div
-                    key={shimmerRowLabel}
-                    className="dc__grid px-20 border__secondary--bottom dc__gap-16"
-                    style={{
-                        gridTemplateColumns,
-                    }}
-                >
-                    {visibleColumns.map(({ label }) => (
-                        <div key={label} className="py-12 flex" aria-label="Loading...">
-                            <div className="shimmer h-16 w-100" />
-                        </div>
-                    ))}
-                </div>
-            ))
-        }
-
-        return visibleRows.map((row, visibleRowIndex) => {
-            const isRowActive = activeRowIndex === visibleRowIndex
-            const isRowBulkSelected = !!bulkSelectionState[row.id] || isBulkSelectionApplied
-
-            const handleChangeActiveRowIndex = () => {
-                setActiveRowIndex(visibleRowIndex)
-            }
-
-            const handleToggleBulkSelectionForRow = () => {
-                handleToggleBulkSelectionOnRow(row)
-            }
-
-            return (
-                <div
-                    key={row.id}
-                    ref={isRowActive ? activeRowRef : null}
-                    onClick={handleChangeActiveRowIndex}
-                    className={`dc__grid px-20 dc__min-width-fit-content checkbox__parent-container ${
-                        showSeparatorBetweenRows ? 'border__secondary--bottom' : ''
-                    } fs-13 fw-4 lh-20 cn-9 generic-table__row dc__gap-16 ${
-                        isRowActive ? 'generic-table__row--active checkbox__parent-container--active' : ''
-                    } ${RowActionsOnHoverComponent ? 'dc__position-rel dc__opacity-hover dc__opacity-hover--parent' : ''} ${
-                        isRowBulkSelected ? 'generic-table__row--bulk-selected' : ''
-                    }`}
-                    style={{
-                        gridTemplateColumns,
-                    }}
-                    data-active={isRowActive}
-                    // NOTE: by giving it a negative tabIndex we can programmatically focus it through .focus()
-                    tabIndex={-1}
-                >
-                    {visibleColumns.map(({ field, horizontallySticky: isStickyColumn, CellComponent }, index) => {
-                        const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
-                        const horizontallySticky = isStickyColumn || isBulkActionGutter
-                        const { className: stickyClassName = '', left: stickyLeftValue = '' } = horizontallySticky
-                            ? getStickyColumnConfig(gridTemplateColumns, index)
-                            : {}
-
-                        if (isBulkActionGutter) {
-                            return (
-                                <div
-                                    className={`flexbox dc__align-items-center ${stickyClassName}`}
-                                    style={{ left: stickyLeftValue }}
-                                    key={field}
-                                >
-                                    <Checkbox
-                                        isChecked={isRowBulkSelected}
-                                        onChange={handleToggleBulkSelectionForRow}
-                                        rootClassName="mb-0"
-                                        value={CHECKBOX_VALUE.CHECKED}
-                                    />
-                                </div>
-                            )
-                        }
-
-                        return (
-                            <div
-                                className={`${stickyClassName} generic-table__cell`}
-                                style={{ left: stickyLeftValue }}
-                                key={field}
-                            >
-                                {CellComponent ? (
-                                    <CellComponent
-                                        field={field}
-                                        value={row.data[field]}
-                                        signals={EVENT_TARGET as SignalsType}
-                                        row={row}
-                                        filterData={filterData as any}
-                                        isRowActive={isRowActive}
-                                        {...additionalProps}
-                                    />
-                                ) : (
-                                    <span key={field} className="py-12">
-                                        {row.data[field]}
-                                    </span>
-                                )}
-                            </div>
-                        )
-                    })}
-
-                    {RowActionsOnHoverComponent && (
-                        <div className="dc__position-fixed dc__right-0 dc__zi-1 dc__opacity-hover--child">
-                            <RowActionsOnHoverComponent row={row} />
-                        </div>
-                    )}
-                </div>
-            )
-        })
-    }
-
     const renderContent = () => {
         if (filteredRowsError && !areFilteredRowsLoading && !loading) {
             return <ErrorScreenManager code={filteredRowsError.code} reload={reloadFilteredRows} />
@@ -354,130 +120,24 @@ const InternalTable = ({
         }
 
         return (
-            <div tabIndex={0} role="grid" className="generic-table flexbox-col dc__overflow-hidden flex-grow-1">
-                <div className="flexbox-col flex-grow-1 w-100 dc__overflow-hidden" ref={parentRef}>
-                    <div
-                        ref={rowsContainerRef}
-                        className={`flex-grow-1 flexbox-col dc__overflow-auto ${showBorderRightOnStickyElements ? 'generic-table--scrolled' : ''}`}
-                    >
-                        <div
-                            ref={headerRef}
-                            className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0"
-                        >
-                            {loading ? (
-                                <div className="flexbox py-12 dc__gap-16">
-                                    {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
-                                    {SHIMMER_DUMMY_ARRAY.map((label) => (
-                                        <div key={label} className="shimmer w-200" />
-                                    ))}
-                                </div>
-                            ) : (
-                                <div
-                                    className="dc__grid fw-6 cn-7 fs-12 lh-20 py-8 dc__gap-16"
-                                    style={{
-                                        gridTemplateColumns,
-                                    }}
-                                >
-                                    {visibleColumns.map(
-                                        (
-                                            {
-                                                label,
-                                                field,
-                                                isSortable,
-                                                size,
-                                                showTippyOnTruncate,
-                                                horizontallySticky: isStickyColumn,
-                                            },
-                                            index,
-                                        ) => {
-                                            const isResizable = !!size?.range
-                                            const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
-                                            const horizontallySticky = isStickyColumn || isBulkActionGutter
-                                            const { className: stickyClassName = '', left: stickyLeftValue = '' } =
-                                                horizontallySticky
-                                                    ? getStickyColumnConfig(gridTemplateColumns, index)
-                                                    : {}
-
-                                            if (field === BULK_ACTION_GUTTER_LABEL) {
-                                                return (
-                                                    <div
-                                                        className={`flex ${stickyClassName}`}
-                                                        style={{ left: stickyLeftValue }}
-                                                        key={field}
-                                                    >
-                                                        <BulkSelection
-                                                            ref={bulkSelectionButtonRef}
-                                                            key={field}
-                                                            showPagination={showPagination}
-                                                            showChevronDownIcon={false}
-                                                        />
-                                                    </div>
-                                                )
-                                            }
-
-                                            return (
-                                                <div
-                                                    className={`${stickyClassName}`}
-                                                    style={{ left: stickyLeftValue }}
-                                                    key={field}
-                                                >
-                                                    <SortableTableHeaderCell
-                                                        key={field}
-                                                        title={label}
-                                                        isSortable={!!isSortable}
-                                                        sortOrder={sortOrder}
-                                                        isSorted={sortBy === field}
-                                                        triggerSorting={getTriggerSortingHandler(field)}
-                                                        showTippyOnTruncate={showTippyOnTruncate}
-                                                        disabled={areFilteredRowsLoading}
-                                                        {...(isResizable
-                                                            ? { isResizable, handleResize, id: label }
-                                                            : { isResizable: false })}
-                                                    />
-                                                </div>
-                                            )
-                                        },
-                                    )}
-                                </div>
-                            )}
-                        </div>
-                        {renderRows()}
-                    </div>
-
-                    {!!bulkSelectionConfig && !!bulkSelectionCount && (
-                        <BulkSelectionActionWidget
-                            count={bulkSelectionCount}
-                            handleClearBulkSelection={handleClearBulkSelection}
-                            parentRef={parentRef}
-                            BulkActionsComponent={BulkActionsComponent}
-                            setBulkActionState={setBulkActionState}
-                            bulkActionsData={bulkActionsData}
-                        />
-                    )}
-                </div>
-
-                {showPagination && (
-                    <Pagination
-                        pageSize={pageSize}
-                        changePage={changePage}
-                        changePageSize={changePageSize}
-                        offset={offset}
-                        rootClassName="border__secondary--top flex dc__content-space px-20"
-                        size={filteredRows.length}
-                        pageSizeOptions={pageSizeOptions}
-                    />
-                )}
-
-                {bulkActionState && (
-                    <BulkOperationModal
-                        action={bulkActionState}
-                        onClose={onBulkOperationModalClose}
-                        bulkOperationModalData={bulkOperationModalData}
-                        isBulkSelectionApplied={isBulkSelectionApplied}
-                        selections={getBulkSelections()}
-                    />
-                )}
-            </div>
+            <TableContent
+                filteredRows={filteredRows}
+                areFilteredRowsLoading={areFilteredRowsLoading}
+                visibleColumns={visibleColumns}
+                bulkSelectionReturnValue={bulkSelectionReturnValue}
+                paginationVariant={paginationVariant}
+                resizableConfig={resizableConfig}
+                filterData={filterData}
+                handleClearBulkSelection={handleClearBulkSelection}
+                handleToggleBulkSelectionOnRow={handleToggleBulkSelectionOnRow}
+                RowActionsOnHoverComponent={RowActionsOnHoverComponent}
+                additionalProps={additionalProps}
+                bulkSelectionConfig={bulkSelectionConfig}
+                loading={loading}
+                pageSizeOptions={pageSizeOptions}
+                rows={rows}
+                stylesConfig={stylesConfig}
+            />
         )
     }
 
diff --git a/src/Shared/Components/Table/TableContent.tsx b/src/Shared/Components/Table/TableContent.tsx
new file mode 100644
index 000000000..32133157c
--- /dev/null
+++ b/src/Shared/Components/Table/TableContent.tsx
@@ -0,0 +1,408 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { Checkbox } from '@Common/Checkbox'
+import { DEFAULT_BASE_PAGE_SIZE } from '@Common/Constants'
+import { useEffectAfterMount } from '@Common/Helper'
+import { Pagination } from '@Common/Pagination'
+import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
+import { CHECKBOX_VALUE } from '@Common/Types'
+
+import { BulkSelection } from '../BulkSelection'
+import BulkSelectionActionWidget from './BulkSelectionActionWidget'
+import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, SHIMMER_DUMMY_ARRAY } from './constants'
+import { BulkActionStateType, PaginationEnum, SignalsType, TableContentProps } from './types'
+import useTableWithKeyboardShortcuts from './useTableWithKeyboardShortcuts'
+import { getStickyColumnConfig, scrollToShowActiveElementIfNeeded } from './utils'
+
+const TableContent = ({
+    filterData,
+    rows,
+    resizableConfig,
+    additionalProps,
+    visibleColumns,
+    stylesConfig,
+    loading,
+    bulkSelectionConfig,
+    bulkSelectionReturnValue,
+    handleClearBulkSelection,
+    handleToggleBulkSelectionOnRow,
+    paginationVariant,
+    RowActionsOnHoverComponent,
+    pageSizeOptions,
+    filteredRows,
+    areFilteredRowsLoading,
+}: TableContentProps) => {
+    const rowsContainerRef = useRef<HTMLDivElement>(null)
+    const parentRef = useRef<HTMLDivElement>(null)
+    const activeRowRef = useRef<HTMLDivElement>(null)
+    const bulkSelectionButtonRef = useRef<HTMLButtonElement>(null)
+    const headerRef = useRef<HTMLDivElement>(null)
+
+    const [bulkActionState, setBulkActionState] = useState<BulkActionStateType>(null)
+    const [showBorderRightOnStickyElements, setShowBorderRightOnStickyElements] = useState(false)
+
+    const {
+        BulkActionsComponent,
+        bulkActionsData = null,
+        BulkOperationModal,
+        bulkOperationModalData = null,
+    } = bulkSelectionConfig ?? {}
+
+    const { showSeparatorBetweenRows = true } = stylesConfig ?? {}
+
+    const { sortBy, sortOrder, handleSorting, pageSize, offset, changePage, changePageSize } = filterData ?? {}
+
+    const isBulkSelectionConfigured = !!bulkSelectionConfig
+
+    const {
+        selectedIdentifiers: bulkSelectionState = {},
+        isBulkSelectionApplied = false,
+        setIdentifiers,
+        getSelectedIdentifiersCount,
+    } = bulkSelectionReturnValue ?? {}
+
+    const {
+        handleResize,
+        gridTemplateColumns = visibleColumns
+            .map((column) => (typeof column.size?.fixed === 'number' ? `${column.size.fixed}px` : '1fr'))
+            .join(' '),
+    } = resizableConfig ?? {}
+
+    useEffect(() => {
+        const scrollEventHandler = () => {
+            setShowBorderRightOnStickyElements(rowsContainerRef.current?.scrollLeft > 0)
+        }
+
+        const preventScrollByKeyboard = (event: KeyboardEvent) => {
+            if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                event.preventDefault()
+            }
+        }
+
+        rowsContainerRef.current.addEventListener('scroll', scrollEventHandler)
+        rowsContainerRef.current.addEventListener('keydown', preventScrollByKeyboard)
+    }, [])
+
+    const bulkSelectionCount =
+        isBulkSelectionApplied && rows ? filteredRows.length : (getSelectedIdentifiersCount?.() ?? 0)
+
+    const visibleRows = useMemo(() => {
+        const normalizedFilteredRows = filteredRows ?? []
+
+        const paginatedRows =
+            paginationVariant !== PaginationEnum.PAGINATED
+                ? normalizedFilteredRows
+                : normalizedFilteredRows.slice(offset, offset + pageSize)
+
+        return paginatedRows
+    }, [paginationVariant, offset, pageSize, filteredRows])
+
+    const showPagination =
+        paginationVariant === PaginationEnum.PAGINATED &&
+        filteredRows?.length > (pageSizeOptions?.[0]?.value ?? DEFAULT_BASE_PAGE_SIZE)
+
+    const { activeRowIndex, setActiveRowIndex } = useTableWithKeyboardShortcuts(
+        { bulkSelectionConfig, bulkSelectionReturnValue, handleToggleBulkSelectionOnRow },
+        visibleRows,
+        showPagination,
+        bulkSelectionButtonRef,
+    )
+
+    useEffectAfterMount(() => {
+        setActiveRowIndex(0)
+        scrollToShowActiveElementIfNeeded(
+            activeRowRef.current,
+            rowsContainerRef.current,
+            headerRef.current?.offsetHeight,
+        )
+    }, [offset, visibleRows])
+
+    useEffect(() => {
+        setIdentifiers?.(
+            visibleRows.reduce((acc, row) => {
+                acc[row.id] = row
+                return acc
+            }, {}),
+        )
+    }, [visibleRows])
+
+    const getTriggerSortingHandler = (newSortBy: string) => () => {
+        handleSorting(newSortBy)
+    }
+
+    useEffect(() => {
+        // Focus the active row only when activeRowIndex changes. This ensures that focus is not stolen from other elements,
+        // such as the search bar, when it is already focused. For example, when typing in the search bar, the rows may be replaced
+        // with loading shimmers, causing activeRowRef to be null. During this time, activeRowIndex might reset to 0, but focus
+        // will not shift. However, when navigating with arrow keys, activeRowIndex changes, and activeRowRef will point to the
+        // correct row once it is mounted, allowing focus to update appropriately.
+        activeRowRef.current?.focus({ preventScroll: true })
+        scrollToShowActiveElementIfNeeded(
+            activeRowRef.current,
+            rowsContainerRef.current,
+            headerRef.current?.offsetHeight,
+        )
+    }, [activeRowIndex])
+
+    const onBulkOperationModalClose = () => {
+        setBulkActionState(null)
+    }
+
+    const getBulkSelections = () => {
+        if (isBulkSelectionApplied && rows) {
+            return filteredRows
+        }
+
+        return Object.values(bulkSelectionState)
+    }
+
+    const renderRows = () => {
+        if (loading) {
+            return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
+                <div
+                    key={shimmerRowLabel}
+                    className={`px-20 flexbox py-12 dc__gap-16 ${showSeparatorBetweenRows ? 'border__secondary--bottom' : ''}`}
+                >
+                    {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
+                    {SHIMMER_DUMMY_ARRAY.map((shimmerCellLabel) => (
+                        <div key={shimmerCellLabel} className="shimmer w-200" />
+                    ))}
+                </div>
+            ))
+        }
+
+        if (areFilteredRowsLoading) {
+            return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
+                <div
+                    key={shimmerRowLabel}
+                    className="dc__grid px-20 border__secondary--bottom dc__gap-16"
+                    style={{
+                        gridTemplateColumns,
+                    }}
+                >
+                    {visibleColumns.map(({ label }) => (
+                        <div key={label} className="py-12 flex" aria-label="Loading...">
+                            <div className="shimmer h-16 w-100" />
+                        </div>
+                    ))}
+                </div>
+            ))
+        }
+
+        return visibleRows.map((row, visibleRowIndex) => {
+            const isRowActive = activeRowIndex === visibleRowIndex
+            const isRowBulkSelected = !!bulkSelectionState[row.id] || isBulkSelectionApplied
+
+            const handleChangeActiveRowIndex = () => {
+                setActiveRowIndex(visibleRowIndex)
+            }
+
+            const handleToggleBulkSelectionForRow = () => {
+                handleToggleBulkSelectionOnRow(row)
+            }
+
+            return (
+                <div
+                    key={row.id}
+                    ref={isRowActive ? activeRowRef : null}
+                    onClick={handleChangeActiveRowIndex}
+                    className={`dc__grid px-20 dc__min-width-fit-content checkbox__parent-container ${
+                        showSeparatorBetweenRows ? 'border__secondary--bottom' : ''
+                    } fs-13 fw-4 lh-20 cn-9 generic-table__row dc__gap-16 ${
+                        isRowActive ? 'generic-table__row--active checkbox__parent-container--active' : ''
+                    } ${RowActionsOnHoverComponent ? 'dc__position-rel dc__opacity-hover dc__opacity-hover--parent' : ''} ${
+                        isRowBulkSelected ? 'generic-table__row--bulk-selected' : ''
+                    }`}
+                    style={{
+                        gridTemplateColumns,
+                    }}
+                    data-active={isRowActive}
+                    // NOTE: by giving it a negative tabIndex we can programmatically focus it through .focus()
+                    tabIndex={-1}
+                >
+                    {visibleColumns.map(({ field, horizontallySticky: isStickyColumn, CellComponent }, index) => {
+                        const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
+                        const horizontallySticky = isStickyColumn || isBulkActionGutter
+                        const { className: stickyClassName = '', left: stickyLeftValue = '' } = horizontallySticky
+                            ? getStickyColumnConfig(gridTemplateColumns, index)
+                            : {}
+
+                        if (isBulkActionGutter) {
+                            return (
+                                <div
+                                    className={`flexbox dc__align-items-center ${stickyClassName}`}
+                                    style={{ left: stickyLeftValue }}
+                                    key={field}
+                                >
+                                    <Checkbox
+                                        isChecked={isRowBulkSelected}
+                                        onChange={handleToggleBulkSelectionForRow}
+                                        rootClassName="mb-0"
+                                        value={CHECKBOX_VALUE.CHECKED}
+                                    />
+                                </div>
+                            )
+                        }
+
+                        return (
+                            <div
+                                className={`${stickyClassName} generic-table__cell`}
+                                style={{ left: stickyLeftValue }}
+                                key={field}
+                            >
+                                {CellComponent ? (
+                                    <CellComponent
+                                        field={field}
+                                        value={row.data[field]}
+                                        signals={EVENT_TARGET as SignalsType}
+                                        row={row}
+                                        filterData={filterData as any}
+                                        isRowActive={isRowActive}
+                                        {...additionalProps}
+                                    />
+                                ) : (
+                                    <span key={field} className="py-12">
+                                        {row.data[field]}
+                                    </span>
+                                )}
+                            </div>
+                        )
+                    })}
+
+                    {RowActionsOnHoverComponent && (
+                        <div className="dc__position-fixed dc__right-0 dc__zi-1 dc__opacity-hover--child">
+                            <RowActionsOnHoverComponent row={row} />
+                        </div>
+                    )}
+                </div>
+            )
+        })
+    }
+
+    return (
+        <div tabIndex={0} role="grid" className="generic-table flexbox-col dc__overflow-hidden flex-grow-1">
+            <div className="flexbox-col flex-grow-1 w-100 dc__overflow-hidden" ref={parentRef}>
+                <div
+                    ref={rowsContainerRef}
+                    className={`flex-grow-1 flexbox-col dc__overflow-auto ${showBorderRightOnStickyElements ? 'generic-table--scrolled' : ''}`}
+                >
+                    <div
+                        ref={headerRef}
+                        className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0"
+                    >
+                        {loading ? (
+                            <div className="flexbox py-12 dc__gap-16">
+                                {isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
+                                {SHIMMER_DUMMY_ARRAY.map((label) => (
+                                    <div key={label} className="shimmer w-200" />
+                                ))}
+                            </div>
+                        ) : (
+                            <div
+                                className="dc__grid fw-6 cn-7 fs-12 lh-20 py-8 dc__gap-16"
+                                style={{
+                                    gridTemplateColumns,
+                                }}
+                            >
+                                {visibleColumns.map(
+                                    (
+                                        {
+                                            label,
+                                            field,
+                                            isSortable,
+                                            size,
+                                            showTippyOnTruncate,
+                                            horizontallySticky: isStickyColumn,
+                                        },
+                                        index,
+                                    ) => {
+                                        const isResizable = !!size?.range
+                                        const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
+                                        const horizontallySticky = isStickyColumn || isBulkActionGutter
+                                        const { className: stickyClassName = '', left: stickyLeftValue = '' } =
+                                            horizontallySticky ? getStickyColumnConfig(gridTemplateColumns, index) : {}
+
+                                        if (field === BULK_ACTION_GUTTER_LABEL) {
+                                            return (
+                                                <div
+                                                    className={`flex ${stickyClassName}`}
+                                                    style={{ left: stickyLeftValue }}
+                                                    key={field}
+                                                >
+                                                    <BulkSelection
+                                                        ref={bulkSelectionButtonRef}
+                                                        key={field}
+                                                        showPagination={showPagination}
+                                                        showChevronDownIcon={false}
+                                                    />
+                                                </div>
+                                            )
+                                        }
+
+                                        return (
+                                            <div
+                                                className={`${stickyClassName}`}
+                                                style={{ left: stickyLeftValue }}
+                                                key={field}
+                                            >
+                                                <SortableTableHeaderCell
+                                                    key={field}
+                                                    title={label}
+                                                    isSortable={!!isSortable}
+                                                    sortOrder={sortOrder}
+                                                    isSorted={sortBy === field}
+                                                    triggerSorting={getTriggerSortingHandler(field)}
+                                                    showTippyOnTruncate={showTippyOnTruncate}
+                                                    disabled={areFilteredRowsLoading}
+                                                    {...(isResizable
+                                                        ? { isResizable, handleResize, id: label }
+                                                        : { isResizable: false })}
+                                                />
+                                            </div>
+                                        )
+                                    },
+                                )}
+                            </div>
+                        )}
+                    </div>
+                    {renderRows()}
+                </div>
+
+                {!!bulkSelectionConfig && !!bulkSelectionCount && (
+                    <BulkSelectionActionWidget
+                        count={bulkSelectionCount}
+                        handleClearBulkSelection={handleClearBulkSelection}
+                        parentRef={parentRef}
+                        BulkActionsComponent={BulkActionsComponent}
+                        setBulkActionState={setBulkActionState}
+                        bulkActionsData={bulkActionsData}
+                    />
+                )}
+            </div>
+
+            {showPagination && (
+                <Pagination
+                    pageSize={pageSize}
+                    changePage={changePage}
+                    changePageSize={changePageSize}
+                    offset={offset}
+                    rootClassName="border__secondary--top flex dc__content-space px-20"
+                    size={filteredRows.length}
+                    pageSizeOptions={pageSizeOptions}
+                />
+            )}
+
+            {bulkActionState && (
+                <BulkOperationModal
+                    action={bulkActionState}
+                    onClose={onBulkOperationModalClose}
+                    bulkOperationModalData={bulkOperationModalData}
+                    isBulkSelectionApplied={isBulkSelectionApplied}
+                    selections={getBulkSelections()}
+                />
+            )}
+        </div>
+    )
+}
+
+export default TableContent
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index 097fa9b63..26ca82c62 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -336,3 +336,25 @@ export interface GetFilteringPromiseProps {
     searchSortTimeoutRef: React.MutableRefObject<number>
     callback: () => Promise<RowsType> | RowsType
 }
+
+export interface TableContentProps
+    extends Pick<
+        InternalTableProps,
+        | 'filterData'
+        | 'rows'
+        | 'resizableConfig'
+        | 'additionalProps'
+        | 'visibleColumns'
+        | 'stylesConfig'
+        | 'loading'
+        | 'bulkSelectionConfig'
+        | 'bulkSelectionReturnValue'
+        | 'handleClearBulkSelection'
+        | 'handleToggleBulkSelectionOnRow'
+        | 'paginationVariant'
+        | 'RowActionsOnHoverComponent'
+        | 'pageSizeOptions'
+    > {
+    filteredRows: RowsType
+    areFilteredRowsLoading: boolean
+}

From 041865c1d127e02a3fc365457d76ed0f8a9ea0ad Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 11 Jun 2025 16:43:59 +0530
Subject: [PATCH 13/25] fix: uat changes

---
 src/Assets/IconV2/ic-check-all.svg            |   5 +
 src/Assets/IconV2/ic-check-square.svg         |   4 +
 .../BulkSelection/BulkSelection.tsx           | 104 +++++++++---------
 .../BulkSelectionDropdownItems.tsx            |  50 ---------
 src/Shared/Components/BulkSelection/types.tsx |  12 --
 src/Shared/Components/Icon/Icon.tsx           |   4 +
 .../Table/useTableWithKeyboardShortcuts.ts    |   1 +
 7 files changed, 65 insertions(+), 115 deletions(-)
 create mode 100644 src/Assets/IconV2/ic-check-all.svg
 create mode 100644 src/Assets/IconV2/ic-check-square.svg
 delete mode 100644 src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx

diff --git a/src/Assets/IconV2/ic-check-all.svg b/src/Assets/IconV2/ic-check-all.svg
new file mode 100644
index 000000000..aa0ae781a
--- /dev/null
+++ b/src/Assets/IconV2/ic-check-all.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="11.2" height="11.2" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.4667 5.86621V11.4662C15.4667 13.6754 13.6758 15.4662 11.4667 15.4662H5.8667" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.35 5.84961L6.85004 9.34945L5.10004 7.59961" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/Assets/IconV2/ic-check-square.svg b/src/Assets/IconV2/ic-check-square.svg
new file mode 100644
index 000000000..f871ba7ba
--- /dev/null
+++ b/src/Assets/IconV2/ic-check-square.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="12" height="12" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.2083 5.95801L7.12498 10.0412L5.08331 7.99967" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/Shared/Components/BulkSelection/BulkSelection.tsx b/src/Shared/Components/BulkSelection/BulkSelection.tsx
index c10d9496b..b55074a21 100644
--- a/src/Shared/Components/BulkSelection/BulkSelection.tsx
+++ b/src/Shared/Components/BulkSelection/BulkSelection.tsx
@@ -16,85 +16,83 @@
 
 import { forwardRef } from 'react'
 
-import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.svg'
-import { ReactComponent as ICCheckSquare } from '../../../Assets/Icon/ic-check-square.svg'
 import { ReactComponent as ICChevronDown } from '../../../Assets/Icon/ic-chevron-down.svg'
-import { ReactComponent as ICClose } from '../../../Assets/Icon/ic-close.svg'
-import { Checkbox, CHECKBOX_VALUE, noop, PopupMenu } from '../../../Common'
-import BulkSelectionDropdownItems from './BulkSelectionDropdownItems'
+import { Checkbox, noop } from '../../../Common'
+import { ActionMenu, ActionMenuItemType, ActionMenuProps } from '../ActionMenu'
 import { useBulkSelection } from './BulkSelectionProvider'
 import { BULK_DROPDOWN_TEST_ID, BulkSelectionOptionsLabels } from './constants'
-import { BulkSelectionDropdownItemsType, BulkSelectionEvents, BulkSelectionProps } from './types'
+import { BulkSelectionEvents, BulkSelectionProps } from './types'
 
-const BulkSelection = forwardRef(
-    ({ showPagination, disabled = false, showChevronDownIcon = true }: BulkSelectionProps, forwardedRef) => {
+const BulkSelection = forwardRef<HTMLButtonElement, BulkSelectionProps>(
+    ({ showPagination, disabled = false, showChevronDownIcon = true }, forwardedRef) => {
         const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection()
         const areOptionsSelected = getSelectedIdentifiersCount() > 0
-        const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
+        const BulkSelectionItems: ActionMenuItemType[] = [
             {
-                locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+                id: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
                 label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ON_PAGE],
-                isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.CHECKED,
-                icon: ICCheckSquare,
+                startIcon: { name: 'ic-check-square' },
             },
             ...(showPagination
                 ? [
                       {
-                          locator: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
+                          id: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
                           label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES],
-                          isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.BULK_CHECKED,
-                          icon: ICCheckAll,
-                      },
+                          startIcon: { name: 'ic-check-all' },
+                      } as ActionMenuItemType,
                   ]
                 : []),
             ...(areOptionsSelected
                 ? [
                       {
-                          locator: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
+                          id: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
                           label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
-                          isSelected: false,
-                          icon: ICClose,
-                          iconClass: 'icon-use-fill-n6',
-                      },
+                          startIcon: { name: 'ic-close-small' },
+                          type: 'negative',
+                      } as ActionMenuItemType,
                   ]
                 : []),
         ]
 
+        const onActionMenuClick: ActionMenuProps['onClick'] = (item) => {
+            handleBulkSelection({
+                action: item.id as BulkSelectionEvents,
+            })
+        }
+
         return (
-            <PopupMenu autoClose>
-                <PopupMenu.Button
-                    ref={forwardedRef}
-                    isKebab
-                    rootClassName="h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp"
-                    dataTestId={BULK_DROPDOWN_TEST_ID}
-                    disabled={disabled}
-                >
-                    <Checkbox
-                        isChecked={isChecked}
-                        onChange={noop}
-                        rootClassName="icon-dim-20 m-0"
-                        value={checkboxValue}
-                        disabled={disabled}
-                        // Ideally should be disabled but was giving issue with cursor
-                    />
+            <ActionMenu
+                id={BULK_DROPDOWN_TEST_ID}
+                onClick={onActionMenuClick}
+                position="bottom"
+                options={[
+                    {
+                        items: BulkSelectionItems,
+                    },
+                ]}
+            >
+                <div className="dc__position-rel flexbox">
+                    <div className="flexbox dc__gap-4 dc__align-items-center">
+                        <Checkbox
+                            isChecked={isChecked}
+                            onChange={noop}
+                            rootClassName="icon-dim-20 m-0"
+                            value={checkboxValue}
+                            disabled={disabled}
+                            // Ideally should be disabled but was giving issue with cursor
+                        />
 
-                    {showChevronDownIcon && <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />}
-                </PopupMenu.Button>
+                        {showChevronDownIcon && <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />}
+                    </div>
 
-                <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bg__primary flex column dc__content-start dc__align-start dc__position-abs bg__primary dc__border dc__border-radius-4-imp">
-                    {BulkSelectionItems.map((item) => (
-                        <BulkSelectionDropdownItems
-                            key={item.locator}
-                            locator={item.locator}
-                            label={item.label}
-                            isSelected={item.isSelected}
-                            icon={item.icon}
-                            handleBulkSelection={handleBulkSelection}
-                            iconClass={item.iconClass}
-                        />
-                    ))}
-                </PopupMenu.Body>
-            </PopupMenu>
+                    <button
+                        ref={forwardedRef}
+                        type="button"
+                        className="dc__position-abs dc__left-0 dc__top-0 h-100 w-100 dc__zi-1 p-0 dc__no-border dc__outline-none dc__transparent--unstyled"
+                        aria-label="Bulk selection dropdown"
+                    />
+                </div>
+            </ActionMenu>
         )
     },
 )
diff --git a/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx b/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx
deleted file mode 100644
index 322515038..000000000
--- a/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { BulkSelectionDropdownItemsProps } from './types'
-
-const BulkSelectionDropdownItems = ({
-    locator,
-    label,
-    isSelected,
-    handleBulkSelection,
-    icon: Icon,
-    iconClass,
-}: BulkSelectionDropdownItemsProps<unknown>) => {
-    const handleSelect = () => {
-        handleBulkSelection({
-            action: locator,
-        })
-    }
-
-    return (
-        <button
-            data-testid={`bulk-action-${locator}`}
-            onClick={handleSelect}
-            className={`dc__no-border dc__outline-none-imp w-100 flexbox h-32 dc__align-items-center pt-6 pr-8 pb-6 pl-8 dc__gap-8 ${
-                isSelected
-                    ? 'cb-5 bcb-1 icon-stroke-b5 fs-13 fw-6 lh-20'
-                    : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'
-            }`}
-            type="button"
-        >
-            <Icon className={`icon-dim-16 ${iconClass || ''}`} />
-            {label}
-        </button>
-    )
-}
-
-export default BulkSelectionDropdownItems
diff --git a/src/Shared/Components/BulkSelection/types.tsx b/src/Shared/Components/BulkSelection/types.tsx
index 7350a500a..13a901a9a 100644
--- a/src/Shared/Components/BulkSelection/types.tsx
+++ b/src/Shared/Components/BulkSelection/types.tsx
@@ -56,18 +56,6 @@ export interface BulkSelectionProps {
     disabled?: boolean
 }
 
-export interface BulkSelectionDropdownItemsType {
-    locator: BulkSelectionEvents
-    label: string
-    isSelected: boolean
-    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-    iconClass?: string
-}
-
-export interface BulkSelectionDropdownItemsProps<T>
-    extends BulkSelectionDropdownItemsType,
-        Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {}
-
 export enum SelectAllDialogStatus {
     OPEN = 'OPEN',
     CLOSED = 'CLOSED',
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index d9660cc5a..153aaea0e 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -33,6 +33,8 @@ import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg'
 import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots.svg'
 import { ReactComponent as ICChatCircleOnline } from '@IconsV2/ic-chat-circle-online.svg'
 import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg'
+import { ReactComponent as ICCheckAll } from '@IconsV2/ic-check-all.svg'
+import { ReactComponent as ICCheckSquare } from '@IconsV2/ic-check-square.svg'
 import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg'
 import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg'
 import { ReactComponent as ICCiWebhook } from '@IconsV2/ic-ci-webhook.svg'
@@ -227,6 +229,8 @@ export const iconMap = {
     'ic-cd': ICCd,
     'ic-chat-circle-dots': ICChatCircleDots,
     'ic-chat-circle-online': ICChatCircleOnline,
+    'ic-check-all': ICCheckAll,
+    'ic-check-square': ICCheckSquare,
     'ic-check': ICCheck,
     'ic-checks': ICChecks,
     'ic-ci-linked': ICCiLinked,
diff --git a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
index afb1117bf..91b95fff8 100644
--- a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
+++ b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
@@ -157,6 +157,7 @@ const useTableWithKeyboardShortcuts = (
             callback: () => {
                 if (showPagination) {
                     bulkSelectionButtonRef.current?.click()
+                    bulkSelectionButtonRef.current?.focus()
                     return
                 }
 

From 8ef90b31e36ff786e91d6ac3e0111b311e67e57a Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 11 Jun 2025 17:39:27 +0530
Subject: [PATCH 14/25] feat: scale resize-btn on hover

---
 src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
index edbaf7d3c..eb5d34674 100644
--- a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
+++ b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
@@ -28,6 +28,7 @@
             > div {
                 height: 100% !important;
                 background-color: var(--B500);
+                transform: scaleY(1.8);
             }
         }
     }

From 08ffe920349f580f6f702493201fbde203286ed7 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 11 Jun 2025 18:02:41 +0530
Subject: [PATCH 15/25] chore: override sortable-table-cell__resize-btn from
 table css

---
 .../SortableTableHeaderCell/sortableTableHeaderCell.scss    | 1 -
 src/Shared/Components/Table/styles.scss                     | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
index eb5d34674..edbaf7d3c 100644
--- a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
+++ b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss
@@ -28,7 +28,6 @@
             > div {
                 height: 100% !important;
                 background-color: var(--B500);
-                transform: scaleY(1.8);
             }
         }
     }
diff --git a/src/Shared/Components/Table/styles.scss b/src/Shared/Components/Table/styles.scss
index 1473ba0f4..2153d7c87 100644
--- a/src/Shared/Components/Table/styles.scss
+++ b/src/Shared/Components/Table/styles.scss
@@ -56,4 +56,10 @@
             background-color: var(--B100);
         }
     }
+
+    .sortable-table-header__resize-btn:hover {
+        > div {
+            transform: scaleY(1.8);
+        }
+    }
 }

From c8de7d5ee7c6e82dd48ef0a2fb95a3d3d6bdd406 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 18 Jun 2025 23:09:34 +0530
Subject: [PATCH 16/25] feat(css): uat

---
 src/Shared/Components/Table/InternalTable.tsx |  2 +-
 src/Shared/Components/Table/TableContent.tsx  |  2 +-
 src/Shared/Components/Table/styles.scss       | 32 ++++++++++++++-----
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index d6b48626f..53499b93c 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -80,7 +80,7 @@ const InternalTable = ({
                       )
                 : () => getRows(filterData),
         })
-    }, [searchKey, sortBy, sortOrder, rows, JSON.stringify(otherFilters)])
+    }, [searchKey, sortBy, sortOrder, rows, JSON.stringify(otherFilters), visibleColumns])
 
     const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
 
diff --git a/src/Shared/Components/Table/TableContent.tsx b/src/Shared/Components/Table/TableContent.tsx
index 32133157c..feab20fdf 100644
--- a/src/Shared/Components/Table/TableContent.tsx
+++ b/src/Shared/Components/Table/TableContent.tsx
@@ -288,7 +288,7 @@ const TableContent = ({
                 >
                     <div
                         ref={headerRef}
-                        className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0"
+                        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 ? (
                             <div className="flexbox py-12 dc__gap-16">
diff --git a/src/Shared/Components/Table/styles.scss b/src/Shared/Components/Table/styles.scss
index 2153d7c87..398f1f4bb 100644
--- a/src/Shared/Components/Table/styles.scss
+++ b/src/Shared/Components/Table/styles.scss
@@ -1,4 +1,6 @@
 .generic-table {
+    --resize-btn-scale-multiplier: 2.25;
+
     &__cell > * {
         height: 100%;
         width: 100%;
@@ -24,12 +26,22 @@
         }
     }
 
-    &--scrolled .generic-table__row > .generic-table__cell--sticky:not(:has(+ .generic-table__cell--sticky)) {
-        // Show a right border on the last sticky cell when the table is scrolled
-        // Using box-shadow to avoid layout issues with borders, since borders can affect the width of the cell
-        box-shadow:
-            0px 0px 0px 0px transparent,
-            1px 0px 0px 0px var(--border-primary);
+    &--scrolled {
+        .generic-table__header .generic-table__cell--sticky:not(:has(+ .generic-table__cell--sticky)) {
+            .sortable-table-header__resize-btn {
+                > div {
+                    transform: scaleY(var(--resize-btn-scale-multiplier));
+                }
+            }
+        }
+
+        .generic-table__row > .generic-table__cell--sticky:not(:has(+ .generic-table__cell--sticky)) {
+            // Show a right border on the last sticky cell when the table is scrolled
+            // Using box-shadow to avoid layout issues with borders, since borders can affect the width of the cell
+            box-shadow:
+                0px 0px 0px 0px transparent,
+                1px 0px 0px 0px var(--border-primary);
+        }
     }
 
     &__row {
@@ -57,9 +69,13 @@
         }
     }
 
-    .sortable-table-header__resize-btn:hover {
+    .sortable-table-header__resize-btn:hover,
+    .sortable-table-header__resize-btn--dragging {
         > div {
-            transform: scaleY(1.8);
+            // NOTE: to reuse the same scale multiplier as the header cell
+            // fixing the height to 16px which is the default height
+            height: 16px !important;
+            transform: scaleY(var(--resize-btn-scale-multiplier));
         }
     }
 }

From 306753ea0e8cf49d25874ca319fa0cfefdd8b8b6 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Fri, 20 Jun 2025 01:55:09 +0530
Subject: [PATCH 17/25] fix: scrollTo func instead of scrollToTop prop

---
 src/Shared/Components/Button/types.ts | 5 +----
 src/Shared/Components/Table/utils.ts  | 7 +++++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Shared/Components/Button/types.ts b/src/Shared/Components/Button/types.ts
index f26ea57fc..240bf10ff 100644
--- a/src/Shared/Components/Button/types.ts
+++ b/src/Shared/Components/Button/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, MutableRefObject, ReactElement, RefCallback } from 'react'
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react'
 import { LinkProps } from 'react-router-dom'
 
 import { TooltipProps } from '@Common/Tooltip/types'
@@ -141,9 +141,6 @@ export type ButtonProps<ComponentType extends ButtonComponentType = ButtonCompon
          * Use from useTriggerAutoClickTimestamp hook
          */
         triggerAutoClickTimestamp?: number | null
-        buttonRef?:
-            | RefCallback<HTMLButtonElement | HTMLAnchorElement>
-            | MutableRefObject<HTMLButtonElement | HTMLAnchorElement>
     } & (
             | {
                   /**
diff --git a/src/Shared/Components/Table/utils.ts b/src/Shared/Components/Table/utils.ts
index c959d87c0..00a852301 100644
--- a/src/Shared/Components/Table/utils.ts
+++ b/src/Shared/Components/Table/utils.ts
@@ -148,16 +148,19 @@ export const scrollToShowActiveElementIfNeeded = (
     // therefore we need to conditionally scroll and that too in the horizontal direction only
     const { bottom, top } = activeElement.getBoundingClientRect()
     const { bottom: parentBottom, top: parentTop } = parent.getBoundingClientRect()
+    let { scrollTop } = parent
 
     // NOTE: please look into https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
     // for more information what left and right pertain to
     if (top < parentTop) {
         // eslint-disable-next-line no-param-reassign
-        parent.scrollTop += top - parentTop - topMargin
+        scrollTop += top - parentTop - topMargin
     }
 
     if (bottom > parentBottom) {
         // eslint-disable-next-line no-param-reassign
-        parent.scrollTop += bottom - parentBottom
+        scrollTop += bottom - parentBottom
     }
+
+    parent.scrollTo({ top: scrollTop, behavior: 'smooth' })
 }

From d1bf390fff2bb9f179d1bb5e731a3d04ede7ceab Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Mon, 23 Jun 2025 08:40:02 +0530
Subject: [PATCH 18/25] fix: bulk select all if not paginated

---
 .../Components/BulkSelection/BulkSelection.tsx | 18 ++++++++++++++++--
 src/Shared/Components/BulkSelection/types.tsx  |  1 +
 .../Components/Table/Table.component.tsx       |  6 +++++-
 src/Shared/Components/Table/TableContent.tsx   |  1 +
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/Shared/Components/BulkSelection/BulkSelection.tsx b/src/Shared/Components/BulkSelection/BulkSelection.tsx
index b55074a21..349b484c8 100644
--- a/src/Shared/Components/BulkSelection/BulkSelection.tsx
+++ b/src/Shared/Components/BulkSelection/BulkSelection.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { forwardRef } from 'react'
+import { forwardRef, MouseEvent } from 'react'
 
 import { ReactComponent as ICChevronDown } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { Checkbox, noop } from '../../../Common'
@@ -24,7 +24,10 @@ import { BULK_DROPDOWN_TEST_ID, BulkSelectionOptionsLabels } from './constants'
 import { BulkSelectionEvents, BulkSelectionProps } from './types'
 
 const BulkSelection = forwardRef<HTMLButtonElement, BulkSelectionProps>(
-    ({ showPagination, disabled = false, showChevronDownIcon = true }, forwardedRef) => {
+    (
+        { showPagination, disabled = false, showChevronDownIcon = true, selectAllIfNotPaginated = false },
+        forwardedRef,
+    ) => {
         const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection()
         const areOptionsSelected = getSelectedIdentifiersCount() > 0
         const BulkSelectionItems: ActionMenuItemType[] = [
@@ -60,6 +63,16 @@ const BulkSelection = forwardRef<HTMLButtonElement, BulkSelectionProps>(
             })
         }
 
+        const onSinglePageSelectAll = (e: MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation()
+
+            handleBulkSelection({
+                action: areOptionsSelected
+                    ? BulkSelectionEvents.CLEAR_ALL_SELECTIONS
+                    : BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+            })
+        }
+
         return (
             <ActionMenu
                 id={BULK_DROPDOWN_TEST_ID}
@@ -90,6 +103,7 @@ const BulkSelection = forwardRef<HTMLButtonElement, BulkSelectionProps>(
                         type="button"
                         className="dc__position-abs dc__left-0 dc__top-0 h-100 w-100 dc__zi-1 p-0 dc__no-border dc__outline-none dc__transparent--unstyled"
                         aria-label="Bulk selection dropdown"
+                        onClick={selectAllIfNotPaginated && !showPagination ? onSinglePageSelectAll : noop}
                     />
                 </div>
             </ActionMenu>
diff --git a/src/Shared/Components/BulkSelection/types.tsx b/src/Shared/Components/BulkSelection/types.tsx
index 13a901a9a..5f19f1206 100644
--- a/src/Shared/Components/BulkSelection/types.tsx
+++ b/src/Shared/Components/BulkSelection/types.tsx
@@ -54,6 +54,7 @@ export interface BulkSelectionProps {
      */
     showChevronDownIcon?: boolean
     disabled?: boolean
+    selectAllIfNotPaginated?: boolean
 }
 
 export enum SelectAllDialogStatus {
diff --git a/src/Shared/Components/Table/Table.component.tsx b/src/Shared/Components/Table/Table.component.tsx
index 1ba8872b7..1fc18f462 100644
--- a/src/Shared/Components/Table/Table.component.tsx
+++ b/src/Shared/Components/Table/Table.component.tsx
@@ -203,7 +203,11 @@ const TableWrapper = (tableProps: TableProps) => {
         return <VisibleColumnsWrapper {...{ ...tableProps, filterData: null }} />
     }
 
-    return <UseRegisterShortcutProvider shortcutTimeout={50}>{renderContent()}</UseRegisterShortcutProvider>
+    return (
+        <UseRegisterShortcutProvider shortcutTimeout={50} ignoreTags={['input', 'textarea', 'select', 'button']}>
+            {renderContent()}
+        </UseRegisterShortcutProvider>
+    )
 }
 
 export default TableWrapper
diff --git a/src/Shared/Components/Table/TableContent.tsx b/src/Shared/Components/Table/TableContent.tsx
index feab20fdf..92f78025a 100644
--- a/src/Shared/Components/Table/TableContent.tsx
+++ b/src/Shared/Components/Table/TableContent.tsx
@@ -334,6 +334,7 @@ const TableContent = ({
                                                         key={field}
                                                         showPagination={showPagination}
                                                         showChevronDownIcon={false}
+                                                        selectAllIfNotPaginated
                                                     />
                                                 </div>
                                             )

From da9d3d9cd628dad01d74a80add594d49f1686d49 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Tue, 24 Jun 2025 11:08:55 +0530
Subject: [PATCH 19/25] fix: new pagination const

---
 src/Common/Pagination/constants.ts                 | 6 ++++++
 src/Common/Pagination/index.tsx                    | 1 +
 src/Pages/ResourceBrowser/ResourceBrowser.Types.ts | 4 ----
 src/Shared/Components/Table/InternalTable.tsx      | 1 +
 src/Shared/Components/Table/types.ts               | 1 +
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/Common/Pagination/constants.ts b/src/Common/Pagination/constants.ts
index 095369d79..8699fd500 100644
--- a/src/Common/Pagination/constants.ts
+++ b/src/Common/Pagination/constants.ts
@@ -20,3 +20,9 @@ export const FALLBACK_PAGE_SIZE_OPTIONS = [
     { value: 40, selected: false },
     { value: 50, selected: false },
 ]
+
+export const LARGE_PAGE_SIZE_OPTIONS = [
+    { value: 100, selected: true },
+    { value: 150, selected: false },
+    { value: 200, selected: false },
+]
diff --git a/src/Common/Pagination/index.tsx b/src/Common/Pagination/index.tsx
index c88c8594c..a51cd3184 100644
--- a/src/Common/Pagination/index.tsx
+++ b/src/Common/Pagination/index.tsx
@@ -16,5 +16,6 @@
 
 /* eslint-disable import/prefer-default-export */
 // Disabling since might need to export types as well
+export { LARGE_PAGE_SIZE_OPTIONS } from './constants'
 export { default as Pagination } from './Pagination'
 export type { PaginationProps } from './types'
diff --git a/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts b/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts
index baad07dc7..cb2d50b79 100644
--- a/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts
+++ b/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts
@@ -205,14 +205,10 @@ export interface GVKOptionValueType {
 }
 
 export interface GetResourceRecommenderResourceListPropsType {
-    resourceList: K8sResourceDetailType
-    reloadResourceListData: () => void
     setShowAbsoluteValuesInResourceRecommender: Dispatch<SetStateAction<boolean>>
     showAbsoluteValuesInResourceRecommender: boolean
     gvkOptions: GroupBase<SelectPickerOptionType<GVKOptionValueType>>[]
     areGVKOptionsLoading: boolean
     reloadGVKOptions: () => void
     gvkOptionsError: ServerErrors
-    isResourceListLoading: boolean
-    resourceListError: ServerErrors
 }
diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 53499b93c..0ccacd1ea 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -147,6 +147,7 @@ const InternalTable = ({
                 ...filterData,
                 ...additionalProps,
                 areRowsLoading: areFilteredRowsLoading,
+                filteredRows,
                 ...(areColumnsConfigurable
                     ? {
                           allColumns: columns,
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index 26ca82c62..ca811a5e4 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -174,6 +174,7 @@ export type ViewWrapperProps<T = FiltersTypeEnum.STATE> = PropsWithChildren<
         AdditionalProps &
         Partial<ConfigurableColumnsType> & {
             areRowsLoading: boolean
+            filteredRows: RowsType | null
         } & (T extends FiltersTypeEnum.URL ? Pick<UseUrlFiltersReturnType<string>, 'updateSearchParams'> : {})
 >
 

From eb2b1b05a62d93dcb02405f97ebf3883a8af8487 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Tue, 24 Jun 2025 13:11:10 +0530
Subject: [PATCH 20/25] fix: bulk selection count logic

---
 src/Shared/Components/Table/TableContent.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Shared/Components/Table/TableContent.tsx b/src/Shared/Components/Table/TableContent.tsx
index 92f78025a..e0a419e80 100644
--- a/src/Shared/Components/Table/TableContent.tsx
+++ b/src/Shared/Components/Table/TableContent.tsx
@@ -83,8 +83,7 @@ const TableContent = ({
         rowsContainerRef.current.addEventListener('keydown', preventScrollByKeyboard)
     }, [])
 
-    const bulkSelectionCount =
-        isBulkSelectionApplied && rows ? filteredRows.length : (getSelectedIdentifiersCount?.() ?? 0)
+    const bulkSelectionCount = isBulkSelectionApplied && rows ? rows.length : (getSelectedIdentifiersCount?.() ?? 0)
 
     const visibleRows = useMemo(() => {
         const normalizedFilteredRows = filteredRows ?? []

From fa075f845486dde267b643704eb89928c3a562b5 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Tue, 24 Jun 2025 15:09:02 +0530
Subject: [PATCH 21/25] feat: add download icon and update icon map; add
 ResourceRecommenderActionMenuProps interface

---
 src/Assets/IconV2/ic-download.svg                  | 3 +++
 src/Pages/ResourceBrowser/ResourceBrowser.Types.ts | 7 ++++++-
 src/Shared/Components/Icon/Icon.tsx                | 2 ++
 src/Shared/Components/index.ts                     | 1 +
 4 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/Assets/IconV2/ic-download.svg

diff --git a/src/Assets/IconV2/ic-download.svg b/src/Assets/IconV2/ic-download.svg
new file mode 100644
index 000000000..d3c67c66e
--- /dev/null
+++ b/src/Assets/IconV2/ic-download.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.5 14.5v5.25a.75.75 0 0 1-.75.75h-15a.75.75 0 0 1-.75-.75V14.5M12.25 4v10.497m-3.938-3.934L12.25 14.5l3.938-3.937" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts b/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts
index cb2d50b79..5fc03d918 100644
--- a/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts
+++ b/src/Pages/ResourceBrowser/ResourceBrowser.Types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Dispatch, RefObject, SetStateAction } from 'react'
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { GroupBase } from 'react-select'
 
 import { ServerErrors } from '@Common/ServerError'
@@ -212,3 +212,8 @@ export interface GetResourceRecommenderResourceListPropsType {
     reloadGVKOptions: () => void
     gvkOptionsError: ServerErrors
 }
+
+export interface ResourceRecommenderActionMenuProps {
+    children: ReactNode
+    lastScannedOn: string
+}
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index f6cbccd63..4a6a44f50 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -67,6 +67,7 @@ import { ReactComponent as ICDevtronJob } from '@IconsV2/ic-devtron-job.svg'
 import { ReactComponent as ICDisconnect } from '@IconsV2/ic-disconnect.svg'
 import { ReactComponent as ICDiscordFill } from '@IconsV2/ic-discord-fill.svg'
 import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
+import { ReactComponent as ICDownload } from '@IconsV2/ic-download.svg'
 import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg'
 import { ReactComponent as ICEdit } from '@IconsV2/ic-edit.svg'
 import { ReactComponent as ICEmail } from '@IconsV2/ic-email.svg'
@@ -280,6 +281,7 @@ export const iconMap = {
     'ic-disconnect': ICDisconnect,
     'ic-discord-fill': ICDiscordFill,
     'ic-dockerhub': ICDockerhub,
+    'ic-download': ICDownload,
     'ic-ecr': ICEcr,
     'ic-edit': ICEdit,
     'ic-email': ICEmail,
diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts
index b085ca5bc..b7394f0e3 100644
--- a/src/Shared/Components/index.ts
+++ b/src/Shared/Components/index.ts
@@ -80,6 +80,7 @@ export * from './ModalSidebarPanel'
 export * from './NumbersCount'
 export * from './PhoneInput'
 export * from './Plugin'
+export * from './Popover'
 export * from './ProgressBar'
 export { default as QRCode } from './QRCode'
 export * from './ReactSelect'

From e15749b32da64d4b984a39c2ba8b347b7041fbd3 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Wed, 25 Jun 2025 12:40:43 +0530
Subject: [PATCH 22/25] fix: filter if filter func provided

---
 src/Shared/Components/Table/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Shared/Components/Table/utils.ts b/src/Shared/Components/Table/utils.ts
index 00a852301..89209a5da 100644
--- a/src/Shared/Components/Table/utils.ts
+++ b/src/Shared/Components/Table/utils.ts
@@ -23,9 +23,9 @@ export const searchAndSortRows = (
     filterData: UseFiltersReturnType,
     comparator?: Column['comparator'],
 ) => {
-    const { sortBy, sortOrder, areFiltersApplied } = filterData ?? {}
+    const { sortBy, sortOrder } = filterData ?? {}
 
-    const filteredRows = areFiltersApplied ? rows.filter((row) => filter(row, filterData)) : rows
+    const filteredRows = filter ? rows.filter((row) => filter(row, filterData)) : rows
 
     return comparator && sortBy
         ? filteredRows.sort(

From f22829a23bdd876c7e24fd2ac91d4c1bb5a2cab7 Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Thu, 26 Jun 2025 09:45:57 +0530
Subject: [PATCH 23/25] fix: add new clearFilters prop to table props

---
 .../UseRegisterShortcutProvider.tsx           |  6 +++--
 src/Common/Hooks/UseRegisterShortcut/types.ts |  3 +++
 src/Shared/Components/Badge/Badge.tsx         |  2 +-
 src/Shared/Components/Table/InternalTable.tsx |  3 ++-
 .../Components/Table/Table.component.tsx      | 13 ++++++---
 src/Shared/Components/Table/TableContent.tsx  | 27 +++++--------------
 src/Shared/Components/Table/types.ts          |  4 +++
 7 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx b/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx
index 64272e1c3..36c349812 100644
--- a/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx
+++ b/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx
@@ -25,6 +25,7 @@ const IGNORE_TAGS_FALLBACK = ['input', 'textarea', 'select']
 const DEFAULT_TIMEOUT = 300
 
 const UseRegisterShortcutProvider = ({
+    containerRef,
     ignoreTags,
     preventDefault = false,
     shortcutTimeout,
@@ -120,8 +121,9 @@ const UseRegisterShortcutProvider = ({
         if (
             // NOTE: in case of custom events generated by password managers autofill, the event.key is not set
             !event.key ||
-            ignoredTags.map((tag) => tag.toUpperCase()).indexOf((event.target as HTMLElement).tagName?.toUpperCase()) >
-                -1 ||
+            (ignoredTags.map((tag) => tag.toUpperCase()).indexOf((event.target as HTMLElement).tagName?.toUpperCase()) >
+                -1 &&
+                (!containerRef || containerRef.current?.contains(event.target as HTMLElement))) ||
             (event.target as HTMLElement)?.role === 'textbox' ||
             disableShortcutsRef.current
         ) {
diff --git a/src/Common/Hooks/UseRegisterShortcut/types.ts b/src/Common/Hooks/UseRegisterShortcut/types.ts
index 51083b60e..13171cf9d 100644
--- a/src/Common/Hooks/UseRegisterShortcut/types.ts
+++ b/src/Common/Hooks/UseRegisterShortcut/types.ts
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { RefObject } from 'react'
+
 import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
 
 // NOTE: check this link for more info on keyboard keys: https://w3c.github.io/uievents-key/
@@ -81,6 +83,7 @@ export interface UseRegisterShortcutContextType {
 }
 
 export interface UseRegisterShortcutProviderType {
+    containerRef?: RefObject<HTMLElement>
     children: React.ReactNode
     /**
      * Defines how long after holding the keys down do we trigger the callback in milliseconds
diff --git a/src/Shared/Components/Badge/Badge.tsx b/src/Shared/Components/Badge/Badge.tsx
index f4bce4879..f3128c865 100644
--- a/src/Shared/Components/Badge/Badge.tsx
+++ b/src/Shared/Components/Badge/Badge.tsx
@@ -29,7 +29,7 @@ const Badge = ({
                 : {})}
         >
             {startIconProps && <Icon {...startIconProps} size={iconSize} color={fontColor || iconColor} />}
-            <span className="dc__truncate">{label}</span>
+            {label && <span className="dc__truncate">{label}</span>}
             {endIconProps && <Icon {...endIconProps} size={iconSize} color={fontColor || iconColor} />}
         </div>
     )
diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index 0ccacd1ea..eb6721390 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -31,6 +31,7 @@ const InternalTable = ({
     paginationVariant,
     RowActionsOnHoverComponent,
     pageSizeOptions,
+    clearFilters: userGivenUrlClearFilters,
 }: InternalTableProps) => {
     const {
         sortBy,
@@ -113,7 +114,7 @@ const InternalTable = ({
 
         if (!areFilteredRowsLoading && !filteredRows?.length && !loading) {
             return filtersVariant !== FiltersTypeEnum.NONE && areFiltersApplied ? (
-                <GenericFilterEmptyState handleClearFilters={clearFilters} />
+                <GenericFilterEmptyState handleClearFilters={userGivenUrlClearFilters ?? clearFilters} />
             ) : (
                 <GenericEmptyState {...emptyStateConfig.noRowsConfig} />
             )
diff --git a/src/Shared/Components/Table/Table.component.tsx b/src/Shared/Components/Table/Table.component.tsx
index 1fc18f462..8bf897e25 100644
--- a/src/Shared/Components/Table/Table.component.tsx
+++ b/src/Shared/Components/Table/Table.component.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import {
     noop,
@@ -190,6 +190,7 @@ const UseUrlFilterWrapper = (props: FilterWrapperProps) => {
 
 const TableWrapper = (tableProps: TableProps) => {
     const { filtersVariant } = tableProps
+    const tableContainerRef = useRef<HTMLDivElement>(null)
 
     const renderContent = () => {
         if (filtersVariant === FiltersTypeEnum.STATE) {
@@ -204,8 +205,14 @@ const TableWrapper = (tableProps: TableProps) => {
     }
 
     return (
-        <UseRegisterShortcutProvider shortcutTimeout={50} ignoreTags={['input', 'textarea', 'select', 'button']}>
-            {renderContent()}
+        <UseRegisterShortcutProvider
+            containerRef={tableContainerRef}
+            shortcutTimeout={50}
+            ignoreTags={['input', 'textarea', 'select', 'button']}
+        >
+            <div ref={tableContainerRef} className="flexbox-col dc__overflow-hidden flex-grow-1">
+                {renderContent()}
+            </div>
         </UseRegisterShortcutProvider>
     )
 }
diff --git a/src/Shared/Components/Table/TableContent.tsx b/src/Shared/Components/Table/TableContent.tsx
index e0a419e80..38462cc0a 100644
--- a/src/Shared/Components/Table/TableContent.tsx
+++ b/src/Shared/Components/Table/TableContent.tsx
@@ -34,7 +34,6 @@ const TableContent = ({
 }: TableContentProps) => {
     const rowsContainerRef = useRef<HTMLDivElement>(null)
     const parentRef = useRef<HTMLDivElement>(null)
-    const activeRowRef = useRef<HTMLDivElement>(null)
     const bulkSelectionButtonRef = useRef<HTMLButtonElement>(null)
     const headerRef = useRef<HTMLDivElement>(null)
 
@@ -109,11 +108,6 @@ const TableContent = ({
 
     useEffectAfterMount(() => {
         setActiveRowIndex(0)
-        scrollToShowActiveElementIfNeeded(
-            activeRowRef.current,
-            rowsContainerRef.current,
-            headerRef.current?.offsetHeight,
-        )
     }, [offset, visibleRows])
 
     useEffect(() => {
@@ -129,19 +123,12 @@ const TableContent = ({
         handleSorting(newSortBy)
     }
 
-    useEffect(() => {
-        // Focus the active row only when activeRowIndex changes. This ensures that focus is not stolen from other elements,
-        // such as the search bar, when it is already focused. For example, when typing in the search bar, the rows may be replaced
-        // with loading shimmers, causing activeRowRef to be null. During this time, activeRowIndex might reset to 0, but focus
-        // will not shift. However, when navigating with arrow keys, activeRowIndex changes, and activeRowRef will point to the
-        // correct row once it is mounted, allowing focus to update appropriately.
-        activeRowRef.current?.focus({ preventScroll: true })
-        scrollToShowActiveElementIfNeeded(
-            activeRowRef.current,
-            rowsContainerRef.current,
-            headerRef.current?.offsetHeight,
-        )
-    }, [activeRowIndex])
+    const focusActiveRow = (node: HTMLDivElement) => {
+        if (node && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName.toUpperCase())) {
+            node.focus({ preventScroll: true })
+            scrollToShowActiveElementIfNeeded(node, rowsContainerRef.current, headerRef.current?.offsetHeight)
+        }
+    }
 
     const onBulkOperationModalClose = () => {
         setBulkActionState(null)
@@ -203,7 +190,7 @@ const TableContent = ({
             return (
                 <div
                     key={row.id}
-                    ref={isRowActive ? activeRowRef : null}
+                    ref={isRowActive ? focusActiveRow : null}
                     onClick={handleChangeActiveRowIndex}
                     className={`dc__grid px-20 dc__min-width-fit-content checkbox__parent-container ${
                         showSeparatorBetweenRows ? 'border__secondary--bottom' : ''
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index ca811a5e4..f142aeb66 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -265,16 +265,19 @@ export type InternalTableProps = Required<Pick<ConfigurableColumnsType, 'visible
                * If filter is only being used for sorting, then send `noop` in this prop
                */
               filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
+              clearFilters?: () => void
           }
         | {
               filtersVariant: FiltersTypeEnum.STATE
               additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.STATE>
               filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
+              clearFilters?: never
           }
         | {
               filtersVariant: FiltersTypeEnum.NONE
               additionalFilterProps?: never
               filter?: never
+              clearFilters?: never
           }
     ) &
     (
@@ -318,6 +321,7 @@ export type TableProps = Pick<
     | 'loading'
     | 'ViewWrapper'
     | 'pageSizeOptions'
+    | 'clearFilters'
 >
 
 export type BulkActionStateType = string | null

From 74c4046ad9816d9b7ee9fe0b42a845af5ae4a864 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Thu, 26 Jun 2025 13:53:57 +0530
Subject: [PATCH 24/25] fix: update version from 1.15.3-pre-4 to 1.15.3-beta-3
 in package.json and package-lock.json

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 75466eab9..c71d97b45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.15.3-pre-4",
+    "version": "1.15.3-beta-3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.15.3-pre-4",
+            "version": "1.15.3-beta-3",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index be84c550e..2c660d715 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.15.3-pre-4",
+    "version": "1.15.3-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

From 2e1f3802243e7e5a7f0f280704ff6e69c1683ca4 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Thu, 26 Jun 2025 13:56:37 +0530
Subject: [PATCH 25/25] fix: update version from 1.15.3-beta-3 to 1.15.3-beta-4
 in package.json and package-lock.json

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c71d97b45..435802e6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.15.3-beta-3",
+    "version": "1.15.3-beta-4",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.15.3-beta-3",
+            "version": "1.15.3-beta-4",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 2c660d715..3736c8e59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.15.3-beta-3",
+    "version": "1.15.3-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",