2586 ux modify user type conditions

frontend/src/components/Footer/Footer.tsx

@@ -29,6 +29,7 @@ export const CrossfeedFooter: React.FC = (props) => {
               <Link
                 className={footerClasses.footerNavLink}
                 href="https://docs.crossfeed.cyber.dhs.gov/"
+                target="_blank"
               >
                 Documentation
               </Link>
@@ -39,6 +40,7 @@ export const CrossfeedFooter: React.FC = (props) => {
               <Link
                 className={footerClasses.footerNavLink}
                 href="https://www.cisa.gov"
+                target="_blank"
               >
                 CISA Homepage
               </Link>

frontend/src/components/Header.tsx

@@ -287,12 +287,12 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
         users: GLOBAL_ADMIN,
         exact: true
       },
-      {
-        title: 'My Organizations',
-        path: '/organizations',
-        users: STANDARD_USER,
-        exact: true
-      },
+      // {
+      //   title: 'My Organizations',
+      //   path: '/organizations',
+      //   users: STANDARD_USER,
+      //   exact: true
+      // },
       {
         title: 'Manage Users',
         path: '/users',
@@ -328,12 +328,12 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
       users: GLOBAL_ADMIN,
       exact: true
     },
-    {
-      title: 'My Organizations',
-      path: '/organizations',
-      users: STANDARD_USER,
-      exact: true
-    },
+    // {
+    //   title: 'My Organizations',
+    //   path: '/organizations',
+    //   users: STANDARD_USER,
+    //   exact: true
+    // },
     {
       title: 'Manage Users',
       path: '/users',

frontend/src/components/OrganizationList/OrganizationList.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import EditNoteOutlinedIcon from '@mui/icons-material/EditNoteOutlined';
 import { Organization } from 'types';
-import { Box, Button, IconButton, Grid } from '@mui/material';
+import { Alert, Box, Button, IconButton, Grid } from '@mui/material';
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { useHistory } from 'react-router-dom';
 import { Add } from '@mui/icons-material';
@@ -80,8 +80,6 @@ export const OrganizationList: React.FC<{
     }
   }, [fetchOrganizations, parent]);
 
-  console.log(JSON.stringify(organizations));
-
   const addOrgButton = user?.userType === 'globalAdmin' && (
     <Button
       size="small"
@@ -94,21 +92,25 @@ export const OrganizationList: React.FC<{
   );
 
   return (
-    <>
+    <Box mb={3}>
       <Grid
         container
         spacing={2}
         style={{ margin: '0 auto', marginTop: '1rem', maxWidth: '1000px' }}
       ></Grid>
       <Box sx={{ backgroundColor: 'white' }}>
-        <DataGrid
-          rows={organizations}
-          columns={orgCols}
-          slots={{ toolbar: CustomToolbar }}
-          slotProps={{
-            toolbar: { children: addOrgButton }
-          }}
-        />
+        {organizations?.length === 0 ? (
+          <Alert severity="warning">No organizations found.</Alert>
+        ) : (
+          <DataGrid
+            rows={organizations}
+            columns={orgCols}
+            slots={{ toolbar: CustomToolbar }}
+            slotProps={{
+              toolbar: { children: addOrgButton }
+            }}
+          />
+        )}
       </Box>
       <OrganizationForm
         onSubmit={onSubmit}
@@ -117,6 +119,6 @@ export const OrganizationList: React.FC<{
         type="create"
         parent={parent}
       ></OrganizationForm>
-    </>
+    </Box>
   );
 };

frontend/src/components/WarningBanner/Warning.tsx

@@ -33,15 +33,15 @@ export const CrossfeedWarning: React.FC = (props) => {
               Crossfeed is hosted by Department of Homeland Security (DHS)
               Cybersecurity and Infrastructure Security Agency (CISA)
               Cybersecurity Division (CSD) Vulnerability Management (VM) Attack
-              Attack Attack Surface Management (ASM) Automation is computer
-              systems systems may systems may be monitored for all unlawful
-              unlawful purposes, including to ensure their use is authorized,
-              for management of the system, to protection against security
-              procedures, survivability, and operational operational operational
-              operational security. All information, information, including
-              information, placed or sent this system may be monitored.
-              Monitoring includes actives attacks by authorized US Government
-              entities to test or verify the security of this system.
+              Surface Management (ASM) Automation is computer systems systems
+              may systems may be monitored for all unlawful unlawful purposes,
+              including to ensure their use is authorized, for management of the
+              system, to protection against security procedures, survivability,
+              and operational operational operational operational security. All
+              information, information, including information, placed or sent
+              this system may be monitored. Monitoring includes actives attacks
+              by authorized US Government entities to test or verify the
+              security of this system.
               <br />
               <br />
               Use of the computer system, authorized or unauthorized,

frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap

@@ -56,6 +56,7 @@ exports[`Layout component matches snapshot 1`] = `
                 <a
                   class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways Footer-footerNavLink css-smdm7r-MuiTypography-root-MuiLink-root"
                   href="https://docs.crossfeed.cyber.dhs.gov/"
+                  target="_blank"
                 >
                   Documentation
                 </a>
@@ -68,6 +69,7 @@ exports[`Layout component matches snapshot 1`] = `
                 <a
                   class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways Footer-footerNavLink css-smdm7r-MuiTypography-root-MuiLink-root"
                   href="https://www.cisa.gov"
+                  target="_blank"
                 >
                   CISA Homepage
                 </a>

frontend/src/components/__tests__/header.spec.tsx

@@ -33,7 +33,7 @@
     [
       'Vulnerabilities',
       'Risk Summary',
-      'My Organizations',
+      // 'My Organizations',
       'Manage Organizations',
       'Scans',
       'Manage Users',
@@ -53,7 +53,7 @@
     [
       'Overview',
       'Inventory',
-      'My Organizations',
+      // 'My Organizations',
       'My Account',
       'My Settings',
       'Logout'
@@ -75,7 +75,7 @@
     [
       'Overview',
       'Inventory',
-      'My Organizations',
+      // 'My Organizations',
       'My Account',
       'My Settings',
       'Logout'
@@ -88,7 +88,7 @@
   });
 
   it('shows correct links for GLOBAL_ADMIN', () => {
     const { getByText, queryByText } = render(<Header />, {
       authContext: {
         user: { ...testUser, userType: 'globalAdmin', isRegistered: true },
         currentOrganization: { ...testOrganization }
@@ -106,8 +106,8 @@
     ].forEach((expected) => {
       expect(getByText(expected)).toBeInTheDocument();
     });
-    ['My Organizations'].forEach((notExpected) => {
-      expect(queryByText(notExpected)).not.toBeInTheDocument();
-    });
+    // ['My Organizations'].forEach((notExpected) => {
+    //   expect(queryByText(notExpected)).not.toBeInTheDocument();
+    // });
   });
 });

frontend/src/pages/Organizations/Organizations.tsx

@@ -118,6 +118,7 @@ export const Organizations: React.FC = () => {
           </>
         )}
       </div>
+      <br />
     </Root>
   );
 };

