frontend: Advanced Search: Add saved searches

frontend/src/components/advancedSearch/AdvancedSearch.tsx

@@ -28,7 +28,10 @@ import { useLocalStorageState } from '../globalSearch/useLocalStorageState';
 import { ApiResourcesView } from './ApiResourcePicker';
 import { EmptyResults } from './EmptyResults';
 import { ResourceSearch } from './ResourceSearch';
+import type { SavedAdvancedSearch } from './savedAdvancedSearches';
+import { SavedSearches } from './SavedSearches';
 import { SearchSettings } from './SearchSettings';
+import { getSelectedResourcesValue } from './selectedResources';
 
 const emptyList: [] = [];
 
@@ -82,12 +85,9 @@ export function AdvancedSearch() {
     if (!selectedResources) return;
 
     setSelectedResourcesState(() =>
-      selectedResources.size === resources?.length
-        ? 'all'
-        : selectedResources.size === 0
-        ? ''
-        : [...selectedResources].join('+')
+      getSelectedResourcesValue(selectedResources, resources?.length)
     );
+    // setSelectedResourcesState is not stable between renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedResources, resources]);
 
@@ -96,6 +96,35 @@ export function AdvancedSearch() {
     [resources, selectedResources]
   );
 
+  const selectedResourcesValue = useMemo(() => {
+    if (!selectedResources) {
+      return selectedResourcesState || '';
+    }
+
+    return getSelectedResourcesValue(selectedResources, resources?.length);
+  }, [resources, selectedResources, selectedResourcesState]);
+
+  const restoreSavedSearch = useCallback(
+    (search: SavedAdvancedSearch) => {
+      const availableResourceIds = new Set(resources?.map(resource => apiResourceId(resource)));
+
+      if (search.resources === 'all') {
+        setSelectedResources(availableResourceIds);
+      } else if (!search.resources) {
+        setSelectedResources(new Set());
+      } else {
+        setSelectedResources(
+          new Set(
+            search.resources.split('+').filter(resourceId => availableResourceIds.has(resourceId))
+          )
+        );
+      }
+
+      setRawQuery(search.query);
+    },
+    [resources, setRawQuery]
+  );
+
   if (isLoading) {
     return <Loader title={t('Loading')} />;
   }
@@ -128,6 +157,12 @@ export function AdvancedSearch() {
           setSelectedResources={setSelectedResources}
         />
 
+        <SavedSearches
+          rawQuery={rawQuery ?? ''}
+          resourcesValue={selectedResourcesValue}
+          onSearchSelected={restoreSavedSearch}
+        />
+
         <SearchSettings
           maxItemsPerResource={maxItemsPerResource}
           setMaxItemsPerResource={setMaxItemsPerResource}

frontend/src/components/advancedSearch/SavedSearches.test.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2025 The Kubernetes Authors
+ *
+ * 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.
+ */
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { TestContext } from '../../test';
+import { SAVED_ADVANCED_SEARCHES_KEY } from './savedAdvancedSearches';
+import { SavedSearches } from './SavedSearches';
+
+describe('SavedSearches', () => {
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  it('opens the saved searches popover when clicked', () => {
+    render(
+      <TestContext>
+        <SavedSearches rawQuery="" resourcesValue="" onSearchSelected={() => {}} />
+      </TestContext>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Saved Searches' }));
+
+    expect(screen.getByText('Save current search')).toBeInTheDocument();
+    expect(screen.getByText('No saved searches yet.')).toBeInTheDocument();
+  });
+
+  it('clears transient popover state when dismissed', async () => {
+    localStorage.setItem(
+      SAVED_ADVANCED_SEARCHES_KEY,
+      JSON.stringify([
+        {
+          id: 'saved-1',
+          name: 'Existing',
+          query: 'true',
+          resources: 'all',
+          namespaces: [],
+          createdAt: 1,
+        },
+      ])
+    );
+
+    render(
+      <TestContext>
+        <SavedSearches rawQuery="true" resourcesValue="all" onSearchSelected={() => {}} />
+      </TestContext>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Saved Searches' }));
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Draft save name' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }));
+    expect(screen.getByDisplayValue('Existing')).toBeInTheDocument();
+
+    fireEvent.keyDown(screen.getByRole('presentation'), { code: 'Escape', key: 'Escape' });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Save current search')).not.toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Saved Searches' }));
+
+    expect(screen.queryByDisplayValue('Existing')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('Name')).toHaveValue('');
+  });
+});