user details WIP

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;

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,

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>
+  );
+};

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

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>
+    </>
+  );
+};

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}}",