feat: reflect search in URL [#16287]

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

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/lib/ui/src/components/sidebar/Search.tsx b/lib/ui/src/components/sidebar/Search.tsx
@@ -5,7 +5,7 @@ import Downshift, { DownshiftState, StateChangeOptions } from 'downshift';
 import Fuse, { FuseOptions } from 'fuse.js';
 import global from 'global';
 import { transparentize } from 'polished';
-import React, { useMemo, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 
 import { DEFAULT_REF_ID } from './data';
 import {
@@ -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,
@@ -285,6 +286,7 @@ export const Search = React.memo<{
     return (
       <Downshift<DownshiftItem>
         initialInputValue={initialQuery}
+        initialIsOpen={initialQuery !== ''}
         stateReducer={stateReducer}
         // @ts-ignore
         itemToString={(result) => result?.item?.name || ''}
@@ -305,6 +307,18 @@ 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) {
+            const searchParams = new URLSearchParams(global.window.location.search);
+            if (input !== '') searchParams.set(FILTER_KEY, input);
+            else searchParams.delete(FILTER_KEY);
+            global.window.history.replaceState(
+              {},
+              '',
+              `${global.window.location.origin}?${searchParams.toString()}`
+            );
+          }
+
           const lastViewed = !input && getLastViewed();
           if (lastViewed && lastViewed.length) {
             results = lastViewed.reduce((acc, { storyId, refId }) => {

diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -9,7 +9,7 @@ import { Heading } from './Heading';
 
 import { DEFAULT_REF_ID, collapseAllStories, collapseDocsOnlyStories } from './data';
 import { Explorer } from './Explorer';
-import { Search } from './Search';
+import { Search, FILTER_KEY } from './Search';
 import { SearchResults } from './SearchResults';
 import { Refs, CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
@@ -109,6 +109,10 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
     const isLoading = !dataset.hash[DEFAULT_REF_ID].ready;
     const lastViewedProps = useLastViewed(selected);
 
+    // Grab initialQuery from URLSearchParams
+    const searchParams = new URLSearchParams(global.window.location.search);
+    const initialQuery = searchParams.has(FILTER_KEY) ? searchParams.get(FILTER_KEY) : '';
+
     return (
       <Container className="container sidebar-container">
         <CustomScrollArea vertical>
@@ -124,6 +128,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
               dataset={dataset}
               isLoading={isLoading}
               enableShortcuts={enableShortcuts}
+              initialQuery={initialQuery}
               {...lastViewedProps}
             >
               {({