Realm Roles: Implements Reload Function (#308)

* refresh

* add hook

* reload WIP

* pass down defaultValues

* log stmt

* reload working on details form

* call with Erik

* format

* format

* lint

* fix reload after save

src/realm-roles/RealmRoleForm.tsx

@@ -17,9 +17,15 @@ export type RealmRoleFormProps = {
   form: UseFormMethods;
   save: SubmitHandler<RoleRepresentation>;
   editMode: boolean;
+  reset: () => void;
 };
 
-export const RealmRoleForm = ({ form, save, editMode }: RealmRoleFormProps) => {
+export const RealmRoleForm = ({
+  form,
+  save,
+  editMode,
+  reset,
+}: RealmRoleFormProps) => {
   const { t } = useTranslation("roles");
 
   return (
@@ -75,7 +81,7 @@ export const RealmRoleForm = ({ form, save, editMode }: RealmRoleFormProps) => {
         <Button variant="primary" type="submit">
           {t("common:save")}
         </Button>
-        <Button variant="link">
+        <Button onClick={reset} variant="link">
           {editMode ? t("common:reload") : t("common:cancel")}
         </Button>
       </ActionGroup>

src/realm-roles/RealmRoleTabs.tsx

@@ -51,6 +51,7 @@ export const RealmRoleTabs = () => {
   const [name, setName] = useState("");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
+  const [role, setRole] = useState<RoleRepresentation>();
 
   const { id } = useParams<{ id: string }>();
 
@@ -62,6 +63,7 @@ export const RealmRoleTabs = () => {
         const fetchedRole = await adminClient.roles.findOneById({ id });
         setName(fetchedRole.name!);
         setupForm(fetchedRole);
+        setRole(fetchedRole);
       } else {
         setName(t("createRole"));
       }
@@ -78,6 +80,11 @@ export const RealmRoleTabs = () => {
     });
   };
 
+  // reset form to default values
+  const reset = () => {
+    setupForm(role!);
+  };
+
   const save = async (role: RoleRepresentation) => {
     try {
       if (id) {
@@ -87,6 +94,8 @@ export const RealmRoleTabs = () => {
             (role.attributes as unknown) as KeyValueType[]
           );
         }
+        setRole(role!);
+        setupForm(role!);
         await adminClient.roles.updateById({ id }, role);
       } else {
         await adminClient.roles.create(role);
@@ -149,17 +158,29 @@ export const RealmRoleTabs = () => {
               eventKey="details"
               title={<TabTitleText>{t("details")}</TabTitleText>}
             >
-              <RealmRoleForm form={form} save={save} editMode={true} />
+              <RealmRoleForm
+                reset={reset}
+                form={form}
+                save={save}
+                editMode={true}
+              />
             </Tab>
             <Tab
               eventKey="attributes"
               title={<TabTitleText>{t("attributes")}</TabTitleText>}
             >
-              <RoleAttributes form={form} save={save} />
+              <RoleAttributes form={form} save={save} reset={reset} />
             </Tab>
           </KeycloakTabs>
         )}
-        {!id && <RealmRoleForm form={form} save={save} editMode={false} />}
+        {!id && (
+          <RealmRoleForm
+            reset={reset}
+            form={form}
+            save={save}
+            editMode={false}
+          />
+        )}
       </PageSection>
     </>
   );

src/realm-roles/RoleAttributes.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ActionGroup, Button, TextInput } from "@patternfly/react-core";
-import { SubmitHandler, useFieldArray, UseFormMethods } from "react-hook-form";
+import { useFieldArray, UseFormMethods } from "react-hook-form";
 import "./RealmRolesSection.css";
 import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
 
@@ -20,10 +20,11 @@ export type KeyValueType = { key: string; value: string };
 
 type RoleAttributesProps = {
   form: UseFormMethods;
-  save: SubmitHandler<RoleRepresentation>;
+  save: (role: RoleRepresentation) => void;
+  reset: () => void;
 };
 
-export const RoleAttributes = ({ form, save }: RoleAttributesProps) => {
+export const RoleAttributes = ({ form, save, reset }: RoleAttributesProps) => {
   const { t } = useTranslation("roles");
 
   const { fields, append, remove } = useFieldArray({
@@ -78,9 +79,7 @@ export const RoleAttributes = ({ form, save }: RoleAttributesProps) => {
                 >
                   <TextInput
                     name={`attributes[${rowIndex}].value`}
-                    ref={form.register({
+                    ref={form.register({})}
-                      required: true,
-                    })}
                     aria-label="value-input"
                     defaultValue={attribute.value}
                   />
@@ -127,7 +126,9 @@ export const RoleAttributes = ({ form, save }: RoleAttributesProps) => {
           >
             {t("common:save")}
           </Button>
-          <Button variant="link">{t("common:reload")}</Button>
+          <Button variant="link" onClick={reset}>
+            {t("common:reload")}{" "}
+          </Button>
         </ActionGroup>
       </FormAccess>
     </>