feat: add page for editing user info

src/App.tsx

@@ -1,7 +1,7 @@
 import '@radix-ui/themes/styles.css';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
-import { AppList, GroupList, NotFoundPage, OAuthTriggerPage, UserList } from './pages';
+import { AppList, GroupList, NotFoundPage, OAuthTriggerPage, UserList, UserEdit } from './pages';
 import Loading from './pages/Loading';
 import './theme.css';
 
@@ -51,6 +51,14 @@ function App() {
                                     </Protected>
                                 }
                             />
+                            <Route
+                                path={CLIENT_ROUTES.USER_EDIT}
+                                element={
+                                    <Protected>
+                                        <UserEdit />
+                                    </Protected>
+                                }
+                            />
                             <Route
                                 path={CLIENT_ROUTES.GROUPS_TABLE}
                                 element={

src/api/users/getUser.test.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { QueryClient } from '@tanstack/react-query';
+import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import useGetUserQuery from './getUser';
+
+describe('useGetUserQuery', () => {
+    let mockClient: { get: Mock };
+    const userId = 'test-user-id';
+
+    beforeEach(() => {
+        mockClient = {
+            get: vi.fn(),
+        };
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should call client.get with the correct suffix', async () => {
+        const queryObj = useGetUserQuery(mockClient as any, userId);
+
+        await queryObj.queryFn!({
+            queryKey: ['users', userId],
+            signal: new AbortController().signal,
+            meta: undefined,
+            client: {} as QueryClient,
+        });
+
+        expect(mockClient.get).toHaveBeenCalledTimes(1);
+        expect(mockClient.get).toHaveBeenCalledWith(
+            expect.objectContaining({
+                suffix: expect.stringContaining(`/user/${userId}`),
+            }),
+        );
+    });
+});

src/api/users/getUser.ts

@@ -0,0 +1,22 @@
+import { queryOptions } from '@tanstack/react-query';
+import { SERVER_ROUTES } from '../../routes';
+import { formatAPIPath } from '../../utils';
+import APICore from '../core';
+import { queryKeys } from '../query-keys';
+import { User } from '../../types/models';
+
+function useGetUserQuery(client: APICore, userId: string) {
+    return queryOptions({
+        enabled: true,
+        queryKey: queryKeys.users.detail(userId),
+        queryFn: async () =>
+            (await client.get({
+                suffix: formatAPIPath([SERVER_ROUTES.USERS, userId]),
+            })) as User,
+        throwOnError: true,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 3600, // 1 hour
+    });
+}
+
+export default useGetUserQuery;

src/api/users/index.ts

@@ -3,3 +3,5 @@ export { default as getVerifiedUsers } from './getVerifiedUsers';
 export { default as useAllUsersQuery } from './useAllUsersQuery';
 export { default as useCreateUserQuery } from './useCreateUserQuery';
 export { default as useUpdateUserQuery } from './useUpdateUserQuery';
+export { default as getUser } from './getUser';
+export { default as useGetUserQuery } from './useGetUserQuery';

src/api/users/useGetUserQuery.ts

@@ -0,0 +1,20 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useAxios } from '../../hooks';
+import { getUser } from '.';
+
+function useGetUserQuery(userId: string) {
+    const api = useAxios();
+    const options = getUser(api, userId);
+
+    const { data, isLoading, error, refetch, isRefetching } = useQuery(options);
+
+    const queryClient = useQueryClient();
+
+    const prefetchUser = async () => {
+        await queryClient.prefetchQuery(options);
+    };
+
+    return { data, isLoading, error, refetch, isRefetching, prefetchUser };
+}
+
+export default useGetUserQuery;

src/api/users/useUpdateUserQuery.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { SERVER_ROUTES } from '../../routes';
-import { ResourceType } from '../../types';
+import { ResourceType, UpdateUserAPIRequest } from '../../types';
 import { formatAPIPath } from '../../utils';
 import APICore from '../core';
 import { queryKeys } from '../query-keys';
