From 40daf01c1dc3793783f40e5e2379e8ee73b4a719 Mon Sep 17 00:00:00 2001
From: Sina Blattmann <sina.blattmann@noser.com>
Date: Thu, 6 Apr 2023 10:48:36 +0200
Subject: [PATCH] add ids to elements

---
 .../src/components/Groups/AddNewDialog.tsx    | 12 ++++-
 .../src/components/Groups/FolderForm.tsx      | 10 ++--
 .../src/components/Groups/GroupTabs.tsx       |  3 ++
 .../src/components/Groups/LocationForm.tsx    | 50 -------------------
 .../src/components/Groups/Tree/GroupTree.tsx  |  2 +
 .../src/components/Groups/Tree/MoveDialog.tsx | 14 +++++-
 .../src/components/Groups/Tree/MoveTree.tsx   |  3 +-
 .../Installations/InstallationForm.tsx        | 12 ++---
 .../Installations/InstallationList.tsx        |  3 ++
 .../Installations/InstallationTabs.tsx        |  3 ++
 .../Installations/Installations.tsx           |  5 +-
 .../src/components/Layout/LanguageSelect.tsx  |  7 ++-
 .../src/components/Layout/LogoutButton.tsx    |  1 +
 .../src/components/Layout/ModeButtons.tsx     |  7 ++-
 .../components/Layout/NavigationButtons.tsx   |  3 ++
 .../Frontend/src/components/Layout/Search.tsx |  5 +-
 .../src/components/Users/UserTabs.tsx         |  2 +
 .../Frontend/src/components/Users/Users.tsx   |  2 +-
 18 files changed, 70 insertions(+), 74 deletions(-)
 delete mode 100644 typescript/Frontend/src/components/Groups/LocationForm.tsx

