From d8a8b3f1be0c87c1fbbaa79c9a082d6c133b3e39 Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Tue, 9 Apr 2024 15:58:26 +0200
Subject: [PATCH] Do not nest components in `NewClientPolicy` (#28549)

Signed-off-by: Jon Koops <jonkoops@gmail.com>
---
 ...ientPolicyForm.tsx => NewClientPolicy.tsx} | 136 ++++++++----------
 .../realm-settings/routes/AddClientPolicy.tsx |   4 +-
 .../routes/EditClientPolicy.tsx               |   4 +-
 3 files changed, 60 insertions(+), 84 deletions(-)
 rename js/apps/admin-ui/src/realm-settings/{NewClientPolicyForm.tsx => NewClientPolicy.tsx} (91%)

diff --git a/js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx b/js/apps/admin-ui/src/realm-settings/NewClientPolicy.tsx
similarity index 91%
rename from js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx
rename to js/apps/admin-ui/src/realm-settings/NewClientPolicy.tsx
index eb8d3a558e..b11a8f5f1e 100644
--- a/js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx
+++ b/js/apps/admin-ui/src/realm-settings/NewClientPolicy.tsx
@@ -48,9 +48,9 @@ import { toEditClientPolicyCondition } from "./routes/EditCondition";
 
 import "./realm-settings-section.css";
 
-type NewClientPolicyForm = Required<ClientPolicyRepresentation>;
+type FormFields = Required<ClientPolicyRepresentation>;
 
