add ids to elements

2023-04-06 10:48:36 +02:00 · 2023-04-06 10:48:36 +02:00 · 40daf01c1d
parent c9f84a04c5
commit 40daf01c1d
18 changed files with 70 additions and 74 deletions
--- 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>
--- 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>
--- 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",
--- a/typescript/Frontend/src/components/Groups/LocationForm.tsx
+++ b/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;
--- 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}
--- 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>
--- 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}
          >
--- 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>
--- 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>
--- 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",
--- 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 />
--- 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>
--- 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("/");
--- 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>
    </>
--- 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}
--- 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",
--- 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",
--- 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 />