From f0da37c075783a4c0e7f9d88afec07fc93d570ad Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Tue, 20 Feb 2024 13:37:31 +0100
Subject: [PATCH] fix(walkthrough): added classes for walkthrough

---
 .../navbar/DatabaseManagement/dbConnectionSelector.tsx        | 4 ++--
 apps/web/src/components/navbar/navbar.tsx                     | 2 +-
 apps/web/src/components/navbar/search/SearchBar.tsx           | 4 ++--
 libs/shared/lib/components/buttons/index.tsx                  | 4 +++-
 libs/shared/lib/querybuilder/panel/querybuilder.tsx           | 1 +
 libs/shared/lib/schema/panel/schema.tsx                       | 1 +
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
index 4301840ad..5c0e1be3b 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
@@ -57,7 +57,7 @@ export default function DatabaseSelector({}) {
   }, [connecting]);
 
   return (
-    <>
+    <div className="menu-walkthrough">
       {settingsMenuOpen !== undefined && (
         <SettingsForm
           open={settingsMenuOpen}
@@ -201,6 +201,6 @@ export default function DatabaseSelector({}) {
           </DropdownItemContainer>
         )}
       </DropdownContainer>
-    </>
+    </div>
   );
 }
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 47f714926..92c7a548d 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -51,7 +51,7 @@ export const Navbar = () => {
         <div>
           <SearchBar />
           <ColorMode />
-          <div className="w-fit menu-walkthrough" ref={dropdownRef}>
+          <div className="w-fit" ref={dropdownRef}>
             <div
               className="relative inline-flex items-center justify-center w-8 h-8 overflow-hidden bg-secondary-500 rounded hover:bg-secondary-600 transition-colors duration-150 ease-in-out cursor-pointer"
               onClick={() => setMenuOpen(!menuOpen)}
diff --git a/apps/web/src/components/navbar/search/SearchBar.tsx b/apps/web/src/components/navbar/search/SearchBar.tsx
index ccd3b30ac..797b267f6 100644
--- a/apps/web/src/components/navbar/search/SearchBar.tsx
+++ b/apps/web/src/components/navbar/search/SearchBar.tsx
@@ -161,7 +161,7 @@ export function SearchBar({}) {
   }, []);
 
   return (
-    <>
+    <div className="searchbar">
       {searchOpen && <div className="fixed inset-0 bg-black bg-opacity-50 z-40"></div>}
       <div className="mr-2" ref={searchbarRef}>
         <div
@@ -254,6 +254,6 @@ export function SearchBar({}) {
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/libs/shared/lib/components/buttons/index.tsx b/libs/shared/lib/components/buttons/index.tsx
index 2100b11f8..fa96b6ccb 100644
--- a/libs/shared/lib/components/buttons/index.tsx
+++ b/libs/shared/lib/components/buttons/index.tsx
@@ -15,6 +15,7 @@ type ButtonProps = {
   iconPosition?: 'leading' | 'trailing';
   ariaLabel?: string;
   children?: React.ReactNode;
+  additionalClasses?: string;
 };
 
 export function Button({
@@ -29,6 +30,7 @@ export function Button({
   iconName,
   iconPosition = 'leading',
   ariaLabel,
+  additionalClasses,
   children,
   ...props
 }: ButtonProps & React.HTMLAttributes<HTMLButtonElement>) {
@@ -95,7 +97,7 @@ export function Button({
 
   return (
     <button
-      className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass}`}
+      className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${additionalClasses}`}
       onClick={onClick}
       disabled={disabled}
       aria-label={ariaLabel}
diff --git a/libs/shared/lib/querybuilder/panel/querybuilder.tsx b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
index 65838b391..cece04467 100644
--- a/libs/shared/lib/querybuilder/panel/querybuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
@@ -466,6 +466,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
             variant="ghost"
             size="xs"
             iconName="Settings"
+            additionalClasses="query-settings"
             onClick={(event) => {
               event.stopPropagation();
               if (toggleSettings === 'settings') setToggleSettings(undefined);
diff --git a/libs/shared/lib/schema/panel/schema.tsx b/libs/shared/lib/schema/panel/schema.tsx
index 531bd450a..2ca58efb0 100644
--- a/libs/shared/lib/schema/panel/schema.tsx
+++ b/libs/shared/lib/schema/panel/schema.tsx
@@ -126,6 +126,7 @@ export const Schema = (props: Props) => {
             variant="ghost"
             size="xs"
             iconName="Settings"
+            additionalClasses="schema-settings"
             onClick={(e) => {
               e.stopPropagation();
               setToggleSchemaSettings(!toggleSchemaSettings);
-- 
GitLab