clean up and add cypress test

cypress/integration/users_test.spec.ts

@@ -0,0 +1,22 @@
+import SidebarPage from "../support/pages/admin_console/SidebarPage";
+import LoginPage from "../support/pages/LoginPage";
+
+describe("Users test", () => {
+  const loginPage = new LoginPage();
+  const sidebarPage = new SidebarPage();
+
+  describe("User creation", () => {
+    beforeEach(function () {
+      cy.visit("");
+      loginPage.logIn();
+      sidebarPage.goToUsers();
+    });
+
+    it("Go to create User page", () => {
+      cy.get("[data-testid=add-user").click();
+      cy.url().should("include", "users/add-user");
+      cy.get("[data-testid=cancel-create-user").click();
+      cy.url().should("not.include", "/add-user");
+    });
+  });
+});

src/user/UserForm.tsx

@@ -6,7 +6,6 @@ import {
   Select,
   SelectOption,
   Switch,
-  TextArea,
   TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -219,7 +218,11 @@ export const UserForm = ({ form, save }: UserFormProps) => {
         <Button variant="primary" type="submit">
           {t("common:Create")}
         </Button>
-        <Button onClick={() => history.push(`/${realm}/users`)} variant="link">
+        <Button
+          data-testid="cancel-create-user"
+          onClick={() => history.push(`/${realm}/users`)}
+          variant="link"
+        >
           {t("common:cancel")}
         </Button>
       </ActionGroup>

src/user/UsersSection.tsx

@@ -194,7 +194,9 @@ export const UsersSection = () => {
             toolbarItem={
               <>
                 <ToolbarItem>
-                  <Button onClick={goToCreate}>{t("addUser")}</Button>
+                  <Button data-testid="add-user" onClick={goToCreate}>
+                    {t("addUser")}
+                  </Button>
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button

src/user/UsersTabs.tsx

@@ -1,112 +1,25 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
-import { useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { PageSection } from "@patternfly/react-core";
-import { Divider, PageSection } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { useFieldArray, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 
-import { useAlerts } from "../components/alert/Alerts";
-import { useAdminClient } from "../context/auth/AdminClient";
 import { ViewHeader } from "../components/view-header/ViewHeader";
-import { useRealm } from "../context/realm-context/RealmContext";
 import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 import { UserForm } from "./UserForm";
 
 export const UsersTabs = () => {
   const { t } = useTranslation("roles");
   const form = useForm<UserRepresentation>({ mode: "onChange" });
-  //   const history = useHistory();
-
-  //   const adminClient = useAdminClient();
-  //   const [role, setRole] = useState<RoleFormType>();
-
-  //   const { id, clientId } = useParams<{ id: string; clientId: string }>();
-  //   const { url } = useRouteMatch();
-
-  //   const { realm } = useRealm();
-
-  //   const [key, setKey] = useState("");
-
-  //   const { addAlert } = useAlerts();
-
-  //   const { fields, append, remove } = useFieldArray({
-  //     control: form.control,
-  //     name: "attributes",
-  //   });
-
-  //   useEffect(() => append({ key: "", value: "" }), [append, role]);
-
-  //   const save = async (user: UserRepresentation) => {
-  // try {
-  //   const { attributes, ...rest } = role;
-  //   const roleRepresentation: RoleRepresentation = rest;
-  //   if (id) {
-  //     if (attributes) {
-  //       roleRepresentation.attributes = arrayToAttributes(attributes);
-  //     }
-  //     if (!clientId) {
-  //       await adminClient.roles.updateById({ id }, roleRepresentation);
-  //     } else {
-  //       await adminClient.clients.updateRole(
-  //         { id: clientId, roleName: role.name! },
-  //         roleRepresentation
-  //       );
-  //     }
-
-  //     await adminClient.roles.createComposite(
-  //       { roleId: id, realm },
-  //       additionalRoles
-  //     );
-
-  //     setRole(role);
-  //   } else {
-  //     let createdRole;
-  //     if (!clientId) {
-  //       await adminClient.roles.create(roleRepresentation);
-  //       createdRole = await adminClient.roles.findOneByName({
-  //         name: role.name!,
-  //       });
-  //     } else {
-  //       await adminClient.clients.createRole({
-  //         id: clientId,
-  //         name: role.name,
-  //       });
-  //       if (role.description) {
-  //         await adminClient.clients.updateRole(
-  //           { id: clientId, roleName: role.name! },
-  //           roleRepresentation
-  //         );
-  //       }
-  //       createdRole = await adminClient.clients.findRole({
-  //         id: clientId,
-  //         roleName: role.name!,
-  //       });
-  //     }
-  //     setRole(convert(createdRole));
-  //     history.push(
-  //       url.substr(0, url.lastIndexOf("/") + 1) + createdRole.id + "/details"
-  //     );
-  //   }
-  //   addAlert(t(id ? "roleSaveSuccess" : "roleCreated"), AlertVariant.success);
-  // } catch (error) {
-  //   addAlert(
-  //     t((id ? "roleSave" : "roleCreate") + "Error", {
-  //       error: error.response.data?.errorMessage || error,
-  //     }),
-  //     AlertVariant.danger
-  //   );
-  // }
-  //   };
 
   return (
     <>
-      <ViewHeader titleKey={t("users:createUser")} subKey="" dividerComponent="div" />
+      <ViewHeader
+        titleKey={t("users:createUser")}
+        subKey=""
+        dividerComponent="div"
+      />
       <PageSection variant="light">
-        <UserForm
+        <UserForm form={form} save={() => {}} />
-          reset={() => form.reset()}
-          form={form}
-          save={() => {}}
-          editMode={false}
-        />
       </PageSection>
     </>
   );