From 3ba92740d9b9aba5b2d593219a2b76d67bce3ffe Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sat, 17 Oct 2020 22:00:27 +0300
Subject: [PATCH 1/2] refactor(v2): use new way to get versions for search page

---
 .../src/theme/hooks/useVersioning.ts          | 30 -------------------
 .../src/theme/SearchPage/index.js             | 13 ++++----
 2 files changed, 7 insertions(+), 36 deletions(-)
 delete mode 100644 packages/docusaurus-plugin-content-docs/src/theme/hooks/useVersioning.ts

diff --git a/packages/docusaurus-plugin-content-docs/src/theme/hooks/useVersioning.ts b/packages/docusaurus-plugin-content-docs/src/theme/hooks/useVersioning.ts
deleted file mode 100644
index afc278336ca6..000000000000
--- a/packages/docusaurus-plugin-content-docs/src/theme/hooks/useVersioning.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-let versions: string[];
-
-try {
-  // eslint-disable-next-line global-require
-  versions = require('@site/versions.json');
-} catch {
-  versions = [];
-}
-
-// TODO deprecate in favor of useDocs.ts instead
-function useVersioning(): {
-  versioningEnabled: boolean;
-  versions: string[];
-  latestVersion: string;
-} {
-  return {
-    versioningEnabled: versions.length > 0,
-    versions,
-    latestVersion: versions[0],
-  };
-}
-
-export default useVersioning;
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
index aca8ef5d516a..04dfd02992ec 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
@@ -16,11 +16,13 @@ import clsx from 'clsx';
 import Head from '@docusaurus/Head';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useVersioning from '@theme/hooks/useVersioning';
+import {useDocsData} from '@theme/hooks/useDocs';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/constants';
+
 import styles from './styles.module.css';
 
 function pluralize(count, word) {
@@ -33,9 +35,10 @@ function Search() {
       themeConfig: {algolia: {appId = 'BH4D9OD16A', apiKey, indexName} = {}},
     } = {},
   } = useDocusaurusContext();
+  const {versions} = useDocsData(DEFAULT_PLUGIN_ID);
+  const versioningEnabled = versions.length > 0;
   const {searchValue, updateSearchPath} = useSearchQuery();
