From d45bb1d5ad8c91750638e5eab9c4663b9af9fd60 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 3 Mar 2021 08:53:42 -0500
Subject: [PATCH 1/9] user details WIP

---
 .../list-empty-state/ListEmptyState.tsx       |   2 +-
 src/route-config.ts                           |   7 +
 src/user/UserForm.tsx                         |  90 +++++++++++++
 src/user/UsersSection.tsx                     |   7 +-
 src/user/UsersTabs.tsx                        | 120 ++++++++++++++++++
 src/user/messages.json                        |   1 +
 6 files changed, 225 insertions(+), 2 deletions(-)
 create mode 100644 src/user/UserForm.tsx
 create mode 100644 src/user/UsersTabs.tsx

diff --git a/src/components/list-empty-state/ListEmptyState.tsx b/src/components/list-empty-state/ListEmptyState.tsx
index 3a805477d6..cc095f1c05 100644
--- a/src/components/list-empty-state/ListEmptyState.tsx
+++ b/src/components/list-empty-state/ListEmptyState.tsx
@@ -19,7 +19,7 @@ export type Action = {
 
 export type ListEmptyStateProps = {
   message: string;
-  instructions: string;
+  instructions: React.ReactNode;
   primaryActionText?: string;
   onPrimaryAction?: MouseEventHandler<HTMLButtonElement>;
   hasIcon?: boolean;
diff --git a/src/route-config.ts b/src/route-config.ts
index 9474c7cec2..bded96c138 100644
--- a/src/route-config.ts
+++ b/src/route-config.ts
@@ -21,6 +21,7 @@ import { UserFederationSection } from "./user-federation/UserFederationSection";
 import { UsersSection } from "./user/UsersSection";
 import { MappingDetails } from "./client-scopes/details/MappingDetails";
 import { ClientDetails } from "./clients/ClientDetails";
+import { UsersTabs } from "./user/UsersTabs";
 import { UserFederationKerberosSettings } from "./user-federation/UserFederationKerberosSettings";
 import { UserFederationLdapSettings } from "./user-federation/UserFederationLdapSettings";
 import { RoleMappingForm } from "./client-scopes/add/RoleMappingForm";
@@ -161,6 +162,12 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("users:title"),
     access: "query-users",
   },
+  {
+    path: "/:realm/users/add-user",
+    component: UsersTabs,
+    breadcrumb: t("users:createUser"),
+    access: "manage-users",
+  },
   {
     path: "/:realm/sessions",
     component: SessionsSection,
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
new file mode 100644
index 0000000000..349365197a
--- /dev/null
+++ b/src/user/UserForm.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  ActionGroup,
+  Button,
+  FormGroup,
+  TextArea,
+  TextInput,
+//   ValidatedOptions,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { UseFormMethods } from "react-hook-form";
+
+import { FormAccess } from "../components/form-access/FormAccess";
+import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
+// import { RoleFormType } from "./RealmRoleTabs";
+
+export type UserFormProps = {
+  form: UseFormMethods<UserRepresentation>;
+  save: (user: UserRepresentation) => void;
+  editMode: boolean;
+  reset: () => void;
+};
+
+export const UserForm = ({
+  form,
+  save,
+  editMode,
+  reset,
+}: UserFormProps) => {
+  const { t } = useTranslation("users");
+  return (
+    <FormAccess
+      isHorizontal
+      onSubmit={form.handleSubmit(save)}
+      role="manage-realm"
+      className="pf-u-mt-lg"
+    >
+      <FormGroup
+        label={t("roleName")}
+        fieldId="kc-name"
+        isRequired
+        // validated={form.errors.name ? "error" : "default"}
+        helperTextInvalid={t("common:required")}
+      >
+        <TextInput
+          ref={form.register({ required: !editMode })}
+          type="text"
+          id="kc-name"
+          name="name"
+          isReadOnly={editMode}
+        />
+      </FormGroup>
+      <FormGroup
+        label={t("common:description")}
+        fieldId="kc-description"
+        // validated={
+        //   form.errors.description
+        //     ? ValidatedOptions.error
+        //     : ValidatedOptions.default
+        // }
+        // helperTextInvalid={form.errors.description?.message}
+      >
+        <TextArea
+          name="description"
+          ref={form.register({
+            maxLength: {
+              value: 255,
+              message: t("common:maxLength", { length: 255 }),
+            },
+          })}
+          type="text"
+        //   validated={
+        //     form.errors.description
+        //       ? ValidatedOptions.error
+        //       : ValidatedOptions.default
+        //   }
+          id="kc-role-description"
+        />
+      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary" type="submit">
+          {t("common:save")}
+        </Button>
+        <Button onClick={() => reset()} variant="link">
+          {editMode ? t("common:reload") : t("common:cancel")}
+        </Button>
+      </ActionGroup>
+    </FormAccess>
+  );
+};
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index 10e54d4815..58d2b0b150 100644
--- a/src/user/UsersSection.tsx
+++ b/src/user/UsersSection.tsx
@@ -28,6 +28,7 @@ import { emptyFormatter } from "../util";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 
 import "./user-section.css";
+import { useHistory, useRouteMatch } from "react-router-dom";
 
 type BruteUser = UserRepresentation & {
   brute?: Record<string, object>;
@@ -39,6 +40,8 @@ export const UsersSection = () => {
   const adminClient = useAdminClient();
   const { addAlert } = useAlerts();
   const { realm: realmName } = useContext(RealmContext);
+  const history = useHistory();
+  const { url } = useRouteMatch();
   const [listUsers, setListUsers] = useState(false);
   const [initialSearch, setInitialSearch] = useState("");
   const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);
@@ -157,6 +160,8 @@ export const UsersSection = () => {
     );
   };
 
+  const goToCreate = () => history.push(`${url}/add-user`);
+
   return (
     <>
       <DeleteConfirm />
@@ -189,7 +194,7 @@ export const UsersSection = () => {
             toolbarItem={
               <>
                 <ToolbarItem>
-                  <Button>{t("addUser")}</Button>
+                  <Button onClick={goToCreate}>{t("addUser")}</Button>
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
new file mode 100644
index 0000000000..7ac6390e2e
--- /dev/null
+++ b/src/user/UsersTabs.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from "react";
+import { useHistory, useParams, useRouteMatch } from "react-router-dom";
+import {
+  PageSection,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { useFieldArray, 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={role?.name || t("createRole")}
+        subKey={id ? "" : "roles:roleCreateExplain"}
+        actionsDropdownId="roles-actions-dropdown"
+      />
+      <PageSection variant="light">
+          <UserForm
+            reset={() => form.reset()}
+            form={form}
+            save={save}
+            editMode={false}
+          />
+      </PageSection>
+    </>
+  );
+};
diff --git a/src/user/messages.json b/src/user/messages.json
index b95c7b4f57..d0282c6bf0 100644
--- a/src/user/messages.json
+++ b/src/user/messages.json
@@ -3,6 +3,7 @@
     "title": "Users",
     "searchForUser": "Search user",
     "startBySearchingAUser": "Start by searching for users",
+    "createUser": "Create user",
     "createNewUser": "Create new user",
     "noUsersFound": "No users found",
     "noUsersFoundError": "No users found due to {{error}}",

From 669c8d737795b6445678ffe7803438c0aac8c5ff Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 3 Mar 2021 13:56:03 -0500
Subject: [PATCH 2/9] add create user page

---
 src/components/view-header/ViewHeader.tsx |   4 +-
 src/user/UserForm.tsx                     | 228 +++++++++++++++++-----
 src/user/UsersTabs.tsx                    | 167 ++++++++--------
 src/user/messages.json                    |  13 +-
 4 files changed, 278 insertions(+), 134 deletions(-)

diff --git a/src/components/view-header/ViewHeader.tsx b/src/components/view-header/ViewHeader.tsx
index 4f25de5a8c..7e74fa2d8d 100644
--- a/src/components/view-header/ViewHeader.tsx
+++ b/src/components/view-header/ViewHeader.tsx
@@ -27,6 +27,7 @@ export type ViewHeaderProps = {
   badge?: string;
   badgeId?: string;
   badgeIsRead?: boolean;
+  dividerComponent?: "div" | "hr" | "li" | undefined;
   subKey: string;
   actionsDropdownId?: string;
   subKeyLinkProps?: FormattedLinkProps;
@@ -43,6 +44,7 @@ export const ViewHeader = ({
   badge,
   badgeId,
   badgeIsRead,
+  dividerComponent,
   subKey,
   subKeyLinkProps,
   dropdownItems,
@@ -157,7 +159,7 @@ export const ViewHeader = ({
           />
         )}
       </PageSection>
-      <Divider />
+      <Divider component={dividerComponent} />
     </>
   );
 };
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 349365197a..4945fa5a1e 100644
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@@ -1,88 +1,226 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   ActionGroup,
   Button,
   FormGroup,
+  Select,
+  SelectOption,
+  Switch,
   TextArea,
   TextInput,
-//   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { UseFormMethods } from "react-hook-form";
-
+import { Controller, UseFormMethods } from "react-hook-form";
+import { useHistory } from "react-router-dom";
 import { FormAccess } from "../components/form-access/FormAccess";
 import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
-// import { RoleFormType } from "./RealmRoleTabs";
+import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useRealm } from "../context/realm-context/RealmContext";
 
 export type UserFormProps = {
   form: UseFormMethods<UserRepresentation>;
   save: (user: UserRepresentation) => void;
-  editMode: boolean;
-  reset: () => void;
 };
 
-export const UserForm = ({
-  form,
-  save,
-  editMode,
-  reset,
-}: UserFormProps) => {
+export const UserForm = ({ form, save }: UserFormProps) => {
   const { t } = useTranslation("users");
+  const { realm } = useRealm();
+
+  const [
+    isRequiredUserActionsDropdownOpen,
+    setRequiredUserActionsDropdownOpen,
+  ] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
+  const history = useHistory();
+
+  const requiredUserActionsOptions = [
+    <SelectOption key={0} value="Configure OTP">
+      {t("configureOTP")}
+    </SelectOption>,
+    <SelectOption key={1} value="Update Password">
+      {t("updatePassword")}
+    </SelectOption>,
+    <SelectOption key={2} value="Update Profile">
+      {t("updateProfile")}
+    </SelectOption>,
+    <SelectOption key={3} value="Verify Email">
+      {t("verifyEmail")}
+    </SelectOption>,
+    <SelectOption key={4} value="Update User Locale">
+      {t("updateUserLocale")}
+    </SelectOption>,
+  ];
+
+  const clearSelection = () => {
+    setSelected([]);
+    setRequiredUserActionsDropdownOpen(false);
+  };
+
   return (
     <FormAccess
       isHorizontal
       onSubmit={form.handleSubmit(save)}
-      role="manage-realm"
+      role="manage-users"
       className="pf-u-mt-lg"
     >
       <FormGroup
-        label={t("roleName")}
-        fieldId="kc-name"
+        label={t("username")}
+        fieldId="kc-username"
         isRequired
-        // validated={form.errors.name ? "error" : "default"}
+        validated={form.errors.username ? "error" : "default"}
         helperTextInvalid={t("common:required")}
       >
         <TextInput
-          ref={form.register({ required: !editMode })}
+          ref={form.register()}
           type="text"
-          id="kc-name"
-          name="name"
-          isReadOnly={editMode}
+          id="kc-username"
+          name="username"
         />
       </FormGroup>
       <FormGroup
-        label={t("common:description")}
+        label={t("email")}
         fieldId="kc-description"
-        // validated={
-        //   form.errors.description
-        //     ? ValidatedOptions.error
-        //     : ValidatedOptions.default
-        // }
-        // helperTextInvalid={form.errors.description?.message}
+        validated={form.errors.email ? "error" : "default"}
+        helperTextInvalid={form.errors.email?.message}
       >
-        <TextArea
-          name="description"
-          ref={form.register({
-            maxLength: {
-              value: 255,
-              message: t("common:maxLength", { length: 255 }),
-            },
-          })}
+        <TextInput
+          ref={form.register()}
           type="text"
-        //   validated={
-        //     form.errors.description
-        //       ? ValidatedOptions.error
-        //       : ValidatedOptions.default
-        //   }
-          id="kc-role-description"
+          id="kc-email"
+          name="email"
         />
       </FormGroup>
+      <FormGroup
+        label={t("emailVerified")}
+        fieldId="kc-email-verified"
+        helperTextInvalid={t("common:required")}
+        labelIcon={
+          <HelpItem
+            helpText={t("emailVerifiedHelpText")}
+            forLabel={t("emailVerified")}
+            forID="email-verified"
+          />
+        }
+      >
+        <Controller
+          name="user-email-verified"
+          defaultValue={false}
+          control={form.control}
+          render={({ onChange, value }) => (
+            <Switch
+              id={"kc-user-email-verified"}
+              isDisabled={false}
+              onChange={(value) => onChange([`${value}`])}
+              isChecked={value[0] === "true"}
+              label={t("common:on")}
+              labelOff={t("common:off")}
+            />
+          )}
+        ></Controller>
+      </FormGroup>
+      <FormGroup
+        label={t("firstName")}
+        fieldId="kc-firstname"
+        validated={form.errors.firstName ? "error" : "default"}
+        helperTextInvalid={t("common:required")}
+      >
+        <TextInput
+          ref={form.register()}
+          type="text"
+          id="kc-firstname"
+          name="firstname"
+        />
+      </FormGroup>
+      <FormGroup
+        label={t("lastName")}
+        fieldId="kc-name"
+        validated={form.errors.lastName ? "error" : "default"}
+      >
+        <TextInput
+          ref={form.register()}
+          type="text"
+          id="kc-lastname"
+          name="lastname"
+        />
+      </FormGroup>
+      <FormGroup
+        label={t("common:enabled")}
+        fieldId="kc-enabled"
+        labelIcon={
+          <HelpItem
+            helpText={t("disabledHelpText")}
+            forLabel={t("enabled")}
+            forID="enabled-label"
+          />
+        }
+      >
+        <Controller
+          name="user-enabled"
+          defaultValue={false}
+          control={form.control}
+          render={({ onChange, value }) => (
+            <Switch
+              id={"kc-user-enabled"}
+              isDisabled={false}
+              onChange={(value) => onChange([`${value}`])}
+              isChecked={value[0] === "true"}
+              label={t("common:on")}
+              labelOff={t("common:off")}
+            />
+          )}
+        ></Controller>
+      </FormGroup>
+      <FormGroup
+        label={t("requiredUserActions")}
+        fieldId="kc-required-user-actions"
+        validated={form.errors.requiredActions ? "error" : "default"}
+        helperTextInvalid={t("common:required")}
+        labelIcon={
+          <HelpItem
+            helpText={t("requiredUserActionsHelpText")}
+            forLabel={t("requiredUserActions")}
+            forID="required-user-actions-label"
+          />
+        }
+      >
+        <Controller
+          name="required-user-actions"
+          defaultValue={["0"]}
+          typeAheadAriaLabel="Select an action"
+          control={form.control}
+          render={() => (
+            <Select
+              placeholderText="Select action"
+              toggleId="kc-required-user-actions"
+              onToggle={() =>
+                setRequiredUserActionsDropdownOpen(
+                  !isRequiredUserActionsDropdownOpen
+                )
+              }
+              isOpen={isRequiredUserActionsDropdownOpen}
+              selections={selected}
+              onSelect={(_, value) => {
+                const option = value as string;
+                if (selected.includes(option)) {
+                  setSelected(selected.filter((item) => item !== option));
+                } else {
+                  setSelected([...selected, option]);
+                }
+              }}
+              onClear={clearSelection}
+              variant="typeaheadmulti"
+            >
+              {requiredUserActionsOptions}
+            </Select>
+          )}
+        ></Controller>
+      </FormGroup>
       <ActionGroup>
         <Button variant="primary" type="submit">
-          {t("common:save")}
+          {t("common:Create")}
         </Button>
-        <Button onClick={() => reset()} variant="link">
-          {editMode ? t("common:reload") : t("common:cancel")}
+        <Button onClick={() => history.push(`/${realm}/users`)} variant="link">
+          {t("common:cancel")}
         </Button>
       </ActionGroup>
     </FormAccess>
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
index 7ac6390e2e..7053d64832 100644
--- a/src/user/UsersTabs.tsx
+++ b/src/user/UsersTabs.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } 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";
 
@@ -16,104 +14,99 @@ import { UserForm } from "./UserForm";
 export const UsersTabs = () => {
   const { t } = useTranslation("roles");
   const form = useForm<UserRepresentation>({ mode: "onChange" });
-//   const history = useHistory();
+  //   const history = useHistory();
 
-//   const adminClient = useAdminClient();
-//   const [role, setRole] = useState<RoleFormType>();
+  //   const adminClient = useAdminClient();
+  //   const [role, setRole] = useState<RoleFormType>();
 
-//   const { id, clientId } = useParams<{ id: string; clientId: string }>();
-//   const { url } = useRouteMatch();
+  //   const { id, clientId } = useParams<{ id: string; clientId: string }>();
+  //   const { url } = useRouteMatch();
 
-//   const { realm } = useRealm();
+  //   const { realm } = useRealm();
 
-//   const [key, setKey] = useState("");
+  //   const [key, setKey] = useState("");
 
+  //   const { addAlert } = useAlerts();
 
-//   const { addAlert } = useAlerts();
+  //   const { fields, append, remove } = useFieldArray({
+  //     control: form.control,
+  //     name: "attributes",
+  //   });
 
-//   const { fields, append, remove } = useFieldArray({
-//     control: form.control,
-//     name: "attributes",
-//   });
+  //   useEffect(() => append({ key: "", value: "" }), [append, role]);
 
-  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
+  //       );
+  //     }
 
-//   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
+  //     );
 
-    //     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
-    //   );
-    // }
-//   };
+  //     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={role?.name || t("createRole")}
-        subKey={id ? "" : "roles:roleCreateExplain"}
-        actionsDropdownId="roles-actions-dropdown"
-      />
+      <ViewHeader titleKey={t("users:createUser")} subKey="" dividerComponent="div" />
       <PageSection variant="light">
-          <UserForm
-            reset={() => form.reset()}
-            form={form}
-            save={save}
-            editMode={false}
-          />
+        <UserForm
+          reset={() => form.reset()}
+          form={form}
+          save={() => {}}
+          editMode={false}
+        />
       </PageSection>
     </>
   );
diff --git a/src/user/messages.json b/src/user/messages.json
index d0282c6bf0..cfc8848f4b 100644
--- a/src/user/messages.json
+++ b/src/user/messages.json
@@ -10,18 +10,29 @@
     "emptyInstructions": "Change your search criteria or add a user",
     "username": "Username",
     "email": "Email",
+    "emailVerified": "Email verified",
     "lastName": "Last name",
     "firstName": "First name",
     "status": "Status",
     "disabled": "Disabled",
+    "disabledHelpText": "A disabled user cannot log in.",
+    "emailVerifiedHelpText": "Has the user's email been verified?",
     "temporaryDisabled": "Temporarily disabled",
     "notVerified": "Not verified",
+    "requiredUserActions": "Required user actions",
+    "requiredUserActionsHelpText": "Require an action when the user logs in. 'Verify email' sends an email to the user to verify their email address. 'Update profile' requires user to enter in new personal information. 'Update password' requires user to enter in a new password. 'Configure OTP' requires setup of a mobile password generator.",
     "addUser": "Add user",
     "deleteUser": "Delete user",
     "deleteConfirm": "Delete user?",
     "deleteConfirmDialog": "Are you sure you want to permanently delete {{count}} selected user",
     "deleteConfirmDialog_plural": "Are you sure you want to permanently delete {{count}} selected users",
     "userDeletedSuccess": "The user has been deleted",
-    "userDeletedError": "The user could not be deleted {{error}}"
+    "userDeletedError": "The user could not be deleted {{error}}",
+    "configureOTP": "Configure OTP",
+    "updatePassword": "Update Password",
+    "updateProfile": "Update Profile",
+    "verifyEmail": "Verify Email",
+    "updateUserLocale": "Update User Locale"
+
   }
 }

From 1a4c6359465af001fa40b58c1c74febad8e45fd1 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 3 Mar 2021 14:12:16 -0500
Subject: [PATCH 3/9] clean up and add cypress test

---
 cypress/integration/users_test.spec.ts |  22 ++++++
 src/user/UserForm.tsx                  |   7 +-
 src/user/UsersSection.tsx              |   4 +-
 src/user/UsersTabs.tsx                 | 105 +++----------------------
 4 files changed, 39 insertions(+), 99 deletions(-)
 create mode 100644 cypress/integration/users_test.spec.ts

diff --git a/cypress/integration/users_test.spec.ts b/cypress/integration/users_test.spec.ts
new file mode 100644
index 0000000000..623a004927
--- /dev/null
+++ b/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");
+    });
+  });
+});
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 4945fa5a1e..c637d32e86 100644
--- a/src/user/UserForm.tsx
+++ b/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>
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index 58d2b0b150..4fcba14380 100644
--- a/src/user/UsersSection.tsx
+++ b/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
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
index 7053d64832..b2ae13b374 100644
--- a/src/user/UsersTabs.tsx
+++ b/src/user/UsersTabs.tsx
@@ -1,112 +1,25 @@
-import React, { useEffect, useState } from "react";
-import { useHistory, useParams, useRouteMatch } from "react-router-dom";
-import { Divider, PageSection } from "@patternfly/react-core";
+import React from "react";
+import { 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
-          reset={() => form.reset()}
-          form={form}
-          save={() => {}}
-          editMode={false}
-        />
+        <UserForm form={form} save={() => {}} />
       </PageSection>
     </>
   );

