feat: reflect search in URL [#16287]

storybookjs · Oct 29, 2021 · d2b4929 · d2b4929
1 parent d8ba74c
commit d2b4929
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 2 deletions.
diff --git a/lib/ui/src/components/sidebar/Search.stories.tsx b/lib/ui/src/components/sidebar/Search.stories.tsx
@@ -29,7 +29,11 @@ const baseProps = {
   getLastViewed: () => [] as Selection[],
 };
 
-export const Simple = () => <Search {...baseProps}>{() => null}</Search>;
+export const Simple = (testProps: any) => (
+  <Search {...baseProps} {...testProps}>
+    {() => null}
+  </Search>
+);
 
 export const FilledIn = () => (
   <Search {...baseProps} initialQuery="Search query">

diff --git a/lib/ui/src/components/sidebar/Search.test.js b/lib/ui/src/components/sidebar/Search.test.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+
+import { FILTER_KEY } from './Search';
+import { Simple as Search } from './Search.stories';
+
+const TEST_URL = 'http://localhost';
+const FILTER_VALUE = 'filter';
+const PLACEHOLDER = 'Find components';
+const DEFAULT_SEARCH = '?path=story';
+
+beforeEach(() => {
+  const { history, location } = global.window;
+  delete global.window.location;
+  global.window.location = { ...location };
+  delete global.window.history;
+  global.window.history = { ...history };
+  global.window.history.replaceState = (state, title, url) => {
+    global.window.location.href = url;
+    global.window.location.search = url.indexOf('?') !== -1 ? url.slice(url.indexOf('?')) : '';
+  };
+});
+
+const setLocation = (url = TEST_URL, search = DEFAULT_SEARCH) => {
+  global.window.location.href = `${url}${search}`;
+  global.window.location.search = search;
+};
+
+const renderSearch = (props) =>
+  render(
+    <ThemeProvider theme={convert(themes.light)}>
+      <Search {...props} />
+    </ThemeProvider>
+  );
+
+describe('Search - reflect search in URL', () => {
+  it('renders OK', async () => {
+    setLocation();
+    renderSearch(TEST_URL, DEFAULT_SEARCH);
+    const INPUT = await screen.getByPlaceholderText(PLACEHOLDER);
+    expect(INPUT.value).toBe('');
+  });
+  it('prefills input with search params', async () => {
+    setLocation(TEST_URL, `${DEFAULT_SEARCH}&${FILTER_KEY}=${FILTER_VALUE}`);
+    renderSearch();
+    const INPUT = await screen.getByPlaceholderText(PLACEHOLDER);
+    expect(INPUT.value).toBe(FILTER_VALUE);
+  });
+  it('updates location on input update with current query', async () => {
+    setLocation();
+    renderSearch();
+    const INPUT = await screen.getByPlaceholderText(PLACEHOLDER);
+    userEvent.clear(INPUT);
+    userEvent.type(INPUT, FILTER_VALUE);
+    expect(global.window.location.href).toBe(
+      `${TEST_URL}${DEFAULT_SEARCH}&${FILTER_KEY}=${FILTER_VALUE}`
+    );
+    expect(global.window.location.search).toBe(`${DEFAULT_SEARCH}&${FILTER_KEY}=${FILTER_VALUE}`);
+  });
+  it('updates location on input update without current query', async () => {
+    setLocation(TEST_URL, '');
+    renderSearch();
+    const INPUT = await screen.getByPlaceholderText(PLACEHOLDER);
+    userEvent.clear(INPUT);
+    userEvent.type(INPUT, FILTER_VALUE);
+    expect(global.window.location.href).toBe(`${TEST_URL}?${FILTER_KEY}=${FILTER_VALUE}`);
+    expect(global.window.location.search).toBe(`?${FILTER_KEY}=${FILTER_VALUE}`);
+  });
+  it('initialQuery updates URL', async () => {
+    setLocation(TEST_URL, '');
+    renderSearch({ initialQuery: FILTER_VALUE });
+    const INPUT = await screen.getByPlaceholderText(PLACEHOLDER);
+    expect(INPUT.value).toBe(FILTER_VALUE);
+    expect(global.window.location.href).toBe(`${TEST_URL}?${FILTER_KEY}=${FILTER_VALUE}`);
+    expect(global.window.location.search).toBe(`?${FILTER_KEY}=${FILTER_VALUE}`);
+  });
+});
diff --git a/lib/ui/src/components/sidebar/Search.tsx b/lib/ui/src/components/sidebar/Search.tsx
@@ -25,6 +25,7 @@ import { searchItem } from './utils';
 const { document } = global;
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
+export const FILTER_KEY = 'filter';
 
 const options = {
   shouldSort: true,
@@ -165,6 +166,13 @@ export const Search = React.memo<{
     const [inputPlaceholder, setPlaceholder] = useState('Find components');
     const [allComponents, showAllComponents] = useState(false);
 
+    // Grab initialQuery from URLSearchParams
+    const searchParams = new URLSearchParams(global.window.location.search);
+    const initialInputValue =
+      initialQuery === '' && searchParams.has(FILTER_KEY)
+        ? searchParams.get(FILTER_KEY)
+        : initialQuery;
+
     const selectStory = useCallback(
       (id: string, refId: string) => {
         if (api) api.selectStory(id, undefined, { ref: refId !== DEFAULT_REF_ID && refId });
@@ -284,7 +292,8 @@ export const Search = React.memo<{
 
     return (
       <Downshift<DownshiftItem>
-        initialInputValue={initialQuery}
+        initialInputValue={initialInputValue}
+        initialIsOpen={initialInputValue !== ''}
         stateReducer={stateReducer}
         // @ts-ignore
         itemToString={(result) => result?.item?.name || ''}
@@ -305,6 +314,19 @@ export const Search = React.memo<{
           const input = inputValue ? inputValue.trim() : '';
           let results: DownshiftItem[] = input ? getResults(input) : [];
 
+          // Sync URLSearchParams with search filter
+          if (global.window.history.replaceState) {
+            if (input !== '') searchParams.set(FILTER_KEY, input);
+            else searchParams.delete(FILTER_KEY);
+            global.window.history.replaceState(
+              {},
+              '',
+              `${global.window.location.origin}${
+                searchParams.toString() !== '' ? '?' : ''
+              }${searchParams.toString()}`
+            );
+          }
+
           const lastViewed = !input && getLastViewed();
           if (lastViewed && lastViewed.length) {
             results = lastViewed.reduce((acc, { storyId, refId }) => {