hds-web 1.36.6 → 1.36.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.36.6",
+  "version": "1.36.7",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/helpers/AlgoliaSearch/constants.js

@@ -1,6 +1,5 @@
 export const INDEX_TYPES = Object.freeze({
   All: "All",
-  events: "events",
   //Website: "website",
   blog: "blog",
   docs: "docs",
@@ -12,112 +11,35 @@ export const INDEX_TYPES = Object.freeze({
 });
 
 export const SEARCH_INDICES = [
-  {
-    name: `marketing_events`,
-    title: `Hasura Events`,
-    type: INDEX_TYPES.events,
-  },
   { name: `blog-production`, title: `Hasura Blog`, type: INDEX_TYPES.blog },
-  {
-    name: `graphql-docs-prod`,
-    title: `Hasura GraphQL Engine Docs`,
-    type: INDEX_TYPES.docs,
-  },
-  {
-    name: `learn-intro-graphql`,
-    title: `Learn Intro GraphQL`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-intro-graphql-zh`,
-    title: `Learn Intro GraphQL`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-elm-graphql`,
-    title: `Learn ELM GraphQl`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-flutter-graphql`,
-    title: `Learn Flutter GraphQL`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-database-mysql`,
-    title: `Learn Database MySQL`,
-    type: INDEX_TYPES.learn,
-  },
+  { name: `graphql-docs-prod`, title: `Hasura GraphQL Engine Docs`, type: INDEX_TYPES.docs },
+  { name: `learn-intro-graphql`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-intro-graphql-zh`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-elm-graphql`, title: `Learn ELM GraphQl`, type: INDEX_TYPES.learn },
+  { name: `learn-flutter-graphql`, title: `Learn Flutter GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-database-mysql`, title: `Learn Database MySQL`, type: INDEX_TYPES.learn },
   {
     name: `learn-database-postgresql`,
     title: `Learn Database PostgreSQL`,
     type: INDEX_TYPES.learn,
   },
-  {
-    name: `learn-hasura-backend`,
-    title: `Learn Hasura Backend`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-hasura-backend-ja`,
-    title: `Learn Hasura Backend`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-hasura-backend-zh`,
-    title: `Learn Hasura Backend`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-hasura-backend-advanced`,
-    title: `Learn Hasura Backend Advanced`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-hasura-auth-slack`,
-    title: `Learn Hasura Auth Slack`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-react-apollo-hooks`,
-    title: `Learn React Apollo Hooks`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-react-apollo`,
-    title: `Learn React Apollo`,
-    type: INDEX_TYPES.learn,
-  },
+  { name: `learn-hasura-backend`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-ja`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-zh`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-advanced`, title: `Learn Hasura Backend Advanced`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-auth-slack`, title: `Learn Hasura Auth Slack`, type: INDEX_TYPES.learn },
+  { name: `learn-react-apollo-hooks`, title: `Learn React Apollo Hooks`, type: INDEX_TYPES.learn },
+  { name: `learn-react-apollo`, title: `Learn React Apollo`, type: INDEX_TYPES.learn },
   {
     name: `learn-typescript-react-apollo`,
     title: `Learn TypeScript React Apollo`,
     type: INDEX_TYPES.learn,
   },
-  {
-    name: `learn-angular-apollo`,
-    title: `Learn Angular Apollo`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-vue-apollo`,
-    title: `Learn Vue Apollo`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-ios-apollo`,
-    title: `Learn IOS Apollo`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-svelte-apollo`,
-    title: `Learn Svelte Apollo`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-android-apollo`,
-    title: `Learn Android Apollo`,
-    type: INDEX_TYPES.learn,
-  },
+  { name: `learn-angular-apollo`, title: `Learn Angular Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-vue-apollo`, title: `Learn Vue Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-ios-apollo`, title: `Learn IOS Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-svelte-apollo`, title: `Learn Svelte Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-android-apollo`, title: `Learn Android Apollo`, type: INDEX_TYPES.learn },
   {
     name: `learn-react-native-apollo`,
     title: `Learn React Native Apollo`,
@@ -128,9 +50,5 @@ export const SEARCH_INDICES = [
     title: `Learn Reason React Apollo`,
     type: INDEX_TYPES.learn,
   },
-  {
-    name: `learn-database-mssql`,
-    title: `Learn MicrosoftSQL`,
-    type: INDEX_TYPES.learn,
-  },
+  { name: `learn-database-mssql`, title: `Learn MicrosoftSQL`, type: INDEX_TYPES.learn },  
 ];

package/src/HDS/helpers/AlgoliaSearch/search.js

@@ -4,7 +4,6 @@ import SearchOverlay from "./searchoverlay";
 import { Icon } from "../../components/common-components";
 export default function Search(props) {
   const [showSearch, setShowSearch] = useState(false);
-  // const [showSearch, setShowSearch] = useState(true);
 
   const handleSearchWithKeyboard = (e) => {
     if (e.key === "/" || e.key === "Escape") {

package/src/HDS/helpers/AlgoliaSearch/searchfooter.js

@@ -9,17 +9,11 @@ const SearchFooter = () => (
         <p>Unable to find what you're looking for?</p>
         <p>
           Reach out to our{" "}
-          <a
-            className="text-blue-500 hover:text-blue-700"
-            href="https://discord.com/invite/hasura"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a className="text-blue-500 hover:text-blue-700" href="https://discord.com/invite/hasura" target="_blank" rel="noopener noreferrer">
             Discord Community
           </a>{" "}
           or start a{" "}
-          <a
-            className="text-blue-500 hover:text-blue-700"
+          <a className="text-blue-500 hover:text-blue-700"
             href="https://github.com/hasura/graphql-engine/discussions"
             target="_blank"
             rel="noopener noreferrer"

package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js

@@ -1,9 +1,11 @@
-import React, { useEffect } from "react";
-import { Icon } from "../../components/common-components/Icon";
+import React from "react";
+import { useEffect, useState } from "react";
+import { Icon } from '../../components/common-components/Icon'
 import SearchWrapper from "./searchwrapper";
 import { SEARCH_INDICES } from "./constants";
 
-export default function SearchOverlay({ showSearch, onCloseSearch, ...props }) {
+export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
+  
   useEffect(() => {
     if (showSearch) {
       document.body.style.overflow = "hidden";
@@ -18,15 +20,8 @@ export default function SearchOverlay({ showSearch, onCloseSearch, ...props }) {
 
   return (
     <div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-100">
-      <div
-        className="absolute top-4 right-4 cursor-pointer z-[11]"
-        onClick={onCloseSearch}
-      >
-        <Icon
-          height={"w-8 h-8 stroke-[1.5px]"}
-          variant="xclose"
-          strokeClass="stroke-neutral-800"
-        />
+      <div className="absolute top-4 right-4 cursor-pointer z-[11]" onClick={onCloseSearch}>
+        <Icon height={'w-8 h-8 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
       </div>
       <div className="py-20 overflow-y-auto h-full w-full bg-neutral-100">
         <div className="px-4">
@@ -39,4 +34,4 @@ export default function SearchOverlay({ showSearch, onCloseSearch, ...props }) {
       </div>
     </div>
   );
-}
+}

package/src/HDS/helpers/AlgoliaSearch/searchresults.js

@@ -1,64 +1,44 @@
 import React, { Fragment } from "react";
-import { connectStateResults, Hits, Index } from "react-instantsearch-dom";
+import { connectStateResults, Highlight, Hits, Index, Snippet } from "react-instantsearch-dom";
 import { INDEX_TYPES } from "./constants";
 import SearchFooter from "./searchfooter";
-import { Typography } from "../../foundation/Typography";
-import { Icon } from "../../components/common-components/Icon";
-import { SearchHit } from "./SearchHit";
+import { Typography } from '../../foundation/Typography'
+import { Icon } from '../../components/common-components/Icon';
+
+// import SearchFooter from "./SearchFooter";
+
+const baseDomain = 'hasura.io';
+
 
 const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
   const hitCount = searchResults && searchResults.nbHits;
   const titleIcon = () => {
-    if (indexTitle === "Hasura Blog") {
+    if(indexTitle === "Hasura Blog") {
       return (
-        <Icon
-          height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
-          variant="pentool02"
-          strokeClass="stroke-blue-500"
-        />
-      );
+        <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="pentool02" strokeClass='stroke-blue-500' />
+      )
     }
-    if (indexTitle === "Hasura GraphQL Engine Docs") {
+    if(indexTitle === "Hasura GraphQL Engine Docs") {
       return (
-        <Icon
-          height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
-          variant="file02"
-          strokeClass="stroke-blue-500"
-        />
-      );
-    }
-
-    if (indexTitle === "Hasura Events") {
-      return (
-        <Icon
-          height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
-          variant="calendarplus02"
-          strokeClass="stroke-blue-500"
-        />
-      );
+        <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="file02" strokeClass='stroke-blue-500' />
+      )
     }
-
     return (
-      <Icon
-        height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
-        variant="graduationhat01"
-        strokeClass="stroke-blue-500"
-      />
-    );
-  };
-
+      <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="graduationhat01" strokeClass='stroke-blue-500' />
+    )
+  }
+  
   return hitCount > 0 ? (
     <Fragment>
       {showSeparator && <hr className="my-8 border-t-neutral-200" />}
       {/* <div className="HitCount">
         {hitCount} result{hitCount !== 1 ? `s` : ``}
       </div> */}
-      <Typography
-        textStyle="sub1"
-        className="pb-4 pl-2 flex items-center text-neutral-800 font-normal sticky tb-m:z-0 top-[170px] tb:top-[160px] tb-m:top-[120px] bg-neutral-100"
-      >
-        {titleIcon()}
-
+      <Typography textStyle="sub1" className="pb-4 pl-2 flex items-center text-neutral-800 font-normal sticky tb-m:z-0 top-[170px] tb:top-[160px] tb-m:top-[120px] bg-neutral-100">
+        {
+          titleIcon()
+        }
+      
         {indexTitle}
       </Typography>
     </Fragment>
@@ -67,15 +47,60 @@ const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
 
 const CustomHitsHeader = connectStateResults(HitsHeader);
 
+const PageHit = ({ hit, indexType }) => (
+  <a href={hit.url} className="grid h-full">
+    <div className="self-start">
+      {/* <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography> */}
+      {indexType === INDEX_TYPES.docs ? (
+        <div className="flex items-start">
+          <div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
+            <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+          </div>
+          <div>
+            {!!hit.hierarchy && (
+              <Typography textStyle="body1c-bold" className="font-bold flex items-start pb-3">
+              {`${
+                Object.values(hit.hierarchy)
+                  .filter(h => !!h)
+                  .reverse()[0]
+              }`}</Typography>
+            )}
+            <Typography textStyle="body2" className="text-neutral-800 word-break">
+              <Snippet attribute="content" hit={hit} tagName="mark" />
+            </Typography>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-start">
+          <div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
+            <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+          </div>
+          <div>
+            <Typography textStyle="body1c-bold" className="font-bold text-neutral-800 pb-3">
+              <Highlight attribute="title" hit={hit} tagName="mark" />
+            </Typography>
+            <Typography textStyle="body2" className="text-neutral-800 word-break">
+              <Snippet attribute="excerpt" hit={hit} tagName="mark" />
+            </Typography>
+          </div>
+        </div>
+      )}
+    </div>
+    {hit.url ? (
+      <Typography textStyle="body3" className="self-end pl-8 pt-3 text-neutral-500">
+        <span className='hit-slug word-break'>{hit.url.replace(`https://${baseDomain}/`, "/")}</span>
+      </Typography>
+    ) : null}
+  </a>
+);
+
 const HitsByIndexType = ({ indexType }) => {
   if (INDEX_TYPES[indexType] === undefined) return null;
 
   return (
     <Hits
       className="Hits"
-      hitComponent={(hitProps) => (
-        <SearchHit {...hitProps} indexType={indexType} />
-      )}
+      hitComponent={hitProps => <PageHit {...hitProps} indexType={indexType} />}
     />
   );
 };
@@ -86,8 +111,8 @@ const HitsInIndex = ({ index, show }) => (
       <Fragment>
         <CustomHitsHeader
           indexTitle={index.title}
-          showSeparator={index.type !== INDEX_TYPES.events}
-          allIndex={index.type}
+          showSeparator={index.type !== INDEX_TYPES.blog}
+          allIndex = {index.type}
         />
         <HitsByIndexType indexType={index.type} />
       </Fragment>
@@ -95,26 +120,11 @@ const HitsInIndex = ({ index, show }) => (
   </Index>
 );
 
-const SearchResult = ({
-  children,
-  indices,
-  className,
-  id,
-  wrapperRef,
-  activeIndexTypes,
-}) => (
-  <div
-    id={id}
-    className={`${className} search-results clear-both`}
-    ref={wrapperRef}
-  >
+const SearchResult = ({ children, indices, className, id, wrapperRef, activeIndexTypes }) => (
+  <div id={id} className={`${className} search-results clear-both`} ref={wrapperRef}>
     {children && children}
-    {indices.map((index) => (
-      <HitsInIndex
-        index={index}
-        key={index.name}
-        show={activeIndexTypes[index.type]}
-      />
+    {indices.map(index => (
+      <HitsInIndex index={index} key={index.name} show={activeIndexTypes[index.type]} />
     ))}
     <SearchFooter />
   </div>

package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js

@@ -1,28 +1,19 @@
 import algoliasearch from "algoliasearch/lite";
 import React, { useRef, useState, useEffect } from "react";
-import {
-  InstantSearch,
-  connectStateResults,
-  Index,
-} from "react-instantsearch-dom";
+import { InstantSearch, connectStateResults, Index } from "react-instantsearch-dom";
 import SearchBox from "./searchbox";
 import SearchResults from "./searchresults";
 import { INDEX_TYPES } from "./constants";
 import SearchFooter from "./searchfooter";
-import { Typography } from "../../foundation/Typography";
-
-const AllResults = ({
-  allSearchResults,
-  children,
-  indices,
-  searchState,
-  searching,
-}) => {
+import { Typography } from '../../foundation/Typography'
+
+
+
+const AllResults = ({ allSearchResults, children, indices, searchState, searching }) => {
   if (!searchState?.query) return null;
 
   const hasResults =
-    allSearchResults &&
-    Object.values(allSearchResults).some((results) => results.nbHits > 0);
+    allSearchResults && Object.values(allSearchResults).some(results => results.nbHits > 0);
   return !hasResults ? (
     <div>
       <div>
@@ -36,7 +27,7 @@ const AllResults = ({
           </span>
         )}
       </div>
-      {indices.map((index) => (
+      {indices.map(index => (
         <Index indexName={index.name} key={index.name} />
       ))}
       <SearchFooter />
@@ -54,74 +45,57 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
   const handleOnClick = (indexType) => {
     if (indexType === INDEX_TYPES.All) {
       showAll = true;
-      const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
-        (acc, key) => {
-          acc[key] = true;
-          return acc;
-        },
-        {}
-      );
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
+        acc[key] = true;
+        return acc;
+      }, {});
       setActiveIndexTypes(allFiltersSelected);
     } else {
-      showAll = false;
-      const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
-        (acc, key) => {
-          acc[key] = false;
-          return acc;
-        },
-        {}
-      );
+      showAll = false
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
+        acc[key] = false;
+        return acc;
+      }, {});
       setActiveIndexTypes(allFiltersSelected);
       setActiveIndexTypes((prevState) => ({
         ...prevState,
         [indexType]: !prevState[indexType],
       }));
     }
-    setShowDropdown(false);
+    setShowDropdown(false)
   };
 
   return (
     <div className="relative">
-      <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
-        <ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
-          {Object.values(INDEX_TYPES).map((index) => (
-            <li
-              key={index}
-              className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0"
+    <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
+      <ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
+        {Object.values(INDEX_TYPES).map((index) => (
+          <li key={index} className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0">
+            <button
+              onClick={() => handleOnClick(index)}
+              className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${(activeIndexTypes[index] && index === 'All') ? "bg-blue-500 " : ""
+                } ${(activeIndexTypes[index] && !showAll) ? 'bg-blue-500': ''} `}
             >
-              <button
-                onClick={() => handleOnClick(index)}
-                className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${
-                  activeIndexTypes[index] && index === "All"
-                    ? "bg-blue-500 "
-                    : ""
-                } ${activeIndexTypes[index] && !showAll ? "bg-blue-500" : ""} `}
+              <Typography
+                textStyle="body3c-medium"
+                className={`${(activeIndexTypes[index] && index === 'All') ? "text-neutral-0 " : ""} ${(activeIndexTypes[index] && !showAll) ? 'text-neutral-0' : ''} `
+              }
               >
-                <Typography
-                  textStyle="body3c-medium"
-                  className={`${
-                    activeIndexTypes[index] && index === "All"
-                      ? "text-neutral-0 "
-                      : ""
-                  } ${
-                    activeIndexTypes[index] && !showAll ? "text-neutral-0" : ""
-                  } `}
-                >
-                  {index}
-                </Typography>
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
+                {index}
+              </Typography>
+            </button>
+          </li>
+        ))}
+      </ul>
+
+    </div>
       <div className="relative hds-hidden-tbm">
         <button
           onClick={() => setShowDropdown(!showDropdown)}
           className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-800 text-left rounded-full text-neutral-800 bg-transparent"
         >
-          {Object.values(INDEX_TYPES).find(
-            (index) => activeIndexTypes[index]
-          ) || "All"}
+          {Object.values(INDEX_TYPES).find((index) => activeIndexTypes[index]) || "All"}
+
         </button>
         {showDropdown && (
           <ul className="absolute top-full left-0 w-full bg-neutral-0 shadow-md z-[20] p-2 rounded-3xl mt-1">
@@ -129,11 +103,8 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
               <li
                 key={index}
                 onClick={() => handleOnClick(index)}
-                className={`capitalize cursor-pointer py-2 px-4 ${
-                  activeIndexTypes[index]
-                    ? "text-neutral-1000  "
-                    : "text-neutral-500"
-                }`}
+                className={`capitalize cursor-pointer py-2 px-4 ${activeIndexTypes[index] ? "text-neutral-1000  " : "text-neutral-500"
+                  }`}
               >
                 {index}
               </li>
@@ -141,21 +112,21 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
           </ul>
         )}
       </div>
+
     </div>
   );
 };
 
-let ALGOLIA_APP_ID = `WCBB1VVLRC`;
-let ALGOLIA_SEARCH_KEY = `baf43aa3921858bc144d0fe5ce85b526`;
-
 export default function SearchWrapper({ indices, ...props }) {
-  // let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY;
-  // if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY) {
-  //   ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
-  //   ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
-  // }
-
-  const algoliaClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY);
+  let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY ;
+  if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY){
+    ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
+    ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
+  }
+  const algoliaClient = algoliasearch(
+    ALGOLIA_APP_ID,
+    ALGOLIA_SEARCH_KEY
+  );
 
   const searchClient = {
     ...algoliaClient,
@@ -175,17 +146,13 @@ export default function SearchWrapper({ indices, ...props }) {
     },
   };
 
-  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce(
-    (acc, index) => {
-      acc[index] = true;
-      return acc;
-    },
-    {}
-  );
+
+  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((acc, index) => {
+    acc[index] = true;
+    return acc;
+  }, {});
   const wrapperRef = useRef(null);
-  const [activeIndexTypes, setActiveIndexTypes] = useState(
-    defaultIndexTypesState
-  );
+  const [activeIndexTypes, setActiveIndexTypes] = useState(defaultIndexTypesState);
   useEffect(() => {
     setActiveIndexTypes(defaultIndexTypesState);
   }, []);
@@ -201,8 +168,8 @@ export default function SearchWrapper({ indices, ...props }) {
         <div className="tb-m:flex gap-10">
           <div className="hds-hidden tb-m:flex">
             <IndexTypeFilter
-              activeIndexTypes={activeIndexTypes}
-              setActiveIndexTypes={setActiveIndexTypes}
+                activeIndexTypes={activeIndexTypes}
+                setActiveIndexTypes={setActiveIndexTypes}
             />
           </div>
           <SearchResults
@@ -210,14 +177,13 @@ export default function SearchWrapper({ indices, ...props }) {
             indices={indices}
             wrapperRef={wrapperRef}
             activeIndexTypes={activeIndexTypes}
-            className="search-results"
-          >
-            <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
-              <IndexTypeFilter
-                activeIndexTypes={activeIndexTypes}
-                setActiveIndexTypes={setActiveIndexTypes}
-              />
-            </div>
+            className="search-results">
+              <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
+                <IndexTypeFilter
+                  activeIndexTypes={activeIndexTypes}
+                  setActiveIndexTypes={setActiveIndexTypes}
+                />
+              </div>
           </SearchResults>
         </div>
       </CustomAllResults>