-const defaultValues: NewClientPolicyForm = {
+const defaultValues: FormFields = {
   name: "",
   description: "",
   conditions: [],
@@ -63,7 +63,7 @@ type PolicyDetailAttributes = {
   name: string;
 };
 
-export default function NewClientPolicyForm() {
+export default function NewClientPolicy() {
   const { t } = useTranslation();
   const { realm } = useRealm();
   const { addAlert, addError } = useAlerts();
@@ -90,7 +90,7 @@ export default function NewClientPolicyForm() {
   const { policyName } = useParams<EditClientPolicyParams>();
 
   const navigate = useNavigate();
-  const form = useForm<NewClientPolicyForm>({
+  const form = useForm<FormFields>({
     mode: "onChange",
     defaultValues,
   });
@@ -98,75 +98,6 @@ export default function NewClientPolicyForm() {
 
   const formValues = form.getValues();
 
-  type ClientPoliciesHeaderProps = {
-    onChange: (value: boolean) => void;
-    value: boolean;
-    save: () => void;
-    realmName: string;
-  };
-
-  const ClientPoliciesHeader = ({
-    save,
-    onChange,
-    value,
-  }: ClientPoliciesHeaderProps) => {
-    const { t } = useTranslation();
-
-    const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
-      titleKey: "disablePolicyConfirmTitle",
-      messageKey: "disablePolicyConfirm",
-      continueButtonLabel: "disable",
-      onConfirm: () => {
-        onChange(!value);
-        save();
-      },
-    });
-
-    if (!policies) {
-      return <KeycloakSpinner />;
-    }
-
-    return (
-      <>
-        <DisableConfirm />
-        <DeleteConfirm />
-        <ViewHeader
-          titleKey={
-            showAddConditionsAndProfilesForm || policyName
-              ? policyName
-              : "createPolicy"
-          }
-          divider
-          dropdownItems={
-            showAddConditionsAndProfilesForm || policyName
-              ? [
-                  <DropdownItem
-                    key="delete"
-                    value="delete"
-                    onClick={() => {
-                      toggleDeleteDialog();
-                    }}
-                    data-testid="deleteClientPolicyDropdown"
-                  >
-                    {t("deleteClientPolicy")}
-                  </DropdownItem>,
-                ]
-              : undefined
-          }
-          isEnabled={value}
-          onToggle={(value) => {
-            if (!value) {
-              toggleDisableDialog();
-            } else {
-              onChange(value);
-              save();
-            }
-          }}
-        />
-      </>
-    );
-  };
-
   useFetch(
     async () => {
       const [policies, profiles] = await Promise.all([
@@ -422,6 +353,20 @@ export default function NewClientPolicyForm() {
     }
   };
 
+  const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
+    titleKey: "disablePolicyConfirmTitle",
+    messageKey: "disablePolicyConfirm",
+    continueButtonLabel: "disable",
+    onConfirm: () => {
+      form.setValue("enabled", !form.getValues().enabled);
+      save();
+    },
+  });
+
+  if (!policies) {
+    return <KeycloakSpinner />;
+  }
+
   return (
     <>
       <DeleteConditionConfirm />
@@ -439,12 +384,43 @@ export default function NewClientPolicyForm() {
         defaultValue={true}
         control={form.control}
         render={({ field }) => (
-          <ClientPoliciesHeader
-            value={field.value}
-            onChange={field.onChange}
-            realmName={realm}
-            save={save}
-          />
+          <>
+            <DisableConfirm />
+            <DeleteConfirm />
+            <ViewHeader
+              titleKey={
+                showAddConditionsAndProfilesForm || policyName
+                  ? policyName
+                  : "createPolicy"
+              }
+              divider
+              dropdownItems={
+                showAddConditionsAndProfilesForm || policyName
+                  ? [
+                      <DropdownItem
+                        key="delete"
+                        value="delete"
+                        onClick={() => {
+                          toggleDeleteDialog();
+                        }}
+                        data-testid="deleteClientPolicyDropdown"
+                      >
+                        {t("deleteClientPolicy")}
+                      </DropdownItem>,
+                    ]
+                  : undefined
+              }
+              isEnabled={field.value}
+              onToggle={(value) => {
+                if (!value) {
+                  toggleDisableDialog();
+                } else {
+                  field.onChange(value);
+                  save();
+                }
+              }}
+            />
+          </>
         )}
       />
       <PageSection variant="light">
@@ -461,7 +437,7 @@ export default function NewClientPolicyForm() {
               rules={{
                 required: { value: true, message: t("required") },
                 validate: (value) =>
-                  policies?.some((policy) => policy.name === value)
+                  policies.some((policy) => policy.name === value)
                     ? t("createClientProfileNameHelperText").toString()
                     : true,
               }}
diff --git a/js/apps/admin-ui/src/realm-settings/routes/AddClientPolicy.tsx b/js/apps/admin-ui/src/realm-settings/routes/AddClientPolicy.tsx
index 7dd0eec2c8..264f554c4c 100644
--- a/js/apps/admin-ui/src/realm-settings/routes/AddClientPolicy.tsx
+++ b/js/apps/admin-ui/src/realm-settings/routes/AddClientPolicy.tsx
@@ -5,11 +5,11 @@ import type { AppRouteObject } from "../../routes";
 
 export type AddClientPolicyParams = { realm: string };
 
-const NewClientPolicyForm = lazy(() => import("../NewClientPolicyForm"));
+const NewClientPolicy = lazy(() => import("../NewClientPolicy"));
 
 export const AddClientPolicyRoute: AppRouteObject = {
   path: "/:realm/realm-settings/client-policies/policies/add-client-policy",
-  element: <NewClientPolicyForm />,
+  element: <NewClientPolicy />,
   breadcrumb: (t) => t("createPolicy"),
   handle: {
     access: "manage-clients",
diff --git a/js/apps/admin-ui/src/realm-settings/routes/EditClientPolicy.tsx b/js/apps/admin-ui/src/realm-settings/routes/EditClientPolicy.tsx
index 218e86fc6e..2b4ff11ab9 100644
--- a/js/apps/admin-ui/src/realm-settings/routes/EditClientPolicy.tsx
+++ b/js/apps/admin-ui/src/realm-settings/routes/EditClientPolicy.tsx
@@ -8,11 +8,11 @@ export type EditClientPolicyParams = {
   policyName: string;
 };
 
-const NewClientPolicyForm = lazy(() => import("../NewClientPolicyForm"));
+const NewClientPolicy = lazy(() => import("../NewClientPolicy"));
 
 export const EditClientPolicyRoute: AppRouteObject = {
   path: "/:realm/realm-settings/client-policies/:policyName/edit-policy",
-  element: <NewClientPolicyForm />,
+  element: <NewClientPolicy />,
   breadcrumb: (t) => t("policyDetails"),
   handle: {
     access: "manage-realm",