refactor(Navigation): move DocSearch configuration to config file (#8028)

Author: mr-baraiya

cypress/e2e/search.cy.js

@@ -1,10 +1,30 @@
 "use strict";
 
 describe("Search", () => {
+  beforeEach(() => {
+    cy.intercept("POST", "https://*.algolia.net/**", {
+      statusCode: 200,
+      body: {
+        results: [
+          {
+            hits: [
+              {
+                url: "http://localhost:3000/concepts/",
+                hierarchy: { lvl0: "Concepts" },
+                objectID: "1",
+              },
+            ],
+          },
+        ],
+      },
+    }).as("algoliaSearch");
+  });
+
   it("should visit entry page", () => {
     cy.visit("/concepts/");
     cy.get(".DocSearch").click();
     cy.get("#docsearch-input").type("roadmap");
-    cy.get(".DocSearch-Hits").should("be.visible");
+
+    cy.get(".DocSearch-Modal").should("be.visible");
   });
 });

src/components/Navigation/Navigation.jsx

@@ -4,6 +4,13 @@ import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
 import { Link as ReactDOMLink, NavLink, useLocation } from "react-router-dom";
 
+// Import Internal Config
+import {
+  DOCSEARCH_API_KEY,
+  DOCSEARCH_APP_ID,
+  DOCSEARCH_INDEX_NAME,
+} from "../../config/docsearch.js";
+
 // Import Components
 import DiscordIcon from "../../styles/icons/discord.svg";
 import GithubIcon from "../../styles/icons/github.svg";
@@ -202,9 +209,9 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
             <HelloDarkness />
             {mounted && (
               <DocSearch
-                appId="BH4D9OD16A"
-                apiKey={"fac401d1a5f68bc41f01fb6261661490"}
-                indexName="webpack-js-org"
+                appId={DOCSEARCH_APP_ID}
+                apiKey={DOCSEARCH_API_KEY}
+                indexName={DOCSEARCH_INDEX_NAME}
                 disableUserPersonalization={true}
                 placeholder="Search webpack documentation"
                 transformItems={(items) =>

src/config/docsearch.js

@@ -0,0 +1,14 @@
+"use strict";
+
+// DocSearch configuration
+// Set DOCSEARCH_API_KEY in your environment (e.g., .env file or build system)
+
+const DOCSEARCH_API_KEY = "fac401d1a5f68bc41f01fb6261661490";
+const DOCSEARCH_APP_ID = "BH4D90D16A";
+const DOCSEARCH_INDEX_NAME = "webpack-js-org";
+
+module.exports = {
+  DOCSEARCH_API_KEY,
+  DOCSEARCH_APP_ID,
+  DOCSEARCH_INDEX_NAME,
+};