From 51d80a42d58bc89e740962353c51c633b411929b Mon Sep 17 00:00:00 2001
From: Ahana Mallik <32836926+ahanamallik1@users.noreply.github.com>
Date: Mon, 10 Jun 2024 22:59:22 +0200
Subject: [PATCH] Activate Save Button in Client Scopes on first modification
 (#30269)

Signed-off-by: Ahana Mallik <ahanamallik@gmail.com>
---
 .../admin-ui/src/client-scopes/details/ScopeForm.tsx   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx b/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx
index 614cff7fbc..024696629b 100644
--- a/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx
+++ b/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx
@@ -33,6 +33,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
   const { t } = useTranslation();
   const form = useForm<ClientScopeDefaultOptionalType>({ mode: "onChange" });
   const { control, handleSubmit, setValue, formState } = form;
+  const { isDirty, isValid } = formState;
   const { realm } = useRealm();
 
   const providers = useLoginProviders();
@@ -60,12 +61,12 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
         "attributes.dynamic.scope.regexp",
       ),
       append ? `${value}:*` : value,
+      { shouldDirty: true }, // Mark the field as dirty when we modify the field
     );
 
   useEffect(() => {
     convertToFormValues(clientScope ?? {}, setValue);
   }, [clientScope]);
-
   return (
     <FormAccess
       role="manage-clients"
@@ -187,7 +188,12 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           min={0}
         />
         <ActionGroup>
-          <FormSubmitButton formState={formState}>{t("save")}</FormSubmitButton>
+          <FormSubmitButton
+            formState={formState}
+            disabled={!isDirty || !isValid}
+          >
+            {t("save")}
+          </FormSubmitButton>
           <Button
             variant="link"
             component={(props) => (