diff --git a/typescript/Frontend/src/components/Groups/AddNewDialog.tsx b/typescript/Frontend/src/components/Groups/AddNewDialog.tsx
index 074251907..a8112e261 100644
--- a/typescript/Frontend/src/components/Groups/AddNewDialog.tsx
+++ b/typescript/Frontend/src/components/Groups/AddNewDialog.tsx
@@ -28,10 +28,15 @@ const AddNewDialog = (props: AddNewDialogProps) => {
 
   return (
     <>
-      <InnovenergyButton sx={{ ml: 2 }} onClick={() => setOpen(true)}>
+      <InnovenergyButton
+        id={"add-new-child-dialog-button-" + props.values.id}
+        sx={{ ml: 2 }}
+        onClick={() => setOpen(true)}
+      >
         <FormattedMessage id="addNewChild" defaultMessage="Add new child" />
       </InnovenergyButton>
       <Dialog
+        id={"add-new-child-dialog-" + props.values.id}
         onClose={() => setOpen(false)}
         aria-labelledby="customized-dialog-title"
         open={open}
@@ -46,6 +51,7 @@ const AddNewDialog = (props: AddNewDialogProps) => {
         <DialogTitle>
           Create new folder
           <IconButton
+            id={"add-new-child-dialog-icon-button-" + props.values.id}
             edge="start"
             color="inherit"
             onClick={() => setOpen(false)}
@@ -56,7 +62,9 @@ const AddNewDialog = (props: AddNewDialogProps) => {
               top: 8,
             }}
           >
-            <CloseIcon />
+            <CloseIcon
+              id={"add-new-child-dialog-close-icon-" + props.values.id}
+            />
           </IconButton>
         </DialogTitle>
         <DialogContent>
diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx
index fa69fcc17..e7b8485c7 100644
--- a/typescript/Frontend/src/components/Groups/FolderForm.tsx
+++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx
@@ -53,7 +53,7 @@ const FolderForm = (props: I_CustomerFormProps) => {
     <>
       <form onSubmit={formik.handleSubmit}>
         <InnovenergyTextfield
-          id="name-textfield"
+          id="folder-name-textfield"
           label={intl.formatMessage({
             id: "name",
             defaultMessage: "Name",
@@ -63,7 +63,7 @@ const FolderForm = (props: I_CustomerFormProps) => {
           handleChange={formik.handleChange}
         />
         <InnovenergyTextfield
-          id="information-textfield"
+          id="folder-information-textfield"
           label={intl.formatMessage({
             id: "information",
             defaultMessage: "Information",
@@ -75,7 +75,11 @@ const FolderForm = (props: I_CustomerFormProps) => {
         <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
           {loading && <CircularProgress />}
           {additionalButtons && additionalButtons.map((button) => button)}
-          <InnovenergyButton type="submit" sx={{ ml: 2 }}>
+          <InnovenergyButton
+            id="folder-form-submit-button"
+            type="submit"
+            sx={{ ml: 2 }}
+          >
             <FormattedMessage id="submit" defaultMessage="Submit" />
           </InnovenergyButton>
         </Grid>
diff --git a/typescript/Frontend/src/components/Groups/GroupTabs.tsx b/typescript/Frontend/src/components/Groups/GroupTabs.tsx
index e826349d5..c002bf93c 100644
--- a/typescript/Frontend/src/components/Groups/GroupTabs.tsx
+++ b/typescript/Frontend/src/components/Groups/GroupTabs.tsx
@@ -30,6 +30,7 @@ const GroupTabs = () => {
           >
             {currentType === "Folder" ? (
               <StyledTab
+                id="styled-tab-folder"
                 label={intl.formatMessage({
                   id: "folder",
                   defaultMessage: "Folder",
@@ -42,6 +43,7 @@ const GroupTabs = () => {
               />
             ) : (
               <StyledTab
+                id="styled-tab-installation"
                 label={intl.formatMessage({
                   id: "installation",
                   defaultMessage: "Installation",
@@ -58,6 +60,7 @@ const GroupTabs = () => {
             )}
 
             <StyledTab
+              id="styled-tab-manage-access"
               label={intl.formatMessage({
                 id: "manageAccess",
                 defaultMessage: "Manage access",
diff --git a/typescript/Frontend/src/components/Groups/LocationForm.tsx b/typescript/Frontend/src/components/Groups/LocationForm.tsx
deleted file mode 100644
index 54a2a4e5b..000000000
--- a/typescript/Frontend/src/components/Groups/LocationForm.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Grid, InputLabel } from "@mui/material";
-import { useContext, useState } from "react";
-import { FormattedMessage } from "react-intl";
-import { useParams } from "react-router-dom";
-import axiosConfig from "../../config/axiosConfig";
-import { GroupContext } from "../Context/GroupContextProvider";
-import InnovenergyButton from "../Layout/InnovenergyButton";
-
-interface LocationFormProps {
-  parentId: number;
-}
-const LocationForm = (props: LocationFormProps) => {
-  const [selectedParentId, setSelectedParentId] = useState<number>(
-    props.parentId
-  );
-
-  const { fetchData, currentType } = useContext(GroupContext);
-  const { id } = useParams();
-
-  const handleMove = () => {
-    const route =
-      currentType === "Folder" ? "/MoveFolder" : "/MoveInstallation";
-    const paramsProp = currentType === "Folder" ? "folderId" : "installationId";
-    axiosConfig
-      .put(route, null, {
-        params: { [paramsProp]: id, parentId: selectedParentId },
-      })
-      .then((res) => {
-        fetchData();
-      });
-  };
-
-  return (
-    <Grid container direction="row" alignItems="center" spacing={2}>
-      <Grid item xs={3} alignItems="start">
-        <InputLabel style={{ marginBottom: "180px" }}>
-          <FormattedMessage id="location" defaultMessage="Location" />
-        </InputLabel>
-      </Grid>
-      <Grid item xs={9} display="inline"></Grid>
-      <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-        <InnovenergyButton sx={{ height: 40, ml: 2 }} onClick={handleMove}>
-          <FormattedMessage id="move" defaultMessage="Move" />
-        </InnovenergyButton>
-      </Grid>
-    </Grid>
-  );
-};
-
-export default LocationForm;
diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
index 12a2346f6..d6d3da743 100644
--- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
@@ -30,6 +30,7 @@ const GroupTree = () => {
     return data.map((element) => {
       return (
         <Link
+          id={"group-tree-link-" + element.id}
           key={element.id}
           to={
             element.type === "Folder"
@@ -43,6 +44,7 @@ const GroupTree = () => {
           draggable={false}
         >
           <TreeItem
+            id={"group-tree-item-" + element.id}
             key={element.type + element.id}
             nodeId={element.type + element.id}
             label={element.name}
diff --git a/typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx b/typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx
index 8da47d7ec..bfe47093c 100644
--- a/typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx
@@ -38,10 +38,15 @@ const MoveDialog = (props: MoveDialogProps) => {
 
   return (
     <div>
-      <InnovenergyButton onClick={() => setOpen(true)} sx={{ mr: 1 }}>
+      <InnovenergyButton
+        id={"move-dialog-open-button-" + id}
+        onClick={() => setOpen(true)}
+        sx={{ mr: 1 }}
+      >
         <FormattedMessage id="move" defaultMessage="Move" />
       </InnovenergyButton>
       <Dialog
+        id={"move-dialog-" + id}
         onClose={() => setOpen(false)}
         aria-labelledby="customized-dialog-title"
         open={open}
@@ -59,7 +64,12 @@ const MoveDialog = (props: MoveDialogProps) => {
           />
         </DialogContent>
         <DialogActions>
-          <InnovenergyButton onClick={handleMove}>Move</InnovenergyButton>
+          <InnovenergyButton
+            id={"move-dialog-move-button-" + id}
+            onClick={handleMove}
+          >
+            Move
+          </InnovenergyButton>
         </DialogActions>
       </Dialog>
     </div>
diff --git a/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx b/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx
index 04e6b4a34..db1c3d871 100644
--- a/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx
@@ -28,7 +28,8 @@ const MoveTree = (props: MoveTreeProps) => {
       .map((element) => {
         return (
           <TreeItem
-            key={"move-tree-element-" + element.id}
+            id={"move-tree-item-" + element.id}
+            key={"move-tree-item-" + element.id}
             nodeId={element.id.toString()}
             label={element.name}
           >
diff --git a/typescript/Frontend/src/components/Installations/InstallationForm.tsx b/typescript/Frontend/src/components/Installations/InstallationForm.tsx
index 8966918f1..fd3733355 100644
--- a/typescript/Frontend/src/components/Installations/InstallationForm.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationForm.tsx
@@ -49,7 +49,7 @@ const InstallationForm = (props: I_InstallationFormProps) => {
   return (
     <form onSubmit={formik.handleSubmit}>
       <InnovenergyTextfield
-        id="name-textfield"
+        id="installation-name-textfield"
         label={intl.formatMessage({
           id: "customerName",
           defaultMessage: "Customer name",
@@ -59,7 +59,7 @@ const InstallationForm = (props: I_InstallationFormProps) => {
         handleChange={formik.handleChange}
       />
       <InnovenergyTextfield
-        id="region-textfield"
+        id="installation-region-textfield"
         label={intl.formatMessage({
           id: "region",
           defaultMessage: "Region",
@@ -69,7 +69,7 @@ const InstallationForm = (props: I_InstallationFormProps) => {
         handleChange={formik.handleChange}
       />
       <InnovenergyTextfield
-        id="location-textfield"
+        id="installation-location-textfield"
         label={intl.formatMessage({
           id: "location",
           defaultMessage: "Location",
@@ -79,7 +79,7 @@ const InstallationForm = (props: I_InstallationFormProps) => {
         handleChange={formik.handleChange}
       />
       <InnovenergyTextfield
-        id="country-textfield"
+        id="installation-country-textfield"
         label={intl.formatMessage({
           id: "country",
           defaultMessage: "Country",
@@ -89,7 +89,7 @@ const InstallationForm = (props: I_InstallationFormProps) => {
         handleChange={formik.handleChange}
       />
       <InnovenergyTextfield
-        id="orderNumbers-textfield"
+        id="installation-orderNumbers-textfield"
         label={intl.formatMessage({
           id: "orderNumbers",
           defaultMessage: "Order number",
@@ -100,7 +100,7 @@ const InstallationForm = (props: I_InstallationFormProps) => {
       />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
         {hasMoveButton && <MoveDialog values={values} />}
-        <InnovenergyButton type="submit">
+        <InnovenergyButton id="installation-form-submit-button" type="submit">
           <FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
         </InnovenergyButton>
       </Grid>
diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx
index 983a492fd..2988f2849 100644
--- a/typescript/Frontend/src/components/Installations/InstallationList.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx
@@ -75,15 +75,18 @@ const InstallationList = (props: InstallationListProps) => {
           return (
             <Fragment key={installation.id}>
               <Link
+                id={"installation-list-link-" + installation.id}
                 to={
                   getPathWithoutId(routeMatch?.pattern?.path) + installation.id
                 }
                 style={{ textDecoration: "none", color: "black" }}
               >
                 <ListItemButton
+                  id={"installation-list-button-" + installation.id}
                   selected={installation.id === Number(routeMatch?.params.id)}
                 >
                   <ListItemText
+                    id={"installation-list-text-" + installation.id}
                     primary={installation.location + " | " + installation.name}
                   />
                 </ListItemButton>
diff --git a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
index 0e2cfaf62..1f20b0bd0 100644
--- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
@@ -25,6 +25,7 @@ const InstallationTabs = () => {
             aria-label="installation tabs"
           >
             <StyledTab
+              id={"installation-tab-installation"}
               label={intl.formatMessage({
                 id: "installation",
                 defaultMessage: "Installation",
@@ -36,6 +37,7 @@ const InstallationTabs = () => {
               to={routes.installation + id}
             />
             <StyledTab
+              id={"installation-tab-alarms"}
               label={intl.formatMessage({
                 id: "alarms",
                 defaultMessage: "Alarms",
@@ -45,6 +47,7 @@ const InstallationTabs = () => {
               to={routes.alarms + id}
             />
             <StyledTab
+              id={"installation-tab-log"}
               label={intl.formatMessage({
                 id: "log",
                 defaultMessage: "Log",
diff --git a/typescript/Frontend/src/components/Installations/Installations.tsx b/typescript/Frontend/src/components/Installations/Installations.tsx
index f281fceea..90402ecd4 100644
--- a/typescript/Frontend/src/components/Installations/Installations.tsx
+++ b/typescript/Frontend/src/components/Installations/Installations.tsx
@@ -14,7 +14,10 @@ const Installations = () => {
     <InstallationContextProvider>
       <Grid container spacing={2}>
         <Grid item xs={3}>
-          <SearchSidebar listComponent={InstallationList} />
+          <SearchSidebar
+            id="installations-search-sidebar"
+            listComponent={InstallationList}
+          />
         </Grid>
         <Grid item xs={9}>
           <InstallationTabs />
diff --git a/typescript/Frontend/src/components/Layout/LanguageSelect.tsx b/typescript/Frontend/src/components/Layout/LanguageSelect.tsx
index ef466afb8..8f115eaf6 100644
--- a/typescript/Frontend/src/components/Layout/LanguageSelect.tsx
+++ b/typescript/Frontend/src/components/Layout/LanguageSelect.tsx
@@ -8,16 +8,15 @@ interface LanguageSelectProps {
 const LanguageSelect = (props: LanguageSelectProps) => {
   return (
     <Select
-      labelId="demo-simple-select-label"
-      id="demo-simple-select"
+      id="language-select"
       value={props.language}
       label="Age"
       onChange={(e) => props.setLanguage(e.target.value)}
     >
-      <MenuItem value="EN">
+      <MenuItem id="english-menu-item" value="EN">
         <FormattedMessage id="english" defaultMessage="English" />
       </MenuItem>
-      <MenuItem value="DE">
+      <MenuItem id="german-menu-item" value="DE">
         <FormattedMessage id="german" defaultMessage="German" />
       </MenuItem>
     </Select>
diff --git a/typescript/Frontend/src/components/Layout/LogoutButton.tsx b/typescript/Frontend/src/components/Layout/LogoutButton.tsx
index f6dac16d0..cc984704f 100644
--- a/typescript/Frontend/src/components/Layout/LogoutButton.tsx
+++ b/typescript/Frontend/src/components/Layout/LogoutButton.tsx
@@ -11,6 +11,7 @@ const LogoutButton = (props: LogoutButtonProps) => {
 
   return (
     <InnovenergyButton
+      id="logout-button"
       onClick={() => {
         axiosConfig.post("/Logout").then(() => {
           navigate("/");
diff --git a/typescript/Frontend/src/components/Layout/ModeButtons.tsx b/typescript/Frontend/src/components/Layout/ModeButtons.tsx
index 01158b8ce..85d9ac788 100644
--- a/typescript/Frontend/src/components/Layout/ModeButtons.tsx
+++ b/typescript/Frontend/src/components/Layout/ModeButtons.tsx
@@ -31,6 +31,7 @@ const ModeButtons = () => {
         />
       </AntTabs> */}
       <ToggleButtonGroup
+        id="mode-button-group"
         color="primary"
         value={routeMatch?.pattern?.path}
         exclusive
@@ -38,18 +39,20 @@ const ModeButtons = () => {
         size="small"
       >
         <ToggleButton
+          id="mode-toggle-button-list"
           value={routes.installations + routes.list + "*"}
           component={Link}
           to={routes.list}
         >
-          <ListIcon />
+          <ListIcon id="mode-toggle-button-list-icon" />
         </ToggleButton>
         <ToggleButton
+          id="mode-toggle-button-tree"
           value={routes.installations + routes.tree + "*"}
           component={Link}
           to={routes.tree}
         >
-          <AccountTreeIcon />
+          <AccountTreeIcon id="mode-toggle-button-tree-icon" />
         </ToggleButton>
       </ToggleButtonGroup>
     </>
diff --git a/typescript/Frontend/src/components/Layout/NavigationButtons.tsx b/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
index e9033cc84..2e2ed032c 100644
--- a/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
+++ b/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
@@ -35,10 +35,12 @@ const NavigationButtons = () => {
         </ToggleButton>
       </ToggleButtonGroup> */}
       <AntTabs
+        id="navigation-buttons-group"
         value={routeMatch?.pattern?.path}
         aria-label="basic tabs example"
       >
         <StyledTab
+          id="navigation-tab-installations"
           value={routes.installations + "*"}
           component={Link}
           to={routes.installations + routes.list}
@@ -50,6 +52,7 @@ const NavigationButtons = () => {
           }
         />
         <StyledTab
+          id="navigation-tab-users"
           value={routes.users + "*"}
           component={Link}
           to={routes.users}
diff --git a/typescript/Frontend/src/components/Layout/Search.tsx b/typescript/Frontend/src/components/Layout/Search.tsx
index 400f92d03..effd13eed 100644
--- a/typescript/Frontend/src/components/Layout/Search.tsx
+++ b/typescript/Frontend/src/components/Layout/Search.tsx
@@ -4,16 +4,17 @@ import { useIntl } from "react-intl";
 
 interface SearchSidebarProps {
   listComponent: FC<{ searchQuery: string }>;
+  id: string;
 }
 const SearchSidebar = (props: SearchSidebarProps) => {
-  const { listComponent: ListComponent } = props;
+  const { listComponent: ListComponent, id } = props;
   const [searchQuery, setSearchQuery] = useState("");
   const intl = useIntl();
 
   return (
     <>
       <TextField
-        id="outlined-search"
+        id={id}
         label={intl.formatMessage({
           id: "search",
           defaultMessage: "Search",
diff --git a/typescript/Frontend/src/components/Users/UserTabs.tsx b/typescript/Frontend/src/components/Users/UserTabs.tsx
index 0000dc84f..c44fac79b 100644
--- a/typescript/Frontend/src/components/Users/UserTabs.tsx
+++ b/typescript/Frontend/src/components/Users/UserTabs.tsx
@@ -17,10 +17,12 @@ const UserTabs = () => {
       <Box sx={{ width: "100%" }}>
         <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
           <AntTabs
+            id="users-tabs"
             value={routeMatch?.pattern?.path ?? routes.user + ":id"}
             aria-label="user tabs"
           >
             <StyledTab
+              id="users-tab-user"
               label={intl.formatMessage({
                 id: "user",
                 defaultMessage: "User",
diff --git a/typescript/Frontend/src/components/Users/Users.tsx b/typescript/Frontend/src/components/Users/Users.tsx
index 6b3b9e663..a5b572dbb 100644
--- a/typescript/Frontend/src/components/Users/Users.tsx
+++ b/typescript/Frontend/src/components/Users/Users.tsx
@@ -14,7 +14,7 @@ const Users = () => {
       <Grid container>
         <Grid item xs={3}>
           <AddUser />
-          <SearchSidebar listComponent={UserList} />
+          <SearchSidebar id="users-search-sidebar" listComponent={UserList} />
         </Grid>
         <Grid item xs={9}>
           <UserTabs />