Realm role attributes (#247)

* add role attributes, WIP

* WIP role attributes

* fix storybook demos

* add attributes tab to realm roles section

* use TableComposable

* fix formatting

* css updates

* fix up styling of role attributes table

* fix check-types erros

* fix build

* fix formatting

* address PR feedback from Sarah

* add aria label to button

* fix storybook demos and address PR feedback from Erik

* fix merge conflict

* delete unnecessary files

* remove unused code

* remove BorderColor

* delete final comment

* fix formatting

Co-authored-by: Sarah Rambacher <srambach@redhat.com>

src/realm-roles/RealmRoleForm.tsx

@@ -26,20 +26,21 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { RoleAttributes } from "./RoleAttributes";
 
 type RoleFormType = {
-  form: UseFormMethods;
-  save: SubmitHandler<RoleRepresentation>;
-  editMode: boolean;
+  form?: UseFormMethods;
+  save?: SubmitHandler<RoleRepresentation>;
+  editMode?: boolean;
 };
 
-const RoleForm = ({ form, save, editMode }: RoleFormType) => {
+export const RoleForm = ({ form, save, editMode }: RoleFormType) => {
   const { t } = useTranslation("roles");
   const history = useHistory();
   return (
     <FormAccess
       isHorizontal
-      onSubmit={form.handleSubmit(save)}
+      onSubmit={form!.handleSubmit(save!)}
       role="manage-realm"
       className="pf-u-mt-lg"
     >
@@ -47,11 +48,11 @@ const RoleForm = ({ form, save, editMode }: RoleFormType) => {
         label={t("roleName")}
         fieldId="kc-name"
         isRequired
-        validated={form.errors.name ? "error" : "default"}
+        validated={form!.errors.name ? "error" : "default"}
         helperTextInvalid={t("common:required")}
       >
         <TextInput
-          ref={form.register({ required: true })}
+          ref={form!.register({ required: true })}
           type="text"
           id="kc-name"
           name="name"
@@ -62,15 +63,15 @@ const RoleForm = ({ form, save, editMode }: RoleFormType) => {
         label={t("description")}
         fieldId="kc-description"
         validated={
-          form.errors.description
+          form!.errors.description
             ? ValidatedOptions.error
             : ValidatedOptions.default
         }
-        helperTextInvalid={form.errors.description?.message}
+        helperTextInvalid={form!.errors.description?.message}
       >
         <TextArea
           name="description"
-          ref={form.register({
+          ref={form!.register({
             maxLength: {
               value: 255,
               message: t("common:maxLength", { length: 255 }),
@@ -78,7 +79,7 @@ const RoleForm = ({ form, save, editMode }: RoleFormType) => {
           })}
           type="text"
           validated={
-            form.errors.description
+            form!.errors.description
               ? ValidatedOptions.error
               : ValidatedOptions.default
           }
@@ -196,6 +197,12 @@ export const RealmRolesForm = () => {
             >
               <RoleForm form={form} save={save} editMode={true} />
             </Tab>
+            <Tab
+              eventKey={1}
+              title={<TabTitleText>{t("attributes")}</TabTitleText>}
+            >
+              <RoleAttributes />
+            </Tab>
           </Tabs>
         )}
         {!id && <RoleForm form={form} save={save} editMode={false} />}

src/realm-roles/RealmRoleTabs.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+import { useHistory, useParams } from "react-router-dom";
+import {
+  ActionGroup,
+  AlertVariant,
+  Button,
+  FormGroup,
+  Tab,
+  Tabs,
+  TabTitleText,
+  TextArea,
+  TextInput,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { Controller, useForm } from "react-hook-form";
+import { FormAccess } from "../components/form-access/FormAccess";
+
+import { useAlerts } from "../components/alert/Alerts";
+import { useAdminClient } from "../context/auth/AdminClient";
+import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
+import { RoleAttributes } from "./RoleAttributes";
+import "./RealmRolesSection.css";
+
+export const RolesTabs = () => {
+  const { t } = useTranslation("roles");
+  const { errors, control, setValue } = useForm<RoleRepresentation>();
+  const history = useHistory();
+  const [name, setName] = useState("");
+  const adminClient = useAdminClient();
+  const [activeTab, setActiveTab] = useState(0);
+
+  const { id } = useParams<{ id: string }>();
+
+  const { addAlert } = useAlerts();
+
+  useEffect(() => {
+    (async () => {
+      const fetchedRole = await adminClient.roles.findOneById({ id });
+      setName(fetchedRole.name!);
+      setupForm(fetchedRole);
+    })();
+  }, []);
+
+  const setupForm = (role: RoleRepresentation) => {
+    Object.entries(role).map((entry) => {
+      setValue(entry[0], entry[1]);
+    });
+  };
+
+  const save = async (role: RoleRepresentation) => {
+    try {
+      await adminClient.roles.updateById({ id }, role);
+      setupForm(role as RoleRepresentation);
+      addAlert(t("roleSaveSuccess"), AlertVariant.success);
+    } catch (error) {
+      addAlert(`${t("roleSaveError")} '${error}'`, AlertVariant.danger);
+    }
+  };
+
+  const form = useForm<RoleRepresentation>();
+
+  return (
+    <>
+      <Tabs
+        activeKey={activeTab}
+        onSelect={(_, key) => setActiveTab(key as number)}
+        isBox
+      >
+        <Tab eventKey={0} title={<TabTitleText>{t("details")}</TabTitleText>}>
+          <FormAccess
+            isHorizontal
+            onSubmit={form.handleSubmit(save)}
+            role="manage-realm"
+            className="pf-u-mt-lg"
+          >
+            <FormGroup
+              label={t("roleName")}
+              fieldId="kc-name"
+              isRequired
+              validated={errors.name ? "error" : "default"}
+              helperTextInvalid={t("common:required")}
+            >
+              {name ? (
+                <TextInput
+                  ref={form.register({ required: true })}
+                  type="text"
+                  id="kc-name"
+                  name="name"
+                  isReadOnly
+                />
+              ) : undefined}
+            </FormGroup>
+            <FormGroup label={t("description")} fieldId="kc-description">
+              <Controller
+                name="description"
+                defaultValue=""
+                control={control}
+                rules={{ maxLength: 255 }}
+                render={({ onChange, value }) => (
+                  <TextArea
+                    type="text"
+                    validated={
+                      errors.description
+                        ? ValidatedOptions.error
+                        : ValidatedOptions.default
+                    }
+                    id="kc-role-description"
+                    value={value}
+                    onChange={onChange}
+                  />
+                )}
+              />
+            </FormGroup>
+            <ActionGroup>
+              <Button variant="primary" type="submit">
+                {t("common:save")}
+              </Button>
+              <Button variant="link" onClick={() => history.push("/roles/")}>
+                {t("common:reload")}
+              </Button>
+            </ActionGroup>
+          </FormAccess>
+        </Tab>
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>{t("attributes")}</TabTitleText>}
+        >
+          <RoleAttributes />
+          <ActionGroup className="kc-role-attributes__action-group">
+            <Button variant="primary" type="submit">
+              {t("common:save")}
+            </Button>
+            <Button variant="link" onClick={() => history.push("/roles/")}>
+              {t("common:reload")}
+            </Button>
+          </ActionGroup>
+        </Tab>
+      </Tabs>
+    </>
+  );
+};

src/realm-roles/RealmRolesSection.css

@@ -0,0 +1,17 @@
+.kc-role-attributes__table {
+  /* even though the table is borderless, make the border under the th transparent */
+  --pf-c-table--border-width--base: 0;
+  --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
+}
+
+.kc-role-attributes__plus-icon {
+  /* shift the button left to adjust for table cell padding */
+  margin-left: calc(var(--pf-global--spacer--md) * -1);
+}
+
+.kc-role-attributes__action-group {
+  /* subtract the padding at the bottom of the table from the action group margin */
+  --pf-c-form__group--m-action--MarginTop: calc(
+    var(--pf-global--spacer--2xl) - var(--pf-global--spacer--sm)
+  );
+}

src/realm-roles/RoleAttributes.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable react/display-name */
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Button, ButtonVariant, TextInput } from "@patternfly/react-core";
+import { useForm } from "react-hook-form";
+import "./RealmRolesSection.css";
+import { useAdminClient } from "../context/auth/AdminClient";
+import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
+import { useTranslation } from "react-i18next";
+
+import {
+  TableComposable,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@patternfly/react-table";
+import { PlusCircleIcon } from "@patternfly/react-icons";
+
+export const RoleAttributes = () => {
+  const { t } = useTranslation("roles");
+  const { setValue } = useForm<RoleRepresentation>();
+  const [, setName] = useState("");
+
+  const adminClient = useAdminClient();
+
+  const { id } = useParams<{ id: string }>();
+
+  const columns = ["Key", "Value"];
+  const rows = [
+    [
+      <TextInput />,
+      <TextInput />,
+      <Button
+        id="kc-plus-icon"
+        variant={ButtonVariant.link}
+        tabIndex={-1}
+        className="kc-role-attributes__plus-icon"
+        aria-label={t("roles:addAttributeText")}
+      >
+        <PlusCircleIcon />
+      </Button>,
+    ],
+  ];
+
+  useEffect(() => {
+    (async () => {
+      const fetchedRole = await adminClient.roles.findOneById({ id });
+      setName(fetchedRole.name!);
+      setupForm(fetchedRole);
+    })();
+  }, []);
+
+  const setupForm = (role: RoleRepresentation) => {
+    Object.entries(role).map((entry) => {
+      setValue(entry[0], entry[1]);
+    });
+  };
+
+  return (
+    <TableComposable
+      className="kc-role-attributes__table"
+      aria-label="Role attribute keys and values"
+      variant="compact"
+      borders={false}
+    >
+      <Thead>
+        <Tr>
+          <Th id="kc-key-label" width={40}>
+            {columns[0]}
+          </Th>
+          <Th id="kc-value-label" width={40}>
+            {columns[1]}
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, rowIndex) => (
+          <Tr key={rowIndex}>
+            {row.map((cell, cellIndex) => (
+              <Td
+                key={`${rowIndex}_${cellIndex}`}
+                id={`text-input-${rowIndex}-${cellIndex}`}
+                dataLabel={columns[cellIndex]}
+              >
+                {cell}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};

src/realm-roles/messages.json

@@ -1,5 +1,7 @@
 {
   "roles": {
+    "attributes": "Attributes",
+    "addAttributeText": "Add an attribute",
     "title": "Realm roles",
     "createRole": "Create role",
     "importRole": "Import role",

src/stories/RoleAttributes.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { MockAdminClient } from "./MockAdminClient";
+import { MemoryRouter, Route } from "react-router-dom";
+import rolesMock from "../realm-roles/__tests__/mock-roles.json";
+import { RolesTabs } from "../realm-roles/RealmRoleTabs";
+
+export default {
+  title: "Roles tabs",
+  component: RolesTabs,
+} as Meta;
+
+export const RoleTabsExample = () => {
+  return (
+    <MockAdminClient mock={{ roles: { findOneById: () => rolesMock[0] } }}>
+      <MemoryRouter initialEntries={["/roles/1"]}>
+        <Route path="/roles/:id">
+          <RolesTabs />
+        </Route>
+      </MemoryRouter>
+    </MockAdminClient>
+  );
+};

src/stories/RoleDetails.stories.tsx

@@ -5,29 +5,12 @@ import { Meta } from "@storybook/react";
 import { MockAdminClient } from "./MockAdminClient";
 import { RealmRolesForm } from "../realm-roles/RealmRoleForm";
 
-import rolesMock from "../realm-roles/__tests__/mock-roles.json";
-import { MemoryRouter, Route } from "react-router-dom";
-
 export default {
-  title: "Role details tab",
+  title: "New role form",
   component: RealmRolesForm,
 } as Meta;
 
-export const RoleDetailsExample = () => {
-  return (
-    <Page>
-      <MockAdminClient mock={{ roles: { findOneById: () => rolesMock[0] } }}>
-        <MemoryRouter initialEntries={["/roles/1"]}>
-          <Route path="/roles/:id">
-            <RealmRolesForm />
-          </Route>
-        </MemoryRouter>
-      </MockAdminClient>
-    </Page>
-  );
-};
-
-export const RoleDetailsNew = () => {
+export const View = () => {
   return (
     <Page>
       <MockAdminClient>