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,8 +30,12 @@ export const RealmRoleForm = ({
   reset,
 }: RealmRoleFormProps) => {
   const { t } = useTranslation("roles");
+  const history = useHistory();
+  const { realm: realmName } = useRealm();
 
   return (
+    <>
+      <ViewHeader titleKey={t("createRole")} />
       <PageSection variant="light">
         <FormAccess
           isHorizontal
@@ -92,11 +99,17 @@ export const RealmRoleForm = ({
             >
               {t("common:save")}
             </Button>
-          <Button onClick={() => reset()} variant="link">
+            <Button
+              onClick={() =>
+                editMode ? reset() : history.push(`/${realmName}/roles`)
+              }
+              variant="link"
+            >
               {editMode ? t("common:revert") : t("common:cancel")}
             </Button>
           </ActionGroup>
         </FormAccess>
       </PageSection>
+    </>
   );
 };