@@ -10,14 +10,10 @@
 
     return useMutation({
         mutationKey: queryKeys.puts.user,
-        mutationFn: async ({ nickname, id, active }: { nickname: string; id: string; active: boolean }) => {
+        mutationFn: async ({ id, userData }: { id: string; userData: UpdateUserAPIRequest }) => {
             return await client.put({
                 suffix: formatAPIPath([SERVER_ROUTES.USERS, id]),
-                body: {
-                    nickname: nickname,
-                    type: ResourceType.USER,
-                    active,
-                },
+                body: userData,
             });
         },
         onSuccess: () => {

src/components/Modal/index.ts

@@ -3,4 +3,3 @@ export { default as CreateUserModal } from './CreateUserModal';
 export { default as Modal } from './Modal';
 export { default as PasswordGeneratedModal } from './PasswordGeneratedModal';
 export { default as UpdateAppModal } from './UpdateAppModal';
-export { default as UpdateUserModal } from './UpdateUserModal';

src/components/Sidebar/Sidebar.tsx

@@ -32,7 +32,6 @@ type SidebarProps = {
 const Sidebar = ({ version, profileOptions = [], serverStats, authenticatedUser }: SidebarProps) => {
     const location = useLocation();
     const { setTokens } = useOAuth();
-    console.log(authenticatedUser);
     const isAdmin = authenticatedUser?.privileges['*'].includes('admin');
     const navItems = useMemo<NavItem[]>(
         () => [

src/components/TableList/TableList.tsx

@@ -4,9 +4,9 @@ import { Button, Card, Flex, Text, Theme } from '@radix-ui/themes';
 import { GridOptions, RowDoubleClickedEvent, themeQuartz } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { useRef, useState } from 'react';
-import { UserUpdateInitialValues } from '../../types';
 import { Users } from '../../utils/helpers/models';
-import { CreateUserModal, PasswordGeneratedModal, UpdateUserModal } from '../Modal';
+import { CreateUserModal, PasswordGeneratedModal } from '../Modal';
+import { CLIENT_ROUTES } from '../../routes';
 
 /**
  * @deprecated Do NOT add more functionality to this
@@ -24,17 +24,9 @@ type TableListProps = {
 };
 
 const TableList = ({ columnDefs, data, itemName, onDelete }: TableListProps) => {
-    const initialUserUpdateValues: UserUpdateInitialValues = {
-        nickname: '',
-        id: '',
-        active: false,
-    };
-
     const gridRef = useRef<any>(null);
     const [selectedCount, setSelectedCount] = useState(0);
     const [isCreateUserModalOpen, setCreateUserModalOpen] = useState(false);
-    const [isUpdateUserModalOpen, setUpdateUserModalOpen] = useState(false);
-    const [selectedUserData, setSelectedUserData] = useState<UserUpdateInitialValues>(initialUserUpdateValues);
     const [password, setPassword] = useState('');
     const [showPasswordModal, setShowPasswordModal] = useState(false);
 
@@ -53,8 +45,9 @@ const TableList = ({ columnDefs, data, itemName, onDelete }: TableListProps) =>
 
     const handleRowDoubleClick = (event: RowDoubleClickedEvent) => {
         const rowData = event.data;
-        setSelectedUserData({ id: Users.parseUserID(rowData), ...rowData });
-        setUpdateUserModalOpen(true);
+        // setSelectedUserData({ id: Users.parseUserID(rowData), ...rowData });
+        // setUpdateUserModalOpen(true);
+        window.location.href = CLIENT_ROUTES.USER_EDIT.replace(':id', Users.parseUserID(rowData));
     };
 
     const downloadCSV = () => {
@@ -130,13 +123,6 @@ const TableList = ({ columnDefs, data, itemName, onDelete }: TableListProps) =>
                             onRowDoubleClicked={handleRowDoubleClick}
                         />
                     </div>
-                    {isUpdateUserModalOpen && itemName === 'user' && (
-                        <UpdateUserModal
-                            initialValues={selectedUserData}
-                            isOpen={isUpdateUserModalOpen}
-                            onClose={() => setUpdateUserModalOpen(false)}
-                        />
-                    )}
                 </Card>
             </div>
         </Theme>