DSEGOG-361 view all users on admin page

cypress/e2e/users.cy.ts

@@ -0,0 +1,19 @@
+describe('Users', () => {
+  it('should users table correctly', () => {
+    cy.visit('/admin/users');
+    cy.findByText('user1').should('exist');
+    cy.findAllByText('FedID').should('have.length', 5);
+    cy.findAllByText('/users POST').should('have.length', 3);
+  });
+
+  it('should load 404 page correctly', () => {
+    cy.visit('/admin/invalid');
+
+    cy.findByText(
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
+    ).should('exist');
+
+    cy.findByRole('link', { name: 'home page' }).should('exist');
+  });
+});

package.json

@@ -32,11 +32,13 @@
     "hacktimer": "1.1.3",
     "husky": "9.1.1",
     "loglevel": "1.9.1",
+    "material-react-table": "^2.13.0",
     "msw": "2.7.0",
     "react": "18.3.1",
     "react-colorful": "5.6.1",
     "react-dom": "18.3.1",
     "react-redux": "9.2.0",
+    "react-router-dom": "7.1.1",
     "single-spa-react": "6.0.2",
     "typescript": "5.6.2",
     "vite": "5.4.11"

public/operationsgateway-settings.example.json

@@ -7,6 +7,13 @@
       "link": "/og",
       "displayName": "OperationsGateway",
       "order": 0
+    },
+    {
+      "section": "Admin",
+      "link": "/admin/users",
+      "displayName": "Users",
+      "admin": true,
+      "order": 1
     }
   ],
   "pluginHost": "http://localhost:3000"

server/e2e-settings-mocked.json

@@ -7,6 +7,13 @@
       "link": "/operationsgateway",
       "displayName": "OperationsGateway",
       "order": 0
+    },
+    {
+      "section": "Admin",
+      "link": "/admin/users",
+      "displayName": "Users",
+      "admin": true,
+      "order": 1
     }
   ],
   "pluginHost": "http://localhost:3000"

src/App.test.tsx

@@ -7,6 +7,9 @@ import { flushPromises } from './testUtils';
 vi.mock('loglevel');
 
 describe('App', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
   it('renders without crashing', async () => {
     const el = document.createElement('div');
     const root = createRoot(el);

src/App.tsx

@@ -6,9 +6,12 @@ import {
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { connect, Provider } from 'react-redux';
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router';
+import UsersTable from './admin/users/usersTable.component';
 import './App.css';
 import { MicroFrontendId } from './app.types';
 import OGThemeProvider from './ogThemeProvider.component';
+import PageNotFoundComponent from './pageNotFound/pageNotFound.component';
 import Preloader from './preloader/preloader.component';
 import SettingsMenuItems from './settingsMenuItems.component';
 import { requestPluginRerender } from './state/scigateway.actions';
@@ -18,6 +21,12 @@ import ViewTabs from './views/viewTabs.component';
 import OpenWindows from './windows/openWindows.component';
 import { WindowContextProvider } from './windows/windowContext';
 
+export const paths = {
+  any: '*',
+  admin: '/admin',
+  adminUsers: '/admin/users',
+};
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -41,7 +50,7 @@ function mapPreloaderStateToProps(state: RootState): { loading: boolean } {
 
 export const ConnectedPreloader = connect(mapPreloaderStateToProps)(Preloader);
 
-const App: React.FunctionComponent = () => {
+const Layout: React.FunctionComponent = () => {
   const dispatch = store.dispatch;
   React.useEffect(() => {
     dispatch(configureApp());
@@ -80,7 +89,7 @@ const App: React.FunctionComponent = () => {
                     <Preloader loading={true}>Finished loading</Preloader>
                   }
                 >
-                  <ViewTabs />
+                  <Outlet />
                   {/* Open windows is it's own component so that the open windows are always mounted
                   no matter which other components the user has mounted in ViewTabs etc. */}
                   <OpenWindows />
@@ -96,4 +105,37 @@ const App: React.FunctionComponent = () => {
   );
 };
 
-export default App;
+const router = createBrowserRouter(
+  [
+    {
+      Component: Layout,
+      children: [
+        { path: paths.any, Component: ViewTabs },
+        {
+          path: paths.admin,
+          Component: Outlet,
+          ErrorBoundary: PageNotFoundComponent,
+          children: [
+            { path: paths.adminUsers, Component: UsersTable },
+            {
+              path: '*',
+              Component: PageNotFoundComponent,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    future: {
+      v7_relativeSplatPath: true,
+      v7_fetcherPersist: true,
+      v7_normalizeFormMethod: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true,
+    },
+  }
+);
+export default function App() {
+  return <RouterProvider router={router} />;
+}