Feat/display account in header

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,107 @@
+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";
+
+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;
+  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.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 { 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>
+            <div>Open menu</div>
+          </HamburgerMenu.Button>
+          <HamburgerMenu.Panel>
+            <HeaderMenu userEmail={userEmail} 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

builder-frontend/src/components/project/Project.tsx

@@ -2,7 +2,7 @@ import { createSignal, createResource, Accessor } from "solid-js";
 import { useParams } from "@solidjs/router";
 
 import FormEditorView from "./FormEditorView";
-import Header from "../Header";
+import Header from "../Header/Header";
 import Loading from "../Loading";
 import ManageBenefits from "./manageBenefits/ManageBenefits";
 import Preview from "./preview/Preview";
@@ -11,7 +11,6 @@ import Publish from "./Publish";
 import { fetchProject } from "@/api/screener";
 import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
 
-
 type TabOption = "manageBenefits" | "formEditor" | "preview" | "publish";
 
 function Project() {
@@ -34,16 +33,32 @@ function Project() {
     // including a dummy signal 'forceUpdate' that can be unique for
     // each call to the refetch
     () => [params.projectId, forceUpdate()],
-    fetchAndCacheProject
+    fetchAndCacheProject,
   );
 
   const navbarDefs: Accessor<NavbarProps> = () => {
     return {
       tabDefs: [
-        { key: "manageBenefits", label: "Manage Benefits", onClick: () => setActiveTab("manageBenefits") },
-        { key: "formEditor", label: "Form Editor", onClick: () => setActiveTab("formEditor") },
-        { key: "preview", label: "Preview", onClick: () => setActiveTab("preview") },
-        { key: "publish", label: "Publish", onClick: () => setActiveTab("publish") },
+        {
+          key: "manageBenefits",
+          label: "Manage Benefits",
+          onClick: () => setActiveTab("manageBenefits"),
+        },
+        {
+          key: "formEditor",
+          label: "Form Editor",
+          onClick: () => setActiveTab("formEditor"),
+        },
+        {
+          key: "preview",
+          label: "Preview",
+          onClick: () => setActiveTab("preview"),
+        },
+        {
+          key: "publish",
+          label: "Publish",
+          onClick: () => setActiveTab("publish"),
+        },
       ],
       activeTabKey: () => activeTab(),
       titleDef: { label: project().screenerName },
@@ -52,9 +67,9 @@ function Project() {
 
   return (
     <div class="h-screen flex flex-col">
-      <Header/>
+      <Header />
       {project.loading ? (
-        <Loading/>
+        <Loading />
       ) : (
         <>
           <BdtNavbar navProps={navbarDefs} />
@@ -64,11 +79,9 @@ function Project() {
               setFormSchema={setFormSchema}
             />
           )}
-          {activeTab() == "manageBenefits" && (
-            <ManageBenefits />
-          )}
+          {activeTab() == "manageBenefits" && <ManageBenefits />}
           {activeTab() == "preview" && (
-            <Preview project={project} formSchema={formSchema}/>
+            <Preview project={project} formSchema={formSchema} />
           )}
           {activeTab() == "publish" && (
             <Publish