feat(ui): autocomplete namespace filter from displayed resources (refs #7405)

.features/pending/namespace-filter-autocomplete.md

@@ -0,0 +1,10 @@
+Description: Autocomplete the Namespace filter from the namespaces of resources currently visible on the page
+Author: [Morgan Allen](https://github.com/callmemorgan)
+Component: UI
+Issues: 7405
+
+The Namespace filter on the workflows, workflow templates, cron workflows, sensors, event sources, event bindings, and event flow pages now autocompletes from the namespaces of resources already loaded for that page, in addition to the existing localStorage history.
+
+When the user is viewing resources across multiple namespaces (cluster-wide mode), the namespace filter dropdown now lists the namespaces present on the current page and narrows as you type. No new server endpoint or RBAC is involved — suggestions are derived from data the user already has permission to see.
+
+The managed-namespace short-circuit (where the filter renders as plain text) is unchanged.

ui/src/cron-workflows/cron-workflow-filters.tsx

@@ -5,6 +5,7 @@ import {CheckboxFilter} from '../shared/components/checkbox-filter/checkbox-filt
 import {NamespaceFilter} from '../shared/components/namespace-filter';
 import {TagsInput} from '../shared/components/tags-input/tags-input';
 import * as models from '../shared/models';
+import {getUniqueNamespaces} from '../shared/namespaces';
 
 import './cron-workflow-filters.scss';
 
@@ -45,6 +46,7 @@ export function CronWorkflowFilters({cronWorkflows, namespace, labels, states, o
                         onChange={ns => {
                             onChange(ns, labels, states);
                         }}
+                        extraNamespaces={getUniqueNamespaces(cronWorkflows)}
                     />
                 </div>
                 <div className='columns small-2 xlarge-12'>

ui/src/event-flow/event-flow-page.tsx

@@ -256,7 +256,14 @@ export function EventFlowPage({history, location, match}: RouteComponentProps<an
                         }
                     ]
                 },
-                tools: [<NamespaceFilter key='namespace-filter' value={namespace} onChange={setNamespace} />]
+                tools: [
+                    <NamespaceFilter
+                        key='namespace-filter'
+                        value={namespace}
+                        onChange={setNamespace}
+                        extraNamespaces={nsUtils.getUniqueNamespaces([...(eventSources || []), ...(sensors || []), ...(workflows || [])])}
+                    />
+                ]
             }}>
             <ErrorNotice error={error} />
             {emptyGraph ? (

ui/src/event-sources/event-source-list.tsx

@@ -115,7 +115,7 @@ export function EventSourceList({match, location, history}: RouteComponentProps<
                         }
                     ]
                 },
-                tools: [<NamespaceFilter key='namespace-filter' value={namespace} onChange={setNamespace} />]
+                tools: [<NamespaceFilter key='namespace-filter' value={namespace} onChange={setNamespace} extraNamespaces={nsUtils.getUniqueNamespaces(eventSources)} />]
             }}>
             <ErrorNotice error={error} />
             {loading && <Loading />}

ui/src/sensors/sensor-list.tsx

@@ -110,7 +110,7 @@ export function SensorList({match, location, history}: RouteComponentProps<any>)
                         }
                     ]
                 },
-                tools: [<NamespaceFilter key='namespace-filter' value={namespace} onChange={setNamespace} />]
+                tools: [<NamespaceFilter key='namespace-filter' value={namespace} onChange={setNamespace} extraNamespaces={nsUtils.getUniqueNamespaces(sensors)} />]
             }}>
             <ErrorNotice error={error} />
             {loading && <Loading />}

ui/src/shared/components/input-filter.test.tsx

@@ -0,0 +1,39 @@
+import {render} from '@testing-library/react';
+import {Autocomplete} from 'argo-ui/src/components/autocomplete/autocomplete';
+import React from 'react';
+
+import {InputFilter} from './input-filter';
+
+jest.mock('argo-ui/src/components/autocomplete/autocomplete', () => ({
+    Autocomplete: jest.fn(() => null)
+}));
+
+const lastItems = (): string[] => {
+    const mock = Autocomplete as unknown as jest.Mock;
+    const lastCall = mock.mock.calls[mock.mock.calls.length - 1];
+    return lastCall[0].items as string[];
+};
+
+describe('InputFilter', () => {
+    beforeEach(() => {
+        (Autocomplete as unknown as jest.Mock).mockClear();
+        localStorage.clear();
+    });
+
+    it('passes only the localStorage cache when extraSuggestions is undefined', () => {
+        localStorage.setItem('ns_inputs', 'argo,kube-system');
+        render(<InputFilter value='' name='ns' onChange={() => undefined} />);
+        expect(lastItems()).toEqual(['argo', 'kube-system']);
+    });
+
+    it('passes extraSuggestions ahead of the localStorage cache and dedups overlaps', () => {
+        localStorage.setItem('ns_inputs', 'argo,kube-system');
+        render(<InputFilter value='' name='ns' onChange={() => undefined} extraSuggestions={['prod', 'argo', 'staging']} />);
+        expect(lastItems()).toEqual(['prod', 'argo', 'staging', 'kube-system']);
+    });
+
+    it('handles empty localStorage and empty extraSuggestions', () => {
+        render(<InputFilter value='' name='ns' onChange={() => undefined} extraSuggestions={[]} />);
+        expect(lastItems()).toEqual([]);
+    });
+});

ui/src/shared/components/input-filter.tsx

