Skip to content

feat: replace table in GenericAppListing #1004

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
whoami-amrit merged 4 commits into from
Jan 19, 2026
Merged

feat: replace table in GenericAppListing #1004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
351a35a
fix: better table states
Jan 14, 2026
460b941
feat: expand/collapse using right/left arrow
Jan 14, 2026
7ab7b14
feat: if onRowCilck provided handle enter press internally
Jan 15, 2026
b4d2bcb
fix: review 3Bcomments
Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/Shared/Components/CICDHistory/ConflictedResourcesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -42,7 +41,7 @@ const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourc
}}
filtersVariant={FiltersTypeEnum.STATE}
ViewWrapper={Wrapper}
filter={filter}
filter={null}
/>
)
}
Expand Down
14 changes: 10 additions & 4 deletions src/Shared/Components/Table/InternalTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const InternalTable = <
clearFilters: userGivenUrlClearFilters,
rowStartIconConfig,
onRowClick,
areFiltersApplied: userProvidedAreFiltersApplied,
}: InternalTableProps<RowData, FilterVariant, AdditionalProps>) => {
const {
sortBy,
Expand Down Expand Up @@ -126,6 +127,7 @@ const InternalTable = <
rows,
filter,
filterData,
additionalProps,
visibleColumns.find(({ field }) => field === sortBy)?.comparator,
)

Expand All @@ -140,10 +142,14 @@ const InternalTable = <
// useAsync hook for 'rows' scenario
const [_areRowsLoading, rowsResult, rowsError, reloadRows] = useAsync(
handleFiltering,
[searchKey, sortBy, sortOrder, rows, JSON.stringify(otherFilters), visibleColumns],
[searchKey, filter, sortBy, sortOrder, rows, JSON.stringify(otherFilters), visibleColumns],
!!rows,
)

// NOTE: passing getRows to queryKey won't trigger a refetch
// since it is a function
const lastUpdatedGetRowsInstance = useMemo(() => new Date().toISOString(), [getRows])

// useAsync hook for 'getRows' scenario
const {
isFetching: _areGetRowsLoading,
Expand All @@ -160,8 +166,7 @@ const InternalTable = <
searchKey,
sortBy,
sortOrder,
// !TODO: functions in queryKey cannot trigger refetch
// getRows,
lastUpdatedGetRowsInstance,
offset,
pageSize,
JSON.stringify(otherFilters),
Expand Down Expand Up @@ -191,7 +196,8 @@ const InternalTable = <
}

if (!areFilteredRowsLoading && !filteredRows?.length && !loading) {
return filtersVariant !== FiltersTypeEnum.NONE && areFiltersApplied ? (
return filtersVariant !== FiltersTypeEnum.NONE &&
(userProvidedAreFiltersApplied !== undefined ? userProvidedAreFiltersApplied : areFiltersApplied) ? (
<GenericFilterEmptyState
{...emptyStateConfig.noRowsForFilterConfig}
handleClearFilters={userGivenUrlClearFilters ?? clearFilters}
Expand Down
83 changes: 71 additions & 12 deletions src/Shared/Components/Table/TableContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
FiltersTypeEnum,
PaginationEnum,
RowType,
SignalEnum,
SignalsType,
TableContentProps,
} from './types'
Expand Down Expand Up @@ -152,9 +153,10 @@ const TableContent = <
? `${initialGridTemplateColumns} ${typeof rowOnHoverComponentWidth === 'number' ? `minmax(${rowOnHoverComponentWidth}px, 1fr)` : rowOnHoverComponentWidth}`
: initialGridTemplateColumns

const gridTemplateColumns = isAnyRowExpandable
? `${ACTION_GUTTER_SIZE}px ${gridTemplateColumnsWithoutExpandButton}`
: gridTemplateColumnsWithoutExpandButton
const gridTemplateColumns =
isAnyRowExpandable || rowStartIconConfig
? `${ACTION_GUTTER_SIZE}px ${gridTemplateColumnsWithoutExpandButton}`
: gridTemplateColumnsWithoutExpandButton

useEffect(() => {
const scrollEventHandler = () => {
Expand Down Expand Up @@ -188,7 +190,7 @@ const TableContent = <

useEffectAfterMount(() => {
setActiveRowIndex(0)
}, [offset, visibleRows])
}, [offset])

useEffect(() => {
setIdentifiers?.(
Expand All @@ -203,6 +205,54 @@ const TableContent = <
handleSorting(newSortBy)
}

useEffect(() => {
if (!isAnyRowExpandable) {
return () => {}
}
Comment thread
whoami-amrit marked this conversation as resolved.

const getExpandCollapseRowHandler =
(state: boolean) =>
({ detail: { activeRowData } }) => {
if ((activeRowData as RowType<RowData>).expandableRows) {
setExpandState((prev) => ({
...prev,
[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])
Comment thread
whoami-amrit marked this conversation as resolved.

useEffect(() => {
if (!onRowClick) {
return () => {}
}

const handleEnterPress = ({ detail: { activeRowData } }) => {
onRowClick(activeRowData, activeRowData.id.startsWith('expanded-row-' satisfies ExpandedRowPrefixType))
}

const signals = EVENT_TARGET as SignalsType

signals.addEventListener(SignalEnum.ENTER_PRESSED, handleEnterPress)

return () => {
signals.removeEventListener(SignalEnum.ENTER_PRESSED, handleEnterPress)
}
}, [onRowClick])

const toggleExpandAll = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation()

Expand Down Expand Up @@ -247,22 +297,24 @@ const TableContent = <
return Object.values(bulkSelectionState)
}

const showIconOrExpandActionGutter = isBulkSelectionConfigured || !!rowStartIconConfig || isAnyRowExpandable

const renderRows = () => {
if (loading) {
if (loading && !visibleColumns.length) {
return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
<div
key={shimmerRowLabel}
className={`px-20 flexbox py-12 dc__gap-16 ${showSeparatorBetweenRows ? 'border__secondary--bottom' : ''}`}
className={`px-20 flex left py-12 dc__gap-16 ${showSeparatorBetweenRows ? 'border__secondary--bottom' : ''}`}
>
{isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
{showIconOrExpandActionGutter ? <div className="shimmer w-20" /> : null}
{SHIMMER_DUMMY_ARRAY.map((shimmerCellLabel) => (
<div key={shimmerCellLabel} className="shimmer w-200" />
))}
</div>
))
}

if (areFilteredRowsLoading) {
if (areFilteredRowsLoading || (loading && visibleColumns.length)) {
return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
<div
key={shimmerRowLabel}
Expand All @@ -271,6 +323,11 @@ const TableContent = <
gridTemplateColumns,
}}
>
{showIconOrExpandActionGutter ? (
<div className="py-12 flex" aria-label="Loading...">
<div className="shimmer h-16 w-20" />
</div>
) : null}
{visibleColumns.map(({ label }) => (
<div key={label} className="py-12 flex" aria-label="Loading...">
<div className="shimmer h-16 w-100" />
Expand Down Expand Up @@ -364,7 +421,7 @@ const TableContent = <
ariaLabel="Expand/Collapse row"
showAriaLabelInTippy={false}
variant={ButtonVariantType.borderLess}
size={ComponentSizeType.xs}
size={ComponentSizeType.xxs}
style={ButtonStyleType.neutral}
onClick={toggleExpandRow}
/>
Expand Down Expand Up @@ -467,9 +524,9 @@ const TableContent = <
ref={headerRef}
className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom dc__position-sticky dc__zi-2 dc__top-0 generic-table__header"
>
{loading ? (
{loading && !visibleColumns.length ? (
<div className="flexbox py-12 dc__gap-16">
{isBulkSelectionConfigured ? <div className="shimmer w-20" /> : null}
{showIconOrExpandActionGutter ? <div className="shimmer w-20" /> : null}
{SHIMMER_DUMMY_ARRAY.map((label) => (
<div key={label} className="shimmer w-200" />
))}
Expand Down Expand Up @@ -498,13 +555,15 @@ const TableContent = <
ariaLabel="Expand/Collapse all rows"
showAriaLabelInTippy={false}
variant={ButtonVariantType.borderLess}
size={ComponentSizeType.xs}
size={ComponentSizeType.xxs}
style={ButtonStyleType.neutral}
onClick={toggleExpandAll}
/>
</div>
) : null}

{!isAnyRowExpandable && rowStartIconConfig && <div />}

{visibleColumns.map(
(
{
Expand Down
6 changes: 5 additions & 1 deletion src/Shared/Components/Table/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@

&.expand-row-btn::before,
&.row-start-icon::before,
&.expanded-tree-libe::before {
&.expanded-tree-line::before {
left: -24px;
width: 24px;
}
Expand Down Expand Up @@ -76,6 +76,10 @@
outline: none;
}

&--expanded-row:has(+ .generic-table__row--expanded-row) {
border-bottom: 0px;
Comment thread
AbhishekA1509 marked this conversation as resolved.
}

&:hover,
&:hover > *,
&--active,
Expand Down
15 changes: 12 additions & 3 deletions src/Shared/Components/Table/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -237,7 +239,11 @@ export type ViewWrapperProps<
: {})
>

type FilterConfig<FilterVariant extends FiltersTypeEnum, RowData extends unknown> = {
type FilterConfig<
FilterVariant extends FiltersTypeEnum,
RowData extends unknown,
AdditionalProps extends Record<string, any>,
> = {
filtersVariant: FilterVariant
/**
* Props for useUrlFilters/useStateFilters hooks
Expand All @@ -251,12 +257,14 @@ type FilterConfig<FilterVariant extends FiltersTypeEnum, RowData extends unknown
*/
filter: FilterVariant extends FiltersTypeEnum.NONE
? null
: (row: RowType<RowData>, filterData: UseFiltersReturnType) => boolean
: (row: RowType<RowData>, filterData: UseFiltersReturnType, additionalProps: AdditionalProps) => boolean
clearFilters?: FilterVariant extends FiltersTypeEnum.URL
? () => void
: FilterVariant extends FiltersTypeEnum.STATE
? never
: never

areFiltersApplied?: FilterVariant extends FiltersTypeEnum.NONE ? never : boolean
}

export type InternalTableProps<
Expand Down Expand Up @@ -360,7 +368,7 @@ export type InternalTableProps<
pageSizeOptions?: never
}
) &
FilterConfig<FilterVariant, RowData>
FilterConfig<FilterVariant, RowData, AdditionalProps>

export type UseResizableTableConfigWrapperProps<
RowData extends unknown,
Expand Down Expand Up @@ -415,6 +423,7 @@ export type TableProps<
| 'clearFilters'
| 'rowStartIconConfig'
| 'onRowClick'
| 'areFiltersApplied'
>

export type BulkActionStateType = string | null
Expand Down
16 changes: 16 additions & 0 deletions src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => {
Expand Down Expand Up @@ -142,6 +156,8 @@ const useTableWithKeyboardShortcuts = <
unregisterShortcut(['Enter'])
unregisterShortcut(['Backspace'])
unregisterShortcut(['.'])
unregisterShortcut(['ArrowLeft'])
unregisterShortcut(['ArrowRight'])
}
}, [getMoveFocusToNextRowHandler, getMoveFocusToPreviousRowHandler, dispatchEvent])

Expand Down
3 changes: 2 additions & 1 deletion src/Shared/Components/Table/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,12 @@ export const searchAndSortRows = <
rows: TableProps<RowData, FilterVariant, AdditionalProps>['rows'],
filter: TableProps<RowData, FilterVariant, AdditionalProps>['filter'],
filterData: UseFiltersReturnType,
additionalProps: AdditionalProps,
comparator?: Column<RowData, FilterVariant, AdditionalProps>['comparator'],
): Awaited<ReturnType<TableProps<RowData>['getRows']>> => {
const { sortBy, sortOrder } = filterData ?? {}

const filteredRows = filter ? rows.filter((row) => filter(row, filterData)) : rows
const filteredRows = filter ? rows.filter((row) => filter(row, filterData, additionalProps)) : rows

return {
rows:
Expand Down
Loading