Create realm role page (#114)

* add Realm Roles page

* add section for no realm roles

* update role-model, fixed UI to match designs

* fix paths

* add storybook demo and role actions kebab

* fix build and clean up

* fix formatting

* fix lint

* fix test and update snapshot

* update snapshot after rebase

* PR feedback from Stan

* add back pf addons

* localize NoRealmRoles component

* changes to PR suggested by Sarah

* adds new role form

* fix path

* rename fields

* HTTP post is working

* move create msg

* cleaning up

* address PR feedback from Stan

* added validation and changed to text area

Co-authored-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

src/App.tsx

@@ -6,6 +6,7 @@ import { Header } from "./PageHeader";
 import { PageNav } from "./PageNav";
 import { Help } from "./components/help-enabler/HelpHeader";
 import { NewRealmForm } from "./realm/add/NewRealmForm";
+import { NewRoleForm } from "./realm-roles/add/NewRoleForm";
 import { NewClientForm } from "./clients/add/NewClientForm";
 import { NewClientScopeForm } from "./client-scopes/add/NewClientScopeForm";
 
@@ -34,7 +35,7 @@ export const App = () => {
           <Page header={<Header />} isManagedSidebar sidebar={<PageNav />}>
             <Switch>
               <Route exact path="/add-realm" component={NewRealmForm}></Route>
-
+              <Route exact path="/add-role" component={NewRoleForm}></Route>
               <Route exact path="/clients" component={ClientsSection}></Route>
               <Route
                 exact

src/common-messages.json

@@ -3,6 +3,7 @@
     "fullName": "{{givenName}} {{familyName}}",
     "unknownUser": "Anonymous",
 
+    "create": "Create",
     "save": "Save",
     "cancel": "Cancel",
     "continue": "Continue",

src/realm-roles/add/NewRoleForm.tsx

@@ -0,0 +1,96 @@
+import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Text,
+  PageSection,
+  TextContent,
+  FormGroup,
+  Form,
+  TextInput,
+  ActionGroup,
+  Button,
+  Divider,
+  AlertVariant,
+  TextArea,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+
+import { RoleRepresentation } from "../../model/role-model";
+import { HttpClientContext } from "../../http-service/HttpClientContext";
+import { useAlerts } from "../../components/alert/Alerts";
+import { Controller, useForm } from "react-hook-form";
+import { RealmContext } from "../../components/realm-context/RealmContext";
+
+export const NewRoleForm = () => {
+  const { t } = useTranslation("roles");
+  const httpClient = useContext(HttpClientContext)!;
+  const [addAlert, Alerts] = useAlerts();
+  const { realm } = useContext(RealmContext);
+
+  const { register, control, errors, handleSubmit } = useForm<
+    RoleRepresentation
+  >();
+
+  const save = async (role: RoleRepresentation) => {
+    try {
+      await httpClient.doPost(`admin/realms/${realm}/roles`, role);
+      addAlert(t("roleCreated"), AlertVariant.success);
+    } catch (error) {
+      addAlert(`${t("roleCreateError")} '${error}'`, AlertVariant.danger);
+    }
+  };
+
+  return (
+    <>
+      <Alerts />
+      <PageSection variant="light">
+        <TextContent>
+          <Text component="h1">{t("createRole")}</Text>
+        </TextContent>
+      </PageSection>
+      <Divider />
+      <PageSection variant="light">
+        <Form isHorizontal onSubmit={handleSubmit(save)}>
+          <FormGroup label={t("roleName")} isRequired fieldId="kc-role-name">
+            <TextInput
+              isRequired
+              type="text"
+              id="kc-role-name"
+              name="name"
+              ref={register()}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("description")}
+            fieldId="kc-role-description"
+            helperTextInvalid="Max length 255"
+            validated={
+              errors ? ValidatedOptions.error : ValidatedOptions.default
+            }
+          >
+            <Controller
+              name="description"
+              defaultValue=""
+              control={control}
+              rules={{ maxLength: 255 }}
+              render={({ onChange, value }) => (
+                <TextArea
+                  type="text"
+                  id="kc-role-description"
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
+            />
+          </FormGroup>
+          <ActionGroup>
+            <Button variant="primary" type="submit">
+              {t("common:create")}
+            </Button>
+            <Button variant="link">{t("common:cancel")}</Button>
+          </ActionGroup>
+        </Form>
+      </PageSection>
+    </>
+  );
+};

src/realm-roles/messages.json

@@ -13,7 +13,9 @@
     "generalSettings": "General Settings",
     "capabilityConfig": "Capability config",
     "roleImportError": "Could not import role",
-    "roleImportSuccess": "Role imported succeful",
+    "roleCreated": "Role created",
+    "roleCreateError": "Could not create role:",
+    "roleImportSuccess": "Role import successful",
     "roleDeletedSucess": "The role has been deleted",
     "roleDeleteError": "Could not delete role:",
     "roleAuthentication": "Role authentication"

src/realm/messages.json

@@ -3,7 +3,6 @@
     "uploadFile":"Upload JSON file",
     "realmName":"Realm name",
     "enabled":"Enabled",
-    "create":"Create",
     "createRealm": "Create realm",
     "realmExplain": "A realm manages a set of users, credentials, roles, and groups. A user belongs to and logs into a realm. Realms are isolated from one another and can only manage and authenticate the users that they control.",
     "noRealmRoles": "No realm roles",