@@ -1,5 +1,5 @@
 import {Autocomplete} from 'argo-ui/src/components/autocomplete/autocomplete';
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 
 import './input-filter.scss';
 
@@ -10,11 +10,13 @@ interface InputProps {
     onChange: (input: string) => void;
     filterSuggestions?: boolean;
     autoHighlight?: boolean;
+    extraSuggestions?: string[];
 }
 
 export function InputFilter(props: InputProps) {
     const [value, setValue] = useState(props.value);
     const [localCache, setLocalCache] = useState((localStorage.getItem(props.name + '_inputs') || '').split(',').filter(item => item !== ''));
+    const items = useMemo(() => Array.from(new Set([...(props.extraSuggestions ?? []), ...localCache])), [localCache, props.extraSuggestions]);
 
     function setValueAndCache(newValue: string) {
         setLocalCache(currentCache => {
@@ -50,7 +52,7 @@ export function InputFilter(props: InputProps) {
     return (
         <div className='input-filter'>
             <Autocomplete
-                items={localCache}
+                items={items}
                 value={value}
                 onChange={(e, newValue) => setValue(newValue)}
                 onSelect={newValue => {

ui/src/shared/components/namespace-filter.tsx

@@ -3,5 +3,9 @@ import * as React from 'react';
 import * as nsUtils from '../namespaces';
 import {InputFilter} from './input-filter';
 
-export const NamespaceFilter = (props: {value: string; onChange: (namespace: string) => void}) =>
-    nsUtils.getManagedNamespace() ? <>{nsUtils.getManagedNamespace()}</> : <InputFilter value={props.value} name='ns' onChange={ns => props.onChange(ns)} />;
+export const NamespaceFilter = (props: {value: string; onChange: (namespace: string) => void; extraNamespaces?: string[]}) =>
+    nsUtils.getManagedNamespace() ? (
+        <>{nsUtils.getManagedNamespace()}</>
+    ) : (
+        <InputFilter value={props.value} name='ns' onChange={ns => props.onChange(ns)} extraSuggestions={props.extraNamespaces} filterSuggestions />
+    );

ui/src/shared/namespaces.ts

@@ -62,3 +62,17 @@ export function getNamespace(namespace: string) {
 export function getNamespaceWithDefault(namespace: string) {
     return namespace || getCurrentNamespace() || getUserNamespace() || getManagedNamespace() || 'default';
 }
+
+// extract the unique, sorted set of namespaces present on a list of namespaced k8s objects
+export function getUniqueNamespaces<T extends {metadata?: {namespace?: string}}>(items: T[] | null | undefined): string[] {
+    if (!items) {
+        return [];
+    }
+    const set = new Set<string>();
+    for (const item of items) {
+        if (item.metadata?.namespace) {
+            set.add(item.metadata.namespace);
+        }
+    }
+    return Array.from(set).sort();
+}

ui/src/workflow-event-bindings/workflow-event-bindings.tsx

@@ -105,7 +105,7 @@ export function WorkflowEventBindings({match, location, history}: RouteComponent
                     {title: 'Workflow Event Bindings', path: uiUrl('workflow-event-bindings')},
                     {title: namespace, path: uiUrl('workflow-event-bindings/' + namespace)}
                 ],
-                tools: [<NamespaceFilter key='namespace-filter' value={namespace} onChange={setNamespace} />]
+                tools: [<NamespaceFilter key='namespace-filter' value={namespace} onChange={setNamespace} extraNamespaces={nsUtils.getUniqueNamespaces(workflowEventBindings)} />]
             }}>
             <ErrorNotice error={error} />
             {!workflowEventBindings ? (

ui/src/workflow-templates/workflow-template-filters.tsx

@@ -5,6 +5,7 @@ import {InputFilter} from '../shared/components/input-filter';
 import {NamespaceFilter} from '../shared/components/namespace-filter';
 import {TagsInput} from '../shared/components/tags-input/tags-input';
 import * as models from '../shared/models';
+import {getUniqueNamespaces} from '../shared/namespaces';
 
 import './workflow-template-filters.scss';
 
@@ -45,6 +46,7 @@ export function WorkflowTemplateFilters({templates, namespace, namePattern, labe
                         onChange={ns => {
                             onChange(ns, namePattern, labels);
                         }}
+                        extraNamespaces={getUniqueNamespaces(templates)}
                     />
                 </div>
                 <div className='columns small-2 xlarge-12'>

ui/src/workflows/components/workflow-filters/workflow-filters.tsx

@@ -13,6 +13,7 @@ import {NamespaceFilter} from '../../../shared/components/namespace-filter';
 import {TagsInput} from '../../../shared/components/tags-input/tags-input';
 import * as models from '../../../shared/models';
 import {WorkflowPhase} from '../../../shared/models';
+import {getUniqueNamespaces} from '../../../shared/namespaces';
 import {services} from '../../../shared/services';
 
 import './workflow-filters.scss';
@@ -98,7 +99,7 @@ export function WorkflowFilters(props: WorkflowFilterProps) {
             <div className='row'>
                 <div className='columns small-2 xlarge-12'>
                     <p className='wf-filters-container__title'>Namespace</p>
-                    <NamespaceFilter value={props.namespace} onChange={props.setNamespace} />
+                    <NamespaceFilter value={props.namespace} onChange={props.setNamespace} extraNamespaces={getUniqueNamespaces(props.workflows)} />
                 </div>
                 <div className='columns small-2 xlarge-12'>
                     <DropDown