feat: added header for CMS with user name (#87)

Added a header that utilizes CMS logo and user name. Upgraded CMS design package. closes #62
CMS-Enterprise · Jul 29, 2024 · 454b467 · 454b467
1 parent cde2f17
commit 454b467
Show file tree

Hide file tree

Showing 14 changed files with 506 additions and 2,035 deletions.
diff --git a/compose.yml b/compose.yml
@@ -4,7 +4,7 @@ services:
     env_file:
       - compose.env
     ports:
-      - 5432:5432
+      - 54321:5432
   api:
     depends_on:
       - postgre

diff --git a/ui/index.html b/ui/index.html
@@ -7,8 +7,13 @@
     <meta name="description" content="App" />
     <meta name="keywords" content="" />
     <title>ZT Maturity Dashboard</title>
-    <meta name="theme-color" content="#000000" />
-    <style>#root,body,html{height:100%;width:100%}body{font-family:--apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:SFMono-Regular,ui-monospace,Consolas,'Liberation Mono',Menlo,Courier,monospace!important}</style>
+    <meta name="theme-color" content="#000000" />  
+    <link rel="stylesheet" href="https://design.cms.gov/cdn/ds-cms-gov/10.1.1/css/index.css" />
+    <link rel="stylesheet" href="https://design.cms.gov/cdn/ds-cms-gov/10.1.1/css/cmsgov-theme.css" />
+    <script src="https://design.cms.gov/cdn/ds-cms-gov/10.1.1/react-components/bundle/react.production.min.js"></script>
+    <script src="https://design.cms.gov/cdn/ds-cms-gov/10.1.1/react-components/bundle/react-dom.production.min.js"></script>
+    <script src="https://design.cms.gov/cdn/ds-cms-gov/10.1.1/react-components/bundle/react-components.js"></script>
+    <!-- <style>#root,body,html{height:100%;width:100%}body{font-family:--apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:SFMono-Regular,ui-monospace,Consolas,'Liberation Mono',Menlo,Courier,monospace!important}</style> -->
   </head>
   <body>
     <script type="module" src="/src/main.tsx"></script>

diff --git a/ui/package.json b/ui/package.json
@@ -59,6 +59,7 @@
     "aws-amplify": "^5.3.15",
     "classnames": "^2.5.1",
     "clipboard-copy": "^4.0.1",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-animate-height": "^3.2.3",
@@ -75,7 +76,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
-    "@cmsgov/design-system": "^10.0.0",
+    "@cmsgov/design-system": "^10.1.2",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
     "@semantic-release/changelog": "^6.0.3",

diff --git a/ui/src/assets/icons/centers-for-medicare-and-medicaid-services-logo.svg b/ui/src/assets/icons/centers-for-medicare-and-medicaid-services-logo.svg
diff --git a/ui/src/assets/icons/logo.svg b/ui/src/assets/icons/logo.svg
diff --git a/ui/src/constants.ts b/ui/src/constants.ts
@@ -4,8 +4,8 @@
  */
 
 //* Application Strings
-export const ORG_NAME = 'Aquia'
-export const ORG_URL = 'https://aquia.us/'
+export const ORG_NAME = 'CMS'
+export const ORG_URL = 'https://www.cms.gov'
 export const COPYRIGHT_LABEL = `Copyright © ${new Date()
   .getFullYear()
   .toString()}`

diff --git a/ui/src/main.tsx b/ui/src/main.tsx
@@ -7,22 +7,15 @@ import * as ReactDOMClient from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
 import CONFIG from '@/utils/config'
 import router from '@/router/router'
-// import onPerfEntry from '@/utils/onPerfEntry'
 import { SIGN_IN_GREETING } from '@/locales/en'
 import '@/sass/style.scss'
 import onPerfEntry from './utils/onPerfEntry'
-// import { gql } from '@apollo/client'
 import {
   ApolloProvider,
   ApolloClient,
   InMemoryCache,
   HttpLink,
 } from '@apollo/client'
-// import { ApolloServer } from '@apollo/server'
-// import { expressMiddleware } from '@apollo/server/express4'
-// import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer'
-// import express from 'express'
-// import http from 'http'
 
 export const client = new ApolloClient({
   link: new HttpLink({

diff --git a/ui/src/router/authLoader.ts b/ui/src/router/authLoader.ts
@@ -0,0 +1,31 @@
+/**
+ * Auth state loader for react-router data routes.
+ * @module router/authLoader
+ * @see {@link dashboard/Routes}
+ */
+
+interface RequestOptions {
+  method: string
+  headers: Headers
+  redirect: 'follow' | 'error' | 'manual'
+}
+
+const authLoader = async (): Promise<unknown> => {
+  const myHeaders = new Headers()
+  myHeaders.append('Authorization', process.env.AUTH_TOKEN!)
+  const requestOptions: RequestOptions = {
+    method: 'GET',
+    headers: myHeaders,
+    redirect: 'follow',
+  }
+  return fetch('/whoami', requestOptions)
+    .then((response) => response.text())
+    .then((result) => {
+      return result
+    })
+    .catch((error) => {
+      return error
+    })
+}
+
+export default authLoader
diff --git a/ui/src/router/router.tsx b/ui/src/router/router.tsx
@@ -5,6 +5,7 @@
  */
 import { createHashRouter } from 'react-router-dom'
 import ErrorBoundary from '@/components/ErrorBoundary'
+import authLoader from './authLoader'
 import { RouteIds, Routes } from '@/router/constants'
 import HomePageContainer from '@/views/Home/Home'
 import Title from '@/views/Title/Title'
@@ -27,6 +28,7 @@ const router = createHashRouter([
     id: RouteIds.ROOT,
     path: Routes.ROOT,
     element: <Title />,
+    loader: authLoader,
     children: [
       {
         index: true,

diff --git a/ui/src/sass/style.scss b/ui/src/sass/style.scss
@@ -6,4 +6,4 @@ body {
   min-height: 100vh;
   min-height: --webkit-fill-available;
   min-width: 100vw;
-}
+}
diff --git a/ui/src/views/Home/Home.tsx b/ui/src/views/Home/Home.tsx
@@ -10,7 +10,6 @@ import Button from '@mui/material/Button'
 import gql from 'graphql-tag'
 import { Link } from 'react-router-dom'
 import { DocumentNode } from '@apollo/client'
-// import { Container } from '@mui/material'
 
 /**
  * Component that renders the contents of the Dashboard view.
@@ -120,7 +119,9 @@ const HomePageContainer: React.FC = (): JSX.Element => {
               This dashboard attempts to breakdown data silos and...
             </Typography>
             <FormControl sx={{ m: 1, width: 400 }}>
-              <InputLabel id="fisma-select-label">FISMA Systems</InputLabel>
+              <InputLabel id="fisma-select-label" sx={{ marginTop: 0 }}>
+                FISMA Systems
+              </InputLabel>
               <Select
                 labelId="fisma-select-label"
                 id="fisma-select"

diff --git a/ui/src/views/Title/Title.tsx b/ui/src/views/Title/Title.tsx
@@ -3,16 +3,65 @@ import * as React from 'react'
 // import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { Container } from '@mui/material'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLoaderData } from 'react-router-dom'
+import { UsaBanner } from '@cmsgov/design-system'
+import { jwtDecode } from 'jwt-decode'
+import logo from '../../assets/icons/logo.svg'
+import AccountCircleIcon from '@mui/icons-material/AccountCircle'
 /**
  * Component that renders the contents of the Dashboard view.
  * @returns {JSX.Element} Component that renders the dashboard contents.
  */
-
+interface LoaderData {
+  email?: string
+  name?: string
+  preferred_username?: string
+  groups?: string[]
+}
 const Title: React.FC = (): JSX.Element => {
+  const loaderData = useLoaderData() as string
+  const userInfo = jwtDecode(loaderData) as LoaderData
   return (
     <>
-      <Container maxWidth="md">
+      <UsaBanner />
+      <div className="ds-l-row ds-u-margin--0 ds-u-padding-x--2 ds-u-padding-y--0 ds-u-padding-left--6">
+        <div className="header-top-wrapper ds-l-md-col--12">
+          <div className="region region-cms-header-primary">
+            <div className="ds-l-row">
+              <div className="ds-l-col--1"></div>
+              <div className="ds-l-col--2 ds-u-margin-left--7 ds-u-lg-display--block">
+                <img
+                  className="ds-u-float--right"
+                  src={logo}
+                  alt="CMS.gov"
+                  width={200}
+                  height={100}
+                ></img>
+              </div>
+              <div className="ds-l-col--3 ds-u-lg-display--block ds-u-display--none ds-u-padding-left--0 ds-u-margin-top--5 ds-u-font-weight--semibold">
+                Centers for Medicare &amp; Medicaid Services
+              </div>
+              <div className="ds-l-col--4 ds-u-lg-display--block ds-u-display--none ds-u-padding-left--0 ds-u-margin-top--5 ds-u-font-weight--semibold">
+                <div className="ds-u-float--right">
+                  <AccountCircleIcon fontSize={'large'} />
+                  {userInfo.name ? (
+                    <span
+                      style={{ verticalAlign: '13px' }}
+                      className="ds-text-body--md"
+                    >
+                      {userInfo.name}
+                    </span>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* </div> */}
+      <Container>
         <Typography variant="h3" align="center">
           Zero Trust Maturity Score Dashboard
         </Typography>

diff --git a/ui/vite.config.ts b/ui/vite.config.ts
@@ -1,4 +1,5 @@
-import { defineConfig, transformWithEsbuild, type PluginOption } from 'vite'
+// eslint-disable-next-line prettier/prettier
+import { defineConfig, transformWithEsbuild, loadEnv, type PluginOption } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import EnvironmentPlugin from 'vite-plugin-environment'
 import { visualizer } from 'rollup-plugin-visualizer'
@@ -9,7 +10,6 @@ export default defineConfig(({ mode }) => {
   return {
     define: {
       'process.env': {},
-
       global: {},
       _global: {},
     },
@@ -56,6 +56,11 @@ export default defineConfig(({ mode }) => {
           changeOrigin: true,
           secure: false,
         },
+        '/whoami': {
+          target: 'http://localhost:3000/',
+          changeOrigin: true,
+          secure: false,
+        },
       },
       watch: {
         ignored: ['**/coverage/**'],