From 3b9edc483a574514492ffd84e08a51158289f801 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 3 Mar 2021 14:36:21 -0500
Subject: [PATCH 4/9] resolve issues in axe report

---
 src/user/UserForm.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index c637d32e86..07fb997612 100644
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@@ -87,6 +87,7 @@ export const UserForm = ({ form, save }: UserFormProps) => {
           type="text"
           id="kc-email"
           name="email"
+          aria-label={t("emailInput")}
         />
       </FormGroup>
       <FormGroup
@@ -140,6 +141,7 @@ export const UserForm = ({ form, save }: UserFormProps) => {
           type="text"
           id="kc-lastname"
           name="lastname"
+          aria-label={t("lastName")}
         />
       </FormGroup>
       <FormGroup

From 117ccf05b04fb817cd1e199bf95f9cd023314d6f Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 3 Mar 2021 16:17:01 -0500
Subject: [PATCH 5/9] add API call, disable create button if username field
 empty

---
 src/user/UserForm.tsx  | 42 ++++++++++++++++++++++++++----------------
 src/user/UsersTabs.tsx | 23 +++++++++++++++++++++--
 src/user/messages.json |  2 ++
 3 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 07fb997612..55327626a3 100644
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@@ -21,7 +21,10 @@ export type UserFormProps = {
   save: (user: UserRepresentation) => void;
 };
 
-export const UserForm = ({ form, save }: UserFormProps) => {
+export const UserForm = ({
+  form: { handleSubmit, register, errors, watch, control },
+  save,
+}: UserFormProps) => {
   const { t } = useTranslation("users");
   const { realm } = useRealm();
 
@@ -32,6 +35,8 @@ export const UserForm = ({ form, save }: UserFormProps) => {
   const [selected, setSelected] = useState<string[]>([]);
   const history = useHistory();
 
+  const watchUsernameInput = watch("username");
+
   const requiredUserActionsOptions = [
     <SelectOption key={0} value="Configure OTP">
       {t("configureOTP")}
@@ -58,7 +63,7 @@ export const UserForm = ({ form, save }: UserFormProps) => {
   return (
     <FormAccess
       isHorizontal
-      onSubmit={form.handleSubmit(save)}
+      onSubmit={handleSubmit(save)}
       role="manage-users"
       className="pf-u-mt-lg"
     >
@@ -66,24 +71,25 @@ export const UserForm = ({ form, save }: UserFormProps) => {
         label={t("username")}
         fieldId="kc-username"
         isRequired
-        validated={form.errors.username ? "error" : "default"}
+        validated={errors.username ? "error" : "default"}
         helperTextInvalid={t("common:required")}
       >
         <TextInput
-          ref={form.register()}
+          ref={register({ required: true })}
           type="text"
           id="kc-username"
           name="username"
         />
       </FormGroup>
+
       <FormGroup
         label={t("email")}
         fieldId="kc-description"
-        validated={form.errors.email ? "error" : "default"}
-        helperTextInvalid={form.errors.email?.message}
+        validated={errors.email ? "error" : "default"}
+        helperTextInvalid={errors.email?.message}
       >
         <TextInput
-          ref={form.register()}
+          ref={register()}
           type="text"
           id="kc-email"
           name="email"
@@ -105,7 +111,7 @@ export const UserForm = ({ form, save }: UserFormProps) => {
         <Controller
           name="user-email-verified"
           defaultValue={false}
-          control={form.control}
+          control={control}
           render={({ onChange, value }) => (
             <Switch
               id={"kc-user-email-verified"}
@@ -121,11 +127,11 @@ export const UserForm = ({ form, save }: UserFormProps) => {
       <FormGroup
         label={t("firstName")}
         fieldId="kc-firstname"
-        validated={form.errors.firstName ? "error" : "default"}
+        validated={errors.firstName ? "error" : "default"}
         helperTextInvalid={t("common:required")}
       >
         <TextInput
-          ref={form.register()}
+          ref={register()}
           type="text"
           id="kc-firstname"
           name="firstname"
@@ -134,10 +140,10 @@ export const UserForm = ({ form, save }: UserFormProps) => {
       <FormGroup
         label={t("lastName")}
         fieldId="kc-name"
-        validated={form.errors.lastName ? "error" : "default"}
+        validated={errors.lastName ? "error" : "default"}
       >
         <TextInput
-          ref={form.register()}
+          ref={register()}
           type="text"
           id="kc-lastname"
           name="lastname"
@@ -158,7 +164,7 @@ export const UserForm = ({ form, save }: UserFormProps) => {
         <Controller
           name="user-enabled"
           defaultValue={false}
-          control={form.control}
+          control={control}
           render={({ onChange, value }) => (
             <Switch
               id={"kc-user-enabled"}
@@ -174,7 +180,7 @@ export const UserForm = ({ form, save }: UserFormProps) => {
       <FormGroup
         label={t("requiredUserActions")}
         fieldId="kc-required-user-actions"
-        validated={form.errors.requiredActions ? "error" : "default"}
+        validated={errors.requiredActions ? "error" : "default"}
         helperTextInvalid={t("common:required")}
         labelIcon={
           <HelpItem
@@ -188,7 +194,7 @@ export const UserForm = ({ form, save }: UserFormProps) => {
           name="required-user-actions"
           defaultValue={["0"]}
           typeAheadAriaLabel="Select an action"
-          control={form.control}
+          control={control}
           render={() => (
             <Select
               placeholderText="Select action"
@@ -217,7 +223,11 @@ export const UserForm = ({ form, save }: UserFormProps) => {
         ></Controller>
       </FormGroup>
       <ActionGroup>
-        <Button variant="primary" type="submit">
+        <Button
+          isDisabled={!watchUsernameInput}
+          variant="primary"
+          type="submit"
+        >
           {t("common:Create")}
         </Button>
         <Button
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
index b2ae13b374..35839710f6 100644
--- a/src/user/UsersTabs.tsx
+++ b/src/user/UsersTabs.tsx
@@ -1,15 +1,34 @@
 import React from "react";
-import { PageSection } from "@patternfly/react-core";
+import { AlertVariant, PageSection } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 import { UserForm } from "./UserForm";
+import { useAlerts } from "../components/alert/Alerts";
+import { useAdminClient } from "../context/auth/AdminClient";
 
 export const UsersTabs = () => {
   const { t } = useTranslation("roles");
   const form = useForm<UserRepresentation>({ mode: "onChange" });
+  const { addAlert } = useAlerts();
+  const adminClient = useAdminClient();
+
+  const save = async (user: UserRepresentation) => {
+    try {
+      await adminClient.users.create({ username: user!.username });
+
+      addAlert(t("users:userCreated"), AlertVariant.success);
+    } catch (error) {
+      addAlert(
+        t("users:userCreateError", {
+          error: error.response.data?.errorMessage || error,
+        }),
+        AlertVariant.danger
+      );
+    }
+  };
 
   return (
     <>
@@ -19,7 +38,7 @@ export const UsersTabs = () => {
         dividerComponent="div"
       />
       <PageSection variant="light">
-        <UserForm form={form} save={() => {}} />
+        <UserForm form={form} save={save} />
       </PageSection>
     </>
   );
diff --git a/src/user/messages.json b/src/user/messages.json
index cfc8848f4b..dd069cf42c 100644
--- a/src/user/messages.json
+++ b/src/user/messages.json
@@ -26,6 +26,8 @@
     "deleteConfirm": "Delete user?",
     "deleteConfirmDialog": "Are you sure you want to permanently delete {{count}} selected user",
     "deleteConfirmDialog_plural": "Are you sure you want to permanently delete {{count}} selected users",
+    "userCreated": "The user has been created",
+    "userCreateError": "Could not create user: {{error}}",
     "userDeletedSuccess": "The user has been deleted",
     "userDeletedError": "The user could not be deleted {{error}}",
     "configureOTP": "Configure OTP",

From 39cd53069623180a0c3f0ed15f4961af60797c34 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 4 Mar 2021 09:26:21 -0500
Subject: [PATCH 6/9] add cypress test to create user

---
 cypress/integration/users_test.spec.ts        | 27 +++++++++++-
 .../manage/users/CreateUserPage.ts            | 41 +++++++++++++++++++
 src/user/UserForm.tsx                         |  1 +
 3 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 cypress/support/pages/admin_console/manage/users/CreateUserPage.ts

diff --git a/cypress/integration/users_test.spec.ts b/cypress/integration/users_test.spec.ts
index 623a004927..4a3bc7079f 100644
--- a/cypress/integration/users_test.spec.ts
+++ b/cypress/integration/users_test.spec.ts
@@ -1,9 +1,17 @@
 import SidebarPage from "../support/pages/admin_console/SidebarPage";
 import LoginPage from "../support/pages/LoginPage";
+import CreateUserPage from "../support/pages/admin_console/manage/users/CreateUserPage";
+import Masthead from "../support/pages/admin_console/Masthead";
+import ListingPage from "../support/pages/admin_console/ListingPage";
 
 describe("Users test", () => {
   const loginPage = new LoginPage();
   const sidebarPage = new SidebarPage();
+  const createUserPage = new CreateUserPage();
+  const masthead = new Masthead();
+  const listingPage = new ListingPage();
+
+  let itemId = "user_crud";
 
   describe("User creation", () => {
     beforeEach(function () {
@@ -13,10 +21,25 @@ describe("Users test", () => {
     });
 
     it("Go to create User page", () => {
-      cy.get("[data-testid=add-user").click();
+      createUserPage.goToCreateUser();
       cy.url().should("include", "users/add-user");
-      cy.get("[data-testid=cancel-create-user").click();
+
+      // Verify Cancel button works
+      createUserPage.cancel();
       cy.url().should("not.include", "/add-user");
     });
+
+    it("Create user test", function () {
+      itemId += "_" + (Math.random() + 1).toString(36).substring(7);
+ 
+      // Create
+      createUserPage.goToCreateUser();
+      createUserPage.fillRealmRoleData(itemId).save();
+
+      masthead.checkNotificationMessage("The user has been created");
+
+      sidebarPage.goToUsers();
+      listingPage.searchItem(itemId).itemExist(itemId);
+    });
   });
 });
diff --git a/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts b/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts
new file mode 100644
index 0000000000..e5e477af52
--- /dev/null
+++ b/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts
@@ -0,0 +1,41 @@
+export default class CreateUserPage {
+  usernameInput: string;
+  saveBtn: string;
+  cancelBtn: string;
+
+  constructor() {
+    this.usernameInput = "#kc-username";
+
+    this.saveBtn = "[data-testid=create-user]";
+    this.cancelBtn = "[data-testid=cancel-create-user]";
+  }
+
+  //#region General Settings
+  fillRealmRoleData(username: string) {
+    cy.get(this.usernameInput).clear();
+
+    if (username) {
+      cy.get(this.usernameInput).type(username);
+    }
+
+    return this;
+  }
+
+  goToCreateUser() {
+    cy.get("[data-testid=add-user").click();
+
+    return this;
+  }
+
+  save() {
+    cy.get(this.saveBtn).click();
+
+    return this;
+  }
+
+  cancel() {
+    cy.get(this.cancelBtn).click();
+
+    return this;
+  }
+}
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 55327626a3..1c02c2d4df 100644
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@@ -224,6 +224,7 @@ export const UserForm = ({
       </FormGroup>
       <ActionGroup>
         <Button
+          data-testid="create-user"
           isDisabled={!watchUsernameInput}
           variant="primary"
           type="submit"

From aa1448ca5645d7546b012d7e9bca961f431b9f24 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 4 Mar 2021 10:13:36 -0500
Subject: [PATCH 7/9] address PR feedback from Mark

---
 src/user/SearchUser.tsx   | 8 +++++++-
 src/user/UserForm.tsx     | 5 ++++-
 src/user/UsersSection.tsx | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/user/SearchUser.tsx b/src/user/SearchUser.tsx
index b8a15d9a1f..b47d367e32 100644
--- a/src/user/SearchUser.tsx
+++ b/src/user/SearchUser.tsx
@@ -12,6 +12,7 @@ import {
 } from "@patternfly/react-core";
 import { SearchIcon } from "@patternfly/react-icons";
 import { useForm } from "react-hook-form";
+import { useHistory, useRouteMatch } from "react-router-dom";
 
 type SearchUserProps = {
   onSearch: (search: string) => void;
@@ -20,6 +21,11 @@ type SearchUserProps = {
 export const SearchUser = ({ onSearch }: SearchUserProps) => {
   const { t } = useTranslation("users");
   const { register, handleSubmit } = useForm<{ search: string }>();
+  const { url } = useRouteMatch();
+  const history = useHistory();
+
+  const goToCreate = () => history.push(`${url}/add-user`);
+
   return (
     <EmptyState>
       <Title headingLevel="h4" size="lg">
@@ -44,7 +50,7 @@ export const SearchUser = ({ onSearch }: SearchUserProps) => {
           </InputGroup>
         </Form>
       </EmptyStateBody>
-      <Button variant="link" onClick={() => {}}>
+      <Button variant="link" onClick={goToCreate}>
         {t("createNewUser")}
       </Button>
     </EmptyState>
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 1c02c2d4df..128d778cbd 100644
--- a/src/user/UserForm.tsx
+++ b/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 } from "react-router-dom";
+import { useHistory, useRouteMatch } 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,6 +27,7 @@ export const UserForm = ({
 }: UserFormProps) => {
   const { t } = useTranslation("users");
   const { realm } = useRealm();
+  const { url } = useRouteMatch();
 
   const [
     isRequiredUserActionsDropdownOpen,
@@ -60,6 +61,8 @@ export const UserForm = ({
     setRequiredUserActionsDropdownOpen(false);
   };
 
+  const goToCreate = () => history.push(`${url}/add-user`);
+
   return (
     <FormAccess
       isHorizontal
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index 4fcba14380..7194db3305 100644
--- a/src/user/UsersSection.tsx
+++ b/src/user/UsersSection.tsx
@@ -188,7 +188,7 @@ export const UsersSection = () => {
                 message={t("noUsersFound")}
                 instructions={t("emptyInstructions")}
                 primaryActionText={t("createNewUser")}
-                onPrimaryAction={() => {}}
+                onPrimaryAction={goToCreate}
               />
             }
             toolbarItem={

From a534cfc35133b824ef98c13809838519654df2fa Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 4 Mar 2021 13:49:05 -0500
Subject: [PATCH 8/9] update cypress test to work on empty state and search
 page

---
 cypress/integration/users_test.spec.ts        |  7 ++++++-
 .../manage/users/CreateUserPage.ts            | 17 +++++++++++++++-
 .../list-empty-state/ListEmptyState.tsx       |  2 +-
 src/user/SearchUser.tsx                       |  4 ++--
 src/user/UserForm.tsx                         | 20 +++++++++----------
 src/user/UsersSection.tsx                     |  2 +-
 src/user/UsersTabs.tsx                        | 18 ++++++++++++++---
 src/user/messages.json                        |  1 +
 8 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/cypress/integration/users_test.spec.ts b/cypress/integration/users_test.spec.ts
index 4a3bc7079f..7a9442050a 100644
--- a/cypress/integration/users_test.spec.ts
+++ b/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");
diff --git a/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts b/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts
index e5e477af52..451027f911 100644
--- a/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts
+++ b/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;
   }
diff --git a/src/components/list-empty-state/ListEmptyState.tsx b/src/components/list-empty-state/ListEmptyState.tsx
index cc095f1c05..6ffc94b407 100644
--- a/src/components/list-empty-state/ListEmptyState.tsx
+++ b/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} />
         ) : (
diff --git a/src/user/SearchUser.tsx b/src/user/SearchUser.tsx
index b47d367e32..5ba8ced177 100644
--- a/src/user/SearchUser.tsx
+++ b/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>
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 128d778cbd..615da7db3d 100644
--- a/src/user/UserForm.tsx
+++ b/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>
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index 7194db3305..05e8221058 100644
--- a/src/user/UsersSection.tsx
+++ b/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) => {
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
index 35839710f6..d37b36f351 100644
--- a/src/user/UsersTabs.tsx
+++ b/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", {
diff --git a/src/user/messages.json b/src/user/messages.json
index dd069cf42c..8b37d0d01a 100644
--- a/src/user/messages.json
+++ b/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",

From cc2a3d2ee5a0a30236bb3ccac3868af217a30188 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 4 Mar 2021 13:55:36 -0500
Subject: [PATCH 9/9] update snapshot

---
 .../_tests_/__snapshots__/ListEmptyState.test.tsx.snap           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/list-empty-state/_tests_/__snapshots__/ListEmptyState.test.tsx.snap b/src/components/list-empty-state/_tests_/__snapshots__/ListEmptyState.test.tsx.snap
index e6e26f5ed7..89887b01bf 100644
--- a/src/components/list-empty-state/_tests_/__snapshots__/ListEmptyState.test.tsx.snap
+++ b/src/components/list-empty-state/_tests_/__snapshots__/ListEmptyState.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<ListEmptyState /> render 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-empty-state pf-m-lg"
+    data-testid="empty-state"
   >
     <div
       class="pf-c-empty-state__content"