frontend/src/pages/Risk/Risk.tsx

@@ -5,7 +5,8 @@ import TopVulnerablePorts from './TopVulnerablePorts';
 import TopVulnerableDomains from './TopVulnerableDomains';
 import VulnerabilityPieChart from './VulnerabilityPieChart';
 import * as RiskStyles from './style';
-import { delay, getSeverityColor, offsets, severities } from './utils';
+// import { delay, getSeverityColor, offsets, severities } from './utils';
+import { getSeverityColor, offsets, severities } from './utils';
 import { useAuthContext } from 'context';
 import { Paper } from '@mui/material';
 import { geoCentroid } from 'd3-geo';
@@ -19,9 +20,9 @@ import {
 } from 'react-simple-maps';
 import { scaleLinear } from 'd3-scale';
 import { Vulnerability } from 'types';
-import { jsPDF } from 'jspdf';
-import html2canvas from 'html2canvas';
-import { Button as USWDSButton } from '@trussworks/react-uswds';
+// import { jsPDF } from 'jspdf';
+// import html2canvas from 'html2canvas';
+// import { Button as USWDSButton } from '@trussworks/react-uswds';
 
 export interface Point {
   id: string;
@@ -69,7 +70,7 @@ const Risk: React.FC = (props) => {
     useAuthContext();
 
   const [stats, setStats] = useState<Stats | undefined>(undefined);
-  const [isLoading, setIsLoading] = useState(false);
+  // const [isLoading, setIsLoading] = useState(false);
   const RiskRoot = RiskStyles.RiskRoot;
   const { cardRoot, content, contentWrapper, header, panel } =
     RiskStyles.classesRisk;
@@ -219,48 +220,48 @@ const Risk: React.FC = (props) => {
   }
 
   // TODO: Move generatePDF to a separate component
-  const generatePDF = async () => {
-    const dateTimeNow = new Date(); // UTC Date Time
-    const localDate = new Date(dateTimeNow); // Local Date Time
-    setIsLoading(true);
-    await delay(650);
-    const input = document.getElementById('wrapper')!;
-    input.style.width = '1400px';
-    await delay(1);
-    await html2canvas(input, {
-      scrollX: 0,
-      scrollY: 0,
-      ignoreElements: function (element) {
-        return 'mapWrapper' === element.id;
-      }
-    }).then((canvas) => {
-      const imgData = canvas.toDataURL('image/png');
-      const imgWidth = 190;
-      const imgHeight = (canvas.height * imgWidth) / canvas.width;
-      const pdf = new jsPDF('p', 'mm');
-      pdf.setFontSize(18);
-      pdf.text('Crossfeed Report', 12, 10);
-      pdf.setFontSize(10);
-      pdf.text(dateTimeNow.toISOString(), 12, 17);
-      pdf.addImage(imgData, 'PNG', 10, 20, imgWidth, imgHeight); // charts
-      pdf.line(3, 290, 207, 290);
-      pdf.setFontSize(8);
-      pdf.text('Prepared by ' + user?.fullName + ', ' + localDate, 3, 293); // print the name of the person who printed the report as well as a human friendly date/time
-      pdf.save('Crossfeed_Report_' + dateTimeNow.toISOString() + '.pdf'); // sets the filename and adds the date and time
-    });
-    input.style.removeProperty('width');
-    setIsLoading(false);
-  };
+  // const generatePDF = async () => {
+  //   const dateTimeNow = new Date(); // UTC Date Time
+  //   const localDate = new Date(dateTimeNow); // Local Date Time
+  //   setIsLoading(true);
+  //   await delay(650);
+  //   const input = document.getElementById('wrapper')!;
+  //   input.style.width = '1400px';
+  //   await delay(1);
+  //   await html2canvas(input, {
+  //     scrollX: 0,
+  //     scrollY: 0,
+  //     ignoreElements: function (element) {
+  //       return 'mapWrapper' === element.id;
+  //     }
+  //   }).then((canvas) => {
+  //     const imgData = canvas.toDataURL('image/png');
+  //     const imgWidth = 190;
+  //     const imgHeight = (canvas.height * imgWidth) / canvas.width;
+  //     const pdf = new jsPDF('p', 'mm');
+  //     pdf.setFontSize(18);
+  //     pdf.text('Crossfeed Report', 12, 10);
+  //     pdf.setFontSize(10);
+  //     pdf.text(dateTimeNow.toISOString(), 12, 17);
+  //     pdf.addImage(imgData, 'PNG', 10, 20, imgWidth, imgHeight); // charts
+  //     pdf.line(3, 290, 207, 290);
+  //     pdf.setFontSize(8);
+  //     pdf.text('Prepared by ' + user?.fullName + ', ' + localDate, 3, 293); // print the name of the person who printed the report as well as a human friendly date/time
+  //     pdf.save('Crossfeed_Report_' + dateTimeNow.toISOString() + '.pdf'); // sets the filename and adds the date and time
+  //   });
+  //   input.style.removeProperty('width');
+  //   setIsLoading(false);
+  // };
 
   return (
     <RiskRoot className={classes.root}>
-      {isLoading && (
+      {/* {isLoading && (
         <div className="cisa-crossfeed-loading">
           <div></div>
           <div></div>
         </div>
-      )}
-      <p>
+      )} */}
+      {/* <p>
         <USWDSButton
           outline
           type="button"
@@ -270,7 +271,7 @@ const Risk: React.FC = (props) => {
         >
           Generate Report
         </USWDSButton>
-      </p>
+      </p> */}
       <div id="wrapper" className={contentWrapper}>
         {stats && (
           <div className={content}>

frontend/src/pages/Settings/Settings.tsx

@@ -86,19 +86,8 @@ const Settings: React.FC = () => {
     }
   ];
 
-  return (
-    <div className={classes.root}>
-      <h1>My Account</h1>
-      <h2>Name: {user && user.fullName}</h2>
-      <h2>Email: {user && user.email}</h2>
-      <h2>
-        Member of:{' '}
-        {user &&
-          (user.roles || [])
-            .filter((role) => role.approved)
-            .map((role) => role.organization.name)
-            .join(', ')}
-      </h2>
+  const apiKeysJsx = (
+    <>
       <h2>API Keys:</h2>
       <p>
         <a
@@ -134,6 +123,23 @@ const Settings: React.FC = () => {
           </ButtonGroup>
         </ModalFooter>
       </Modal>
+    </>
+  );
+
+  return (
+    <div className={classes.root}>
+      <h1>My Account</h1>
+      <h2>Name: {user && user.fullName}</h2>
+      <h2>Email: {user && user.email}</h2>
+      <h2>
+        Member of:{' '}
+        {user &&
+          (user.roles || [])
+            .filter((role) => role.approved)
+            .map((role) => role.organization.name)
+            .join(', ')}
+      </h2>
+      {user?.userType !== 'standard' && apiKeysJsx}
       {user?.userType === 'globalAdmin' && (
         <>
           <a href={`${process.env.REACT_APP_API_URL}/matomo/index.php`}>