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.
armadaproject · Jan 8, 2025 · f4cd6bc · f4cd6bc
1 parent dbea056
commit f4cd6bc
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 25 deletions.
diff --git a/...lookout/ui/src/components/lookoutV2/ColumnConfigurationDialog/OrderableColumnListItem.tsx b/...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<string>
@@ -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 = (
+    <ListItemButton
+      onClick={onToggleVisibility}
+      dense
+      disabled={filtered || sorted || !column.enableHiding}
+      tabIndex={2}
+      data-no-dnd
+    >
+      <ListItemIcon>
+        <Checkbox
+          edge="start"
+          checked={isVisible}
+          tabIndex={-1}
+          disableRipple
+          inputProps={{ "aria-labelledby": colId }}
+          size="small"
+        />
+      </ListItemIcon>
+      <ListItemText
+        id={colId}
+        primary={colMetadata.displayName}
+        secondary={colIsAnnotation ? "Annotation" : undefined}
+      />
+    </ListItemButton>
+  )
+  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 = (
+      <Tooltip title={title} arrow={false} followCursor placement="top">
+        <TooltipChildContainer>{listItemButtonNode}</TooltipChildContainer>
+      </Tooltip>
+    )
+  }
+
   return (
     <ListItem
       key={colId}
@@ -107,23 +160,7 @@ export const OrderableColumnListItem = ({
           </div>
         </EditAnnotationColumnInputContainer>
       ) : (
-        <ListItemButton onClick={onToggleVisibility} dense disabled={!column.enableHiding} tabIndex={2} data-no-dnd>
-          <ListItemIcon>
-            <Checkbox
-              edge="start"
-              checked={isVisible}
-              tabIndex={-1}
-              disableRipple
-              inputProps={{ "aria-labelledby": colId }}
-              size="small"
-            />
-          </ListItemIcon>
-          <ListItemText
-            id={colId}
-            primary={colMetadata.displayName}
-            secondary={colIsAnnotation ? "Annotation" : undefined}
-          />
-        </ListItemButton>
+        listItemButtonNode
       )}
     </ListItem>
   )

diff --git 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
@@ -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={<FilterAltOff />}
-              disabled={!filtersActive}
+              disabled={filterColumns.length === 0}
             >
               Clear Filters
             </Button>

diff --git 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 (
     <Box sx={{ display: "flex", flexDirection: "row", height: "100%", width: "100%" }}>
       <Box sx={{ ...columnStyle, marginX: "0.5em", minWidth: 0 }}>
@@ -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}