feat: Questionnaire Popup Modal & System Table

package.json

@@ -72,6 +72,7 @@
     "react-hook-form": "^7.50.1",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.22.0",
+    "react-virtuoso": "^4.10.1",
     "uswds": "^2.14.0",
     "uuid": "^9.0.1",
     "yup": "^1.3.3"
@@ -95,7 +96,7 @@
     "@storybook/react": "^7.6.16",
     "@storybook/react-vite": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
-    "@swc/core": "^1.4.1",
+    "@swc/core": "^1.7.6",
     "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
@@ -104,16 +105,16 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7.20.5",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.19",
-    "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^20.14.14",
+    "@types/prop-types": "^15.7.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "camelcase": "^6.3.0",
@@ -150,7 +151,7 @@
     "storybook": "^7.6.16",
     "typescript": "^5.5.4",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.1.3",
+    "vite": "^5.4.0",
     "vite-plugin-environment": "^1.1.3",
     "web-vitals": "^3.5.2"
   },

src/axiosConfig.ts

@@ -0,0 +1,14 @@
+import axios, { AxiosInstance } from 'axios'
+
+const axiosInstance: AxiosInstance = axios.create({
+  baseURL: '/api/v1/',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  // withCredentials: true,
+})
+if (process.env.NODE_ENV === 'development') {
+  axiosInstance.defaults.headers.common['Authorization'] =
+    `Bearer ${import.meta.env.VITE_AUTH_TOKEN3 || ''}`
+}
+export default axiosInstance

src/main.tsx

@@ -10,19 +10,6 @@ import router from '@/router/router'
 import { SIGN_IN_GREETING } from '@/locales/en'
 import '@/sass/style.scss'
 import onPerfEntry from './utils/onPerfEntry'
