Merge pull request #5105 from EnterpriseDB/feature/josh/DF-380-search…

…-only-latest-or-current-version

src/components/advanced-search/filtering.js

@@ -12,7 +12,9 @@ import useSiteMetadata from "../../hooks/use-sitemetadata";
 
 const labelForItem = (item, translation) => {
   return translation[item.label]
-    ? translation[item.label].name
+    ? translation[item.label].noSearch
+      ? null
+      : translation[item.label].name
     : capitalize(item.label);
 };
 
@@ -67,14 +69,16 @@ const RadioRefinement = ({
 
   const radioName = `radio-refinement-${attribute}`;
   const refinedItem = items.find((item) => item.isRefined);
-  const sortedItems = items.sort(
-    sortFunction ||
-      ((a, b) => {
-        const aLabel = labelForItem(a, translation);
-        const bLabel = labelForItem(b, translation);
-        return aLabel.toLowerCase() > bLabel.toLowerCase() ? 1 : -1;
-      }),
-  );
+  const sortedItems = items
+    .filter((item) => labelForItem(item, translation))
+    .sort(
+      sortFunction ||
+        ((a, b) => {
+          const aLabel = labelForItem(a, translation);
+          const bLabel = labelForItem(b, translation);
+          return aLabel.toLowerCase() > bLabel.toLowerCase() ? 1 : -1;
+        }),
+    );
 
   const radioRefine = (refinement) => {
     // toggle all current refinements, add new one

src/components/main-content.js

@@ -6,6 +6,7 @@ const MainContent = ({
   children,
   searchNavLogo = false,
   searchProduct = "",
+  searchVersion = "",
 }) => {
   return (
     <div className="flex-grow-1 min-w-50">
@@ -15,7 +16,11 @@ const MainContent = ({
           tbd
         </a>
       </TimedBanner>
-      <SearchNavigation logo={searchNavLogo} searchProduct={searchProduct} />
+      <SearchNavigation
+        logo={searchNavLogo}
+        searchProduct={searchProduct}
+        searchVersion={searchVersion}
+      />
       <main role="main" className="content-container mt-0 p-5">
         {children}
       </main>

src/components/search-navigation.js

@@ -20,7 +20,12 @@ const DocsLink = () => (
   </Link>
 );
 
-const SearchNavigation = ({ children, searchProduct, logo = false }) => {
+const SearchNavigation = ({
+  children,
+  searchProduct,
+  searchVersion,
+  logo = false,
+}) => {
   return (
     <Navbar variant="light" className="flex-md-nowrap p-3 border-bottom">
       {logo ? (
@@ -32,7 +37,7 @@ const SearchNavigation = ({ children, searchProduct, logo = false }) => {
       ) : (
         <></>
       )}
-      <SearchBar searchProduct={searchProduct} />
+      <SearchBar searchProduct={searchProduct} searchVersion={searchVersion} />
       <SearchNavigationLinks />
     </Navbar>
   );

src/components/search/formComps.js

@@ -17,21 +17,42 @@ const TryAdvancedSearch = (props) => {
   const state = uiState[algoliaIndex];
   const productFilter =
     state?.refinementList?.product?.join(",") ||
-    (state?.configure?.filters?.match(/product:"([^"]+)/) || [])[1] ||
+    (
+      state?.configure?.facetFilters
+        ?.filter((f) => f.startsWith("product:") && !f.startsWith("product:-"))
+        ?.map((f) => f.replace(/^product:/, "")) || []
+    ).join(",") ||
     "";
+
+  const searchingLatest =
+    state?.configure?.facetFilters?.includes("isLatest:true");
+  const searchingVersion = state?.configure?.facetFilters?.find((f) =>
+    f.startsWith("version:"),
+  );
+  const context =
+    searchingLatest || searchingVersion
+      ? "Searching only documentation for " +
+        (searchingLatest
+          ? "latest versions"
+          : productFilter + " " + searchingVersion.replace(":", " "))
+      : "";
+
   return (
-    <div className="search-prompt flex-grow-1 d-flex align-items-center justify-content-center p-4">
-      {res && res.nbHits > 0
-        ? "Not finding what you need?"
-        : "No results found."}
-      <Link
-        to={`/search?query=${encodeURIComponent(res.query)}${
-          productFilter ? "&product=" + encodeURIComponent(productFilter) : ""
-        }`}
-        className="ms-2"
-      >
-        Try Advanced Search
-      </Link>
+    <div className="search-prompt text-center p-4">
+      <i>{context}</i>
+      <div className="flex-grow-1 d-flex align-items-center justify-content-center">
+        {res && res.nbHits > 0
+          ? "Not finding what you need?"
+          : "No results found."}
+        <Link
+          to={`/search?query=${encodeURIComponent(res.query)}${
+            productFilter ? "&product=" + encodeURIComponent(productFilter) : ""
+          }`}
+          className="ms-2"
+        >
+          Try Advanced Search
+        </Link>
+      </div>
     </div>
   );
 };

src/components/search/index.js

@@ -59,7 +59,7 @@ const Search = ({ searchProduct, onSearchProductChange }) => {
       inputRef.current && inputRef.current.id === document.activeElement?.id,
     );
     if (inputRef.current?.value) refine(inputRef.current.value);
-  }, []);
+  }, [refine]);
 
   const onClear = useCallback(() => {
     setInputValue("");
@@ -176,11 +176,14 @@ const Search = ({ searchProduct, onSearchProductChange }) => {
             All products
           </Dropdown.Item>
           <Dropdown.Divider />
-          {Object.entries(products).map(([id, { name }]) => (
-            <Dropdown.Item as="button" type="button" eventKey={id} key={id}>
-              {name}
-            </Dropdown.Item>
-          ))}
+          {Object.entries(products)
+            .filter((entry) => !entry[1].noSearch)
+            .sort((a, b) => a[1].name.localeCompare(b[1].name))
+            .map(([id, { name }]) => (
+              <Dropdown.Item as="button" type="button" eventKey={id} key={id}>
+                {name}
+              </Dropdown.Item>
+            ))}
         </DropdownButton>
         <Icon
           iconName={iconNames.SEARCH}
@@ -222,17 +225,25 @@ const Search = ({ searchProduct, onSearchProductChange }) => {
   );
 };
 
-const SearchBar = ({ searchProduct }) => {
+const SearchBar = ({ searchProduct, searchVersion }) => {
   const [currentProduct, setCurrentProduct] = useState(searchProduct);
 
   const { algoliaIndex } = useSiteMetadata();
   const searchConfig = useMemo(() => {
+    let facets = currentProduct
+      ? [`product:${currentProduct}`]
+      : Object.entries(products)
+          .filter(([id, { noSearch }]) => noSearch)
+          .map(([id]) => `product:-${id}`);
+    if (searchVersion) facets.push("version:" + searchVersion);
+    else facets.push("isLatest:true");
+
     return {
       hitsPerPage: 30,
       advancedSyntax: true,
-      filters: currentProduct ? `product:"${currentProduct}"` : "",
+      facetFilters: facets,
     };
-  }, [currentProduct]);
+  }, [currentProduct, searchVersion]);
 
   // use SSR provider just to trigger static rendering of search form. Speeds this up a LOT
   return (

src/constants/products.js

@@ -64,6 +64,7 @@ export const products = {
   postgres_distributed_for_kubernetes: {
     name: "EDB Postgres Distributed for Kubernetes",
     iconName: IconNames.KUBERNETES,
+    noSearch: true, // remove this when PG4K-PGD is released!
   },
   postgres_for_kubernetes: {
     name: "EDB Postgres for Kubernetes",

src/pages/404.js

@@ -95,7 +95,7 @@ const SuggestedLinksSearch = ({ queryParams }) => {
       <Configure
         hitsPerPage={5}
         query={queryParams.query}
-        filters={
+        facetFilters={
           queryParams.refinementList?.product?.length &&
           `product:"${queryParams.refinementList?.product[0]}"`
         }

src/pages/search.js

@@ -11,6 +11,7 @@ import {
   writeStateToQueryParams,
 } from "../components/advanced-search";
 import useSiteMetadata from "../hooks/use-sitemetadata";
+import { products } from "../constants/products";
 
 const searchClient = algoliasearch(
   "HXNAF5X3I8",
@@ -21,6 +22,10 @@ const Search = (data) => {
   const paramSearchState = queryParamsToState(data.location.search);
   const { algoliaIndex } = useSiteMetadata();
 
+  const excludedFacets = Object.entries(products)
+    .filter(([id, { noSearch }]) => noSearch)
+    .map(([id]) => `product:-${id}`);
+
   return (
     <Layout background="white" pageMeta={{ title: "Advanced Search" }}>
       <Container fluid className="p-0 d-flex bg-white">
@@ -39,6 +44,7 @@ const Search = (data) => {
             facetingAfterDistinct={true}
             distinct="4"
             advancedSyntax={true}
+            facetFilters={excludedFacets}
           />
 
           <SideNavigation background="white">

src/templates/doc.js

@@ -273,7 +273,7 @@ const DocTemplate = ({ data, pageContext }) => {
             hideVersion={frontmatter.hideVersion}
           />
         </SideNavigation>
-        <MainContent searchProduct={product}>
+        <MainContent searchProduct={product} searchVersion={version}>
           {showInteractiveBadge && (
             <div className="new-thing-header" aria-roledescription="badge">
               <span className="badge-text">Interactive Demo</span>