From 1df155760066e8959c3aef9de89bdc3dce678e7d Mon Sep 17 00:00:00 2001
From: matt423 <matthew.a423@gmail.com>
Date: Mon, 14 Oct 2024 16:40:11 +0100
Subject: [PATCH] chore: Add searchDataId to Meganav options

Option allows to change the data-id that the search components use.
---
 src/core/Meganav.tsx                          | 16 ++++++++--
 src/core/Meganav/Meganav.stories.tsx          | 30 +++++++++++++++++++
 src/core/MeganavItemsMobile.tsx               |  6 +++-
 src/core/MeganavItemsSignedIn.tsx             |  4 ++-
 src/core/MeganavSearch.tsx                    | 10 +++++--
 .../MeganavSearchSuggestions/component.js     |  8 ++---
 6 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/core/Meganav.tsx b/src/core/Meganav.tsx
index ce237d75a..e72a94f3d 100644
--- a/src/core/Meganav.tsx
+++ b/src/core/Meganav.tsx
@@ -83,6 +83,7 @@ type SignInProps = {
   theme: MeganavTheme;
   loginLink: string;
   absUrl: AbsUrl;
+  searchDataId?: string;
 };
 
 type MeganavProps = {
@@ -106,14 +107,22 @@ type MeganavProps = {
   urlBase?: string;
   addSearchApiKey: string;
   statusUrl: string;
+  searchDataId?: string;
 };
 
-const SignIn = ({ sessionState, theme, loginLink, absUrl }: SignInProps) => {
+const SignIn = ({
+  sessionState,
+  theme,
+  loginLink,
+  absUrl,
+  searchDataId,
+}: SignInProps) => {
   return sessionState.signedIn ? (
     <MeganavItemsSignedIn
       absUrl={absUrl}
       sessionState={sessionState}
       theme={theme}
+      searchDataId={searchDataId}
     />
   ) : (
     <ul className="hidden md:flex items-center">
@@ -136,7 +145,7 @@ const SignIn = ({ sessionState, theme, loginLink, absUrl }: SignInProps) => {
         </a>
       </li>
       <li className="ui-meganav-item">
-        <MeganavSearch absUrl={absUrl} />
+        <MeganavSearch absUrl={absUrl} dataId={searchDataId} />
       </li>
       <li className="ui-meganav-item">
         <a
@@ -168,6 +177,7 @@ const Meganav = ({
   urlBase,
   addSearchApiKey,
   statusUrl,
+  searchDataId,
 }: MeganavProps) => {
   const [sessionState, setSessionState] = useState<MeganavSessionState>();
 
@@ -216,6 +226,7 @@ const Meganav = ({
             theme={theme}
             loginLink={loginLink}
             absUrl={absUrl}
+            searchDataId={searchDataId}
           />
         ) : (
           <SignInPlaceholder />
@@ -229,6 +240,7 @@ const Meganav = ({
           loginLink={loginLink}
           absUrl={absUrl}
           statusUrl={statusUrl}
+          searchDataId={searchDataId}
         />
       </div>
     </nav>
diff --git a/src/core/Meganav/Meganav.stories.tsx b/src/core/Meganav/Meganav.stories.tsx
index f8da3e695..f53aecac7 100644
--- a/src/core/Meganav/Meganav.stories.tsx
+++ b/src/core/Meganav/Meganav.stories.tsx
@@ -137,3 +137,33 @@ const PageSignedIn = () => {
 export const SignedIn = {
   render: () => <PageSignedIn />,
 };
+
+const SignedInWithDataSearchId = () => {
+  useEffect(() => {
+    loadIcons();
+    const store = getRemoteDataStore();
+    fetchSessionData(store, "/api/me");
+    fetchBlogPosts(store, "/api/blog");
+  }, []);
+
+  return (
+    <Meganav
+      paths={{
+        logo: "#",
+        ablyStack: "#",
+        iconSprites: "#",
+        blogThumb1: "#",
+        blogThumb2: "#",
+        blogThumb3: "#",
+      }}
+      statusUrl={statusUrl}
+      themeName="white"
+      addSearchApiKey="#"
+      searchDataId="inkeep-search"
+    />
+  );
+};
+
+export const DataSearchId = {
+  render: () => <SignedInWithDataSearchId />,
+};
diff --git a/src/core/MeganavItemsMobile.tsx b/src/core/MeganavItemsMobile.tsx
index de8f3dd08..a51bda561 100644
--- a/src/core/MeganavItemsMobile.tsx
+++ b/src/core/MeganavItemsMobile.tsx
@@ -24,6 +24,7 @@ type MeganavItemsMobileProps = {
   loginLink: string;
   absUrl: AbsUrl;
   statusUrl: string;
+  searchDataId?: string;
 };
 
 const MeganavItemsMobile = ({
@@ -34,6 +35,7 @@ const MeganavItemsMobile = ({
   loginLink,
   absUrl,
   statusUrl,
+  searchDataId,
 }: MeganavItemsMobileProps) => {
   const classNames = `ui-meganav-link ${theme.textColor}`;
 
@@ -100,7 +102,9 @@ const MeganavItemsMobile = ({
                   style={{ maxWidth: "none" }}
                   placeholder="Search"
                   autoComplete="off"
-                  data-id="meganav-mobile-search-input"
+                  data-id={
+                    searchDataId ? searchDataId : "meganav-mobile-search-input"
+                  }
                 />
 
                 <MeganavSearchAutocomplete />
diff --git a/src/core/MeganavItemsSignedIn.tsx b/src/core/MeganavItemsSignedIn.tsx
index f60a7e0cc..27b1eda78 100644
--- a/src/core/MeganavItemsSignedIn.tsx
+++ b/src/core/MeganavItemsSignedIn.tsx
@@ -6,6 +6,7 @@ type MeganavItemsSignedIn = {
   sessionState: MeganavSessionState;
   theme: MeganavTheme;
   absUrl: AbsUrl;
+  searchDataId?: string;
 };
 
 const truncate = (string: string, length: number) => {
@@ -17,6 +18,7 @@ const truncate = (string: string, length: number) => {
 const MeganavItemsSignedIn = ({
   sessionState,
   absUrl,
+  searchDataId,
 }: MeganavItemsSignedIn) => {
   const accountName = truncate(sessionState.accountName, 20);
 
@@ -29,7 +31,7 @@ const MeganavItemsSignedIn = ({
       </li>
 
       <li>
-        <MeganavSearch absUrl={absUrl} />
+        <MeganavSearch absUrl={absUrl} dataId={searchDataId} />
       </li>
 
       {sessionState.account && (
diff --git a/src/core/MeganavSearch.tsx b/src/core/MeganavSearch.tsx
index 097ec8436..449dcaff0 100644
--- a/src/core/MeganavSearch.tsx
+++ b/src/core/MeganavSearch.tsx
@@ -4,11 +4,17 @@ import Icon from "./Icon";
 import MeganavSearchPanel from "./MeganavSearchPanel";
 import { AbsUrl } from "./Meganav";
 
-const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
+const MeganavSearch = ({
+  absUrl,
+  dataId = "meganav-control",
+}: {
+  absUrl: AbsUrl;
+  dataId?: string;
+}) => (
   <>
     <button
       type="button"
-      data-id="meganav-control"
+      data-id={dataId}
       data-control="search"
       className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
       aria-expanded="false"
diff --git a/src/core/MeganavSearchSuggestions/component.js b/src/core/MeganavSearchSuggestions/component.js
index f7426883a..83f21bf7a 100644
--- a/src/core/MeganavSearchSuggestions/component.js
+++ b/src/core/MeganavSearchSuggestions/component.js
@@ -108,8 +108,8 @@ const MeganavSearchSuggestions = () => {
     distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
   };
 
-  suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
-  suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
+  suggestionsToggle?.addEventListener("focus", focusSuggestionsHandler);
+  suggestionsToggle?.addEventListener("blur", blurSuggestionsHandler);
   suggestions.addEventListener("touchstart", touchstartHandler);
   suggestions.addEventListener("touchmove", touchmoveHandler);
   suggestions.addEventListener("touchend", touchendHandler);
@@ -117,8 +117,8 @@ const MeganavSearchSuggestions = () => {
 
   return {
     teardown: () => {
-      suggestionsToggle.removeEventListener("focus", focusSuggestionsHandler);
-      suggestionsToggle.removeEventListener("blur", blurSuggestionsHandler);
+      suggestionsToggle?.removeEventListener("focus", focusSuggestionsHandler);
+      suggestionsToggle?.removeEventListener("blur", blurSuggestionsHandler);
       suggestions.removeEventListener("touchstart", touchstartHandler);
       suggestions.removeEventListener("touchmove", touchmoveHandler);
       suggestions.removeEventListener("touchend", touchendHandler);