feat: adding modal to edit fismasystems

.github/workflows/ui.yml

@@ -53,13 +53,11 @@ jobs:
         run: yarn build:${{ inputs.environment }}
 
       - name: Get AWS Creds
-        if: github.actor != 'dependabot[bot]'
         uses: aws-actions/configure-aws-credentials@v4
         with:
           role-to-assume: ${{ secrets.ROLEARN }}
           role-duration-seconds: 900
           aws-region: us-east-1
 
       - name: AWS Sync
-        if: github.actor != 'dependabot[bot]'
         run: aws s3 sync ./dist s3://${{ secrets.BUCKET_NAME }}/ --delete

src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,46 @@
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import { Box, IconButton, Typography, Button } from '@mui/material'
+import { CONFIRMATION_MESSAGE } from '@/constants'
+import { Button as CmsButton } from '@cmsgov/design-system'
+
+import CloseIcon from '@mui/icons-material/Close'
+type ConfirmDialogTypes = {
+  open: boolean
+  onClose: () => void
+  confirmClick: (confirm: boolean) => void
+}
+
+const ConfirmDialog = ({ open, onClose, confirmClick }: ConfirmDialogTypes) => {
+  const handleConfirm = () => {
+    confirmClick(true)
+    onClose()
+  }
+  const handleClose = () => {
+    confirmClick(false)
+    onClose()
+  }
+  return (
+    <Dialog open={open} maxWidth="sm" fullWidth>
+      <DialogTitle>Unsaved Changes</DialogTitle>
+      <Box position="absolute" top={0} right={0}>
+        <IconButton onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      <DialogContent>
+        <Typography>{CONFIRMATION_MESSAGE}</Typography>
+      </DialogContent>
+      <DialogActions>
+        <CmsButton variation="solid" onClick={handleConfirm}>
+          Confirm
+        </CmsButton>
+        <CmsButton onClick={handleClose}>Cancel</CmsButton>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default ConfirmDialog

src/components/DialogTitle/CustomDialogTitle.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import DialogTitle from '@mui/material/DialogTitle'
+import Typography from '@mui/material/Typography'
+/**
+ * Component that renders the title of the dialog.
+ * @param {string} title - The title to be displayed.
+ * @returns {JSX.Element} Component that renders the title of the dialog.
+ */
+type CustomDialogTitleProps = {
+  title: string
+}
+export default function CustomDialogTitle({ title }: CustomDialogTitleProps) {
+  return (
+    <DialogTitle align="center">
+      <div>
+        <Typography variant="h3">{title}</Typography>
+      </div>
+    </DialogTitle>
+  )
+}

src/components/ErrorBoundary.test.tsx

@@ -28,27 +28,6 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
-test('renders auth session error and navigate to logout after 5 seconds', () => {
-  const navigateMock = jest.fn().mockImplementation(() => ({}))
-  useNavigateMock.mockReturnValue(navigateMock)
-  isRouteErrorResponseMock.mockReturnValue(true)
-  routeErrorMock.mockReturnValue({
-    status: 401,
-    statusText: 'Unauthorized',
-    data: 'Unauthorized',
-  })
-
-  render(<ErrorBoundary />)
-
-  expect(
-    screen.getByText(/Your session has expired. Please login again./i)
-  ).toBeInTheDocument()
-
-  jest.advanceTimersByTime(5000)
-
-  expect(navigateMock).toHaveBeenCalledWith(Routes.AUTH_LOGOUT)
-})
-
 test('renders generic error message', () => {
   routeErrorMock.mockReturnValue(new Error('Something went wrong'))
   render(<ErrorBoundary />)

src/constants.ts

@@ -2,6 +2,7 @@
  * Application-wide constants
  * @module constants
  */
+import { userData } from './types'
 
 //* Application Strings
 export const ORG_NAME = 'CMS'
@@ -21,3 +22,71 @@ export const ERROR_MESSAGES = {
   error:
     'An error occurred. Please log in and try again. If the error persists, please contact support.',
 }
+export const EMPTY_USER: userData = {
+  userid: '',
+  email: '',
+  fullname: '',
+  role: '',
+  assignedfismasystems: [],
+}
+export const CONFIRMATION_MESSAGE =
+  'Your changes will not be saved! Are you sure you want to close out of editing a Fisma system before saving your changes?'
+
+export const PILLAR_FUNCTION_MAP: { [key: string]: string[] } = {
+  Identity: [
+    'AccessManagement',
+    'Identity-AutomationOrchestration',
+    'Identity-Governance',
+    'IdentityStores-Users',
+    'RiskAssessment',
+    'Authentication-Users',
+    'Identity-VisibilityAnalytics',
+  ],
+  Devices: [
+    'AssetRiskManagement',
+    'Device-AutomationOrchestration',
+    'Device-Governance',
+    'DeviceThreatProtection',
+    'PolicyEnforcement',
+    'Device-VisibilityAnalytics',
+    'ResourceAccess',
+  ],
+  Networks: [
+    'Network-AutomationOrchestration',
+    'Network-Encryption',
+    'Network-Governance',
+    'NetworkResilience',
+    'NetworkSegmentation',
+    'NetworkTrafficManagement',
+    'Network-VisibilityAnalytics',
+  ],
+  Applications: [
+    'AccessibleApplications',
+    'AccessAuthorization-Users',
+    'Application-AutomationOrchestration',
+    'Application-Governance',
+    'SecureDevDeployWorkflow',
+    'ApplicationSecurityTesting',
+    'AppThreatProtection',
+    'Application-VisibilityAnalytics',
+  ],
+  Data: [
+    'DataAccess',
+    'Data-AutomationOrchestration',
+    'DataAvailability',
+    'DataCategorization',
+    'DataEncryption',
+    'Data-Governance',
+    'DataInventoryManagement',
+    'Data-VisibilityAnalytics',
+  ],
+  CrossCutting: [
+    'Cross-AutomationOrchestration',
+    'Cross-Governance',
+    'Cross-VisibilityAnalytics',
+  ],
+}
+export const TEXTFIELD_HELPER_TEXT = 'This field is required'
+
+export const INVALID_INPUT_TEXT = (key: string) =>
+  `Please provide a valid ${key}`

src/types.ts

@@ -34,7 +34,7 @@ export type RequestOptions = {
 }
 export type FismaSystemType = {
   fismasystemid: number
-  fismauid: string | number
+  fismauid: string
   fismaacronym: string
   fismaname: string
   fismasubsystem: string
@@ -43,6 +43,10 @@ export type FismaSystemType = {
   fismaimpactlevel: string
   issoemail: string
   datacenterenvironment: string
+  datacallcontact?: string
+  groupacronym?: string
+  groupname?: string
+  divisionname?: string
 }
 export type FismaSystems = {
   fismaSystems: FismaSystemType[]
@@ -89,6 +93,14 @@ export type SystemDetailsModalProps = {
   onClose: () => void
   system: FismaSystemType | null
 }
+export type editSystemModalProps = {
+  title: string
+  open: boolean
+  onClose: (data: FismaSystemType) => void
+  system: FismaSystemType | null
+  mode: string
+}
+
 export type ScoreData = {
   datacallid: number
   fismasystemid: number
@@ -104,6 +116,26 @@ export type users = {
   isNew?: boolean
 }
 
+export type datacall = {
+  datacallid: number
+  datacall: string
+  datecreated: number
+  deadline: number
+}
+
+export type FormValidType = {
+  [key: string]: boolean
+}
+
+export type FormValidHelperText = {
+  [key: string]: string
+}
+
+export type FismaTableProps = {
+  scores: Record<number, number>
+  latestDataCallId: number
+}
+
 export type ThemeColor =
   | 'primary'
   | 'secondary'