-import {
-  ApolloProvider,
-  ApolloClient,
-  InMemoryCache,
-  HttpLink,
-} from '@apollo/client'
-
-export const client = new ApolloClient({
-  link: new HttpLink({
-    uri: import.meta.env.GRAPH_URI,
-  }),
-  cache: new InMemoryCache(),
-})
 
 // IIFE that initializes the root node and renders the application.
 ;(async function () {
@@ -32,16 +19,14 @@ export const client = new ApolloClient({
   // create the React root node and render the application
   ReactDOMClient.createRoot(rootElement).render(
     <React.StrictMode>
-      <ApolloProvider client={client}>
-        <RouterProvider router={router} />
-      </ApolloProvider>
+      <RouterProvider router={router} />
     </React.StrictMode>
   )
 
   // if NODE_ENV is production, return early. otherwise, run dev tools.
   if (process.env.NODE_ENV === 'development') {
     console.debug(SIGN_IN_GREETING, CONFIG)
-
+    // console.log(`Running in environment: ${process.env.NODE_ENV}`)
     // enable React performance measurement tools.
     // see https://create-react-app.dev/docs/measuring-performance/
     const { onCLS, onFID, onFCP, onINP, onLCP, onTTFB } = await import(

src/router/authLoader.ts

@@ -1,21 +1,33 @@
+import 'core-js/stable/atob'
+import { userData } from '@/types'
+import axiosInstance from '@/axiosConfig'
 /**
  * Auth state loader for react-router data routes.
  * @module router/authLoader
  * @see {@link dashboard/Routes}
  */
 
+const emptyUser: userData = {
+  userid: '',
+  email: '',
+  fullname: '',
+  role: '',
+  assignedfismasystems: [],
+}
 const authLoader = async (): Promise<unknown> => {
-  return fetch('/whoami')
-    .then(async (response) => {
-      let body: string | Promise<string>
-      if (!response.ok) {
-        body = ''
-      } else {
-        body = await response.text()
-      }
-      return { ok: response.ok, response: body }
-    })
-    .catch((e) => console.log(e))
+  try {
+    const axiosUser = await axiosInstance.get('/users/current')
+    if (axiosUser.status != 200) {
+      return { ok: false, response: emptyUser }
+    }
+    if (axiosUser.status != 200) {
+      return { status: false, response: emptyUser }
+    }
+    return { status: axiosUser.status, response: axiosUser.data }
+  } catch (error) {
+    console.error('Error:', error)
+  }
+  return { ok: false, response: emptyUser }
 }
 
 export default authLoader

src/router/constants.ts

@@ -25,12 +25,6 @@ export enum Routes {
   DASHBOARD = `/${RouteIds.PROTECTED}`,
   HOME = `/${RouteIds.HOME}`,
   AUTH = `/${RouteIds.AUTH}/*`,
-  PILLARS = `/${RouteIds.PILLARS}/:systemId`,
-  IDENTITY = `${PILLARS}/${RouteIds.IDENTITY}`,
-  DEVICES = `${PILLARS}/${RouteIds.DEVICES}`,
-  NETWORKS = `${PILLARS}/${RouteIds.NETWORKS}`,
-  APPLICATIONS = `${PILLARS}/${RouteIds.APPLICATIONS}`,
-  DATA = `${PILLARS}/${RouteIds.DATA}`,
   AUTH_LOGIN = `/${RouteIds.AUTH}/${RouteIds.LOGIN}`,
   AUTH_LOGOUT = `/${RouteIds.AUTH}/${RouteIds.LOGOUT}`,
 }

src/router/router.tsx

@@ -9,12 +9,6 @@ import authLoader from './authLoader'
 import { RouteIds, Routes } from '@/router/constants'
 import HomePageContainer from '@/views/Home/Home'
 import Title from '@/views/Title/Title'
-import PillarPage from '@/views/PillarTable/PillarTable'
-import IdentityPage from '@/views/IdentityPage/IdentityPage'
-import DevicesPage from '@/views/DevicesPage/DevicesPage'
-import NetworksPage from '@/views/NetworksPage/NetworksPage'
-import ApplicationPage from '@/views/ApplicationPage/ApplicationPage'
-import DataPage from '@/views/DataPage/DataPage'
 /**
  * The hash router for the application that defines routes
  *  and specifies the loaders for routes with dynamic data.
@@ -36,41 +30,6 @@ const router = createHashRouter([
         element: <HomePageContainer />,
         errorElement: <ErrorBoundary />,
       },
-      {
-        path: Routes.PILLARS,
-        id: RouteIds.PILLARS,
-        element: <PillarPage />,
-      },
-      {
-        id: RouteIds.IDENTITY,
-        path: Routes.IDENTITY,
-        element: <IdentityPage />,
-        errorElement: <ErrorBoundary />,
-      },
-      {
-        id: RouteIds.DEVICES,
-        path: Routes.DEVICES,
-        element: <DevicesPage />,
-        errorElement: <ErrorBoundary />,
-      },
-      {
-        id: RouteIds.NETWORKS,
-        path: Routes.NETWORKS,
-        element: <NetworksPage />,
-        errorElement: <ErrorBoundary />,
-      },
-      {
-        id: RouteIds.APPLICATIONS,
-        path: Routes.APPLICATIONS,
-        element: <ApplicationPage />,
-        errorElement: <ErrorBoundary />,
-      },
-      {
-        id: RouteIds.DATA,
-        path: Routes.DATA,
-        element: <DataPage />,
-        errorElement: <ErrorBoundary />,
-      },
     ],
   },
 ])

src/types.ts

@@ -61,6 +61,61 @@ export type FormField = {
   value?: string | number | boolean | null
   component: React.ElementType
 }
+export type userData = {
+  userid: string
+  email: string
+  fullname: string
+  role: string
+  assignedfismasystems?: number[]
+}
+export type RequestOptions = {
+  method: string
+  headers: Headers
+  redirect: 'follow' | 'error' | 'manual'
+}
+export type FismaSystemType = {
+  fismasystemid: string | number
+  fismauid: string | number
+  fismaacronym: string
+  fismaname: string
+  fismasubsystem: string
+  component: string
+  mission: string
+  fismaimpactlevel: string
+  issoemail: string
+  datacenterenvironment: string
+}
+export type FismaSystems = {
+  fismaSystems: FismaSystemType[]
+}
+
+export type FismaFunction = {
+  functionid: number
+  function: string
+  description: string
+  datacenterenvironment: string
+}
+export type FismaQuestion = {
+  questionid: number
+  question: string
+  notesprompt: string
+  pillar: string
+  function: FismaFunction
+}
+
+export type QuestionOption = {
+  description: string
+  functionid: number
+  functionoptionid: number
+  optionname: string
+  score: number
+}
+
+export type SystemDetailsModalProps = {
+  open: boolean
+  onClose: () => void
+  system: FismaSystemType | null
+}
 
 export type ThemeColor =
   | 'primary'