Users: Adds user details tab and save/update functionality (#426)

* userDetails tab done, save function wip * userDetails update working * add cypress test * fix default value * PR feedback from Erik
2021-03-11 15:23:08 -05:00 · 2021-03-11 15:23:08 -05:00 · 28f1fdfda4
commit 28f1fdfda4
parent b035143781
9 changed files with 273 additions and 81 deletions
--- a/cypress/integration/users_test.spec.ts
+++ b/cypress/integration/users_test.spec.ts
@ -3,18 +3,31 @@ 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";
+import UserDetailsPage from "../support/pages/admin_console/manage/users/UserDetailsPage";
+import ModalUtils from "../support/util/ModalUtils";

 describe("Users test", () => {
  const loginPage = new LoginPage();
  const sidebarPage = new SidebarPage();
  const createUserPage = new CreateUserPage();
  const masthead = new Masthead();
+  const modalUtils = new ModalUtils();
  const listingPage = new ListingPage();
+  const userDetailsPage = new UserDetailsPage();

  let itemId = "user_crud";

  describe("User creation", () => {
-    beforeEach(function () {
+    beforeEach(() => {
+      /* 
+        Prevent unpredictable 401 errors from failing individual tests.
+        These are most often occurring during the login process:
+           GET /admin/serverinfo/
+           GET /admin/master/console/whoami
+      */
+      cy.on("uncaught:exception", () => {
+        return false;
+      });
      cy.visit("");
      loginPage.logIn();
      sidebarPage.goToUsers();
@ -39,12 +52,36 @@ describe("Users test", () => {

      createUserPage.goToCreateUser();

-      createUserPage.fillRealmRoleData(itemId).save();
+      createUserPage.createUser(itemId).save();

      masthead.checkNotificationMessage("The user has been created");

      sidebarPage.goToUsers();
+    });
+
+    it("Go to user details test", function () {
+      cy.wait(1000);
      listingPage.searchItem(itemId).itemExist(itemId);
+
+      cy.wait(1000);
+      listingPage.goToItemDetails(itemId);
+
+      userDetailsPage.fillUserData().save();
+
+      masthead.checkNotificationMessage("The user has been saved");
+
+      sidebarPage.goToUsers();
+      listingPage.searchItem(itemId).itemExist(itemId);
+
+      // Delete
+      cy.wait(1000);
+      listingPage.deleteItem(itemId);
+
+      modalUtils.checkModalTitle("Delete user?").confirmModal();
+
+      masthead.checkNotificationMessage("The user has been deleted");
+
+      listingPage.itemExist(itemId, false);
    });
  });
 });
--- a/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts
+++ b/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts
@ -3,21 +3,23 @@ export default class CreateUserPage {
  usersEmptyState: string;
  emptyStateCreateUserBtn: string;
  searchPgCreateUserBtn: string;
+  addUserBtn: 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]";
+    this.usersEmptyState = "empty-state";
+    this.emptyStateCreateUserBtn = "empty-primary-action";
+    this.searchPgCreateUserBtn = "create-new-user";
+    this.addUserBtn = "add-user";
+    this.saveBtn = "create-user";
+    this.cancelBtn = "cancel-create-user";
  }

  //#region General Settings
-  fillRealmRoleData(username: string) {
+  createUser(username: string) {
    cy.get(this.usernameInput).clear();

    if (username) {
@ -30,12 +32,12 @@ export default class CreateUserPage {
  goToCreateUser() {
    cy.wait(100);
    cy.get("body").then((body) => {
-      if (body.find(this.usersEmptyState).length > 0) {
-        cy.get(this.emptyStateCreateUserBtn).click();
+      if (body.find("[data-testid=empty-state]").length > 0) {
+        cy.getId(this.emptyStateCreateUserBtn).click();
      } else if (body.find("[data-testid=search-users-title]").length > 0) {
-        cy.get(this.searchPgCreateUserBtn).click();
+        cy.getId(this.searchPgCreateUserBtn).click();
      } else {
-        cy.get("[data-testid=add-user]").click();
+        cy.getId(this.addUserBtn).click();
      }
    });

@ -43,13 +45,13 @@ export default class CreateUserPage {
  }

  save() {
-    cy.get(this.saveBtn).click();
+    cy.getId(this.saveBtn).click();

    return this;
  }

  cancel() {
-    cy.get(this.cancelBtn).click();
+    cy.getId(this.cancelBtn).click();

    return this;
  }
--- a/cypress/support/pages/admin_console/manage/users/UserDetailsPage.ts
+++ b/cypress/support/pages/admin_console/manage/users/UserDetailsPage.ts
@ -0,0 +1,54 @@
+import { RequiredActionAlias } from "keycloak-admin/lib/defs/requiredActionProviderRepresentation";
+
+export default class UserDetailsPage {
+    saveBtn: string;
+    cancelBtn: string;
+    emailInput: string;
+    emailValue: string;
+    firstNameInput: string;
+    firstNameValue: string;
+    lastNameInput: string;
+    lastNameValue: string;
+    enabledSwitch: string;
+    enabledValue: boolean
+    requiredUserActions: RequiredActionAlias[];
+  
+    constructor() {
+      this.saveBtn = "save-user";
+      this.cancelBtn = "cancel-create-user";
+      this.emailInput = "email-input"
+      this.emailValue = "example" + "_" + (Math.random() + 1).toString(36).substring(7) + "@example.com";
+      this.firstNameInput = "firstName-input"
+      this.firstNameValue = "firstname";
+      this.lastNameInput = "lastName-input"
+      this.lastNameValue = "lastname";
+      this.enabledSwitch = "user-enabled-switch"
+      this.enabledValue = true;
+      this.requiredUserActions = [RequiredActionAlias.UPDATE_PASSWORD]
+    }
+  
+    
+    fillUserData() {
+  
+    cy.getId(this.emailInput).type(this.emailValue);
+    cy.getId(this.firstNameInput).type(this.firstNameValue);
+    cy.getId(this.lastNameInput).type(this.lastNameValue);
+    cy.getId(this.enabledSwitch).check({ force: true });
+
+  
+      return this;
+    }
+  
+    save() {
+      cy.getId(this.saveBtn).click();
+  
+      return this;
+    }
+  
+    cancel() {
+      cy.getId(this.cancelBtn).click();
+  
+      return this;
+    }
+  }
+  
--- a/src/realm-roles/AssociatedRolesModal.tsx
+++ b/src/realm-roles/AssociatedRolesModal.tsx
@ -45,9 +45,6 @@ export const AssociatedRolesModal = (props: AssociatedRolesModalProps) => {
  const [name, setName] = useState("");
  const adminClient = useAdminClient();
  const [selectedRows, setSelectedRows] = useState<RoleRepresentation[]>([]);
-  const [allClientRoles, setAllClientRoles] = useState<RoleRepresentation[]>(
-    []
-  );

  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
  const [filterType, setFilterType] = useState("roles");
@ -116,9 +113,6 @@ export const AssociatedRolesModal = (props: AssociatedRolesModalProps) => {
      id,
    });

-    setAllClientRoles(rolesList);
-    console.log(allClientRoles);
-
    return alphabetize(rolesList).filter((role: RoleRepresentation) => {
      return (
        existingAdditionalRoles.find(
--- a/src/route-config.ts
+++ b/src/route-config.ts
@ -145,6 +145,12 @@ export const routes: RoutesFn = (t: TFunction) => [
    breadcrumb: t("users:createUser"),
    access: "manage-users",
  },
+  {
+    path: "/:realm/users/:id/:tab",
+    component: UsersTabs,
+    breadcrumb: t("users:userDetails"),
+    access: "manage-users",
+  },
  {
    path: "/:realm/sessions",
    component: SessionsSection,
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
  ActionGroup,
  Button,
@ -10,20 +10,26 @@ 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, useParams } 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";
 import { useRealm } from "../context/realm-context/RealmContext";
+import { asyncStateFetch, useAdminClient } from "../context/auth/AdminClient";
+import { useErrorHandler } from "react-error-boundary";
+import moment from "moment";

 export type UserFormProps = {
  form: UseFormMethods<UserRepresentation>;
  save: (user: UserRepresentation) => void;
+  editMode: boolean;
+  timestamp?: number;
 };

 export const UserForm = ({
-  form: { handleSubmit, register, errors, watch, control },
+  form: { handleSubmit, register, errors, watch, control, setValue, reset },
  save,
+  editMode,
 }: UserFormProps) => {
  const { t } = useTranslation("users");
  const { realm } = useRealm();
@ -32,33 +38,56 @@ export const UserForm = ({
    isRequiredUserActionsDropdownOpen,
    setRequiredUserActionsDropdownOpen,
  ] = useState(false);
-  const [selected, setSelected] = useState<string[]>([]);
  const history = useHistory();
+  const adminClient = useAdminClient();
+  const { id } = useParams<{ id: string }>();
+  const handleError = useErrorHandler();

  const watchUsernameInput = watch("username");
+  const [timestamp, setTimestamp] = useState(null);
+
+  useEffect(() => {
+    if (editMode) {
+      return asyncStateFetch(
+        () => adminClient.users.find({ username: id }),
+        (user) => {
+          setupForm(user[0]);
+        },
+        handleError
+      );
+    }
+  }, []);
+
+  const setupForm = (user: UserRepresentation) => {
+    reset();
+    Object.entries(user).map((entry) => {
+      console.log(entry[0], entry[1]);
+      if (entry[0] == "createdTimestamp") {
+        setTimestamp(entry[1]);
+      } else {
+        setValue(entry[0], entry[1]);
+      }
+    });
+  };

  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">
+    <SelectOption key={0} value="CONFIGURE_TOTP">
      {t("configureOTP")}
    </SelectOption>,
-    <SelectOption key={1} value="Update Password">
+    <SelectOption key={1} value="UPDATE_PASSWORD">
      {t("updatePassword")}
    </SelectOption>,
-    <SelectOption key={2} value="Update Profile">
+    <SelectOption key={2} value="UPDATE_PROFILE">
      {t("updateProfile")}
    </SelectOption>,
-    <SelectOption key={3} value="Verify Email">
+    <SelectOption key={3} value="VERIFY_EMAIL">
      {t("verifyEmail")}
    </SelectOption>,
-    <SelectOption key={4} value="Update User Locale">
-      {t("updateUserLocale")}
-    </SelectOption>,
  ];

  const clearSelection = () => {
-    setSelected([]);
    setRequiredUserActionsDropdownOpen(false);
  };

@ -69,20 +98,56 @@ export const UserForm = ({
      role="manage-users"
      className="pf-u-mt-lg"
    >
-      <FormGroup
-        label={t("username")}
-        fieldId="kc-username"
-        isRequired
-        validated={errors.username ? "error" : "default"}
-        helperTextInvalid={t("common:required")}
-      >
-        <TextInput
-          ref={register({ required: true })}
-          type="text"
-          id="kc-username"
-          name="username"
-        />
-      </FormGroup>
+      {editMode ? (
+        <>
+          <FormGroup
+            label={t("id")}
+            fieldId="kc-id"
+            isRequired
+            validated={errors.id ? "error" : "default"}
+            helperTextInvalid={t("common:required")}
+          >
+            <TextInput
+              ref={register({ required: !editMode })}
+              type="text"
+              id="kc-id"
+              name="id"
+              isReadOnly={editMode}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("createdAt")}
+            fieldId="kc-created-at"
+            isRequired
+            validated={errors.createdTimestamp ? "error" : "default"}
+            helperTextInvalid={t("common:required")}
+          >
+            <TextInput
+              value={moment(timestamp).format("MM/DD/YY hh:MM:ss A")}
+              type="text"
+              id="kc-created-at"
+              name="createdTimestamp"
+              isReadOnly={editMode}
+            />
+          </FormGroup>
+        </>
+      ) : (
+        <FormGroup
+          label={t("username")}
+          fieldId="kc-username"
+          isRequired
+          validated={errors.username ? "error" : "default"}
+          helperTextInvalid={t("common:required")}
+        >
+          <TextInput
+            ref={register()}
+            type="text"
+            id="kc-username"
+            name="username"
+            isReadOnly={editMode}
+          />
+        </FormGroup>
+      )}
      <FormGroup
        label={t("email")}
        fieldId="kc-description"
@ -96,6 +161,7 @@ export const UserForm = ({
          type="email"
          id="kc-email"
          name="email"
+          data-testid="email-input"
          aria-label={t("emailInput")}
        />
      </FormGroup>
@ -112,15 +178,16 @@ export const UserForm = ({
        }
      >
        <Controller
-          name="user-email-verified"
+          name="emailVerified"
          defaultValue={false}
          control={control}
          render={({ onChange, value }) => (
            <Switch
+              data-testid="email-verified-switch"
              id={"kc-user-email-verified"}
              isDisabled={false}
-              onChange={(value) => onChange([`${value}`])}
-              isChecked={value[0] === "true"}
+              onChange={(value) => onChange(value)}
+              isChecked={value}
              label={t("common:on")}
              labelOff={t("common:off")}
            />
@ -135,6 +202,7 @@ export const UserForm = ({
      >
        <TextInput
          ref={register()}
+          data-testid="firstName-input"
          type="text"
          id="kc-firstname"
          name="firstName"
@ -147,6 +215,7 @@ export const UserForm = ({
      >
        <TextInput
          ref={register()}
+          data-testid="lastName-input"
          type="text"
          id="kc-lastname"
          name="lastName"
@ -165,15 +234,16 @@ export const UserForm = ({
        }
      >
        <Controller
-          name="user-enabled"
+          name="enabled"
          defaultValue={false}
          control={control}
          render={({ onChange, value }) => (
            <Switch
+              data-testid="user-enabled-switch"
              id={"kc-user-enabled"}
              isDisabled={false}
-              onChange={(value) => onChange([`${value}`])}
-              isChecked={value[0] === "true"}
+              onChange={(value) => onChange(value)}
+              isChecked={value}
              label={t("common:on")}
              labelOff={t("common:off")}
            />
@ -194,12 +264,13 @@ export const UserForm = ({
        }
      >
        <Controller
-          name="required-user-actions"
-          defaultValue={["0"]}
+          name="requiredActions"
+          defaultValue={[]}
          typeAheadAriaLabel="Select an action"
          control={control}
-          render={() => (
+          render={({ onChange, value }) => (
            <Select
+              data-testid="required-actions-select"
              placeholderText="Select action"
              toggleId="kc-required-user-actions"
              onToggle={() =>
@ -208,13 +279,13 @@ export const UserForm = ({
                )
              }
              isOpen={isRequiredUserActionsDropdownOpen}
-              selections={selected}
-              onSelect={(_, value) => {
-                const option = value as string;
-                if (selected.includes(option)) {
-                  setSelected(selected.filter((item) => item !== option));
+              selections={value}
+              onSelect={(_, v) => {
+                const option = v as string;
+                if (value.includes(option)) {
+                  onChange(value.filter((item: string) => item !== option));
                } else {
-                  setSelected([...selected, option]);
+                  onChange([...value, option]);
                }
              }}
              onClear={clearSelection}
@ -223,16 +294,16 @@ export const UserForm = ({
              {requiredUserActionsOptions}
            </Select>
          )}
-        ></Controller>
+        />
      </FormGroup>
      <ActionGroup>
        <Button
-          data-testid="create-user"
-          isDisabled={!watchUsernameInput}
+          data-testid={!editMode ? "create-user" : "save-user"}
+          isDisabled={!editMode && !watchUsernameInput}
          variant="primary"
          type="submit"
        >
-          {t("common:Create")}
+          {!editMode ? t("common:Create") : t("common:Save")}
        </Button>
        <Button
          data-testid="cancel-create-user"
--- a/src/user/UsersSection.tsx
+++ b/src/user/UsersSection.tsx
@ -28,7 +28,7 @@ import { emptyFormatter } from "../util";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";

 import "./user-section.css";
-import { useHistory, useRouteMatch } from "react-router-dom";
+import { Link, useHistory, useRouteMatch } from "react-router-dom";

 type BruteUser = UserRepresentation & {
  brute?: Record<string, object>;
@ -71,6 +71,14 @@ export const UsersSection = () => {
    );
  }, []);

+  const UserDetailLink = (user: UserRepresentation) => (
+    <>
+      <Link key={user.username} to={`${url}/${user.username}/details`}>
+        {user.username}
+      </Link>
+    </>
+  );
+
  const loader = async (first?: number, max?: number, search?: string) => {
    const params: { [name: string]: string | number } = {
      first: first!,
@ -221,6 +229,7 @@ export const UsersSection = () => {
              {
                name: "username",
                displayKey: "users:username",
+                cellRenderer: UserDetailLink,
              },
              {
                name: "email",
--- a/src/user/UsersTabs.tsx
+++ b/src/user/UsersTabs.tsx
@ -1,5 +1,10 @@
 import React from "react";
-import { AlertVariant, PageSection } from "@patternfly/react-core";
+import {
+  AlertVariant,
+  PageSection,
+  Tab,
+  TabTitleText,
+} from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";

@ -8,7 +13,8 @@ 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";
+import { useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";

 export const UsersTabs = () => {
  const { t } = useTranslation("roles");
@ -18,20 +24,18 @@ export const UsersTabs = () => {

  const adminClient = useAdminClient();
  const form = useForm<UserRepresentation>({ mode: "onChange" });
+  const { id } = useParams<{ id: string }>();

  const save = async (user: UserRepresentation) => {
    try {
-      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("/")));
+      if (id) {
+        await adminClient.users.update({ id: user.id! }, user);
+        addAlert(t("users:userSaved"), AlertVariant.success);
+      } else {
+        await adminClient.users.create(user);
+        addAlert(t("users:userCreated"), AlertVariant.success);
+        history.push(url.substr(0, url.lastIndexOf("/")));
+      }
    } catch (error) {
      addAlert(
        t("users:userCreateError", {
@ -45,12 +49,23 @@ export const UsersTabs = () => {
  return (
    <>
      <ViewHeader
-        titleKey={t("users:createUser")}
+        titleKey={id! || t("users:createUser")}
        subKey=""
        dividerComponent="div"
      />
      <PageSection variant="light">
-        <UserForm form={form} save={save} />
+        {id && (
+          <KeycloakTabs isBox>
+            <Tab
+              eventKey="details"
+              data-testid="user-details-tab"
+              title={<TabTitleText>{t("details")}</TabTitleText>}
+            >
+              <UserForm form={form} save={save} editMode={true} />
+            </Tab>
+          </KeycloakTabs>
+        )}
+        {!id && <UserForm form={form} save={save} editMode={false} />}
      </PageSection>
    </>
  );
--- a/src/user/messages.json
+++ b/src/user/messages.json
@ -8,6 +8,8 @@
    "noUsersFound": "No users found",
    "noUsersFoundError": "No users found due to {{error}}",
    "emptyInstructions": "Change your search criteria or add a user",
+    "id": "ID",
+    "createdAt": "Created at",
    "username": "Username",
    "email": "Email",
    "emailVerified": "Email verified",
@ -28,6 +30,8 @@
    "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",
+    "userSaved": "The user has been saved",
+    "userDetails": "User details",
    "userCreateError": "Could not create user: {{error}}",
    "userDeletedSuccess": "The user has been deleted",
    "userDeletedError": "The user could not be deleted {{error}}",