From f4cd6bc1eab3f0bc7b2c89cffced31dc5136c5c3 Mon Sep 17 00:00:00 2001 From: Maurice Yap Date: Wed, 8 Jan 2025 10:27:04 +0000 Subject: [PATCH] Disable hiding columns which are filtered or sorted (#4125) The Lookout UI prevents the user from saving the hiding of a column if it is filtered or sorted-by. However, there is nothing to prevent them from hiding this without saving the change. This commit disables the hiding of these columns in the column configuration dialog to prevent confusion to the user by this behaviour. --- .../OrderableColumnListItem.tsx | 71 ++++++++++++++----- .../ColumnConfigurationDialog/index.tsx | 16 +++-- .../lookoutV2/JobsTableActionBar.tsx | 10 ++- .../lookoutV2/JobsTableContainer.tsx | 6 +- 4 files changed, 78 insertions(+), 25 deletions(-) diff --git a/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/OrderableColumnListItem.tsx b/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/OrderableColumnListItem.tsx index 00bd3520392..405369699c3 100644 --- a/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/OrderableColumnListItem.tsx +++ b/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/OrderableColumnListItem.tsx @@ -12,6 +12,7 @@ import { ListItemText, Stack, styled, + Tooltip, } from "@mui/material" import { EditAnnotationColumnInput } from "./EditAnnotationColumnInput" @@ -33,10 +34,17 @@ const EditAnnotationColumnInputContainer = styled(Stack)({ width: "100%", }) +const TooltipChildContainer = styled("div")({ + display: "flex", + flexGrow: 1, +}) + export interface OrderableColumnListItemProps { column: JobTableColumn isVisible: boolean onToggleVisibility: () => void + filtered: boolean + sorted: boolean removeAnnotationColumn: () => void editAnnotationColumn: (annotationKey: string) => void existingAnnotationColumnKeysSet: Set @@ -46,6 +54,8 @@ export const OrderableColumnListItem = ({ column, isVisible, onToggleVisibility, + filtered, + sorted, removeAnnotationColumn, editAnnotationColumn, existingAnnotationColumnKeysSet, @@ -59,6 +69,49 @@ export const OrderableColumnListItem = ({ const [isEditing, setIsEditing] = useState(false) + let listItemButtonNode = ( + + + + + + + ) + if (filtered || sorted) { + const title = (() => { + if (filtered && sorted) { + return `The ${colMetadata.displayName} column cannot be hidden because filtering and sorting has been applied to it` + } + if (filtered) { + return `The ${colMetadata.displayName} column cannot be hidden because filtering has been applied to it` + } + return `The ${colMetadata.displayName} column cannot be hidden because sorting has been applied to it` + })() + + listItemButtonNode = ( + + {listItemButtonNode} + + ) + } + return ( ) : ( - - - - - - + listItemButtonNode )} ) diff --git a/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/index.tsx b/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/index.tsx index cfd26aa003c..1dca75ba4ab 100644 --- a/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/index.tsx +++ b/internal/lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/index.tsx @@ -75,6 +75,8 @@ export interface ColumnConfigurationDialogProps { onClose: () => void allColumns: JobTableColumn[] groupedColumnIds: ColumnId[] + filterColumnIds: ColumnId[] + sortColumnIds: ColumnId[] visibleColumnIds: ColumnId[] columnOrderIds: ColumnId[] setColumnOrder: (columnOrder: ColumnId[]) => void @@ -89,6 +91,8 @@ export const ColumnConfigurationDialog = ({ onClose, allColumns, groupedColumnIds, + filterColumnIds, + sortColumnIds, visibleColumnIds, columnOrderIds, setColumnOrder, @@ -109,14 +113,16 @@ export const ColumnConfigurationDialog = ({ [allColumns], ) + const groupedColumnsSet = useMemo(() => new Set(groupedColumnIds), [groupedColumnIds]) + const filterColumnsSet = useMemo(() => new Set(filterColumnIds), [filterColumnIds]) + const sortColumnsSet = useMemo(() => new Set(sortColumnIds), [sortColumnIds]) + const visibleColumnsSet = useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]) + const orderedColumns = useMemo(() => { - const groupedColumnsSet = new Set(groupedColumnIds) return columnOrderIds .filter((id) => !groupedColumnsSet.has(id) && !PINNED_COLUMNS.includes(toColId(id)) && id in allColumnsById) .map((id) => allColumnsById[id]) - }, [columnOrderIds, groupedColumnIds, allColumnsById]) - - const visibleColumnsSet = useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]) + }, [columnOrderIds, groupedColumnIds, allColumnsById, groupedColumnsSet]) const handleDragEnd = useCallback( ({ active, over }: DragEndEvent) => { @@ -220,6 +226,8 @@ export const ColumnConfigurationDialog = ({ column={column} isVisible={visibleColumnsSet.has(colId)} onToggleVisibility={() => toggleColumnVisibility(colId)} + filtered={filterColumnsSet.has(colId)} + sorted={sortColumnsSet.has(colId)} removeAnnotationColumn={() => onRemoveAnnotationColumn(colId)} editAnnotationColumn={(annotationKey) => onEditAnnotationColumn(colId, annotationKey)} existingAnnotationColumnKeysSet={annotationColumnKeysSet} diff --git a/internal/lookout/ui/src/components/lookoutV2/JobsTableActionBar.tsx b/internal/lookout/ui/src/components/lookoutV2/JobsTableActionBar.tsx index 25014a9f347..b7bcdfab0b4 100644 --- a/internal/lookout/ui/src/components/lookoutV2/JobsTableActionBar.tsx +++ b/internal/lookout/ui/src/components/lookoutV2/JobsTableActionBar.tsx @@ -20,11 +20,12 @@ export interface JobsTableActionBarProps { isLoading: boolean allColumns: JobTableColumn[] groupedColumns: ColumnId[] + filterColumns: ColumnId[] + sortColumns: ColumnId[] visibleColumns: ColumnId[] columnOrder: ColumnId[] setColumnOrder: (columnOrder: ColumnId[]) => void selectedItemFilters: JobFilter[][] - filtersActive: boolean customViews: string[] activeJobSets: boolean onActiveJobSetsChanged: (newVal: boolean) => void @@ -50,11 +51,12 @@ export const JobsTableActionBar = memo( isLoading, allColumns, groupedColumns, + filterColumns, + sortColumns, visibleColumns, columnOrder, setColumnOrder, selectedItemFilters, - filtersActive, customViews, activeJobSets, onActiveJobSetsChanged, @@ -98,6 +100,8 @@ export const JobsTableActionBar = memo( onClose={columnConfigurationDialogOpenOnClose} allColumns={allColumns} groupedColumnIds={groupedColumns} + filterColumnIds={filterColumns} + sortColumnIds={sortColumns} visibleColumnIds={visibleColumns} columnOrderIds={columnOrder} setColumnOrder={setColumnOrder} @@ -156,7 +160,7 @@ export const JobsTableActionBar = memo( onClick={onClearFilters} color="primary" endIcon={} - disabled={!filtersActive} + disabled={filterColumns.length === 0} > Clear Filters diff --git a/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx b/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx index e7b2d7351bb..aa9c0beb0c1 100644 --- a/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx +++ b/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx @@ -762,6 +762,9 @@ export const JobsTableContainer = ({ flex: 1, } + const filterColumns = useMemo(() => columnFilterState.map(({ id }) => toColId(id)), [columnFilterState]) + const sortColumns = useMemo(() => [toColId(lookoutOrder.id)], [lookoutOrder]) + return ( @@ -770,7 +773,8 @@ export const JobsTableContainer = ({ isLoading={rowsToFetch.length > 0} allColumns={columnsForSelect} groupedColumns={grouping} - filtersActive={columnFilterState.length > 0} + filterColumns={filterColumns} + sortColumns={sortColumns} visibleColumns={visibleColumnIds} columnOrder={columnOrder} setColumnOrder={setColumnOrder}