Replace edit system modal with system detail page (#322) (#324)

* feat: replace edit system modal with system detail page (#322)

Add routed system detail page at /systems/:fismasystemid with read-only
and edit modes using card-based layout. System name column in table is
now a clickable link, admin edit icon navigates to detail page. Create
mode remains in existing modal. Upgrade @cmsgov/design-system to v13.

* fix: match read/edit layouts, resolve decommissioned_by name, fix refresh

- Align edit view layout to match read view (System Status card above
  Organization, Contacts card standalone)
- Show Active/Decommissioned chip in System Identity header for both views
- Resolve decommissioned_by UUID to human-readable name in both read and
  edit modes, not just edit mode
- Fix user API response path (res.data.data.fullname) in both
  SystemDetailPage and EditSystemModal
- Set decommissioned_by name immediately from userInfo after decommission
  action instead of waiting for separate API roundtrip
- Add retry fetch for individual system on page refresh when system is
  decommissioned and not in default active-only list
- Add bottom margin for spacing before footer

* fix: address code review findings from codex reviewer

- Add cancellation cleanup to retry fetch effect to prevent memory leak
  on unmount
- Remove stale closure comparison in decommissionedByName effect
- Add NaN guard for invalid systemId URL parameter
- Fix UTC date validation: use setUTCHours for consistent timezone
  comparison
- Extract shared getTodayISO, truncateNotes, MAX_NOTES_LENGTH to
  src/utils/decommission.ts (DRY)
- Replace magic number 500/100 with named constants
- Standardize error handling in handleSave to match handleDecommission
  (add 403, 404 checks)
- Fix breadcrumb underscore replacement to handle all occurrences and
  numeric segments

* style: apply prettier formatting

* fix: upgrade axios 1.12.0 to 1.13.5 to fix prototype pollution vulnerability

Author: danielbowne

package.json

@@ -59,7 +59,7 @@
     "@mui/x-data-grid": "^6.19.4",
     "@popperjs/core": "^2.11.8",
     "apollo-client": "^2.6.10",
-    "axios": "1.12.0",
+    "axios": "1.13.5",
     "classnames": "^2.5.1",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.37.1",
@@ -86,7 +86,7 @@
   "devDependencies": {
     "@axe-core/react": "^4.10.2",
     "@babel/core": "^7.23.9",
-    "@cmsgov/design-system": "^10.1.2",
+    "@cmsgov/design-system": "^13.2.0",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
     "@semantic-release/changelog": "^6.0.3",

src/components/BreadCrumbs/BreadCrumbs.tsx

@@ -11,7 +11,11 @@ interface LinkRouterProps extends LinkProps {
 function LinkRouter(props: LinkRouterProps) {
   return <Link {...props} component={RouterLink as any} />
 }
-export default function BreadCrumbs() {
+interface BreadCrumbsProps {
+  segmentLabels?: Record<string, string>
+}
+
+export default function BreadCrumbs({ segmentLabels }: BreadCrumbsProps) {
   const location = useLocation()
   // let currentLink: string = ''
   const homeLink = [
@@ -33,13 +37,19 @@ export default function BreadCrumbs() {
   ]
   const crumbs = location.pathname.split('/').filter((x) => x)
   const path = crumbs.map((value) => {
-    const text = value.replace('_', ' ')
+    const displayText =
+      segmentLabels && segmentLabels[value]
+        ? segmentLabels[value]
+        : (() => {
+            const text = value.replace(/_/g, ' ')
+            return /^[A-Z]/.test(text) ? text : capitalize(text)
+          })()
     return (
       <Typography
         sx={{ display: 'inline', whiteSpace: 'nowrap', color: '#5a5a5a' }}
         key={value}
       >
-        {text[0] === text[0].toUpperCase() ? text : capitalize(text)}
+        {displayText}
       </Typography>
     )
   })

src/router/constants.ts

@@ -10,6 +10,7 @@ export enum RouteIds {
   DATA = 'data',
   USERS = 'users',
   SIGNIN = 'signin',
+  SYSTEM_DETAIL = 'system-detail',
 }
 
 export enum RouteNames {
@@ -30,4 +31,5 @@ export enum Routes {
   AUTH_LOGIN = `/${RouteIds.AUTH}/${RouteIds.LOGIN}`,
   AUTH_LOGOUT = `/${RouteIds.AUTH}/${RouteIds.LOGOUT}`,
   SIGNIN = `/${RouteIds.SIGNIN}`,
+  SYSTEM_DETAIL = '/systems/:fismasystemid',
 }

src/router/router.tsx

@@ -12,6 +12,7 @@ import HomePageContainer from '@/views/Home/Home'
 import UserTable from '@/views/UserTable/UserTable'
 import LoginPage from '@/views/LoginPage/LoginPage'
 import QuestionnarePage from '@/views/QuestionnairePage/QuestionnairePage'
+import SystemDetailPage from '@/views/SystemDetailPage/SystemDetailPage'
 /**
  * The hash router for the application that defines routes
  *  and specifies the loaders for routes with dynamic data.
@@ -44,6 +45,12 @@ const router = createHashRouter([
         element: <QuestionnarePage />,
         errorElement: <ErrorBoundary />,
       },
+      {
+        path: Routes.SYSTEM_DETAIL,
+        id: RouteIds.SYSTEM_DETAIL,
+        element: <SystemDetailPage />,
+        errorElement: <ErrorBoundary />,
+      },
       {
         path: Routes.SIGNIN,
         id: RouteIds.SIGNIN,

src/utils/decommission.ts

@@ -0,0 +1,23 @@
+/** Max character length for decommission notes input */
+export const MAX_NOTES_LENGTH = 500
+
+/** Max characters to display in confirmation dialog before truncating */
+export const MAX_NOTES_DISPLAY_LENGTH = 100
+
+/** Returns today's date as an ISO date string (YYYY-MM-DD) in local time */
+export function getTodayISO(): string {
+  const today = new Date()
+  const yyyy = today.getFullYear()
+  const mm = String(today.getMonth() + 1).padStart(2, '0')
+  const dd = String(today.getDate()).padStart(2, '0')
+  return `${yyyy}-${mm}-${dd}`
+}
+
+/** Truncates notes for display in confirmation dialogs */
+export function truncateNotes(notes: string): string {
+  const trimmed = notes.trim()
+  if (!trimmed) return ''
+  return trimmed.length > MAX_NOTES_DISPLAY_LENGTH
+    ? trimmed.substring(0, MAX_NOTES_DISPLAY_LENGTH) + '...'
+    : trimmed
+}

src/views/EditSystemModal/EditSystemModal.tsx

@@ -158,8 +158,8 @@ export default function EditSystemModal({
         .get(`users/${userId}`)
         .then((res) => {
           if (!cancelled && system?.decommissioned_by === userId) {
-            if (res.data?.fullname) {
-              setDecommissionedByName(res.data.fullname)
+            if (res.data?.data?.fullname) {
+              setDecommissionedByName(res.data.data.fullname)
             } else {
               setDecommissionedByName(userId)
             }

src/views/FismaTable/FismaTable.tsx

@@ -20,12 +20,11 @@ import FormControlLabel from '@mui/material/FormControlLabel'
 import Switch from '@mui/material/Switch'
 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 { useNavigate, Link } from 'react-router-dom'
 import { RouteNames, Routes } from '@/router/constants'
 import { ERROR_MESSAGES } from '../../constants'
 import EditIcon from '@mui/icons-material/Edit'
@@ -222,18 +221,12 @@ const pillarScoresCache = new Map<number, CachedScore>()
 
 export default function FismaTable({ scores }: FismaTableProps) {
   const apiRef = useGridApiRef()
-  const {
-    fismaSystems,
-    latestDataCallId,
-    showDecommissioned,
-    fetchFismaSystems,
-  } = useContextProp()
+  const { fismaSystems, latestDataCallId } = useContextProp()
   const [open, setOpen] = useState<boolean>(false)
   const { userInfo } = useContextProp() || EMPTY_USER
   const [selectedRow, setSelectedRow] = useState<FismaSystemType | null>(null)
   const [selectedRows, setSelectedRows] = useState<GridRowId[]>([])
   const navigate = useNavigate()
-  const [openEditModal, setOpenEditModal] = useState<boolean>(false)
   const [pillarScoresModal, setPillarScoresModal] = useState<{
     open: boolean
     systemName: string
@@ -292,28 +285,6 @@ export default function FismaTable({ scores }: FismaTableProps) {
   const handleClosePillarScores = () => {
     setPillarScoresModal((prev) => ({ ...prev, open: false }))
   }
-  const handleEditOpenModal = (
-    event: React.MouseEvent<HTMLButtonElement>,
-    row: FismaSystemType
-  ) => {
-    event.stopPropagation()
-    setSelectedRow(row)
-    setOpenEditModal(true)
-  }
-  const handleCloseEditModal = (newRowData: FismaSystemType) => {
-    if (selectedRow) {
-      if (newRowData.decommissioned && !selectedRow.decommissioned) {
-        fetchFismaSystems(showDecommissioned)
-      } else {
-        const row = apiRef.current.getRow(selectedRow?.fismasystemid)
-        if (row) {
-          apiRef.current.updateRows([newRowData])
-        }
-      }
-    }
-    setOpenEditModal(false)
-    setSelectedRow(null)
-  }
   const columns: GridColDef[] = [
     {
       field: 'fismaname',
@@ -322,6 +293,15 @@ export default function FismaTable({ scores }: FismaTableProps) {
       minWidth: 300,
       maxWidth: 450,
       hideable: false,
+      renderCell: (params: GridRenderCellParams) => (
+        <Link
+          to={`/systems/${params.row.fismasystemid}`}
+          style={{ color: '#004297', textDecoration: 'none' }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {params.value}
+        </Link>
+      ),
     },
     {
       field: 'fismaacronym',
@@ -462,7 +442,7 @@ export default function FismaTable({ scores }: FismaTableProps) {
               className="textPrimary"
               onClick={(event) => {
                 event.stopPropagation()
-                handleEditOpenModal(event, params.row as FismaSystemType)
+                navigate(`/systems/${params.row.fismasystemid}?edit=true`)
               }}
               color="inherit"
             />
@@ -544,13 +524,6 @@ export default function FismaTable({ scores }: FismaTableProps) {
         systemAcronym={pillarScoresModal.systemAcronym}
         scores={pillarScoresModal.scores}
       />
-      <EditSystemModal
-        title={'Edit'}
-        open={openEditModal}
-        onClose={handleCloseEditModal}
-        system={selectedRow}
-        mode={'edit'}
-      />
     </Box>
   )
 }