Update dashboard header to be closer to designs (#6372)

hypothesis · Jun 19, 2024 · c445127 · c445127
1 parent a776e1f
commit c445127
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 31 deletions.
diff --git a/lms/static/images/hypothesis-logo.svg b/lms/static/images/hypothesis-logo.svg
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardApp.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardApp.tsx
@@ -1,29 +1,65 @@
+import {
+  Link,
+  LogoIcon,
+  ProfileIcon,
+  SettingsIcon,
+} from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
-import { Route, Switch, useParams } from 'wouter-preact';
+import { Link as RouterLink, Route, Switch, useParams } from 'wouter-preact';
 
+import { useConfig } from '../../config';
 import AssignmentActivity from './AssignmentActivity';
 import CourseActivity from './CourseActivity';
 import DashboardFooter from './DashboardFooter';
 import OrganizationActivity from './OrganizationActivity';
 
 export default function DashboardApp() {
+  const { dashboard } = useConfig(['dashboard']);
   const { organizationPublicId } = useParams<{
     organizationPublicId: string;
   }>();
 
   return (
     <div className="flex flex-col min-h-screen gap-5">
-      <div
-        className={classnames(
-          'flex justify-center p-3 w-full',
-          'bg-white border-b shadow',
-        )}
-      >
-        <img
-          alt="Hypothesis logo"
-          src="/static/images/hypothesis-wordmark-logo.png"
-          className="h-10"
-        />
+      <div className="px-3 py-4 bg-white border-b shadow">
+        <div className="flex justify-between items-center mx-auto max-w-6xl">
+          <RouterLink href="" aria-label="All courses">
+            <LogoIcon />
+          </RouterLink>
+
+          <div className="flex gap-6">
+            <span
+              className={classnames(
+                'flex gap-2 items-center',
+                'font-semibold text-color-text-light',
+              )}
+              data-testid="display-name"
+            >
+              <ProfileIcon />
+              {dashboard.user.display_name}
+            </span>
+            <Link
+              underline="hover"
+              variant="text"
+              href="/email/preferences"
+              target="_blank"
+              classes={classnames(
+                'flex gap-2 items-center',
+                'font-semibold text-color-text-light',
+              )}
+              onClick={
+                /* istanbul ignore next - Temporary until settings link works */
+                e => {
+                  e.preventDefault();
+                  alert('This is not implemented yet');
+                }
+              }
+            >
+              <SettingsIcon />
+              Settings
+            </Link>
+          </div>
+        </div>
       </div>
       <div className="flex-grow px-3">
         <div className="mx-auto max-w-6xl">

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardFooter.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardFooter.tsx
@@ -1,5 +1,5 @@
 import type { LinkProps } from '@hypothesis/frontend-shared';
-import { Link } from '@hypothesis/frontend-shared';
+import { Link, LogoIcon } from '@hypothesis/frontend-shared';
 
 function FooterLink(
   props: Omit<LinkProps, 'underline' | 'variant' | 'target' | 'rel'>,
@@ -23,11 +23,7 @@ export default function DashboardFooter() {
       <div className="mx-auto max-w-6xl flex justify-between items-center">
         <div className="flex gap-3">
           <FooterLink href="https://web.hypothes.is" classes="font-bold">
-            <img
-              alt="Hypothesis logo"
-              src="/static/images/hypothesis-logo.svg"
-              className="mr-2 inline"
-            />
+            <LogoIcon className="mr-2 inline text-brand" />
             hypothes.is
           </FooterLink>
         </div>

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/DashboardApp-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/DashboardApp-test.js
@@ -4,10 +4,21 @@ import {
 } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
+import { Config } from '../../../config';
 import DashboardApp, { $imports } from '../DashboardApp';
 
 describe('DashboardApp', () => {
+  let fakeConfig;
+
   beforeEach(() => {
+    fakeConfig = {
+      dashboard: {
+        user: {
+          display_name: 'John Doe',
+        },
+      },
+    };
+
     $imports.$mock(mockImportedComponents());
   });
 
@@ -16,9 +27,25 @@ describe('DashboardApp', () => {
   });
 
   function createComponent() {
-    return mount(<DashboardApp />);
+    return mount(
+      <Config.Provider value={fakeConfig}>
+        <DashboardApp />
+      </Config.Provider>,
+    );
   }
 
+  ['John Doe', 'Jane Doe', 'Foobar'].forEach(displayName => {
+    it('shows expected username', () => {
+      fakeConfig.dashboard.user.display_name = displayName;
+      const wrapper = createComponent();
+
+      assert.equal(
+        wrapper.find('[data-testid="display-name"]').text(),
+        displayName,
+      );
+    });
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility({

diff --git a/lms/static/scripts/frontend_apps/config.ts b/lms/static/scripts/frontend_apps/config.ts
@@ -248,8 +248,14 @@ export type DashboardRoutes = {
   organization_courses: string;
 };
 
+export type DashboardUser = {
+  is_staff: boolean;
+  display_name: string;
+};
+
 export type DashboardConfig = {
   routes: DashboardRoutes;
+  user: DashboardUser;
 };
 
 /**
@@ -276,11 +282,6 @@ export type ConfigObject = {
   debug?: DebugInfo;
   product: Product;
 
-  // Only present when an LTI user is logged-in
-  user?: {
-    display_name: string;
-  };
-
   // Only present in "basic-lti-launch" mode.
   canvas: {
     // Only present in Canvas.