Made form readonly and fixed initialisation (#2070)

* add the ablity for dynamic component to become
disabeled when used in a <FormAccess component

* add ability to manually make form readonly

* added readonly + fixed form initialize

fixes: #1898

* Update src/components/form-access/FormAccess.tsx

Co-authored-by: Jon Koops <jonkoops@gmail.com>

Co-authored-by: Jon Koops <jonkoops@gmail.com>

src/components/dynamic/BooleanComponent.tsx

@@ -11,6 +11,7 @@ export const BooleanComponent = ({
   label,
   helpText,
   defaultValue,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -32,6 +33,7 @@ export const BooleanComponent = ({
         render={({ onChange, value }) => (
           <Switch
             id={name!}
+            isDisabled={isDisabled}
             label={t("common:on")}
             labelOff={t("common:off")}
             isChecked={value === "true" || value === true}

src/components/dynamic/ClientSelectComponent.tsx

@@ -18,6 +18,7 @@ export const ClientSelectComponent = ({
   label,
   helpText,
   defaultValue,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -66,6 +67,7 @@ export const ClientSelectComponent = ({
             variant={SelectVariant.typeahead}
             onToggle={(open) => setOpen(open)}
             isOpen={open}
+            isDisabled={isDisabled}
             selections={value}
             onFilter={(_, value) => {
               setSearch(value);

src/components/dynamic/DynamicComponents.tsx

@@ -9,13 +9,16 @@ type DynamicComponentProps = {
   parentCallback?: (data: string[]) => void;
 };
 
-export const DynamicComponents = ({ properties }: DynamicComponentProps) => (
+export const DynamicComponents = ({
+  properties,
+  ...rest
+}: DynamicComponentProps) => (
   <>
     {properties.map((property) => {
       const componentType = property.type!;
       if (isValidComponentType(componentType) && property.name !== "scopes") {
         const Component = COMPONENTS[componentType];
-        return <Component key={property.name} {...property} />;
+        return <Component key={property.name} {...property} {...rest} />;
       } else {
         console.warn(`There is no editor registered for ${componentType}`);
       }

src/components/dynamic/ListComponent.tsx

@@ -17,6 +17,7 @@ export const ListComponent = ({
   helpText,
   defaultValue,
   options,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -38,6 +39,7 @@ export const ListComponent = ({
         render={({ onChange, value }) => (
           <Select
             toggleId={name}
+            isDisabled={isDisabled}
             onToggle={(toggle) => setOpen(toggle)}
             onSelect={(_, value) => {
               onChange(value as string);

src/components/dynamic/MultivaluedChipsComponent.tsx

@@ -23,6 +23,7 @@ export const MultivaluedChipsComponent = ({
   name,
   label,
   helpText,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -126,6 +127,7 @@ export const MultivaluedChipsComponent = ({
               ))}
             </ChipGroup>
             <Button
+              isDisabled={isDisabled}
               data-testid="select-scope-button"
               variant="secondary"
               onClick={() => {

src/components/dynamic/MultivaluedListComponent.tsx

@@ -17,6 +17,7 @@ export const MultiValuedListComponent = ({
   helpText,
   defaultValue,
   options,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -38,6 +39,7 @@ export const MultiValuedListComponent = ({
           <Select
             toggleId={name}
             data-testid={name}
+            isDisabled={isDisabled}
             chipGroupProps={{
               numChips: 3,
               expandedText: t("common:hide"),

src/components/dynamic/MultivaluedRoleComponent.tsx

@@ -20,6 +20,7 @@ export const MultivaluedRoleComponent = ({
   name,
   label,
   helpText,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { whoAmI } = useWhoAmI();
@@ -73,6 +74,7 @@ export const MultivaluedRoleComponent = ({
         rules={{ required: true }}
         render={({ onChange, value }) => (
           <Select
+            isDisabled={isDisabled}
             onToggle={(isExpanded) => setOpen(isExpanded)}
             isOpen={open}
             className="kc-role-select"

src/components/dynamic/MultivaluedScopesComponent.tsx

@@ -20,6 +20,7 @@ import type { EditClientPolicyConditionParams } from "../../realm-settings/route
 export const MultivaluedScopesComponent = ({
   defaultValue,
   name,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -111,6 +112,7 @@ export const MultivaluedScopesComponent = ({
                 ))}
               </ChipGroup>
               <Button
+                isDisabled={isDisabled}
                 data-testid="select-scope-button"
                 variant="secondary"
                 onClick={() => {

src/components/dynamic/MultivaluedStringComponent.tsx

@@ -10,6 +10,7 @@ export const MultiValuedStringComponent = ({
   name,
   label,
   helpText,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
 
@@ -24,6 +25,7 @@ export const MultiValuedStringComponent = ({
       <MultiLineInput
         name={`config.${name}`}
         aria-label={name}
+        isDisabled={isDisabled}
         addButtonLabel={t("addMultivaluedLabel", {
           fieldLabel: t(label!).toLowerCase(),
         })}

src/components/dynamic/RoleComponent.tsx

@@ -24,7 +24,12 @@ const RealmClient = (realm: string): ClientRepresentation => ({
   clientId: realm,
 });
 
-export const RoleComponent = ({ name, label, helpText }: ComponentProps) => {
+export const RoleComponent = ({
+  name,
+  label,
+  helpText,
+  isDisabled = false,
+}: ComponentProps) => {
   const { t } = useTranslation("dynamic");
 
   const adminClient = useAdminClient();
@@ -143,6 +148,7 @@ export const RoleComponent = ({ name, label, helpText }: ComponentProps) => {
               {clients && (
                 <Select
                   toggleId={`group-${name}`}
+                  isDisabled={isDisabled}
                   onToggle={() => setClientsOpen(!clientsOpen)}
                   isOpen={clientsOpen}
                   variant={SelectVariant.typeahead}

src/components/dynamic/ScriptComponent.tsx

@@ -12,6 +12,7 @@ export const ScriptComponent = ({
   label,
   helpText,
   defaultValue,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -35,6 +36,7 @@ export const ScriptComponent = ({
           <CodeEditor
             id={name!}
             data-testid={name}
+            isReadOnly={isDisabled}
             type="text"
             onChange={onChange}
             code={value}

src/components/dynamic/StringComponent.tsx

@@ -11,6 +11,7 @@ export const StringComponent = ({
   label,
   helpText,
   defaultValue,
+  isDisabled = false,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { register } = useFormContext();
@@ -26,6 +27,7 @@ export const StringComponent = ({
       <TextInput
         id={name!}
         data-testid={name}
+        isDisabled={isDisabled}
         ref={register()}
         type="text"
         name={`config.${name}`}

src/components/dynamic/components.ts

@@ -12,7 +12,10 @@ import { MultiValuedStringComponent } from "./MultivaluedStringComponent";
 import { MultiValuedListComponent } from "./MultivaluedListComponent";
 import { GroupComponent } from "./GroupComponent";
 
-export type ComponentProps = Omit<ConfigPropertyRepresentation, "type">;
+export type ComponentProps = Omit<ConfigPropertyRepresentation, "type"> & {
+  isDisabled?: boolean;
+};
+
 const ComponentTypes = [
   "String",
   "boolean",

src/components/form-access/FormAccess.tsx

@@ -41,6 +41,11 @@ export type FormAccessProps = FormProps & {
    * @type {boolean}
    */
   unWrap?: boolean;
+
+  /**
+   * Overwrite the fineGrainedAccess and make form regardless of access rights.
+   */
+  isReadOnly?: boolean;
 };
 
 /**
@@ -51,6 +56,7 @@ export const FormAccess: FunctionComponent<FormAccessProps> = ({
   children,
   role,
   fineGrainedAccess = false,
+  isReadOnly = false,
   unWrap = false,
   ...rest
 }) => {
@@ -107,7 +113,7 @@ export const FormAccess: FunctionComponent<FormAccessProps> = ({
     });
   };
 
-  const isDisabled = !hasAccess(role) && !fineGrainedAccess;
+  const isDisabled = isReadOnly || (!hasAccess(role) && !fineGrainedAccess);
 
   return (
     <>

src/realm-settings/ExecutorForm.tsx

@@ -24,7 +24,6 @@ import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/li
 import { ClientProfileParams, toClientProfile } from "./routes/ClientProfile";
 import { DynamicComponents } from "../components/dynamic/DynamicComponents";
 import type { ExecutorParams } from "./routes/Executor";
-import { convertToFormValues } from "../util";
 
 type ExecutorForm = {
   config: object;
@@ -57,28 +56,27 @@ export default function ExecutorForm() {
     ClientProfileRepresentation[]
   >([]);
   const [profiles, setProfiles] = useState<ClientProfileRepresentation[]>([]);
-  const form = useForm({ defaultValues });
+  const form = useForm({ defaultValues, shouldUnregister: false });
-  const { control, setValue, handleSubmit } = form;
+  const { control, reset, handleSubmit } = form;
   const editMode = !!executorName;
 
+  const setupForm = (profiles: ClientProfileRepresentation[]) => {
+    const profile = profiles.find((profile) => profile.name === profileName);
+    const executor = profile?.executors?.find(
+      (executor) => executor.executor === executorName
+    );
+    if (executor) reset({ config: executor.configuration });
+  };
+
   useFetch(
     () =>
       adminClient.clientPolicies.listProfiles({ includeGlobalProfiles: true }),
     (profiles) => {
-      setGlobalProfiles(profiles.globalProfiles ?? []);
+      setGlobalProfiles(profiles.globalProfiles!);
-      setProfiles(profiles.profiles ?? []);
+      setProfiles(profiles.profiles!);
 
-      const profile = profiles.profiles!.find(
+      setupForm(profiles.profiles!);
-        (profile) => profile.name === profileName
+      setupForm(profiles.globalProfiles!);
-      );
-
-      const profileExecutor = profile?.executors!.find(
-        (executor) => executor.executor === executorName
-      );
-
-      if (profileExecutor) {
-        convertToFormValues(profileExecutor, setValue);
-      }
     },
     []
   );
@@ -163,7 +161,12 @@ export default function ExecutorForm() {
         divider
       />
       <PageSection variant="light">
-        <FormAccess isHorizontal role="manage-realm" className="pf-u-mt-lg">
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          className="pf-u-mt-lg"
+          isReadOnly={!!globalProfile}
+        >
           <FormGroup
             label={t("executorType")}
             fieldId="kc-executorType"