Add cross link from occupancy page to workflows, refactor for better code reuse

Author: fernandol-nvidia

src/ui/src/app/(dashboard)/occupancy/occupancy-page-content.tsx

@@ -14,15 +14,6 @@
 
 //SPDX-License-Identifier: Apache-2.0
 
-/**
- * Occupancy Page Content (Client Component)
- *
- * Layout: Toolbar → Summary cards → Collapsible-row table
- *
- * Data source: GET /api/task?summary=true → aggregated by user or pool.
- * All aggregation is client-side (shim) until backend ships group_by pagination (Issue #23).
- */
-
 "use client";
 
 import { useMemo, useCallback, useState } from "react";
@@ -39,24 +30,12 @@ import { useOccupancyData } from "@/features/occupancy/hooks/use-occupancy-data"
 import { useOccupancyTableStore } from "@/features/occupancy/stores/occupancy-table-store";
 import type { OccupancyGroupBy, OccupancySortBy } from "@/lib/api/adapter/occupancy";
 
-// =============================================================================
-// GroupBy parser for URL state
-// =============================================================================
-
 const GROUP_BY_VALUES = ["pool", "user"] as const;
 const parseAsGroupBy = parseAsStringLiteral(GROUP_BY_VALUES);
 
-// =============================================================================
-// Component
-// =============================================================================
-
 export function OccupancyPageContent() {
   usePage({ title: "Occupancy" });
 
-  // ==========================================================================
-  // URL State
-  // ==========================================================================
-
   const [groupBy, setGroupBy] = useQueryState(
     "groupBy",
     parseAsGroupBy.withDefault("pool").withOptions({ shallow: true, history: "replace", clearOnDefault: true }),
@@ -67,29 +46,17 @@ export function OccupancyPageContent() {
     defaultValue: TaskGroupStatus.RUNNING,
   });
 
-  // ==========================================================================
-  // Sort state from table store
-  // ==========================================================================
-
   const sortState = useOccupancyTableStore((s) => s.sort);
   const sortBy: OccupancySortBy = (sortState?.column as OccupancySortBy) ?? "gpu";
   const order: "asc" | "desc" = sortState?.direction ?? "desc";
 
-  // ==========================================================================
-  // Data
-  // ==========================================================================
-
   const { groups, totals, isLoading, error, refetch, truncated } = useOccupancyData({
     groupBy,
     sortBy,
     order,
     searchChips,
   });
 
-  // ==========================================================================
-  // Toolbar props
-  // ==========================================================================
-
   const resultsCount = useResultsCount({
     total: groups.length,
     filteredTotal: groups.length,
@@ -103,11 +70,7 @@ export function OccupancyPageContent() {
     [setGroupBy],
   );
 
-  // ==========================================================================
-  // Expand/collapse state — lifted here so toolbar can drive expand-all/collapse-all.
-  // Reset when groupBy changes (stale keys from old view are meaningless).
-  // ==========================================================================
-
+  // Expand/collapse state resets when groupBy changes (stale keys are meaningless)
   const [expandedState, setExpandedState] = useState<{ groupBy: OccupancyGroupBy; keys: Set<string> }>({
     groupBy,
     keys: new Set(),
@@ -140,13 +103,8 @@ export function OccupancyPageContent() {
 
   const allExpanded = groups.length > 0 && expandedKeys.size === groups.length;
 
-  // ==========================================================================
-  // Render
-  // ==========================================================================
-
   return (
     <div className="flex h-full flex-col gap-4 p-6">
-      {/* Toolbar */}
       <div className="shrink-0">
         <InlineErrorBoundary
           title="Toolbar error"
@@ -168,7 +126,6 @@ export function OccupancyPageContent() {
         </InlineErrorBoundary>
       </div>
 
-      {/* KPI summary cards */}
       <div className="shrink-0">
         <InlineErrorBoundary
           title="Summary cards error"
@@ -181,15 +138,13 @@ export function OccupancyPageContent() {
         </InlineErrorBoundary>
       </div>
 
-      {/* Scale limit warning */}
       {truncated && (
         <div className="shrink-0 rounded-md border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-300">
           Results may be incomplete — reached the 10,000 row fetch limit. Backend group_by pagination (Issue #23) is
           required for full data at this scale.
         </div>
       )}
 
-      {/* Main table */}
       <div className="min-h-0 flex-1">
         <InlineErrorBoundary
           title="Unable to display occupancy table"
@@ -199,6 +154,7 @@ export function OccupancyPageContent() {
           <OccupancyDataTable
             groups={groups}
             groupBy={groupBy}
+            searchChips={searchChips}
             expandedKeys={expandedKeys}
             onToggleExpand={handleToggleExpand}
             isLoading={isLoading}

src/ui/src/components/filter-bar/hooks/use-default-filter.ts

@@ -61,6 +61,10 @@ export function useDefaultFilter({
 
   const hasDefaultInUrl = useMemo(() => searchChips.some((c) => c.field === field), [searchChips, field]);
 
+  // When both optOut and explicit chips are present, explicit chips win.
+  // Compute this synchronously so callers never see a transient contradictory state.
+  const effectiveOptOut = optOut && !hasDefaultInUrl;
+
   const shouldPrePopulate = !optOut && !hasDefaultInUrl && !!defaultValue;
 
   const effectiveChips = useMemo((): SearchChip[] => {
@@ -69,6 +73,13 @@ export function useDefaultFilter({
     return [...searchChips, { field, value: defaultValue!, label: chipLabel }];
   }, [searchChips, shouldPrePopulate, field, defaultValue, label]);
 
+  // If the URL has the opt-out flag set but also has explicit chips for this field,
+  // the two are contradictory. The explicit chips win — clear the opt-out so downstream
+  // consumers (e.g. showAllUsers) don't ignore the manual filter.
+  useEffect(() => {
+    if (optOut && hasDefaultInUrl) void setOptOut(false);
+  }, [optOut, hasDefaultInUrl, setOptOut]);
+
   useEffect(() => {
     if (!shouldPrePopulate) return;
     const chipLabel = label ?? `${field}: ${defaultValue}`;
@@ -91,5 +102,5 @@ export function useDefaultFilter({
     [effectiveChips, field, optOut, setOptOut, setSearchChips],
   );
 
-  return { effectiveChips, handleChipsChange, optOut };
+  return { effectiveChips, handleChipsChange, optOut: effectiveOptOut };
 }

src/ui/src/components/filter-bar/hooks/use-url-chips.ts

@@ -17,22 +17,32 @@
 "use client";
 
 import { useMemo, useCallback } from "react";
-import { useQueryState, parseAsArrayOf, parseAsString } from "nuqs";
+import { useQueryState, createMultiParser } from "nuqs";
 import type { SearchChip } from "@/stores/types";
 import { parseUrlChips } from "@/lib/url-utils";
 
 export interface SetSearchChipsOptions {
   history?: "push" | "replace";
 }
 
-/**
- * URL-synced search chips. Parses "field:value" from repeated URL params (?f=field:value)
- * into SearchChip[] and writes changes back to the URL for shareable filtered views.
- */
+// Uses repeated query params (?f=pool:X&f=user:Y) for filter chips.
+// type:"multi" makes nuqs call searchParams.getAll(), collecting repeated params.
+// Each param value is one chip string — no secondary separator that could corrupt
+// values containing commas.
+const parseAsChipStrings = createMultiParser({
+  parse: (values: readonly string[]) => values.filter(Boolean),
+  serialize: (values: readonly string[]) => Array.from(values),
+  eq: (a: string[], b: string[]) => {
+    if (a.length !== b.length) return false;
+    const setA = new Set(a);
+    return b.every((v) => setA.has(v));
+  },
+});
+
 export function useUrlChips({ paramName = "f" }: { paramName?: string } = {}) {
   const [filterStrings, setFilterStrings] = useQueryState(
     paramName,
-    parseAsArrayOf(parseAsString).withOptions({
+    parseAsChipStrings.withOptions({
       shallow: true,
       history: "push",
       clearOnDefault: true,

src/ui/src/components/filter-bar/lib/preset-pill.ts

@@ -0,0 +1,31 @@
+//SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION. All rights reserved.
+
+//Licensed under the Apache License, Version 2.0 (the "License");
+//you may not use this file except in compliance with the License.
+//You may obtain a copy of the License at
+
+//http://www.apache.org/licenses/LICENSE-2.0
+
+//Unless required by applicable law or agreed to in writing, software
+//distributed under the License is distributed on an "AS IS" BASIS,
+//WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//See the License for the specific language governing permissions and
+//limitations under the License.
+
+//SPDX-License-Identifier: Apache-2.0
+
+import { cn } from "@/lib/utils";
+
+export function presetPillClasses(
+  bgClass: string,
+  active: boolean,
+  activeRingClass = "ring-black/15 ring-inset dark:ring-white/20",
+): string {
+  return cn(
+    "inline-flex items-center gap-1.5 rounded px-2 py-0.5 transition-all",
+    bgClass,
+    active && `ring-2 ${activeRingClass}`,
+    "group-data-[selected=true]:scale-105 group-data-[selected=true]:shadow-lg",
+    !active && "opacity-70 group-data-[selected=true]:opacity-100 hover:opacity-100",
+  );
+}

src/ui/src/features/datasets/list/components/toolbar/datasets-toolbar.tsx

@@ -18,51 +18,25 @@
 
 import { memo, useMemo } from "react";
 import { User } from "lucide-react";
-import { cn } from "@/lib/utils";
 import type { SearchChip } from "@/stores/types";
 import type { ResultsCount, SearchField, SearchPreset } from "@/components/filter-bar/lib/types";
+import { presetPillClasses } from "@/components/filter-bar/lib/preset-pill";
 import { TableToolbar } from "@/components/data-table/table-toolbar";
 import { useDatasetsTableStore } from "@/features/datasets/list/stores/datasets-table-store";
 import { OPTIONAL_COLUMNS } from "@/features/datasets/list/lib/dataset-columns";
 import { DATASET_STATIC_FIELDS, type Dataset } from "@/features/datasets/list/lib/dataset-search-fields";
 import { useDatasetsAsyncFields } from "@/features/datasets/list/hooks/use-datasets-async-fields";
 
-// =============================================================================
-// Helpers
-// =============================================================================
-
-function presetPillClasses(bgClass: string, active: boolean): string {
-  return cn(
-    "inline-flex items-center gap-1.5 rounded px-2 py-0.5 transition-all",
-    bgClass,
-    active && "ring-2 ring-black/15 ring-inset dark:ring-white/20",
-    "group-data-[selected=true]:scale-105 group-data-[selected=true]:shadow-lg",
-    !active && "opacity-70 group-data-[selected=true]:opacity-100 hover:opacity-100",
-  );
-}
-
-// =============================================================================
-// Props
-// =============================================================================
-
 export interface DatasetsToolbarProps {
   datasets: Dataset[];
   searchChips: SearchChip[];
   onSearchChipsChange: (chips: SearchChip[]) => void;
-  /** Results count for displaying "N results" or "M of N results" */
   resultsCount?: ResultsCount;
-  /** Current username for "My Datasets" preset */
   currentUsername?: string | null;
-  /** Manual refresh callback */
   onRefresh: () => void;
-  /** Loading state for refresh button */
   isRefreshing: boolean;
 }
 
-// =============================================================================
-// Component
-// =============================================================================
-
 export const DatasetsToolbar = memo(function DatasetsToolbar({
   datasets,
   searchChips,
@@ -75,18 +49,16 @@ export const DatasetsToolbar = memo(function DatasetsToolbar({
   const visibleColumnIds = useDatasetsTableStore((s) => s.visibleColumnIds);
   const toggleColumn = useDatasetsTableStore((s) => s.toggleColumn);
 
-  // Async fields: user list from /api/users with lazy loading
   const { userField } = useDatasetsAsyncFields();
 
-  // Compose static + async fields
   const searchFields = useMemo(
     (): readonly SearchField<Dataset>[] => [
-      DATASET_STATIC_FIELDS[0], // type
-      DATASET_STATIC_FIELDS[1], // name
-      DATASET_STATIC_FIELDS[2], // bucket
-      userField, // async - complete user list
-      DATASET_STATIC_FIELDS[3], // created_at
-      DATASET_STATIC_FIELDS[4], // updated_at
+      DATASET_STATIC_FIELDS[0],
+      DATASET_STATIC_FIELDS[1],
+      DATASET_STATIC_FIELDS[2],
+      userField,
+      DATASET_STATIC_FIELDS[3],
+      DATASET_STATIC_FIELDS[4],
     ],
     [userField],
   );
@@ -123,7 +95,6 @@ export const DatasetsToolbar = memo(function DatasetsToolbar({
     return [{ label: "User:", items: [myDatasetsPreset] }];
   }, [myDatasetsPreset]);
 
-  // Memoize autoRefreshProps to prevent unnecessary TableToolbar re-renders
   const autoRefreshProps = useMemo(
     () => ({
       onRefresh,