Fixes header and cancel when adding realm roles (#2327)

* fix header and cancel btn

* fix issue with clients

src/realm-roles/RealmRoleForm.tsx

@@ -10,8 +10,11 @@ import {
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import type { UseFormMethods } from "react-hook-form";
+import { ViewHeader } from "../components/view-header/ViewHeader";
 import { FormAccess } from "../components/form-access/FormAccess";
 import type { AttributeForm } from "../components/attribute-form/AttributeForm";
+import { useRealm } from "../context/realm-context/RealmContext";
+import { useHistory } from "react-router-dom";
 
 export type RealmRoleFormProps = {
   form: UseFormMethods<AttributeForm>;
@@ -27,76 +30,86 @@ export const RealmRoleForm = ({
   reset,
 }: RealmRoleFormProps) => {
   const { t } = useTranslation("roles");
+  const history = useHistory();
+  const { realm: realmName } = useRealm();
 
   return (
-    <PageSection variant="light">
+    <>
-      <FormAccess
+      <ViewHeader titleKey={t("createRole")} />
-        isHorizontal
+      <PageSection variant="light">
-        onSubmit={handleSubmit(save)}
+        <FormAccess
-        role="manage-realm"
+          isHorizontal
-        className="pf-u-mt-lg"
+          onSubmit={handleSubmit(save)}
-      >
+          role="manage-realm"
-        <FormGroup
+          className="pf-u-mt-lg"
-          label={t("roleName")}
-          fieldId="kc-name"
-          isRequired
-          validated={errors.name ? "error" : "default"}
-          helperTextInvalid={t("common:required")}
         >
-          <TextInput
+          <FormGroup
-            ref={register({
+            label={t("roleName")}
-              required: !editMode,
+            fieldId="kc-name"
-              validate: (value: string) =>
+            isRequired
-                !!value.trim() || t("common:required").toString(),
+            validated={errors.name ? "error" : "default"}
-            })}
+            helperTextInvalid={t("common:required")}
-            type="text"
+          >
-            id="kc-name"
+            <TextInput
-            name="name"
+              ref={register({
-            isReadOnly={editMode}
+                required: !editMode,
-          />
+                validate: (value: string) =>
-        </FormGroup>
+                  !!value.trim() || t("common:required").toString(),
-        <FormGroup
+              })}
-          label={t("common:description")}
+              type="text"
-          fieldId="kc-description"
+              id="kc-name"
-          validated={
+              name="name"
-            errors.description
+              isReadOnly={editMode}
-              ? ValidatedOptions.error
+            />
-              : ValidatedOptions.default
+          </FormGroup>
-          }
+          <FormGroup
-          helperTextInvalid={errors.description?.message}
+            label={t("common:description")}
-        >
+            fieldId="kc-description"
-          <TextArea
-            name="description"
-            aria-label="description"
-            isDisabled={getValues().name?.includes("default-roles")}
-            ref={register({
-              maxLength: {
-                value: 255,
-                message: t("common:maxLength", { length: 255 }),
-              },
-            })}
-            type="text"
             validated={
               errors.description
                 ? ValidatedOptions.error
                 : ValidatedOptions.default
             }
-            id="kc-role-description"
+            helperTextInvalid={errors.description?.message}
-          />
-        </FormGroup>
-        <ActionGroup>
-          <Button
-            variant="primary"
-            onClick={save}
-            data-testid="realm-roles-save-button"
           >
-            {t("common:save")}
+            <TextArea
-          </Button>
+              name="description"
-          <Button onClick={() => reset()} variant="link">
+              aria-label="description"
-            {editMode ? t("common:revert") : t("common:cancel")}
+              isDisabled={getValues().name?.includes("default-roles")}
-          </Button>
+              ref={register({
-        </ActionGroup>
+                maxLength: {
-      </FormAccess>
+                  value: 255,
-    </PageSection>
+                  message: t("common:maxLength", { length: 255 }),
+                },
+              })}
+              type="text"
+              validated={
+                errors.description
+                  ? ValidatedOptions.error
+                  : ValidatedOptions.default
+              }
+              id="kc-role-description"
+            />
+          </FormGroup>
+          <ActionGroup>
+            <Button
+              variant="primary"
+              onClick={save}
+              data-testid="realm-roles-save-button"
+            >
+              {t("common:save")}
+            </Button>
+            <Button
+              onClick={() =>
+                editMode ? reset() : history.push(`/${realmName}/roles`)
+              }
+              variant="link"
+            >
+              {editMode ? t("common:revert") : t("common:cancel")}
+            </Button>
+          </ActionGroup>
+        </FormAccess>
+      </PageSection>
+    </>
   );
 };