add ids to elements

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>

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>

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",

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

@@ -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;

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}

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>

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}
           >

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>

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>

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",

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 />

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="language-select"
-      id="demo-simple-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>

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("/");

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>
     </>

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}

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",

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",

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 />