Disable hiding columns which are filtered or sorted

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<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>
   )

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}

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>

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}