User page UI and code refinements (#416)

* UI of user's page * refactor components * remove unused imports
apache · Feb 7, 2025 · c3aed3a · c3aed3a
1 parent 2447642
commit c3aed3a
Show file tree

Hide file tree

Showing 11 changed files with 1,179 additions and 256 deletions.
diff --git a/custos-portal/package-lock.json b/custos-portal/package-lock.json
diff --git a/custos-portal/src/App.tsx b/custos-portal/src/App.tsx
@@ -17,34 +17,51 @@
  *  under the License.
  */
 
-import { Routes, Route, BrowserRouter } from 'react-router-dom';
-import { Heading } from '@chakra-ui/react';
-import { Groups } from './components/Groups';
-import { NavContainer } from './components/NavContainer';
-import { GroupDetails } from './components/Groups/GroupDetails';
-import { Login } from './components/Login';
-import ProtectedComponent from './components/ProtectedComponent';
+import { Routes, Route, BrowserRouter } from "react-router-dom";
+import { Heading } from "@chakra-ui/react";
+import { Groups } from "./components/Groups";
+import { NavContainer } from "./components/NavContainer";
+import { GroupDetails } from "./components/Groups/GroupDetails";
+import { Login } from "./components/Login";
+import { Users } from "./components/Users";
+import { UserSettings } from "./components/Users/UserSettings";
+import ProtectedComponent from "./components/ProtectedComponent";
 
 function NotImplemented() {
   return (
-    <NavContainer activeTab='N/A'>
-      <Heading size='lg' fontWeight={500}>
+    <NavContainer activeTab="N/A">
+      <Heading size="lg" fontWeight={500}>
         Not Implemented
       </Heading>
     </NavContainer>
   );
 }
 
-
 export default function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Login />} />
-          <Route path="/applications" element={<ProtectedComponent Component={NotImplemented}  />} />
-          <Route path="/users" element={<ProtectedComponent Component={NotImplemented}  />} />
-          <Route path="/groups/:id/:path" element={<ProtectedComponent Component={GroupDetails}  />} />
-          <Route path="/groups" element={<ProtectedComponent Component={Groups}  />} />
+        <Route
+          path="/applications"
+          element={<ProtectedComponent Component={NotImplemented} />}
+        />
+        <Route
+          path="/users"
+          element={<ProtectedComponent Component={Users} />}
+        />
+        <Route
+          path="/users/:email"
+          element={<ProtectedComponent Component={UserSettings} />}
+        />
+        <Route
+          path="/groups/:id/:path"
+          element={<ProtectedComponent Component={GroupDetails} />}
+        />
+        <Route
+          path="/groups"
+          element={<ProtectedComponent Component={Groups} />}
+        />
       </Routes>
     </BrowserRouter>
   );

diff --git a/custos-portal/src/components/Groups/GroupSettings.tsx b/custos-portal/src/components/Groups/GroupSettings.tsx
@@ -24,9 +24,7 @@ import {
   Text,
   FormLabel,
   Input,
-  SimpleGrid,
   Stack,
-  Divider,
   Button,
   Table,
   Thead,
@@ -52,26 +50,13 @@ import { Group, Member } from "../../interfaces/Groups";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import { TransferOwnershipModal } from "./TransferOwnershipModal";
+import { LeftRightLayout } from "../LeftRightLayout";
+import { StackedBorderBox } from "../StackedBorderBox";
 
 interface GroupSettingsProps {
   groupId: string | undefined;
 }
 
-const LeftRightLayout = ({
-  left,
-  right,
-}: {
-  left: React.ReactNode;
-  right: React.ReactNode;
-}) => {
-  return (
-    <SimpleGrid columns={2} spacing={8}>
-      <Box>{left}</Box>
-      <Box>{right}</Box>
-    </SimpleGrid>
-  );
-};
-
 export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
   const [name, setName] = React.useState("");
   const [description, setDescription] = React.useState("");
@@ -131,7 +116,7 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
     })();
   }, []);
 
-  const handleSaveChanges = async() => {
+  const handleSaveChanges = async () => {
     console.log(name, description);
 
     const resp = await customFetch(
@@ -140,11 +125,11 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
         method: "PUT",
         body: JSON.stringify({
           name,
-          description
+          description,
         }),
         headers: {
-          "Content-Type": "application/json"
-        }
+          "Content-Type": "application/json",
+        },
       }
     );
 
@@ -155,38 +140,26 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
       navigate(0);
     } else {
       toast({
-        title: 'Could not save group',
-        status: 'error',
+        title: "Could not save group",
+        status: "error",
         duration: 3000,
         isClosable: true,
       });
     }
-
-
-  }
+  };
 
   if (!groupId) {
     return;
   }
 
-
-
   return (
     <>
       <PageTitle size="md">Group Settings</PageTitle>
       <Text color="default.secondary">
         Edit group membership, roles, and other information.
       </Text>
 
-      <Stack
-        border="1px solid"
-        borderColor="border.neutral.tertiary"
-        rounded="xl"
-        p={8}
-        mt={8}
-        divider={<Divider />}
-        spacing={8}
-      >
+      <StackedBorderBox>
         <LeftRightLayout
           left={<Text fontSize="lg">Basic Information</Text>}
           right={
@@ -349,7 +322,7 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
             </Flex>
           }
         />
-      </Stack>
+      </StackedBorderBox>
 
       <Stack direction="row" mt={8} spacing={4}>
         <ActionButton onClick={handleSaveChanges}>Save Changes</ActionButton>

diff --git a/custos-portal/src/components/LeftRightLayout.tsx b/custos-portal/src/components/LeftRightLayout.tsx
@@ -0,0 +1,16 @@
+import { SimpleGrid, Box } from "@chakra-ui/react";
+
+export const LeftRightLayout = ({
+  left,
+  right,
+}: {
+  left: React.ReactNode;
+  right: React.ReactNode;
+}) => {
+  return (
+    <SimpleGrid columns={2} spacing={8}>
+      <Box>{left}</Box>
+      <Box>{right}</Box>
+    </SimpleGrid>
+  );
+};