[WIP] add ids

typescript/Frontend/src/App.css

@@ -28,6 +28,7 @@
   color: #61dafb;
 }
 
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

typescript/Frontend/src/App.tsx

@@ -35,18 +35,12 @@ const App = () => {
         locale={language}
         defaultLocale="EN"
       >
-        <Container maxWidth="xl" sx={{ marginTop: 2 }}>
+        <Container maxWidth="xl" sx={{ marginTop: 2, height: "100vh" }}>
           <Grid container spacing={2}>
             <Grid item xs={3}>
               <NavigationButtons />
             </Grid>
-            <Grid
+            <Grid item xs={9} container justifyContent="flex-end">
-              item
-              xs={9}
-              container
-              justifyContent="flex-end"
-              sx={{ px: 1, pt: 1 }}
-            >
               <LanguageSelect language={language} setLanguage={setLanguage} />
               <LogoutButton removeToken={removeToken} />
             </Grid>

typescript/Frontend/src/components/Context/UserContextProvider.tsx

@@ -0,0 +1,24 @@
+import { createContext, ReactNode, useState } from "react";
+import { I_User } from "../../util/user.util";
+
+interface InstallationContextProviderProps {
+  currentUser?: I_User;
+  setCurrentUser: (value: I_User) => void;
+}
+
+export const UserContext = createContext<InstallationContextProviderProps>({
+  currentUser: {} as I_User,
+  setCurrentUser: () => {},
+});
+
+const UserContextProvider = ({ children }: { children: ReactNode }) => {
+  const [currentUser, setCurrentUser] = useState<I_User>();
+
+  return (
+    <UserContext.Provider value={{ currentUser, setCurrentUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContextProvider;

typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx

@@ -11,7 +11,7 @@ const AccessManagement = () => {
       <Grid container sx={{ mt: 1 }}>
         <Grid item xs={6}>
           <AvailableUserDialog />
-          <InnovenergyList>
+          <InnovenergyList id="access-management-list">
             <UsersWithDirectAccess />
             <UsersWithInheritedAccess />
           </InnovenergyList>

typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx

@@ -48,6 +48,7 @@ const AvailableUserDialog = () => {
   return (
     <>
       <Dialog
+        id="available-user-dialog"
         onClose={() => setOpen(false)}
         aria-labelledby="customized-dialog-title"
         open={open}
@@ -57,12 +58,14 @@ const AvailableUserDialog = () => {
         }}
         scroll="paper"
       >
-        <DialogTitle>Create new folder</DialogTitle>
+        <DialogTitle id="available-user-dialog-title">
-        <DialogContent>
+          Create new folder
+        </DialogTitle>
+        <DialogContent id="available-user-dialog-content">
           <Autocomplete
             sx={{ width: "500px" }}
             multiple
-            id="tags-standard"
+            id="available-user-dialog-autocomplete"
             options={getAvailableUsersForResource()}
             getOptionLabel={(option) => option.name}
             renderInput={(params) => (
@@ -76,8 +79,9 @@ const AvailableUserDialog = () => {
             onChange={(event, values) => setSelectedUsers(values)}
           />
         </DialogContent>
-        <DialogActions>
+        <DialogActions id="available-user-dialog-actions">
           <InnovenergyButton
+            id="available-user-dialog-grant-access-button"
             type="submit"
             sx={{ height: 40, ml: 2 }}
             onClick={handleGrant}
@@ -86,7 +90,11 @@ const AvailableUserDialog = () => {
           </InnovenergyButton>
         </DialogActions>
       </Dialog>
-      <InnovenergyButton type="submit" onClick={() => setOpen(true)}>
+      <InnovenergyButton
+        id="available-user-dialog-submit-button"
+        type="submit"
+        onClick={() => setOpen(true)}
+      >
         <FormattedMessage id="grantAccess" defaultMessage="Grant access" />
       </InnovenergyButton>
     </>

typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx

@@ -1,7 +1,12 @@
 import { List } from "@mui/material";
 import { ReactNode } from "react";
 
-const InnovenergyList = ({ children }: { children: ReactNode }) => {
+interface InnovenergyListProps {
+  id: string;
+  children: ReactNode;
+}
+
+const InnovenergyList = (props: InnovenergyListProps) => {
   return (
     <List
       sx={{
@@ -14,7 +19,7 @@ const InnovenergyList = ({ children }: { children: ReactNode }) => {
       component="nav"
       aria-labelledby="nested-list-subheader"
     >
-      {children}
+      {props.children}
     </List>
   );
 };

typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx

@@ -43,21 +43,30 @@ const UsersWithDirectAccess = () => {
           return (
             <Fragment key={user.id}>
               <ListItem
+                id={"direct-access-user-" + user.id}
                 secondaryAction={
                   <IconButton
+                    id={"direct-access-user-icon-button" + user.id}
                     onClick={() => handleIconClick(user.id)}
                     edge="end"
                   >
-                    <PersonRemoveIcon id={user.id.toString()} />
+                    <PersonRemoveIcon
+                      id={"direct-access-user-icon" + user.id}
+                    />
                   </IconButton>
                 }
               >
-                <ListItemAvatar>
+                <ListItemAvatar id={"direct-access-user-item-avatar" + user.id}>
-                  <Avatar>
+                  <Avatar id={"direct-access-user-avatar" + user.id}>
-                    <PersonIcon />
+                    <PersonIcon
+                      id={"direct-access-user-person-icon" + user.id}
+                    />
                   </Avatar>
                 </ListItemAvatar>
-                <ListItemText primary={user.name} />
+                <ListItemText
+                  id={"direct-access-user-list-text-" + user.id}
+                  primary={user.name}
+                />
               </ListItem>
               <Divider />
             </Fragment>

typescript/Frontend/src/components/Groups/AccessManagement/UsersWithInheritedAccess.tsx

@@ -30,18 +30,24 @@ const UsersWithInheritedAccess = () => {
           ({ user, folderName }: UserWithInheritedAccess) => {
             return (
               <Fragment key={user.id}>
-                <ListItem>
+                <ListItem id={"inherited-access-user-list-item" + user.id}>
-                  <ListItemAvatar>
+                  <ListItemAvatar
-                    <Avatar>
+                    id={"inherited-access-user-list-item-avatar-" + user.id}
-                      <PersonIcon />
+                  >
+                    <Avatar id={"inherited-access-user-avatar-" + user.id}>
+                      <PersonIcon
+                        id={"inherited-access-user-person-icon-" + user.id}
+                      />
                     </Avatar>
                   </ListItemAvatar>
                   <ListItemText
+                    id={"inherited-access-user-list-item-text-" + user.id}
                     primary={user.name}
                     secondary={
                       <>
                         Inherited access from{" "}
                         <Link
+                          id={"inherited-access-user-link-" + user.id}
                           to={
                             routes.groups + routes.manageAccess + user.parentId
                           }

typescript/Frontend/src/components/Layout/InnovenergyButton.tsx

@@ -6,11 +6,13 @@ interface I_InnovenergyButtonProps {
   type?: "button" | "submit" | "reset" | undefined;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   sx?: SxProps<Theme> | undefined;
+  id?: string;
 }
 
 const InnovenergyButton = (props: I_InnovenergyButtonProps) => {
   return (
     <Button
+      id={props.id}
       variant="contained"
       type={props.type}
       onClick={props.onClick}

typescript/Frontend/src/components/Users/UserForm.tsx

@@ -30,6 +30,7 @@ const UserForm = (props: I_UserFormProps) => {
       handleSubmit(formikValues)
         .then(() => {
           setOpen(true);
+          setLoading(false);
         })
         .catch((err: AxiosError) => {
           setOpen(true);

typescript/Frontend/src/index.tsx

@@ -4,6 +4,7 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { createTheme, ThemeProvider } from "@mui/material";
+import UserContextProvider from "./components/Context/UserContextProvider";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -20,7 +21,9 @@ const theme = createTheme({
 root.render(
   <React.StrictMode>
     <ThemeProvider theme={theme}>
+      <UserContextProvider>
         <App />
+      </UserContextProvider>
     </ThemeProvider>
   </React.StrictMode>
 );