From 0a23840c2543069bf9d6cb77d3dac53041dd7ef2 Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Wed, 27 Nov 2024 10:51:25 -0500 Subject: [PATCH 1/9] feat: adding modal to edit fismasystems --- src/components/ErrorBoundary.test.tsx | 40 +++++++-------- src/constants.ts | 8 +++ src/types.ts | 7 +++ src/views/FismaTable/FismaTable.tsx | 49 ++++++++++++++----- .../StatisticBlocks/StatisticsBlocks.tsx | 10 +++- src/views/Title/Context.ts | 9 ++-- src/views/Title/Title.tsx | 3 +- src/views/UserTable/UserTable.tsx | 4 +- 8 files changed, 91 insertions(+), 39 deletions(-) diff --git a/src/components/ErrorBoundary.test.tsx b/src/components/ErrorBoundary.test.tsx index 1967527..dedd5b6 100644 --- a/src/components/ErrorBoundary.test.tsx +++ b/src/components/ErrorBoundary.test.tsx @@ -28,26 +28,26 @@ 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() - - expect( - screen.getByText(/Your session has expired. Please login again./i) - ).toBeInTheDocument() - - jest.advanceTimersByTime(5000) - - expect(navigateMock).toHaveBeenCalledWith(Routes.AUTH_LOGOUT) -}) +// 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() + +// 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')) diff --git a/src/constants.ts b/src/constants.ts index 6648918..e1dcaea 100644 --- a/src/constants.ts +++ b/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,10 @@ 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: [], +} diff --git a/src/types.ts b/src/types.ts index d7e0f1d..1a6c065 100644 --- a/src/types.ts +++ b/src/types.ts @@ -104,6 +104,13 @@ export type users = { isNew?: boolean } +export type datacall = { + datacallid: number + datacall: string + datecreated: number + deadline: number +} + export type ThemeColor = | 'primary' | 'secondary' diff --git a/src/views/FismaTable/FismaTable.tsx b/src/views/FismaTable/FismaTable.tsx index 7749a28..8df73db 100644 --- a/src/views/FismaTable/FismaTable.tsx +++ b/src/views/FismaTable/FismaTable.tsx @@ -4,6 +4,8 @@ import { GridColDef, GridFooterContainer, GridSlotsComponentsProps, + GridRenderCellParams, + GridActionsCellItem, GridFooter, GridRowId, } from '@mui/x-data-grid' @@ -11,11 +13,13 @@ import Tooltip from '@mui/material/Tooltip' import { Box, IconButton } from '@mui/material' import { useState } from 'react' import FileDownloadSharpIcon from '@mui/icons-material/FileDownloadSharp' -import Link from '@mui/material/Link' import QuestionnareModal from '../QuestionnareModal/QuestionnareModal' import CustomSnackbar from '../Snackbar/Snackbar' import axiosInstance from '@/axiosConfig' - +import { useContextProp } from '../Title/Context' +import { EMPTY_USER } from '../../constants' +import EditIcon from '@mui/icons-material/Edit' +import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined' type FismaTable2Props = { fismaSystems: FismaSystemType[] scores: Record @@ -114,6 +118,7 @@ export function CustomFooterSaveComponent( } export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { const [open, setOpen] = useState(false) + const { userInfo } = useContextProp() || EMPTY_USER const [selectedRow, setSelectedRow] = useState(null) const [selectedRows, setSelectedRows] = useState([]) const handleOpenModal = (row: FismaSystemType) => { @@ -206,18 +211,40 @@ export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { headerName: 'Actions', headerAlign: 'center', align: 'center', - flex: 1, + flex: 0.5, hideable: false, sortable: false, disableColumnMenu: true, - renderCell: (params) => ( - handleOpenModal(params.row as FismaSystemType)} - > - View Questionnare - + renderCell: (params: GridRenderCellParams) => ( + <> + {/* handleOpenModal(params.row as FismaSystemType)} + > + View Questionnare + */} + + } + key={`question-${params.row.fismasystemid}`} + label="View Questionnare" + className="textPrimary" + onClick={() => handleOpenModal(params.row as FismaSystemType)} + color="inherit" + /> + + {userInfo.role === 'ADMIN' && ( + } + key={`edit-${params.row.fismasystemid}`} + label="Edit" + className="textPrimary" + // onClick={} + color="inherit" + /> + )} + ), }, ] diff --git a/src/views/StatisticBlocks/StatisticsBlocks.tsx b/src/views/StatisticBlocks/StatisticsBlocks.tsx index 2a90cf0..f04417b 100644 --- a/src/views/StatisticBlocks/StatisticsBlocks.tsx +++ b/src/views/StatisticBlocks/StatisticsBlocks.tsx @@ -49,11 +49,17 @@ export default function StatisticsBlocks({ } } } + if (totalCount === 0) { + setAvgSystemScore(0) + setMinSystemScore(0) + } else { + setAvgSystemScore(Number((totalScores / totalCount).toFixed(2))) + setMinSystemScore(minScore) + } setTotalSystems(totalCount) - setAvgSystemScore(Number((totalScores / totalCount).toFixed(2))) setMaxSystemScore(maxScore) setMaxSystemAcronym(maxScoreSystem || '') - setMinSystemScore(minScore) + setMinSystemAcronym(minScoreSystem || '') setLoading(false) }, [fismaSystems, scores]) diff --git a/src/views/Title/Context.ts b/src/views/Title/Context.ts index 8ca0616..d5b7356 100644 --- a/src/views/Title/Context.ts +++ b/src/views/Title/Context.ts @@ -1,8 +1,11 @@ import { useOutletContext } from 'react-router-dom' -import { FismaSystemType } from '@/types' +import { FismaSystemType, userData } from '@/types' -type ContextType = { fismaSystems: FismaSystemType[] | [] } +type ContextType = { + fismaSystems: FismaSystemType[] | [] + userInfo: userData +} -export function useFismaSystems() { +export function useContextProp() { return useOutletContext() } diff --git a/src/views/Title/Title.tsx b/src/views/Title/Title.tsx index e26d0c5..29deec7 100644 --- a/src/views/Title/Title.tsx +++ b/src/views/Title/Title.tsx @@ -45,6 +45,7 @@ export default function Title() { async function fetchFismaSystems() { try { const fismaSystems = await axiosInstance.get('/fismasystems') + // TODO: use ERROR_MESSAGES to handle errors if (fismaSystems.status !== 200) { navigate(Routes.SIGNIN, { replace: true, @@ -164,7 +165,7 @@ export default function Title() { {loaderData.status !== 200 ? ( ) : ( - + )} diff --git a/src/views/UserTable/UserTable.tsx b/src/views/UserTable/UserTable.tsx index 7a66dad..ffef286 100644 --- a/src/views/UserTable/UserTable.tsx +++ b/src/views/UserTable/UserTable.tsx @@ -32,7 +32,7 @@ import Tooltip from '@mui/material/Tooltip' import './UserTable.css' import axiosInstance from '@/axiosConfig' import { users } from '@/types' -import { useFismaSystems } from '../Title/Context' +import { useContextProp } from '../Title/Context' import Box from '@mui/material/Box' import CustomSnackbar from '../Snackbar/Snackbar' import AssignSystemModal from '../AssignSystemModal/AssignSystemModal' @@ -95,7 +95,7 @@ export default function UserTable() { } const [rows, setRows] = useState([]) const [userId, setUserId] = useState('') - const { fismaSystems } = useFismaSystems() + const { fismaSystems } = useContextProp() const [rowModesModel, setRowModesModel] = useState({}) const [open, setOpen] = useState(false) const [openModal, setOpenModal] = useState(false) From d636c89f2fa4455ebf9ffaf1109cb28933a2f835 Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Wed, 11 Dec 2024 08:55:13 -0500 Subject: [PATCH 2/9] feat: edit fisma system --- .../ConfirmDialog/ConfirmDialog.tsx | 46 +++ .../DialogTitle/CustomDialogTitle.tsx | 20 ++ src/constants.ts | 2 + src/types.ts | 10 + src/views/EditSystemModal/EditSystemModal.tsx | 326 ++++++++++++++++++ .../EditSystemModal/ValidatedTextField.tsx | 47 +++ src/views/EditSystemModal/dataEnvironment.ts | 39 +++ src/views/EditSystemModal/emptySystem.ts | 16 + src/views/EditSystemModal/validators.ts | 5 + src/views/FismaTable/FismaTable.tsx | 94 +++-- src/views/Home/Home.tsx | 34 +- .../QuestionnareModal/QuestionnareModal.tsx | 8 +- src/views/Title/Title.tsx | 4 +- src/views/UserTable/UserTable.tsx | 2 +- 14 files changed, 617 insertions(+), 36 deletions(-) create mode 100644 src/components/ConfirmDialog/ConfirmDialog.tsx create mode 100644 src/components/DialogTitle/CustomDialogTitle.tsx create mode 100644 src/views/EditSystemModal/EditSystemModal.tsx create mode 100644 src/views/EditSystemModal/ValidatedTextField.tsx create mode 100644 src/views/EditSystemModal/dataEnvironment.ts create mode 100644 src/views/EditSystemModal/emptySystem.ts create mode 100644 src/views/EditSystemModal/validators.ts diff --git a/src/components/ConfirmDialog/ConfirmDialog.tsx b/src/components/ConfirmDialog/ConfirmDialog.tsx new file mode 100644 index 0000000..a2ed0dc --- /dev/null +++ b/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 ( + + Unsaved Changes + + + + + + + {CONFIRMATION_MESSAGE} + + + + Confirm + + Cancel + + + ) +} + +export default ConfirmDialog diff --git a/src/components/DialogTitle/CustomDialogTitle.tsx b/src/components/DialogTitle/CustomDialogTitle.tsx new file mode 100644 index 0000000..fe4ff63 --- /dev/null +++ b/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 ( + +
+ {title} +
+ + ) +} diff --git a/src/constants.ts b/src/constants.ts index e1dcaea..3da6f76 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -29,3 +29,5 @@ export const EMPTY_USER: userData = { 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?' diff --git a/src/types.ts b/src/types.ts index 1a6c065..b58c3db 100644 --- a/src/types.ts +++ b/src/types.ts @@ -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,12 @@ export type SystemDetailsModalProps = { onClose: () => void system: FismaSystemType | null } +export type editSystemModalProps = { + open: boolean + onClose: (data: FismaSystemType) => void + system: FismaSystemType | null +} + export type ScoreData = { datacallid: number fismasystemid: number diff --git a/src/views/EditSystemModal/EditSystemModal.tsx b/src/views/EditSystemModal/EditSystemModal.tsx new file mode 100644 index 0000000..824365a --- /dev/null +++ b/src/views/EditSystemModal/EditSystemModal.tsx @@ -0,0 +1,326 @@ +import * as React from 'react' +import TextField from '@mui/material/TextField' +import Dialog from '@mui/material/Dialog' +import DialogActions from '@mui/material/DialogActions' +import DialogContent from '@mui/material/DialogContent' +import CustomDialogTitle from '../../components/DialogTitle/CustomDialogTitle' +import { Button as CmsButton } from '@cmsgov/design-system' +import { Box, Grid } from '@mui/material' +import { editSystemModalProps, FismaSystemType } from '@/types' +import MenuItem from '@mui/material/MenuItem' +import ValidatedTextField from './ValidatedTextField' +import { emailValidator } from './validators' +import { EMPTY_SYSTEM } from './emptySystem' +import { datacenterenvironment } from './dataEnvironment' +import CircularProgress from '@mui/material/CircularProgress' +import ConfirmDialog from '@/components/ConfirmDialog/ConfirmDialog' +import _ from 'lodash' +import axiosInstance from '@/axiosConfig' +import { useNavigate } from 'react-router-dom' +import { Routes } from '@/router/constants' +import { ERROR_MESSAGES } from '@/constants' +/** + * Component that renders a modal to edit fisma systems. + * @param {boolean, function, FismaSystemType} editSystemModalProps - props to get populate dialog and function . + * @returns {JSX.Element} Component that renders a dialog to edit details of a fisma systems. + */ + +export default function EditSystemModal({ + open, + onClose, + system, +}: editSystemModalProps) { + const formValid = React.useRef({ issoemail: false, datacallcontact: false }) + const navigate = useNavigate() + const [loading, setLoading] = React.useState(true) + const [openAlert, setOpenAlert] = React.useState(false) + // const [confirmChanges, setConfirmChanges] = React.useState(false) + const handleConfirmReturn = (confirm: boolean) => { + if (confirm) { + onClose(EMPTY_SYSTEM) + } + } + const [editedFismaSystem, setEditedFismaSystem] = + React.useState(EMPTY_SYSTEM) + React.useEffect(() => { + if (system && open) { + setEditedFismaSystem(system) + setLoading(false) + } + }, [system, open]) + const handleClose = () => { + setEditedFismaSystem(EMPTY_SYSTEM) + if (_.isEqual(system, editedFismaSystem)) { + onClose(editedFismaSystem) + } else { + setOpenAlert(true) + } + return + } + const handleSave = async () => { + // TODO: Set this axiosInstance to update into the database with the latest changes + await axiosInstance + .put(`fismasystems/${editedFismaSystem.fismasystemid}`, { + fismauid: editedFismaSystem.fismauid, + fismaacronym: editedFismaSystem.fismaacronym, + fismaname: editedFismaSystem.fismaname, + fismasubsystem: editedFismaSystem.fismasubsystem, + component: editedFismaSystem.component, + groupacronym: editedFismaSystem.groupacronym, + groupname: editedFismaSystem.groupname, + divisionname: editedFismaSystem.divisionname, + datacenterenvironment: editedFismaSystem.datacenterenvironment, + datacallcontact: editedFismaSystem.datacallcontact, + issoemail: editedFismaSystem.issoemail, + }) + .then((res) => { + if (res.status !== 200 && res.status.toString()[0] === '4') { + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.expired, + }, + }) + } + }) + .catch((error) => { + console.error('Error fetching data:', error) + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.error, + }, + }) + }) + onClose(editedFismaSystem) + } + if (open && system) { + if (loading) { + return ( + + + + ) + } + return ( + <> + + + + + + + { + setEditedFismaSystem((prevState) => ({ + ...prevState, + fismaname: e.target.value, + })) + }} + /> + + { + setEditedFismaSystem((prevState) => ({ + ...prevState, + groupacronym: e.target.value, + })) + }} + /> + { + setEditedFismaSystem((prevState) => ({ + ...prevState, + component: e.target.value, + })) + }} + /> + { + setEditedFismaSystem((prevState) => ({ + ...prevState, + groupname: e.target.value, + })) + }} + /> + + { + setEditedFismaSystem((prevState) => ({ + ...prevState, + divisionname: e.target.value, + })) + }} + /> + { + setEditedFismaSystem((prevState) => ({ + ...prevState, + fismasubsystem: e.target.value, + })) + }} + /> + + + { + formValid.current.datacallcontact = isValid + if (isValid) { + setEditedFismaSystem((prevState) => ({ + ...prevState, + datacallcontact: newValue, + })) + } + }} + /> + { + formValid.current.issoemail = isValid + if (isValid) { + setEditedFismaSystem((prevState) => ({ + ...prevState, + issoemail: newValue, + })) + } + }} + /> + { + setEditedFismaSystem((prevState) => ({ + ...prevState, + datacenterenvironment: e.target.value, + })) + }} + > + {datacenterenvironment.map((option) => ( + + {option.label} + + ))} + + + + + + + + Save + + + Close + + + + setOpenAlert(false)} + confirmClick={handleConfirmReturn} + /> + + ) + } + return <> +} diff --git a/src/views/EditSystemModal/ValidatedTextField.tsx b/src/views/EditSystemModal/ValidatedTextField.tsx new file mode 100644 index 0000000..ed4aa44 --- /dev/null +++ b/src/views/EditSystemModal/ValidatedTextField.tsx @@ -0,0 +1,47 @@ +import { useState, ChangeEvent } from 'react' +import { TextField } from '@mui/material' + +type ValidatedTextFieldProps = { + label: string + dfValue?: string + isFullWidth?: boolean + validator: (value: string) => string | false + onChange: (isValid: boolean, value: string) => void +} +const ValidatedTextField: React.FC = ({ + label, + validator, + isFullWidth, + dfValue, + onChange, +}) => { + const [value, setValue] = useState(dfValue || '') + const [error, setError] = useState(false) + + const handleChange = (e: ChangeEvent) => { + const newValue = e.target.value + const errorMessage = validator(newValue) + setValue(newValue) + setError(errorMessage) + onChange(!errorMessage, newValue) + } + + return ( + + ) +} +export default ValidatedTextField diff --git a/src/views/EditSystemModal/dataEnvironment.ts b/src/views/EditSystemModal/dataEnvironment.ts new file mode 100644 index 0000000..8333ee0 --- /dev/null +++ b/src/views/EditSystemModal/dataEnvironment.ts @@ -0,0 +1,39 @@ +/** + * datacenterenvironment values for the select dropdown + * to edit a system + */ + +export const datacenterenvironment = [ + { + value: 'AWS', + label: 'AWS', + }, + { + value: 'CMS-Cloud-AWS', + label: 'CMS-Cloud-AWS', + }, + { + value: 'CMSDC', + label: 'CMSDC', + }, + { + value: 'CMS-Cloud-MAG', + label: 'CMS-Cloud-MAG', + }, + { + value: 'DECOMMISSIONED', + label: 'DECOMMISSIONED', + }, + { + value: 'OPDC', + label: 'OPDC', + }, + { + value: 'Other', + label: 'Other', + }, + { + value: 'SaaS', + label: 'SaaS', + }, +] diff --git a/src/views/EditSystemModal/emptySystem.ts b/src/views/EditSystemModal/emptySystem.ts new file mode 100644 index 0000000..c3c7713 --- /dev/null +++ b/src/views/EditSystemModal/emptySystem.ts @@ -0,0 +1,16 @@ +export const EMPTY_SYSTEM = { + fismauid: '', + fismaacronym: '', + fismaname: '', + fismasubsystem: '', + fismaimpactlevel: '', + mission: '', + fismasystemid: 0, + component: '', + groupacronym: '', + groupname: '', + divisionname: '', + datacenterenvironment: '', + datacallcontact: '', + issoemail: '', +} diff --git a/src/views/EditSystemModal/validators.ts b/src/views/EditSystemModal/validators.ts new file mode 100644 index 0000000..514dd13 --- /dev/null +++ b/src/views/EditSystemModal/validators.ts @@ -0,0 +1,5 @@ +export const emailValidator = (value: string): string | false => { + if (!/^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/.test(value)) + return 'Invalid email address' + return false +} diff --git a/src/views/FismaTable/FismaTable.tsx b/src/views/FismaTable/FismaTable.tsx index 8df73db..05ded79 100644 --- a/src/views/FismaTable/FismaTable.tsx +++ b/src/views/FismaTable/FismaTable.tsx @@ -8,21 +8,27 @@ import { GridActionsCellItem, GridFooter, GridRowId, + useGridApiRef, } from '@mui/x-data-grid' import Tooltip from '@mui/material/Tooltip' import { Box, IconButton } from '@mui/material' import { useState } from 'react' import FileDownloadSharpIcon from '@mui/icons-material/FileDownloadSharp' import QuestionnareModal from '../QuestionnareModal/QuestionnareModal' +import EditSystemModal from '../EditSystemModal/EditSystemModal' import CustomSnackbar from '../Snackbar/Snackbar' import axiosInstance from '@/axiosConfig' import { useContextProp } from '../Title/Context' import { EMPTY_USER } from '../../constants' +import { useNavigate } from 'react-router-dom' +import { Routes } from '@/router/constants' +import { ERROR_MESSAGES } from '../../constants' import EditIcon from '@mui/icons-material/Edit' import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined' -type FismaTable2Props = { +type FismaTableProps = { fismaSystems: FismaSystemType[] scores: Record + latestDataCallId: number } type selectedRowsType = GridRowId[] @@ -30,12 +36,15 @@ declare module '@mui/x-data-grid' { interface FooterPropsOverrides { selectedRows: selectedRowsType fismaSystems: FismaSystemType[] + latestDataCallId: number } } + export function CustomFooterSaveComponent( props: NonNullable ) { const [openSnackbar, setOpenSnackbar] = useState(false) + const navigate = useNavigate() const handleCloseSnackbar = () => { setOpenSnackbar(false) } @@ -43,7 +52,7 @@ export function CustomFooterSaveComponent( if (props.selectedRows && props.selectedRows.length === 0) { setOpenSnackbar(true) } else { - let exportUrl = '/datacalls/2/export' + let exportUrl = `/datacalls/${props.latestDataCallId}/export` if ( props.selectedRows && props.fismaSystems && @@ -67,23 +76,33 @@ export function CustomFooterSaveComponent( }) .then((response) => { if (response.status !== 200) { - console.log('Error saving systems') - } else { - const [, filename] = - response.headers['content-disposition'].split('filename=') - const contentType = response.headers['content-type'] - const data = new Blob([response.data], { type: contentType }) - const url = window.URL.createObjectURL(data) - const tempLink = document.createElement('a') - tempLink.href = url - tempLink.setAttribute('download', filename) - tempLink.setAttribute('target', '_blank') - tempLink.click() - window.URL.revokeObjectURL(url) + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.expired, + }, + }) } + const [, filename] = + response.headers['content-disposition'].split('filename=') + const contentType = response.headers['content-type'] + const data = new Blob([response.data], { type: contentType }) + const url = window.URL.createObjectURL(data) + const tempLink = document.createElement('a') + tempLink.href = url + tempLink.setAttribute('download', filename) + tempLink.setAttribute('target', '_blank') + tempLink.click() + window.URL.revokeObjectURL(url) }) .catch((error) => { console.error('Error saving system answers: ', error) + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.error, + }, + }) }) } } @@ -116,11 +135,17 @@ export function CustomFooterSaveComponent( ) } -export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { +export default function FismaTable({ + fismaSystems, + scores, + latestDataCallId, +}: FismaTableProps) { + const apiRef = useGridApiRef() const [open, setOpen] = useState(false) const { userInfo } = useContextProp() || EMPTY_USER const [selectedRow, setSelectedRow] = useState(null) const [selectedRows, setSelectedRows] = useState([]) + const [openEditModal, setOpenEditModal] = useState(false) const handleOpenModal = (row: FismaSystemType) => { setSelectedRow(row) setOpen(true) @@ -129,6 +154,26 @@ export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { setOpen(false) setSelectedRow(null) } + const handleEditOpenModal = (row: FismaSystemType) => { + setSelectedRow(row) + setOpenEditModal(true) + } + const handleCloseEditModal = (newRowData: FismaSystemType) => { + if (selectedRow) { + const row = apiRef.current.getRow(selectedRow?.fismasystemid) + if (row) { + // const updatedRow = { + // ...row, + // fismaname: newRowData.fismaname, + // issoemail: newRowData.issoemail, + // datacenterenvironment: newRowData.datacenterenvironment, + // } + apiRef.current.updateRows([newRowData]) + } + } + setOpenEditModal(false) + setSelectedRow(null) + } const columns: GridColDef[] = [ { field: 'fismaname', @@ -217,13 +262,6 @@ export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { disableColumnMenu: true, renderCell: (params: GridRenderCellParams) => ( <> - {/* handleOpenModal(params.row as FismaSystemType)} - > - View Questionnare - */} } @@ -240,7 +278,7 @@ export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { key={`edit-${params.row.fismasystemid}`} label="Edit" className="textPrimary" - // onClick={} + onClick={() => handleEditOpenModal(params.row as FismaSystemType)} color="inherit" /> )} @@ -255,13 +293,14 @@ export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { rows={fismaSystems} columns={columns} checkboxSelection + apiRef={apiRef} getRowId={(row) => row.fismasystemid} onRowSelectionModelChange={(ids) => { const selectedIDs = Array.from(ids) setSelectedRows(selectedIDs) }} slotProps={{ - footer: { selectedRows, fismaSystems }, + footer: { selectedRows, fismaSystems, latestDataCallId }, filterPanel: { sx: { '& .MuiFormLabel-root': { @@ -307,6 +346,11 @@ export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) { onClose={handleCloseModal} system={selectedRow} /> + ) } diff --git a/src/views/Home/Home.tsx b/src/views/Home/Home.tsx index 560e2df..21c9127 100644 --- a/src/views/Home/Home.tsx +++ b/src/views/Home/Home.tsx @@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom' import { Routes } from '@/router/constants' import { ERROR_MESSAGES } from '@/constants' import { FismaSystemType } from '@/types' +import { set } from 'lodash' /** * Component that renders the contents of the Home view. * @returns {JSX.Element} Component that renders the home contents. @@ -16,6 +17,7 @@ export default function HomePageContainer() { const navigate = useNavigate() const [fismaSystems, setFismaSystems] = useState([]) const [scoreMap, setScoreMap] = useState>({}) + const [latestDataCallId, setLatestDataCallId] = useState(0) useEffect(() => { async function fetchFismaSystems() { try { @@ -81,6 +83,32 @@ export default function HomePageContainer() { } fetchScores() }, [navigate]) + useEffect(() => { + async function fetchLatestDatacall() { + try { + axiosInstance.get('/datacalls').then((res) => { + if (res.status !== 200 && res.status.toString()[0] === '4') { + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.expired, + }, + }) + } + setLatestDataCallId(res.data.data[0].datacallid) + }) + } catch (error) { + console.error(error) + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.error, + }, + }) + } + } + fetchLatestDatacall() + }, [navigate]) if (loading) { return
Loading...
} @@ -88,7 +116,11 @@ export default function HomePageContainer() { <>
- +
) diff --git a/src/views/QuestionnareModal/QuestionnareModal.tsx b/src/views/QuestionnareModal/QuestionnareModal.tsx index 94ecda0..0565b22 100644 --- a/src/views/QuestionnareModal/QuestionnareModal.tsx +++ b/src/views/QuestionnareModal/QuestionnareModal.tsx @@ -265,13 +265,7 @@ export default function QuestionnareModal({ } return res.data.data }) - let latestDataCallId = -Infinity - for (let i = 0; i < datacall.length; i++) { - latestDataCallId = Math.max( - latestDataCallId, - datacall[i].datacallid - ) - } + const latestDataCallId = datacall[0].datacallid setDatacallID(latestDataCallId) await axiosInstance .get(`/fismasystems/${system.fismasystemid}/questions`) diff --git a/src/views/Title/Title.tsx b/src/views/Title/Title.tsx index 29deec7..7c95113 100644 --- a/src/views/Title/Title.tsx +++ b/src/views/Title/Title.tsx @@ -17,6 +17,7 @@ import { FismaSystemType } from '@/types' import { Routes } from '@/router/constants' import axiosInstance from '@/axiosConfig' import LoginPage from '../LoginPage/LoginPage' +import { ERROR_MESSAGES } from '@/constants' /** * Component that renders the contents of the Dashboard view. * @returns {JSX.Element} Component that renders the dashboard contents. @@ -45,11 +46,10 @@ export default function Title() { async function fetchFismaSystems() { try { const fismaSystems = await axiosInstance.get('/fismasystems') - // TODO: use ERROR_MESSAGES to handle errors if (fismaSystems.status !== 200) { navigate(Routes.SIGNIN, { replace: true, - state: { message: 'Please log in' }, + state: ERROR_MESSAGES.expired, }) } setFismaSystems(fismaSystems.data.data) diff --git a/src/views/UserTable/UserTable.tsx b/src/views/UserTable/UserTable.tsx index ffef286..185dbfa 100644 --- a/src/views/UserTable/UserTable.tsx +++ b/src/views/UserTable/UserTable.tsx @@ -135,7 +135,7 @@ export default function UserTable() { apiRef.current.setEditCellValue({ id: selectedRow.userid, field: 'role', - value: selectedRow.role, // Replace with the desired value + value: selectedRow.role, }) } setOpenAlert(false) From e083c145c4e93357395f58f9e686e3a93e3c8a7e Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Wed, 11 Dec 2024 09:11:22 -0500 Subject: [PATCH 3/9] adding the snackbar to indicate if the save was successful to edit a fisma system --- src/views/EditSystemModal/EditSystemModal.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/views/EditSystemModal/EditSystemModal.tsx b/src/views/EditSystemModal/EditSystemModal.tsx index 824365a..ebf8090 100644 --- a/src/views/EditSystemModal/EditSystemModal.tsx +++ b/src/views/EditSystemModal/EditSystemModal.tsx @@ -19,6 +19,7 @@ import axiosInstance from '@/axiosConfig' import { useNavigate } from 'react-router-dom' import { Routes } from '@/router/constants' import { ERROR_MESSAGES } from '@/constants' +import { useSnackbar } from 'notistack' /** * Component that renders a modal to edit fisma systems. * @param {boolean, function, FismaSystemType} editSystemModalProps - props to get populate dialog and function . @@ -32,6 +33,7 @@ export default function EditSystemModal({ }: editSystemModalProps) { const formValid = React.useRef({ issoemail: false, datacallcontact: false }) const navigate = useNavigate() + const { enqueueSnackbar } = useSnackbar() const [loading, setLoading] = React.useState(true) const [openAlert, setOpenAlert] = React.useState(false) // const [confirmChanges, setConfirmChanges] = React.useState(false) @@ -82,6 +84,14 @@ export default function EditSystemModal({ }, }) } + enqueueSnackbar(`Saved`, { + variant: 'success', + anchorOrigin: { + vertical: 'top', + horizontal: 'left', + }, + autoHideDuration: 1000, + }) }) .catch((error) => { console.error('Error fetching data:', error) From 48c71c9b6072d75d6b271532a92dd5fd3ef87ecc Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Wed, 11 Dec 2024 12:19:04 -0500 Subject: [PATCH 4/9] ordered the pillar functions --- src/constants.ts | 55 +++++++++++++++++++ .../QuestionnareModal/QuestionnareModal.tsx | 24 +++++++- 2 files changed, 76 insertions(+), 3 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index 3da6f76..f60c975 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -31,3 +31,58 @@ export const EMPTY_USER: userData = { } 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', + ], +} diff --git a/src/views/QuestionnareModal/QuestionnareModal.tsx b/src/views/QuestionnareModal/QuestionnareModal.tsx index 0565b22..99936c5 100644 --- a/src/views/QuestionnareModal/QuestionnareModal.tsx +++ b/src/views/QuestionnareModal/QuestionnareModal.tsx @@ -30,7 +30,7 @@ import { Routes } from '@/router/constants' import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined' import IconButton from '@mui/material/IconButton' import Tooltip from '@mui/material/Tooltip' -import { ERROR_MESSAGES } from '@/constants' +import { ERROR_MESSAGES, PILLAR_FUNCTION_MAP } from '@/constants' const CssTextField = styled(TextField)({ '& label.Mui-focused': { color: 'rgb(13, 36, 153)', @@ -294,13 +294,31 @@ export default function QuestionnareModal({ const sortedPillars = Object.keys(organizedData).sort( (a, b) => pillarOrder[a] - pillarOrder[b] ) + const sortSteps = ( + steps: FismaQuestion[], + order: string[] + ): FismaQuestion[] => { + return steps.sort( + (a, b) => + order.indexOf(a.function.function) - + order.indexOf(b.function.function) + ) + } const categoriesData: Category[] = sortedPillars.map( (pillar) => ({ name: pillar, - steps: organizedData[pillar], + steps: sortSteps( + organizedData[pillar], + PILLAR_FUNCTION_MAP[pillar] + ), }) ) - + // const categoriesData: Category[] = sortedPillars.map( + // (pillar) => ({ + // name: pillar, + // steps: organizedData[pillar], + // }) + // ) setCategories(categoriesData) if (data.length > 0) { setQuestionId(categoriesData[0]['steps'][0].function.functionid) From 627ace96fa0ce000a4a9c333110d6b2f3ba02316 Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Thu, 19 Dec 2024 09:13:57 -0500 Subject: [PATCH 5/9] Add required fields for editing a FISMA system. Implement a guard to validate user input before saving. Prompt the user to provide valid input if the current input is invalid. --- src/constants.ts | 4 + src/types.ts | 12 +- src/views/EditSystemModal/EditSystemModal.tsx | 356 ++++++++++++++---- .../EditSystemModal/ValidatedTextField.tsx | 12 +- src/views/EditSystemModal/validators.ts | 3 + src/views/FismaTable/FismaTable.tsx | 29 +- .../__test__/QuestionnareModal.test.tsx | 26 ++ src/views/Title/Title.tsx | 21 ++ 8 files changed, 378 insertions(+), 85 deletions(-) create mode 100644 src/views/QuestionnareModal/__test__/QuestionnareModal.test.tsx diff --git a/src/constants.ts b/src/constants.ts index f60c975..f35755e 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -86,3 +86,7 @@ export const PILLAR_FUNCTION_MAP: { [key: string]: string[] } = { 'Cross-VisibilityAnalytics', ], } +export const TEXTFIELD_HELPER_TEXT = 'This field is required' + +export const INVALID_INPUT_TEXT = (key: string) => + `Please provide a valid ${key}` diff --git a/src/types.ts b/src/types.ts index b58c3db..6ec05c9 100644 --- a/src/types.ts +++ b/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 @@ -94,9 +94,11 @@ export type SystemDetailsModalProps = { system: FismaSystemType | null } export type editSystemModalProps = { + title: string open: boolean onClose: (data: FismaSystemType) => void system: FismaSystemType | null + mode: string } export type ScoreData = { @@ -121,6 +123,14 @@ export type datacall = { deadline: number } +export type FormValidType = { + [key: string]: boolean +} + +export type FormValidHelperText = { + [key: string]: string +} + export type ThemeColor = | 'primary' | 'secondary' diff --git a/src/views/EditSystemModal/EditSystemModal.tsx b/src/views/EditSystemModal/EditSystemModal.tsx index ebf8090..b602ba7 100644 --- a/src/views/EditSystemModal/EditSystemModal.tsx +++ b/src/views/EditSystemModal/EditSystemModal.tsx @@ -6,7 +6,12 @@ import DialogContent from '@mui/material/DialogContent' import CustomDialogTitle from '../../components/DialogTitle/CustomDialogTitle' import { Button as CmsButton } from '@cmsgov/design-system' import { Box, Grid } from '@mui/material' -import { editSystemModalProps, FismaSystemType } from '@/types' +import { + editSystemModalProps, + FismaSystemType, + FormValidType, + FormValidHelperText, +} from '@/types' import MenuItem from '@mui/material/MenuItem' import ValidatedTextField from './ValidatedTextField' import { emailValidator } from './validators' @@ -18,7 +23,11 @@ import _ from 'lodash' import axiosInstance from '@/axiosConfig' import { useNavigate } from 'react-router-dom' import { Routes } from '@/router/constants' -import { ERROR_MESSAGES } from '@/constants' +import { + ERROR_MESSAGES, + TEXTFIELD_HELPER_TEXT, + INVALID_INPUT_TEXT, +} from '@/constants' import { useSnackbar } from 'notistack' /** * Component that renders a modal to edit fisma systems. @@ -27,31 +36,98 @@ import { useSnackbar } from 'notistack' */ export default function EditSystemModal({ + title, open, onClose, system, + mode, }: editSystemModalProps) { - const formValid = React.useRef({ issoemail: false, datacallcontact: false }) + const [formValid, setFormValid] = React.useState({ + issoemail: false, + datacallcontact: false, + fismaname: false, + fismaacronym: false, + datacenterenvironment: false, + component: false, + fismauid: false, + }) + const isFormValid = (): boolean => { + return Object.values(formValid).every((value) => value === true) + } const navigate = useNavigate() const { enqueueSnackbar } = useSnackbar() const [loading, setLoading] = React.useState(true) const [openAlert, setOpenAlert] = React.useState(false) - // const [confirmChanges, setConfirmChanges] = React.useState(false) + const [formValidErrorText, setFormValidErrorText] = + React.useState({ + issoemail: TEXTFIELD_HELPER_TEXT, + datacallcontact: TEXTFIELD_HELPER_TEXT, + fismaname: TEXTFIELD_HELPER_TEXT, + fismaacronym: TEXTFIELD_HELPER_TEXT, + datacenterenvironment: TEXTFIELD_HELPER_TEXT, + component: TEXTFIELD_HELPER_TEXT, + fismauid: TEXTFIELD_HELPER_TEXT, + }) const handleConfirmReturn = (confirm: boolean) => { if (confirm) { onClose(EMPTY_SYSTEM) } } + const handleInputChange = ( + e: React.ChangeEvent, + key: string + ) => { + const value = e.target.value + const isValid = value.length > 0 + + setEditedFismaSystem((prevState) => ({ + ...prevState, + [key]: value, + })) + setFormValid((prevState) => ({ + ...prevState, + [key]: isValid, + })) + if (!isValid) { + setFormValidErrorText((prevState) => ({ + ...prevState, + [key]: isValid ? '' : TEXTFIELD_HELPER_TEXT, + })) + } + } const [editedFismaSystem, setEditedFismaSystem] = React.useState(EMPTY_SYSTEM) React.useEffect(() => { if (system && open) { + setFormValid((prevState) => ({ + ...prevState, + issoemail: + system?.issoemail && system?.issoemail.length > 0 ? true : false, + datacallcontact: + system?.datacallcontact && system?.datacallcontact.length > 0 + ? true + : false, + fismaname: + system?.fismaname && system?.fismaname.length > 0 ? true : false, + fismaacronym: + system?.fismaacronym && system?.fismaacronym.length > 0 + ? true + : false, + datacenterenvironment: + system?.datacenterenvironment && + system?.datacenterenvironment.length > 0 + ? true + : false, + component: + system?.component && system?.component.length > 0 ? true : false, + fismauid: + system?.fismauid && system?.fismauid.length > 0 ? true : false, + })) setEditedFismaSystem(system) setLoading(false) } }, [system, open]) const handleClose = () => { - setEditedFismaSystem(EMPTY_SYSTEM) if (_.isEqual(system, editedFismaSystem)) { onClose(editedFismaSystem) } else { @@ -60,49 +136,137 @@ export default function EditSystemModal({ return } const handleSave = async () => { - // TODO: Set this axiosInstance to update into the database with the latest changes - await axiosInstance - .put(`fismasystems/${editedFismaSystem.fismasystemid}`, { - fismauid: editedFismaSystem.fismauid, - fismaacronym: editedFismaSystem.fismaacronym, - fismaname: editedFismaSystem.fismaname, - fismasubsystem: editedFismaSystem.fismasubsystem, - component: editedFismaSystem.component, - groupacronym: editedFismaSystem.groupacronym, - groupname: editedFismaSystem.groupname, - divisionname: editedFismaSystem.divisionname, - datacenterenvironment: editedFismaSystem.datacenterenvironment, - datacallcontact: editedFismaSystem.datacallcontact, - issoemail: editedFismaSystem.issoemail, - }) - .then((res) => { - if (res.status !== 200 && res.status.toString()[0] === '4') { - navigate(Routes.SIGNIN, { - replace: true, - state: { - message: ERROR_MESSAGES.expired, + if (mode === 'edit') { + await axiosInstance + .put(`fismasystems/${editedFismaSystem.fismasystemid}`, { + fismauid: editedFismaSystem.fismauid, + fismaacronym: editedFismaSystem.fismaacronym, + fismaname: editedFismaSystem.fismaname, + fismasubsystem: editedFismaSystem.fismasubsystem, + component: editedFismaSystem.component, + groupacronym: editedFismaSystem.groupacronym, + groupname: editedFismaSystem.groupname, + divisionname: editedFismaSystem.divisionname, + datacenterenvironment: editedFismaSystem.datacenterenvironment, + datacallcontact: editedFismaSystem.datacallcontact, + issoemail: editedFismaSystem.issoemail, + }) + .then((res) => { + if (res.status !== 200 && res.status.toString()[0] === '4') { + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.expired, + }, + }) + } + enqueueSnackbar(`Saved`, { + variant: 'success', + anchorOrigin: { + vertical: 'top', + horizontal: 'left', + }, + autoHideDuration: 1500, + }) + onClose(editedFismaSystem) + }) + .catch((error) => { + if (error.response.status === 400) { + const data: { [key: string]: string } = error.response.data.data + Object.entries(data).forEach(([key]) => { + // formValid.current[key] = false + setFormValid((prevState) => ({ + ...prevState, + [key]: false, + })) + setFormValidErrorText((prevState) => ({ + ...prevState, + [key]: INVALID_INPUT_TEXT(key), + })) + }) + enqueueSnackbar(`Not Saved`, { + variant: 'error', + anchorOrigin: { + vertical: 'top', + horizontal: 'left', + }, + autoHideDuration: 1500, + }) + } else { + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.error, + }, + }) + } + }) + } else if (mode === 'create') { + await axiosInstance + .post(`fismasystems`, { + fismauid: editedFismaSystem.fismauid, + fismaacronym: editedFismaSystem.fismaacronym, + fismaname: editedFismaSystem.fismaname, + fismasubsystem: editedFismaSystem.fismasubsystem, + component: editedFismaSystem.component, + groupacronym: editedFismaSystem.groupacronym, + groupname: editedFismaSystem.groupname, + divisionname: editedFismaSystem.divisionname, + datacenterenvironment: editedFismaSystem.datacenterenvironment, + datacallcontact: editedFismaSystem.datacallcontact, + issoemail: editedFismaSystem.issoemail, + }) + .then((res) => { + if (res.status !== 200 && res.status.toString()[0] === '4') { + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.expired, + }, + }) + } + enqueueSnackbar(`Created`, { + variant: 'success', + anchorOrigin: { + vertical: 'top', + horizontal: 'left', }, + autoHideDuration: 1500, }) - } - enqueueSnackbar(`Saved`, { - variant: 'success', - anchorOrigin: { - vertical: 'top', - horizontal: 'left', - }, - autoHideDuration: 1000, + onClose(editedFismaSystem) }) - }) - .catch((error) => { - console.error('Error fetching data:', error) - navigate(Routes.SIGNIN, { - replace: true, - state: { - message: ERROR_MESSAGES.error, - }, + .catch((error) => { + if (error.response.status === 400) { + const data: { [key: string]: string } = error.response.data.data + Object.entries(data).forEach(([key]) => { + // formValid.current[key] = false + setFormValid((prevState) => ({ + ...prevState, + [key]: false, + })) + setFormValidErrorText((prevState) => ({ + ...prevState, + [key]: INVALID_INPUT_TEXT(key), + })) + }) + enqueueSnackbar(`Not Created`, { + variant: 'error', + anchorOrigin: { + vertical: 'top', + horizontal: 'left', + }, + autoHideDuration: 1500, + }) + } else { + navigate(Routes.SIGNIN, { + replace: true, + state: { + message: ERROR_MESSAGES.error, + }, + }) + } }) - }) - onClose(editedFismaSystem) + } } if (open && system) { if (loading) { @@ -122,48 +286,60 @@ export default function EditSystemModal({ return ( <> - + - + { - setEditedFismaSystem((prevState) => ({ - ...prevState, - fismaname: e.target.value, - })) + handleInputChange(e, 'fismaname') }} /> { + handleInputChange(e, 'fismaacronym') + }} /> { - setEditedFismaSystem((prevState) => ({ - ...prevState, - component: e.target.value, - })) + handleInputChange(e, 'component') }} /> - + { - formValid.current.datacallcontact = isValid + setFormValid((prevState) => ({ + ...prevState, + datacallcontact: isValid, + })) if (isValid) { setEditedFismaSystem((prevState) => ({ ...prevState, @@ -274,10 +455,13 @@ export default function EditSystemModal({ { - formValid.current.issoemail = isValid + setFormValid((prevState) => ({ + ...prevState, + issoemail: isValid, + })) if (isValid) { setEditedFismaSystem((prevState) => ({ ...prevState, @@ -286,12 +470,41 @@ export default function EditSystemModal({ } }} /> + + { + handleInputChange(e, 'fismauid') + }} + /> { - setEditedFismaSystem((prevState) => ({ - ...prevState, - datacenterenvironment: e.target.value, - })) + handleInputChange(e, 'datacenterenvironment') }} > {datacenterenvironment.map((option) => ( @@ -316,8 +526,12 @@ export default function EditSystemModal({ - - Save + + {mode === 'edit' ? 'Save' : 'Create'} Close diff --git a/src/views/EditSystemModal/ValidatedTextField.tsx b/src/views/EditSystemModal/ValidatedTextField.tsx index ed4aa44..131f39d 100644 --- a/src/views/EditSystemModal/ValidatedTextField.tsx +++ b/src/views/EditSystemModal/ValidatedTextField.tsx @@ -1,6 +1,6 @@ import { useState, ChangeEvent } from 'react' import { TextField } from '@mui/material' - +import { useEffect, useRef } from 'react' type ValidatedTextFieldProps = { label: string dfValue?: string @@ -17,7 +17,16 @@ const ValidatedTextField: React.FC = ({ }) => { const [value, setValue] = useState(dfValue || '') const [error, setError] = useState(false) + const isInitialMount = useRef(true) + useEffect(() => { + if (isInitialMount.current) { + isInitialMount.current = false + const errorMessage = validator(dfValue || '') + setError(errorMessage) + onChange(!errorMessage, dfValue || '') + } + }, [dfValue, validator, onChange]) const handleChange = (e: ChangeEvent) => { const newValue = e.target.value const errorMessage = validator(newValue) @@ -34,6 +43,7 @@ const ValidatedTextField: React.FC = ({ fullWidth={isFullWidth} margin="normal" onChange={handleChange} + required InputLabelProps={{ sx: { marginTop: 0, diff --git a/src/views/EditSystemModal/validators.ts b/src/views/EditSystemModal/validators.ts index 514dd13..f86ea3e 100644 --- a/src/views/EditSystemModal/validators.ts +++ b/src/views/EditSystemModal/validators.ts @@ -1,4 +1,7 @@ export const emailValidator = (value: string): string | false => { + if (value.length === 0) { + return 'This field is required' + } if (!/^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/.test(value)) return 'Invalid email address' return false diff --git a/src/views/FismaTable/FismaTable.tsx b/src/views/FismaTable/FismaTable.tsx index 05ded79..b6ff680 100644 --- a/src/views/FismaTable/FismaTable.tsx +++ b/src/views/FismaTable/FismaTable.tsx @@ -26,7 +26,6 @@ import { ERROR_MESSAGES } from '../../constants' import EditIcon from '@mui/icons-material/Edit' import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined' type FismaTableProps = { - fismaSystems: FismaSystemType[] scores: Record latestDataCallId: number } @@ -136,11 +135,11 @@ export function CustomFooterSaveComponent( ) } export default function FismaTable({ - fismaSystems, scores, latestDataCallId, }: FismaTableProps) { const apiRef = useGridApiRef() + const { fismaSystems } = useContextProp() const [open, setOpen] = useState(false) const { userInfo } = useContextProp() || EMPTY_USER const [selectedRow, setSelectedRow] = useState(null) @@ -154,7 +153,11 @@ export default function FismaTable({ setOpen(false) setSelectedRow(null) } - const handleEditOpenModal = (row: FismaSystemType) => { + const handleEditOpenModal = ( + event: React.MouseEvent, + row: FismaSystemType + ) => { + event.stopPropagation() setSelectedRow(row) setOpenEditModal(true) } @@ -162,12 +165,6 @@ export default function FismaTable({ if (selectedRow) { const row = apiRef.current.getRow(selectedRow?.fismasystemid) if (row) { - // const updatedRow = { - // ...row, - // fismaname: newRowData.fismaname, - // issoemail: newRowData.issoemail, - // datacenterenvironment: newRowData.datacenterenvironment, - // } apiRef.current.updateRows([newRowData]) } } @@ -196,8 +193,12 @@ export default function FismaTable({ renderCell: (params) => { const name = params.row.issoemail.split('@') const fullName = name[0].replace(/[0-9]/g, '').split('.') - const firstName = fullName[0][0].toUpperCase() + fullName[0].slice(1) - const lastName = fullName[1][0].toUpperCase() + fullName[1].slice(1) + let firstName = '' + let lastName = '' + if (fullName.length > 1) { + firstName = fullName[0][0].toUpperCase() + fullName[0].slice(1) + lastName = fullName[1][0].toUpperCase() + fullName[1].slice(1) + } return fullName.length > 1 ? `${firstName} ${lastName}` : fullName[0] }, }, @@ -278,7 +279,9 @@ export default function FismaTable({ key={`edit-${params.row.fismasystemid}`} label="Edit" className="textPrimary" - onClick={() => handleEditOpenModal(params.row as FismaSystemType)} + onClick={(event) => + handleEditOpenModal(event, params.row as FismaSystemType) + } color="inherit" /> )} @@ -347,9 +350,11 @@ export default function FismaTable({ system={selectedRow} /> ) diff --git a/src/views/QuestionnareModal/__test__/QuestionnareModal.test.tsx b/src/views/QuestionnareModal/__test__/QuestionnareModal.test.tsx new file mode 100644 index 0000000..55e9681 --- /dev/null +++ b/src/views/QuestionnareModal/__test__/QuestionnareModal.test.tsx @@ -0,0 +1,26 @@ +import mockAxios from 'axios' +jest.mock('axios') +const mAxios = mockAxios as jest.Mocked + +const mockResponse = [ + { + function: { + datacenterenvironment: 'test-center-environment', + description: 'test description', + function: 'test function', + functiondid: 1, + }, + pillar: { + order: 1, + pillar: 'test pillar', + pillarid: 1, + }, + noteprompt: 'test note prompt', + order: 'test-order none', + question: 'test question', + questionid: 'test-question-id', + }, +] +it('test axios fetch', async () => { + mAxios.get.mockResolvedValueOnce({ data: mockResponse }) +}) diff --git a/src/views/Title/Title.tsx b/src/views/Title/Title.tsx index 7c95113..50e6b05 100644 --- a/src/views/Title/Title.tsx +++ b/src/views/Title/Title.tsx @@ -18,6 +18,9 @@ import { Routes } from '@/router/constants' import axiosInstance from '@/axiosConfig' import LoginPage from '../LoginPage/LoginPage' import { ERROR_MESSAGES } from '@/constants' +import EditSystemModal from '../EditSystemModal/EditSystemModal' +import { EMPTY_SYSTEM } from '../EditSystemModal/emptySystem' +import _ from 'lodash' /** * Component that renders the contents of the Dashboard view. * @returns {JSX.Element} Component that renders the dashboard contents. @@ -42,6 +45,7 @@ export default function Title() { const [anchorEl, setAnchorEl] = useState(null) const [fismaSystems, setFismaSystems] = useState([]) const [titlePage, setTitlePage] = useState('Dashboard') + const [openModal, setOpenModal] = useState(false) useEffect(() => { async function fetchFismaSystems() { try { @@ -71,6 +75,13 @@ export default function Title() { const handleClose = () => { setAnchorEl(null) } + const handleCloseModal = (newRowData: FismaSystemType) => { + if (!_.isEqual(EMPTY_SYSTEM, newRowData)) { + setFismaSystems((prevFismSystems) => [...prevFismSystems, newRowData]) + } + setOpenModal(false) + handleClose() + } return ( <> @@ -144,6 +155,9 @@ export default function Title() { Edit Users + setOpenModal(true)}> + Add Fisma System + ) : ( @@ -167,6 +181,13 @@ export default function Title() { ) : ( )} + ) From 466e988370a44e1bf88455c75cb7e274c9d9e56e Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Thu, 19 Dec 2024 09:18:44 -0500 Subject: [PATCH 6/9] remove dependabot being called on deploy --- .github/workflows/ui.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ui.yml b/.github/workflows/ui.yml index 8133ab0..54fb709 100644 --- a/.github/workflows/ui.yml +++ b/.github/workflows/ui.yml @@ -53,7 +53,7 @@ jobs: run: yarn build:${{ inputs.environment }} - name: Get AWS Creds - if: github.actor != 'dependabot[bot]' + # if: github.actor != 'dependabot[bot]' uses: aws-actions/configure-aws-credentials@v4 with: role-to-assume: ${{ secrets.ROLEARN }} @@ -61,5 +61,5 @@ jobs: aws-region: us-east-1 - name: AWS Sync - if: github.actor != 'dependabot[bot]' + # if: github.actor != 'dependabot[bot]' run: aws s3 sync ./dist s3://${{ secrets.BUCKET_NAME }}/ --delete From 1052ac121384ea427e4a4a9526d52e338ce29cd7 Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Thu, 19 Dec 2024 09:32:04 -0500 Subject: [PATCH 7/9] removed unnecessary type for fisma table --- src/types.ts | 5 +++++ src/views/FismaTable/FismaTable.tsx | 5 +---- src/views/Home/Home.tsx | 7 +------ src/views/Title/Title.tsx | 1 + 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/types.ts b/src/types.ts index 6ec05c9..4c35dd2 100644 --- a/src/types.ts +++ b/src/types.ts @@ -131,6 +131,11 @@ export type FormValidHelperText = { [key: string]: string } +export type FismaTableProps = { + scores: Record + latestDataCallId: number +} + export type ThemeColor = | 'primary' | 'secondary' diff --git a/src/views/FismaTable/FismaTable.tsx b/src/views/FismaTable/FismaTable.tsx index b6ff680..2c917bc 100644 --- a/src/views/FismaTable/FismaTable.tsx +++ b/src/views/FismaTable/FismaTable.tsx @@ -25,10 +25,7 @@ import { Routes } from '@/router/constants' import { ERROR_MESSAGES } from '../../constants' import EditIcon from '@mui/icons-material/Edit' import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined' -type FismaTableProps = { - scores: Record - latestDataCallId: number -} +import { FismaTableProps } from '@/types' type selectedRowsType = GridRowId[] declare module '@mui/x-data-grid' { diff --git a/src/views/Home/Home.tsx b/src/views/Home/Home.tsx index 21c9127..ed57d1f 100644 --- a/src/views/Home/Home.tsx +++ b/src/views/Home/Home.tsx @@ -6,7 +6,6 @@ import { useNavigate } from 'react-router-dom' import { Routes } from '@/router/constants' import { ERROR_MESSAGES } from '@/constants' import { FismaSystemType } from '@/types' -import { set } from 'lodash' /** * Component that renders the contents of the Home view. * @returns {JSX.Element} Component that renders the home contents. @@ -116,11 +115,7 @@ export default function HomePageContainer() { <>
- +
) diff --git a/src/views/Title/Title.tsx b/src/views/Title/Title.tsx index 50e6b05..7aa8966 100644 --- a/src/views/Title/Title.tsx +++ b/src/views/Title/Title.tsx @@ -25,6 +25,7 @@ import _ from 'lodash' * Component that renders the contents of the Dashboard view. * @returns {JSX.Element} Component that renders the dashboard contents. */ + const emptyUser: userData = { userid: '', email: '', From 7f45eccddb408ee931b8213a22b4a60b5707f309 Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Thu, 19 Dec 2024 09:53:50 -0500 Subject: [PATCH 8/9] update the total count of fismasystems if the user adds a new system. --- src/views/Home/Home.tsx | 2 +- src/views/StatisticBlocks/StatisticsBlocks.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/views/Home/Home.tsx b/src/views/Home/Home.tsx index ed57d1f..52eff55 100644 --- a/src/views/Home/Home.tsx +++ b/src/views/Home/Home.tsx @@ -114,7 +114,7 @@ export default function HomePageContainer() { return ( <>
- +
diff --git a/src/views/StatisticBlocks/StatisticsBlocks.tsx b/src/views/StatisticBlocks/StatisticsBlocks.tsx index f04417b..416c8c8 100644 --- a/src/views/StatisticBlocks/StatisticsBlocks.tsx +++ b/src/views/StatisticBlocks/StatisticsBlocks.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box' import Paper from '@mui/material/Paper' import { Typography } from '@mui/material' import { styled } from '@mui/material/styles' -import { FismaSystemType } from '@/types' +import { useContextProp } from '../Title/Context' const StatisticsPaper = styled(Paper)(({ theme }) => ({ width: 120, height: 120, @@ -14,12 +14,11 @@ const StatisticsPaper = styled(Paper)(({ theme }) => ({ elevation: 3, })) export default function StatisticsBlocks({ - fismaSystems, scores, }: { - fismaSystems: FismaSystemType[] scores: Record }) { + const { fismaSystems } = useContextProp() const [totalSystems, setTotalSystems] = useState(0) const [avgSystemScore, setAvgSystemScore] = useState(0) const [maxSystemAcronym, setMaxSystemAcronym] = useState('') From d72d3c01e3b4fc706f46e950da8b290a97344e30 Mon Sep 17 00:00:00 2001 From: "Tran, Alex" Date: Thu, 19 Dec 2024 14:15:25 -0500 Subject: [PATCH 9/9] remove commented code --- .github/workflows/ui.yml | 2 -- src/components/ErrorBoundary.test.tsx | 21 --------------------- 2 files changed, 23 deletions(-) diff --git a/.github/workflows/ui.yml b/.github/workflows/ui.yml index 54fb709..b31e709 100644 --- a/.github/workflows/ui.yml +++ b/.github/workflows/ui.yml @@ -53,7 +53,6 @@ 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 }} @@ -61,5 +60,4 @@ jobs: aws-region: us-east-1 - name: AWS Sync - # if: github.actor != 'dependabot[bot]' run: aws s3 sync ./dist s3://${{ secrets.BUCKET_NAME }}/ --delete diff --git a/src/components/ErrorBoundary.test.tsx b/src/components/ErrorBoundary.test.tsx index dedd5b6..3bc0824 100644 --- a/src/components/ErrorBoundary.test.tsx +++ b/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() - -// 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()