feat: expand/collapse using right/left arrow

Author: Amrit Borah

src/Shared/Components/CICDHistory/ConflictedResourcesTable.tsx

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

src/Shared/Components/Table/TableContent.tsx

@@ -35,6 +35,7 @@ import {
     FiltersTypeEnum,
     PaginationEnum,
     RowType,
+    SignalEnum,
     SignalsType,
     TableContentProps,
 } from './types'
@@ -189,7 +190,7 @@ const TableContent = <
 
     useEffectAfterMount(() => {
         setActiveRowIndex(0)
-    }, [offset, visibleRows])
+    }, [offset])
 
     useEffect(() => {
         setIdentifiers?.(
@@ -204,6 +205,36 @@ const TableContent = <
         handleSorting(newSortBy)
     }
 
+    useEffect(() => {
+        if (!isAnyRowExpandable) {
+            return () => {}
+        }
+
+        const getExpandCollapseRowHandler =
+            (state: boolean) =>
+            ({ detail: { activeRowData } }) => {
+                if ((activeRowData as RowType<RowData>).expandableRows) {
+                    setExpandState({
+                        ...expandState,
+                        [activeRowData.id]: state,
+                    })
+                }
+            }
+
+        const handleExpandRow = getExpandCollapseRowHandler(true)
+        const handleCollapseRow = getExpandCollapseRowHandler(false)
+
+        const signals = EVENT_TARGET as SignalsType
+
+        signals.addEventListener(SignalEnum.EXPAND_ROW, handleExpandRow)
+        signals.addEventListener(SignalEnum.COLLAPSE_ROW, handleCollapseRow)
+
+        return () => {
+            signals.removeEventListener(SignalEnum.EXPAND_ROW, handleExpandRow)
+            signals.removeEventListener(SignalEnum.COLLAPSE_ROW, handleCollapseRow)
+        }
+    }, [isAnyRowExpandable])
+
     const toggleExpandAll = (e: MouseEvent<HTMLButtonElement>) => {
         e.stopPropagation()
 

src/Shared/Components/Table/styles.scss

@@ -76,6 +76,10 @@
             outline: none;
         }
 
+        &--expanded-row:has(+ .generic-table__row--expanded-row) {
+            border-bottom: 0px;
+        }
+
         &:hover,
         &:hover > *,
         &--active,

src/Shared/Components/Table/types.ts

@@ -33,6 +33,8 @@ import { useBulkSelection, UseBulkSelectionProps } from '../BulkSelection'
 export interface UseFiltersReturnType extends UseStateFiltersReturnType<string> {}
 
 export enum SignalEnum {
+    COLLAPSE_ROW = 'collapse-row',
+    EXPAND_ROW = 'expand-row',
     ENTER_PRESSED = 'enter-pressed',
     DELETE_PRESSED = 'delete-pressed',
     ESCAPE_PRESSED = 'escape-pressed',

src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts

@@ -101,6 +101,20 @@ const useTableWithKeyboardShortcuts = <
     )
 
     useEffect(() => {
+        registerShortcut({
+            keys: ['ArrowLeft'],
+            callback: () => {
+                dispatchEvent(SignalEnum.COLLAPSE_ROW)
+            },
+        })
+
+        registerShortcut({
+            keys: ['ArrowRight'],
+            callback: () => {
+                dispatchEvent(SignalEnum.EXPAND_ROW)
+            },
+        })
+
         registerShortcut({
             keys: ['ArrowDown'],
             callback: () => {
@@ -142,6 +156,8 @@ const useTableWithKeyboardShortcuts = <
             unregisterShortcut(['Enter'])
             unregisterShortcut(['Backspace'])
             unregisterShortcut(['.'])
+            unregisterShortcut(['ArrowLeft'])
+            unregisterShortcut(['ArrowRight'])
         }
     }, [getMoveFocusToNextRowHandler, getMoveFocusToPreviousRowHandler, dispatchEvent])