Merge pull request #78 from cisagov/ui-header-issue16

Fix UI Header Response to Browser and Crossfeed Logo Routing
cisagov · Mar 27, 2024 · bdcd9b4 · bdcd9b4
2 parents 7323ace + 4e6cf87
commit bdcd9b4
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 321 deletions.
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -74,8 +74,8 @@ const StyledScopedCssBaseline = styled(ScopedCssBaseline)(({ theme }) => ({
     position: 'relative',
     height: '100vh',
     display: 'flex',
-    flexFlow: 'column nowrap',
-    overflow: 'auto'
+    flexFlow: 'column nowrap'
+    // overflow: 'auto'
   },
 
   [`& .${classes.overrides}`]: {

diff --git a/frontend/src/components/NavItem.tsx b/frontend/src/components/NavItem.tsx
@@ -137,7 +137,7 @@ const Root = styled('div')(({ theme }) => ({
       position: 'absolute',
       bottom: 0,
       left: 6,
-      width: '100%',
+      width: '85%',
       height: 2,
       backgroundColor: 'white'
     }
@@ -152,7 +152,7 @@ const Root = styled('div')(({ theme }) => ({
       bottom: 0,
       left: 0,
       height: '100%',
-      width: 2,
+      width: '85%',
       backgroundColor: theme.palette.primary.main
     }
   },
@@ -170,7 +170,6 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classesNav.userLink}`]: {
     display: 'flex',
     alignItems: 'center',
-
     '& svg': {
       marginRight: theme.spacing()
     }

diff --git a/frontend/src/components/OrganizationList/OrganizationList.tsx b/frontend/src/components/OrganizationList/OrganizationList.tsx
@@ -105,7 +105,7 @@ export const OrganizationList: React.FC<{
     <Box mb={3}>
       <Paper elevation={0}>
         {organizations?.length === 0 ? (
-          <Alert severity="warning">No organizations found.</Alert>
+          <Alert severity="warning">Unable to load organizations.</Alert>
         ) : (
           <DataGrid
             rows={organizations}

diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
@@ -19,7 +19,7 @@ const Root = styled('div')(({ theme }) => ({
   [`&.${classes.wrapper}`]: {
     zIndex: 101,
     width: '100%',
-    maxWidth: 400,
+    maxWidth: 320,
     backgroundColor: theme.palette.background.paper,
     display: 'flex',
     flexFlow: 'row nowrap',
@@ -87,7 +87,7 @@ interface Props
   initialValue: string;
 }
 
-const defaultPlaceholder = 'Search for a domain, vuln type, port, service, IP';
+const defaultPlaceholder = 'Search a domain, vuln, port, service, IP';
 
 type Timer = ReturnType<typeof setTimeout>;
 

diff --git a/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Header component matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="css-1ww9ebi"
+    class="css-2vyz2w"
   >
     <header
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-1twrj82-MuiPaper-root-MuiAppBar-root"
@@ -27,7 +27,7 @@ exports[`Header component matches snapshot 1`] = `
             class="Header-lgNav"
           >
             <div
-              class="css-g2ra7n"
+              class="css-1ssxti9"
             >
               <a
                 aria-current="page"
@@ -39,7 +39,7 @@ exports[`Header component matches snapshot 1`] = `
               </a>
             </div>
             <div
-              class="css-g2ra7n"
+              class="css-1ssxti9"
             >
               <a
                 class="NavItem-link"
@@ -54,7 +54,7 @@ exports[`Header component matches snapshot 1`] = `
             class="Header-spacing"
           />
           <div
-            class="SearchBar-wrapper css-6woq0m"
+            class="SearchBar-wrapper css-yro7sz"
           >
             <div
               class="SearchBar-inner"
@@ -73,14 +73,14 @@ exports[`Header component matches snapshot 1`] = `
               <form>
                 <input
                   class="SearchBar-inp"
-                  placeholder="Search for a domain, vuln type, port, service, IP"
+                  placeholder="Search a domain, vuln, port, service, IP"
                   value=""
                 />
               </form>
             </div>
           </div>
           <div
-            class="css-g2ra7n"
+            class="css-1ssxti9"
           >
             <a
               aria-current="page"
@@ -117,27 +117,6 @@ exports[`Header component matches snapshot 1`] = `
               </div>
             </a>
           </div>
-          <button
-            aria-label="toggle mobile menu"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart MuiIconButton-sizeMedium Header-menuButton css-1d6w9lk-MuiButtonBase-root-MuiIconButton-root"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-              data-testid="MenuIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-              />
-            </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
         </div>
       </div>
     </header>

diff --git a/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Layout component matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="MuiScopedCssBaseline-root Layout-overrides css-iv8i0z-MuiScopedCssBaseline-root"
+    class="MuiScopedCssBaseline-root Layout-overrides css-dwi7y5-MuiScopedCssBaseline-root"
   >
     <div
       class="Layout-root"

diff --git a/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="SearchBar-wrapper css-6woq0m"
+    class="SearchBar-wrapper css-yro7sz"
   >
     <div
       class="SearchBar-inner"
@@ -22,7 +22,7 @@ exports[`matches snapshot 1`] = `
       <form>
         <input
           class="SearchBar-inp"
-          placeholder="Search for a domain, vuln type, port, service, IP"
+          placeholder="Search a domain, vuln, port, service, IP"
           value=""
         />
       </form>

diff --git a/frontend/src/components/__tests__/header.spec.tsx b/frontend/src/components/__tests__/header.spec.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, fireEvent, testUser, testOrganization } from 'test-utils';
+import { render, testUser, testOrganization } from 'test-utils';
 import { Header } from '../Header';
-import { waitFor } from '@testing-library/react';
 
 jest.mock('@elastic/react-search-ui', () => ({
   withSearch: () => (comp: any) => comp
@@ -14,13 +13,8 @@ describe('Header component', () => {
   });
 
   it('can expand drawer', async () => {
-    const { getByLabelText, getByTestId, queryByTestId } = render(<Header />);
+    const { queryByTestId } = render(<Header />);
     expect(queryByTestId('mobilenav')).not.toBeInTheDocument();
-    expect(getByLabelText('toggle mobile menu')).toBeInTheDocument();
-    fireEvent.click(getByLabelText('toggle mobile menu'));
-    await waitFor(() => {
-      expect(getByTestId('mobilenav')).toBeInTheDocument();
-    });
   });
 
   it('shows no links for unauthenticated user', () => {
@@ -30,15 +24,7 @@ describe('Header component', () => {
         currentOrganization: { ...testOrganization }
       }
     });
-    [
-      'Vulnerabilities',
-      'Risk Summary',
-      // 'My Organizations',
-      'Manage Organizations',
-      'Scans',
-      'Manage Users',
-      'My Account'
-    ].forEach((expected) => {
+    ['Vulnerabilities', 'Risk Summary', 'Scans'].forEach((expected) => {
       expect(queryByText(expected)).not.toBeInTheDocument();
     });
   });
@@ -50,41 +36,27 @@ describe('Header component', () => {
         currentOrganization: { ...testOrganization }
       }
     });
-    [
-      'Overview',
-      'Inventory',
-      // 'My Organizations',
-      'My Account',
-      'My Settings',
-      'Logout'
-    ].forEach((expected) => {
+    ['Overview', 'Inventory'].forEach((expected) => {
       expect(getByText(expected)).toBeInTheDocument();
     });
-    ['Manage Organizations', 'Scans', 'Manage Users'].forEach((notExpected) => {
+    ['Scans'].forEach((notExpected) => {
       expect(queryByText(notExpected)).not.toBeInTheDocument();
     });
   });
 
   it('shows correct links for ORG_ADMIN', () => {
-    const { getByText, queryByText } = render(<Header />, {
+    const { getByText } = render(<Header />, {
       authContext: {
         user: { ...testUser, userType: 'standard', isRegistered: true },
         currentOrganization: { ...testOrganization }
       }
     });
-    [
-      'Overview',
-      'Inventory',
-      // 'My Organizations',
-      'My Account',
-      'My Settings',
-      'Logout'
-    ].forEach((expected) => {
+    ['Overview', 'Inventory'].forEach((expected) => {
       expect(getByText(expected)).toBeInTheDocument();
     });
-    ['Manage Organizations', 'Manage Users'].forEach((notExpected) => {
-      expect(queryByText(notExpected)).not.toBeInTheDocument();
-    });
+    // ['Manage Organizations', 'Manage Users'].forEach((notExpected) => {
+    //   expect(queryByText(notExpected)).not.toBeInTheDocument();
+    // });
   });
 
   it('shows correct links for GLOBAL_ADMIN', () => {
@@ -94,20 +66,8 @@ describe('Header component', () => {
         currentOrganization: { ...testOrganization }
       }
     });
-    [
-      'Overview',
-      'Inventory',
-      'Scans',
-      'Manage Organizations',
-      'Manage Users',
-      'My Account',
-      'My Settings',
-      'Logout'
-    ].forEach((expected) => {
+    ['Overview', 'Inventory', 'Scans'].forEach((expected) => {
       expect(getByText(expected)).toBeInTheDocument();
     });
-    // ['My Organizations'].forEach((notExpected) => {
-    //   expect(queryByText(notExpected)).not.toBeInTheDocument();
-    // });
   });
 });
diff --git a/frontend/src/pages/Users/Users.tsx b/frontend/src/pages/Users/Users.tsx
@@ -92,21 +92,28 @@ export const Users: React.FC = () => {
   const fetchUsers = useCallback(async () => {
     try {
       const rows = await apiGet<UserType[]>(`/users/`);
-      rows.forEach((obj) => {
-        obj.lastLoggedInString = obj.lastLoggedIn
-          ? `${formatDistanceToNow(parseISO(obj.lastLoggedIn))} ago`
+      rows.forEach((row) => {
+        row.lastLoggedInString = row.lastLoggedIn
+          ? `${formatDistanceToNow(parseISO(row.lastLoggedIn))} ago`
           : 'None';
-        obj.dateToUSigned = obj.dateAcceptedTerms
-          ? `${formatDistanceToNow(parseISO(obj.dateAcceptedTerms))} ago`
+        row.dateToUSigned = row.dateAcceptedTerms
+          ? `${formatDistanceToNow(parseISO(row.dateAcceptedTerms))} ago`
           : 'None';
-        obj.orgs = obj.roles
-          ? obj.roles
+        row.orgs = row.roles
+          ? row.roles
               .filter((role) => role.approved)
               .map((role) => role.organization.name)
               .join(', ')
           : 'None';
       });
-      setUsers(rows);
+      if (user?.userType === 'globalAdmin') {
+        setUsers(rows);
+      } else if (user?.userType === 'regionalAdmin' && user?.regionId) {
+        rows.filter((row) => row.regionId === user.regionId);
+        setUsers(rows);
+      } else if (user) {
+        setUsers([user]);
+      }
       setErrorStates({ ...errorStates, getUsersError: '' });
     } catch (e: any) {
       setErrorStates({ ...errorStates, getUsersError: e.message });