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}