UI: Reflect search in URL

code/ui/manager/package.json

@@ -86,7 +86,6 @@
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "@tanstack/react-virtual": "^3.3.0",
-    "@testing-library/react": "^11.2.2",
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.3.4",
     "browser-dtector": "^3.4.0",

code/ui/manager/src/components/sidebar/Search.tsx

@@ -1,6 +1,6 @@
 import { useStorybookApi, shortcutToHumanString } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
-import type { DownshiftState, StateChangeOptions } from 'downshift';
+import type { DownshiftState, StateChangeOptions, ControllerStateAndHelpers } from 'downshift';
 import Downshift from 'downshift';
 import type { FuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
@@ -28,6 +28,8 @@ const { document } = global;
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
 
+export const FILTER_KEY = 'filter';
+
 const options = {
   shouldSort: true,
   tokenize: true,
@@ -261,8 +263,26 @@ export const Search = React.memo<{
     [api]
   );
 
-  const onInputValueChange = useCallback((inputValue: string, stateAndHelpers: any) => {
+  const onInputValueChange = useCallback((inputValue: string, stateAndHelpers: ControllerStateAndHelpers<DownshiftItem>) => {
     showAllComponents(false);
+    const isBrowsing = !stateAndHelpers.isOpen && document.activeElement !== inputRef.current;
+    api.setQueryParams({
+      filter: isBrowsing ? null : inputValue,
+    });
+    const params = new URLSearchParams(window.location.search);
+    if (window.history.replaceState) {
+      if (inputValue) {
+        params.set(FILTER_KEY, inputValue);
+      } else {
+        params.delete(FILTER_KEY);
+      }
+      const paramsString = params.size > 0 ? `?${params.toString()}` : '';
+      window.history.replaceState(
+        {},
+        '',
+        paramsString
+      );
+    }
   }, []);
 
   const stateReducer = useCallback(
@@ -318,6 +338,7 @@ export const Search = React.memo<{
     <Downshift<DownshiftItem>
       initialInputValue={initialQuery}
       stateReducer={stateReducer}
+      initialIsOpen={initialQuery !== ''}
       // @ts-expect-error (Converted from ts-ignore)
       itemToString={(result) => result?.item?.name || ''}
       scrollIntoView={(e) => scrollIntoView(e)}
@@ -340,6 +361,8 @@ export const Search = React.memo<{
         const input = inputValue ? inputValue.trim() : '';
         let results: DownshiftItem[] = input ? getResults(input) : [];
 
+        const isBrowsing = !isOpen && document.activeElement !== inputRef.current;
+
         const lastViewed = !input && getLastViewed();
         if (lastViewed && lastViewed.length) {
           results = lastViewed.reduce((acc, { storyId, refId }) => {
@@ -374,7 +397,7 @@ export const Search = React.memo<{
               // The stateReducer will handle returning to the tree view
               inputRef.current.blur();
             }
-          },
+          }
         });
 
         const labelProps = getLabelProps({
@@ -437,7 +460,7 @@ export const Search = React.memo<{
               {children({
                 query: input,
                 results,
-                isBrowsing: !isOpen && document.activeElement !== inputRef.current,
+                isBrowsing,
                 closeMenu,
                 getMenuProps,
                 getItemProps,

code/ui/manager/src/components/sidebar/Sidebar.tsx

@@ -113,6 +113,7 @@ export interface SidebarProps extends API_LoadedRefData {
   refId?: string;
   menuHighlighted?: boolean;
   enableShortcuts?: boolean;
+  initialQuery?: string;
   onMenuClick?: HeadingProps['onMenuClick'];
   showCreateStoryButton?: boolean;
 }
@@ -130,6 +131,7 @@ export const Sidebar = React.memo(function Sidebar({
   menuHighlighted = false,
   enableShortcuts = true,
   refs = {},
+  initialQuery,
   onMenuClick,
   showCreateStoryButton,
 }: SidebarProps) {
@@ -154,6 +156,7 @@ export const Sidebar = React.memo(function Sidebar({
           <Search
             dataset={dataset}
             enableShortcuts={enableShortcuts}
+            initialQuery={initialQuery}
             showCreateStoryButton={showCreateStoryButton}
             {...lastViewedProps}
           >

code/ui/manager/src/components/sidebar/__tests__/Search.test.tsx

@@ -0,0 +1,136 @@
+import { type Mock, beforeEach, afterEach, describe, test, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, cleanup, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as api from '@storybook/manager-api';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+
+import { FILTER_KEY, Search } from '../Search';
+import type {
+  CombinedDataset,
+  SearchChildrenFn,
+  Selection,
+} from '../types';
+
+const FILTER_VALUE = 'filter';
+const PLACEHOLDER = 'Find components';
+
+const renderSearch = (props?: Partial<Parameters<typeof Search>[0]>) => {
+  const dataset: CombinedDataset = {
+    hash: {},
+    entries: []
+  };
+  const getLastViewed = (): Selection[] => [];
+  const children: SearchChildrenFn = () => (
+    <></>
+  );
+  render(
+    <ThemeProvider theme={convert(themes.light)}>
+      <Search
+        {...({
+          dataset,
+          getLastViewed,
+          children,
+          ...props
+        })}
+      >
+      </Search>
+    </ThemeProvider>
+  );
+};
+
+vi.mock('@storybook/manager-api');
+
+describe('Search', () => {
+  let setQueryParams: Mock;
+  let getQueryParams: Mock;
+  let queryParams: Record<string, string>;
+
+  beforeEach(() => {
+    vi.mocked(api.useStorybookApi).mockReset();
+    queryParams = {};
+    setQueryParams = vi.fn((params) => {
+      queryParams = params;
+    });
+    getQueryParams = vi.fn(() => queryParams);
+    const mockApi: Partial<api.API> = {
+      setQueryParams,
+      getQueryParams,
+      getShortcutKeys: () => ({
+        aboutPage: [],
+        collapseAll: [],
+        escape: [],
+        expandAll: [],
+        focusIframe: [],
+        focusNav: [],
+        focusPanel: [],
+        fullScreen: [],
+        nextComponent: [],
+        nextStory: [],
+        panelPosition: [],
+        prevComponent: [],
+        prevStory: [],
+        remount: [],
+        search: [],
+        shortcutsPage: [],
+        toggleNav: [],
+        togglePanel: [],
+        toolbar: []
+      })
+    };
+    vi.mocked(api.useStorybookApi).mockReturnValue(mockApi as any);
+    vi.mocked(api.useStorybookState).mockReset();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders OK', async () => {
+    renderSearch();
+    const INPUT = screen.getByPlaceholderText(PLACEHOLDER) as HTMLInputElement;
+    expect(INPUT.value).toBe('');
+  });
+
+  test('prefills input with initial query', async () => {
+    const state: Partial<api.State> = {
+      storyId: 'jest',
+      customQueryParams: {
+        [FILTER_KEY]: 'filter',
+      },
+      ui: { enableShortcuts: true },
+    };
+    vi.mocked(api.useStorybookState).mockReturnValue(state as any);
+    renderSearch({initialQuery: FILTER_VALUE});
+    const INPUT = screen.getByPlaceholderText(PLACEHOLDER) as HTMLInputElement;
+    expect(INPUT.value).toBe(FILTER_VALUE);
+    expect(setQueryParams).not.toHaveBeenCalled();
+    expect(queryParams).toEqual({});
+  });
+
+  test('updates location on input update with current query', async () => {
+    renderSearch({initialQuery: 'foo'});
+    const INPUT = screen.getByPlaceholderText(PLACEHOLDER) as HTMLInputElement;
+    await act(async () => {
+      await userEvent.clear(INPUT);
+      await userEvent.type(INPUT, FILTER_VALUE);
+    });
+    expect(setQueryParams).toHaveBeenCalled();
+    expect(queryParams).toEqual({
+      [FILTER_KEY]: FILTER_VALUE
+    });
+  });
+
+  test('updates location on input update without current query', async () => {
+    renderSearch();
+    const INPUT = screen.getByPlaceholderText(PLACEHOLDER) as HTMLInputElement;
+    await act(async () => {
+      await userEvent.clear(INPUT);
+      await userEvent.type(INPUT, FILTER_VALUE);
+    });
+    expect(setQueryParams).toHaveBeenCalled();
+    expect(queryParams).toEqual({
+      [FILTER_KEY]: FILTER_VALUE
+    });
+  });
+});

code/ui/manager/src/container/Sidebar.tsx

@@ -65,6 +65,7 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
       enableShortcuts,
       bottom,
       extra: top,
+      initialQuery: api.getQueryParam('filter'),
     };
   };
 

code/yarn.lock

@@ -6285,7 +6285,6 @@ __metadata:
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
     "@tanstack/react-virtual": "npm:^3.3.0"
-    "@testing-library/react": "npm:^11.2.2"
     "@types/react-transition-group": "npm:^4"
     "@types/semver": "npm:^7.3.4"
     browser-dtector: "npm:^3.4.0"
@@ -7326,7 +7325,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^7.28.1, @testing-library/dom@npm:^7.29.4":
+"@testing-library/dom@npm:^7.29.4":
   version: 7.31.2
   resolution: "@testing-library/dom@npm:7.31.2"
   dependencies:
@@ -7421,19 +7420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^11.2.2":
-  version: 11.2.7
-  resolution: "@testing-library/react@npm:11.2.7"
-  dependencies:
-    "@babel/runtime": "npm:^7.12.5"
-    "@testing-library/dom": "npm:^7.28.1"
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 10c0/5c97aa5fb28a867d674e292e9e556b0890385e729972f8e0c3386001903e5975f6798632a038558750101fc1ff20d5faf7a0fb4d382ee3afe28d0118e9bd2f36
-  languageName: node
-  linkType: hard
-
 "@testing-library/react@npm:^14.0.0":
   version: 14.1.2
   resolution: "@testing-library/react@npm:14.1.2"