-  const {versioningEnabled, versions, latestVersion} = useVersioning();
-  const [searchVersion, setSearchVersion] = useState(latestVersion);
+  const [searchVersion, setSearchVersion] = useState(versions[0]?.name);
   const [searchQuery, setSearchQuery] = useState(searchValue);
   const initialSearchResultState = {
     items: [],
@@ -275,9 +278,7 @@ function Search() {
                 defaultValue={searchVersion}
                 className={styles.searchVersionInput}>
                 {versions.map((version, i) => (
-                  <option key={i} value={version}>
-                    {version}
-                  </option>
+                  <option key={i} label={version.label} value={version.name} />
                 ))}
               </select>
             </div>

From b8bc278affe6e1643eb7ecbe72960ac86d15d9dd Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Wed, 21 Oct 2020 17:29:22 +0200
Subject: [PATCH 2/2] search page: support docs multi-instance

---
 .../src/theme/SearchPage/index.js             | 140 ++++++++++++------
 .../src/theme/SearchPage/styles.module.css    |   1 +
 2 files changed, 95 insertions(+), 46 deletions(-)

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
index 04dfd02992ec..841167a45716 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
@@ -16,29 +16,96 @@ import clsx from 'clsx';
 import Head from '@docusaurus/Head';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useDocsData} from '@theme/hooks/useDocs';
+import {useAllDocsData} from '@theme/hooks/useDocs';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/constants';
-
 import styles from './styles.module.css';
 
 function pluralize(count, word) {
   return count > 1 ? `${word}s` : word;
 }
 
+function useDocsSearchVersionsHelpers() {
+  const allDocsData = useAllDocsData();
+
+  // State of the version select menus / algolia facet filters
+  // docsPluginId -> versionName map
+  const [searchVersions, setSearchVersions] = useState(() => {
+    return Object.entries(allDocsData).reduce((acc, [pluginId, pluginData]) => {
+      return {...acc, [pluginId]: pluginData.versions[0].name};
+    }, {});
+  });
+
+  // Set the value of a single select menu
+  const setSearchVersion = (pluginId, searchVersion) =>
+    setSearchVersions((s) => ({...s, [pluginId]: searchVersion}));
+
+  const versioningEnabled = Object.values(allDocsData).some(
+    (docsData) => docsData.versions.length > 1,
+  );
+
+  return {
+    allDocsData,
+    versioningEnabled,
+    searchVersions,
+    setSearchVersion,
+  };
+}
+
+// We want to display one select per versioned docs plugin instance
+const SearchVersionSelectList = ({docsSearchVersionsHelpers}) => {
+  const versionedPluginEntries = Object.entries(
+    docsSearchVersionsHelpers.allDocsData,
+  )
+    // Do not show a version select for unversioned docs plugin instances
+    .filter(([, docsData]) => docsData.versions.length > 1);
+
+  return (
+    <div
+      className={clsx(
+        'col',
+        'col--3',
+        'padding-left--none',
+        styles.searchVersionColumn,
+      )}>
+      {versionedPluginEntries.map(([pluginId, docsData]) => {
+        const labelPrefix =
+          versionedPluginEntries.length > 1 ? `${pluginId}: ` : '';
+        return (
+          <select
+            key={pluginId}
+            onChange={(e) =>
+              docsSearchVersionsHelpers.setSearchVersion(
+                pluginId,
+                e.target.value,
+              )
+            }
+            defaultValue={docsSearchVersionsHelpers.searchVersions[pluginId]}
+            className={styles.searchVersionInput}>
+            {docsData.versions.map((version, i) => (
+              <option
+                key={i}
+                label={`${labelPrefix}${version.label}`}
+                value={version.name}
+              />
+            ))}
+          </select>
+        );
+      })}
+    </div>
+  );
+};
+
 function Search() {
   const {
     siteConfig: {
       themeConfig: {algolia: {appId = 'BH4D9OD16A', apiKey, indexName} = {}},
     } = {},
   } = useDocusaurusContext();
-  const {versions} = useDocsData(DEFAULT_PLUGIN_ID);
-  const versioningEnabled = versions.length > 0;
+  const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
   const {searchValue, updateSearchPath} = useSearchQuery();
-  const [searchVersion, setSearchVersion] = useState(versions[0]?.name);
   const [searchQuery, setSearchQuery] = useState(searchValue);
   const initialSearchResultState = {
     items: [],
@@ -90,7 +157,7 @@ function Search() {
   const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
     hitsPerPage: 15,
     advancedSyntax: true,
-    facets: searchVersion ? ['version'] : [],
+    disjunctiveFacets: ['docusaurus_tag'],
   });
 
   algoliaHelper.on(
@@ -172,25 +239,19 @@ function Search() {
       : 'Search the documentation';
 
   const makeSearch = (page = 0) => {
-    if (searchVersion) {
-      algoliaHelper
-        .setQuery(searchQuery)
-        .addFacetRefinement('version', searchVersion)
-        .setPage(page)
-        .search();
-    } else {
-      algoliaHelper.setQuery(searchQuery).setPage(page).search();
-    }
-  };
-
-  const handleSearchInputChange = (e) => {
-    const searchInputValue = e.target.value;
+    algoliaHelper.setQuery(searchQuery).setPage(page);
+
+    algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
+    Object.entries(docsSearchVersionsHelpers.searchVersions).forEach(
+      ([pluginId, searchVersion]) => {
+        algoliaHelper.addDisjunctiveFacetRefinement(
+          'docusaurus_tag',
+          `docs-${pluginId}-${searchVersion}`,
+        );
+      },
+    );
 
-    if (e.target.tagName === 'SELECT') {
-      setSearchVersion(searchInputValue);
-    } else {
-      setSearchQuery(searchInputValue);
-    }
+    algoliaHelper.search();
   };
 
   useEffect(() => {
@@ -217,7 +278,7 @@ function Search() {
         makeSearch();
       }, 300);
     }
-  }, [searchQuery, searchVersion]);
+  }, [searchQuery, docsSearchVersionsHelpers.searchVersions]);
 
   useEffect(() => {
     if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
@@ -249,8 +310,8 @@ function Search() {
         <form className="row" onSubmit={(e) => e.preventDefault()}>
           <div
             className={clsx('col', styles.searchQueryColumn, {
-              'col--9': versioningEnabled,
-              'col--12': !versioningEnabled,
+              'col--9': docsSearchVersionsHelpers.versioningEnabled,
+              'col--12': !docsSearchVersionsHelpers.versioningEnabled,
             })}>
             <input
               type="search"
@@ -258,30 +319,17 @@ function Search() {
               className={styles.searchQueryInput}
               placeholder="Type your search here"
               aria-label="Search"
-              onChange={handleSearchInputChange}
+              onChange={(e) => setSearchQuery(e.target.value)}
               value={searchQuery}
               autoComplete="off"
               autoFocus
             />
           </div>
 
-          {versioningEnabled && (
-            <div
-              className={clsx(
-                'col',
-                'col--3',
-                'padding-left--none',
-                styles.searchVersionColumn,
-              )}>
-              <select
-                onChange={handleSearchInputChange}
-                defaultValue={searchVersion}
-                className={styles.searchVersionInput}>
-                {versions.map((version, i) => (
-                  <option key={i} label={version.label} value={version.name} />
-                ))}
-              </select>
-            </div>
+          {docsSearchVersionsHelpers.versioningEnabled && (
+            <SearchVersionSelectList
+              docsSearchVersionsHelpers={docsSearchVersionsHelpers}
+            />
           )}
         </form>
 
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
index 47bcb3c39e50..6c65a8fb99e9 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
@@ -14,6 +14,7 @@
   padding: 0.5rem;
   width: 100%;
   background: #fff;
+  margin-bottom: 1rem;
 }
 
 .searchResultsColumn {