Feat/display account in header

builder-frontend/package.json

@@ -22,6 +22,7 @@
     "fast-xml-parser": "^5.2.5",
     "firebase": "^11.9.1",
     "lodash.debounce": "^4.0.8",
+    "lucide-solid": "^1.7.0",
     "solid-bootstrap": "^1.0.21",
     "solid-js": "^1.9.5",
     "solid-toast": "^0.5.0",

builder-frontend/src/components/Header/Header.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+.header-user-email {
+  width: 75%;
+  overflow-wrap: break-word;
+  @apply mt-2;
+}
+
+.header-menu ul {
+  @apply p-0;
+}
+.header-menu-item {
+  width: 100%;
+  @apply p-2 rounded-sm list-none;
+}
+.header-menu-item:hover {
+  @apply bg-slate-200 cursor-pointer;
+}

builder-frontend/src/components/Header/Header.tsx

@@ -0,0 +1,114 @@
+import { useAuth } from "../../context/AuthContext";
+import { useLocation, useNavigate } from "@solidjs/router";
+import { Component, For, Show } from "solid-js";
+
+import bdtLogo from "@/assets/logos/bdt-logo-large-mono-light.svg";
+import { HamburgerMenu } from "@/components/shared/HamburgerMenu";
+
+import "./Header.css";
+import { Menu } from "lucide-solid";
+
+const HeaderButton = ({
+  buttonText,
+  onClick,
+}: {
+  buttonText: string;
+  onClick: () => void;
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      class="
+        px-4 py-3 text-md font-bold text-gray-700 rounded-md
+        flex items-center
+        hover:bg-gray-300 cursor-pointer select-none"
+    >
+      {buttonText}
+    </div>
+  );
+};
+
+interface MenuProps {
+  userEmail: string;
+  displayName: string | null;
+  logout: () => void;
+}
+
+const HeaderMenu: Component<MenuProps> = (props) => {
+  const menuItems: { label: string; onClick: () => void }[] = [
+    {
+      label: "User Guide",
+      onClick: () => window.open("https://bdt-docs.web.app/", "_blank"),
+    },
+    { label: "Logout", onClick: props.logout },
+  ];
+
+  return (
+    <div class="header-menu">
+      <div class="header-user-email" title={props.userEmail}>
+        Welcome {props.displayName} {props.userEmail}
+      </div>
+      <hr />
+      <ul>
+        <For each={menuItems}>
+          {(menuItem) => (
+            <li class="header-menu-item" onClick={menuItem.onClick}>
+              {menuItem.label}
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  );
+};
+
+export default function Header() {
+  const auth = useAuth();
+  const userEmail = auth.user().email;
+  const displayName = auth.user().displayName;
+  const { logout } = auth;
+
+  const navigate = useNavigate();
+
+  const location = useLocation();
+  const isNotRoot = location.pathname !== "/";
+
+  const handleLogout = () => {
+    logout();
+    navigate("/login", { replace: true });
+  };
+
+  return (
+    <header class="bg-gray-200 min-h-24 h-24 px-4 flex items-center justify-between border-b-2 border-gray-300">
+      <div class="flex items-center space-x-6">
+        <img
+          src={bdtLogo}
+          alt="BDT logo"
+          class="w-36 cursor-pointer"
+          onClick={() => navigate("/")}
+        />
+      </div>
+      <div class="flex items-center h-full">
+        <Show when={isNotRoot}>
+          <HeaderButton
+            buttonText="← Back to Home"
+            onClick={() => navigate("/")}
+          />
+        </Show>
+
+        <HamburgerMenu>
+          <HamburgerMenu.Button>
+            <Menu />
+          </HamburgerMenu.Button>
+          <HamburgerMenu.Panel>
+            <HeaderMenu
+              userEmail={userEmail}
+              displayName={displayName}
+              logout={handleLogout}
+            />
+          </HamburgerMenu.Panel>
+        </HamburgerMenu>
+      </div>
+    </header>
+  );
+}

builder-frontend/src/components/homeScreen/HomeScreen.tsx

@@ -2,14 +2,14 @@ import { Accessor, createSignal, Match, Switch } from "solid-js";
 
 import EligibilityChecksList from "./eligibilityCheckList/EligibilityChecksList";
 import ProjectsList from "./ProjectsList";
-import Header from "../Header";
+import Header from "../Header/Header";
 
 import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
 0;
 
 const HomeScreen = () => {
   const [screenMode, setScreenMode] = createSignal<"screeners" | "checks">(
-    "screeners"
+    "screeners",
   );
 
   const navbarDefs: Accessor<NavbarProps> = () => {

builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx

@@ -4,7 +4,7 @@ import { useParams } from "@solidjs/router";
 import { clsx } from "clsx";
 import toast from "solid-toast";
 
-import Header from "../../../Header";
+import Header from "../../../Header/Header";
 import Loading from "../../../Loading";
 import KogitoDmnEditorView from "./KogitoDmnEditorView";
 import EligibilityCheckTest from "./checkTesting/EligibilityCheckTest";
@@ -16,17 +16,22 @@ import ParametersConfiguration from "./ParametersConfiguration";
 import ErrorDisplayModal from "@/components/shared/ErrorModal";
 import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
 
-
-type CheckDetailScreenMode = "paramConfig" | "dmnDefinition" | "testing" | "publish";
+type CheckDetailScreenMode =
+  | "paramConfig"
+  | "dmnDefinition"
+  | "testing"
+  | "publish";
 
 const EligibilityCheckDetail = () => {
   const { checkId } = useParams();
 
   const [currentDmnModel, setCurrentDmnModel] = createSignal<string>("");
-  const [screenMode, setScreenMode] = createSignal<CheckDetailScreenMode>("paramConfig");
+  const [screenMode, setScreenMode] =
+    createSignal<CheckDetailScreenMode>("paramConfig");
 
   const [validationErrors, setValidationErrors] = createSignal<string[]>([]);
-  const [showingErrorModal, setShowingErrorModal] = createSignal<boolean>(false);
+  const [showingErrorModal, setShowingErrorModal] =
+    createSignal<boolean>(false);
 
   const { eligibilityCheck, actions, actionInProgress, initialLoadStatus } =
     eligibilityCheckDetailResource(() => checkId);
@@ -43,15 +48,31 @@ const EligibilityCheckDetail = () => {
     } else {
       toast.success("No validation errors found in DMN model.");
     }
-  }
+  };
 
   const navbarDefs: Accessor<NavbarProps> = () => {
     return {
       tabDefs: [
-        { key: "paramConfig", label: "Parameter Configuration", onClick: () => setScreenMode("paramConfig") },
-        { key: "dmnDefinition", label: "DMN Definition", onClick: () => setScreenMode("dmnDefinition") },
-        { key: "testing", label: "Testing", onClick: () => setScreenMode("testing") },
-        { key: "publish", label: "Publish", onClick: () => setScreenMode("publish") },
+        {
+          key: "paramConfig",
+          label: "Parameter Configuration",
+          onClick: () => setScreenMode("paramConfig"),
+        },
+        {
+          key: "dmnDefinition",
+          label: "DMN Definition",
+          onClick: () => setScreenMode("dmnDefinition"),
+        },
+        {
+          key: "testing",
+          label: "Testing",
+          onClick: () => setScreenMode("testing"),
+        },
+        {
+          key: "publish",
+          label: "Publish",
+          onClick: () => setScreenMode("publish"),
+        },
       ],
       activeTabKey: () => screenMode(),
       titleDef: { label: eligibilityCheck().name },
@@ -66,7 +87,11 @@ const EligibilityCheckDetail = () => {
       <Header />
 
       <BdtNavbar navProps={navbarDefs} />
-      <Show when={ eligibilityCheck().id !== undefined && !initialLoadStatus.loading() }>
+      <Show
+        when={
+          eligibilityCheck().id !== undefined && !initialLoadStatus.loading()
+        }
+      >
         <Switch>
           <Match when={screenMode() === "paramConfig"}>
             <ParametersConfiguration
@@ -86,7 +111,11 @@ const EligibilityCheckDetail = () => {
                   Validate Current DMN
                 </div>
                 <div
-                  class={clsx("btn-default", { "btn-blue": !hasDmnModelChanged() }, { "btn-yellow": hasDmnModelChanged() })}
+                  class={clsx(
+                    "btn-default",
+                    { "btn-blue": !hasDmnModelChanged() },
+                    { "btn-yellow": hasDmnModelChanged() },
+                  )}
                   onClick={() => actions.saveDmnModel(currentDmnModel())}
                 >
                   Save Changes