update cypress test to work on empty state and search page

cypress/integration/users_test.spec.ts

@@ -21,6 +21,8 @@ describe("Users test", () => {
     });
 
     it("Go to create User page", () => {
+      cy.wait(100);
+
       createUserPage.goToCreateUser();
       cy.url().should("include", "users/add-user");
 
@@ -31,9 +33,12 @@ describe("Users test", () => {
 
     it("Create user test", function () {
       itemId += "_" + (Math.random() + 1).toString(36).substring(7);
- 
+
       // Create
+      cy.wait(100);
+
       createUserPage.goToCreateUser();
+
       createUserPage.fillRealmRoleData(itemId).save();
 
       masthead.checkNotificationMessage("The user has been created");

cypress/support/pages/admin_console/manage/users/CreateUserPage.ts

@@ -1,11 +1,17 @@
 export default class CreateUserPage {
   usernameInput: string;
+  usersEmptyState: string;
+  emptyStateCreateUserBtn: string;
+  searchPgCreateUserBtn: string;
   saveBtn: string;
   cancelBtn: string;
 
   constructor() {
     this.usernameInput = "#kc-username";
 
+    this.usersEmptyState = "[data-testid=empty-state]";
+    this.emptyStateCreateUserBtn = "[data-testid=empty-primary-action]";
+    this.searchPgCreateUserBtn = "[data-testid=create-new-user]";
     this.saveBtn = "[data-testid=create-user]";
     this.cancelBtn = "[data-testid=cancel-create-user]";
   }
@@ -22,7 +28,16 @@ export default class CreateUserPage {
   }
 
   goToCreateUser() {
-    cy.get("[data-testid=add-user").click();
+    cy.wait(100);
+    cy.get("body").then((body) => {
+      if (body.find(this.usersEmptyState).length > 0) {
+        cy.get(this.emptyStateCreateUserBtn).click();
+      } else if (body.find("[data-testid=search-users-title]").length > 0) {
+        cy.get(this.searchPgCreateUserBtn).click();
+      } else {
+        cy.get("[data-testid=add-user]").click();
+      }
+    });
 
     return this;
   }

src/components/list-empty-state/ListEmptyState.tsx

@@ -38,7 +38,7 @@ export const ListEmptyState = ({
 }: ListEmptyStateProps) => {
   return (
     <>
-      <EmptyState variant="large">
+      <EmptyState data-testid="empty-state" variant="large">
         {hasIcon && isSearchVariant ? (
           <EmptyStateIcon icon={SearchIcon} />
         ) : (

src/user/SearchUser.tsx

@@ -28,7 +28,7 @@ export const SearchUser = ({ onSearch }: SearchUserProps) => {
 
   return (
     <EmptyState>
-      <Title headingLevel="h4" size="lg">
+      <Title data-testid="search-users-title" headingLevel="h4" size="lg">
         {t("startBySearchingAUser")}
       </Title>
       <EmptyStateBody>
@@ -50,7 +50,7 @@ export const SearchUser = ({ onSearch }: SearchUserProps) => {
           </InputGroup>
         </Form>
       </EmptyStateBody>
-      <Button variant="link" onClick={goToCreate}>
+      <Button data-testid="create-new-user" variant="link" onClick={goToCreate}>
         {t("createNewUser")}
       </Button>
     </EmptyState>

src/user/UserForm.tsx

@@ -10,7 +10,7 @@ import {
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { Controller, UseFormMethods } from "react-hook-form";
-import { useHistory, useRouteMatch } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { FormAccess } from "../components/form-access/FormAccess";
 import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 import { HelpItem } from "../components/help-enabler/HelpItem";
@@ -27,7 +27,6 @@ export const UserForm = ({
 }: UserFormProps) => {
   const { t } = useTranslation("users");
   const { realm } = useRealm();
-  const { url } = useRouteMatch();
 
   const [
     isRequiredUserActionsDropdownOpen,
@@ -38,6 +37,8 @@ export const UserForm = ({
 
   const watchUsernameInput = watch("username");
 
+  const emailRegexPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
   const requiredUserActionsOptions = [
     <SelectOption key={0} value="Configure OTP">
       {t("configureOTP")}
@@ -61,8 +62,6 @@ export const UserForm = ({
     setRequiredUserActionsDropdownOpen(false);
   };
 
-  const goToCreate = () => history.push(`${url}/add-user`);
-
   return (
     <FormAccess
       isHorizontal
@@ -84,16 +83,17 @@ export const UserForm = ({
           name="username"
         />
       </FormGroup>
-
       <FormGroup
         label={t("email")}
         fieldId="kc-description"
         validated={errors.email ? "error" : "default"}
-        helperTextInvalid={errors.email?.message}
+        helperTextInvalid={t("users:emailInvalid")}
       >
         <TextInput
-          ref={register()}
-          type="text"
+          ref={register({
+            pattern: emailRegexPattern,
+          })}
+          type="email"
           id="kc-email"
           name="email"
           aria-label={t("emailInput")}
@@ -137,7 +137,7 @@ export const UserForm = ({
           ref={register()}
           type="text"
           id="kc-firstname"
-          name="firstname"
+          name="firstName"
         />
       </FormGroup>
       <FormGroup
@@ -149,7 +149,7 @@ export const UserForm = ({
           ref={register()}
           type="text"
           id="kc-lastname"
-          name="lastname"
+          name="lastName"
           aria-label={t("lastName")}
         />
       </FormGroup>

src/user/UsersSection.tsx

@@ -166,7 +166,7 @@ export const UsersSection = () => {
     <>
       <DeleteConfirm />
       <ViewHeader titleKey="users:title" subKey="" />
-      <PageSection variant="light">
+      <PageSection data-testid="users-page" variant="light">
         {!listUsers && !initialSearch && (
           <SearchUser
             onSearch={(search) => {

src/user/UsersTabs.tsx

@@ -8,18 +8,30 @@ import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 import { UserForm } from "./UserForm";
 import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient } from "../context/auth/AdminClient";
+import { useHistory, useRouteMatch } from "react-router-dom";
 
 export const UsersTabs = () => {
   const { t } = useTranslation("roles");
-  const form = useForm<UserRepresentation>({ mode: "onChange" });
   const { addAlert } = useAlerts();
+  const { url } = useRouteMatch();
+  const history = useHistory();
+
   const adminClient = useAdminClient();
+  const form = useForm<UserRepresentation>({ mode: "onChange" });
 
   const save = async (user: UserRepresentation) => {
     try {
-      await adminClient.users.create({ username: user!.username });
-
+      await adminClient.users.create({
+        username: user!.username,
+        email: user!.email,
+        emailVerified: user!.emailVerified,
+        firstName: user!.firstName,
+        lastName: user!.lastName,
+        enabled: user!.enabled,
+        requiredActions: user!.requiredActions,
+      });
       addAlert(t("users:userCreated"), AlertVariant.success);
+      history.push(url.substr(0, url.lastIndexOf("/")));
     } catch (error) {
       addAlert(
         t("users:userCreateError", {

src/user/messages.json

@@ -17,6 +17,7 @@
     "disabled": "Disabled",
     "disabledHelpText": "A disabled user cannot log in.",
     "emailVerifiedHelpText": "Has the user's email been verified?",
+    "emailInvalid": "You must enter a valid email.",
     "temporaryDisabled": "Temporarily disabled",
     "notVerified": "Not verified",
     "requiredUserActions": "Required user actions",