Update AdminTools to not use routing when switching tabs

cisagov · Apr 4, 2024 · 7fa87cb · 7fa87cb
1 parent 9f907bb
commit 7fa87cb
Showing 1 changed file with 30 additions and 27 deletions.
diff --git a/frontend/src/pages/AdminTools/AdminTools.tsx b/frontend/src/pages/AdminTools/AdminTools.tsx
@@ -1,38 +1,41 @@
 import React from 'react';
-import classes from 'pages/Scans/Scans.module.scss';
+import Notifications from 'pages/Notifications';
+import Scan from 'pages/Scan/Scan';
 import ScansView from 'pages/Scans/ScansView';
 import ScanTasksView from 'pages/Scans/ScanTasksView';
-import { Subnav } from 'components';
-import { Switch, Route } from 'react-router-dom';
+import { Box, Container, Tab } from '@mui/material';
+import { TabContext, TabList, TabPanel } from '@mui/lab';
 
 export const AdminTools: React.FC = () => {
+  const [value, setValue] = React.useState('1');
+
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue);
+  };
   return (
-    <>
-      <Subnav
-        items={[
-          {
-            title: 'Scans',
-            path: `/admin-tools/scans`,
-            exact: true
-          },
-          {
-            title: 'Scan History',
-            path: `/admin-tools/scans/history`,
-            exact: true
-          }
-        ]}
-      ></Subnav>
-      <div className={classes.root}>
-        <Switch>
-          <Route path="/admin-tools/scans" exact>
+    <Container maxWidth="lg" sx={{ py: '10px' }}>
+      <Box sx={{ width: '100%', typography: 'body1' }}>
+        <TabContext value={value}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <TabList onChange={handleChange} aria-label="lab API tabs example">
+              <Tab label="Scans" value="1" />
+              <Tab label="Scan History" value="2" />
+              <Tab label="Notifications" value="3" />
+            </TabList>
+          </Box>
+          <TabPanel value="1">
             <ScansView />
-          </Route>
-          <Route path="/admin-tools/scans/history" exact>
+            <Scan />
+          </TabPanel>
+          <TabPanel value="2">
             <ScanTasksView />
-          </Route>
-        </Switch>
-      </div>
-    </>
+          </TabPanel>
+          <TabPanel value="3">
+            <Notifications />
+          </TabPanel>
+        </TabContext>
+      </Box>
+    </Container>
   );
 };