From d9555e4c9fc1b5ae6cb7db0664fa46ef22b98edd Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 23 Jul 2024 13:38:08 +0200
Subject: [PATCH] made buttons disabled when all fields are readonly (#31436)

also renamed `isActive` to `isDisabled` to be more inline with PF

fixes: #31304

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 js/apps/admin-ui/src/clients/add/AccessSettings.tsx   |  2 +-
 js/apps/admin-ui/src/clients/add/LogoutPanel.tsx      |  2 +-
 .../admin-ui/src/clients/authorization/Settings.tsx   |  1 -
 .../admin-ui/src/components/form/FixedButtonGroup.tsx | 11 +++++------
 .../src/components/key-value-form/AttributeForm.tsx   |  2 +-
 js/apps/admin-ui/src/realm-settings/GeneralTab.tsx    |  1 -
 .../src/user-federation/UserFederationLdapForm.tsx    |  2 +-
 js/apps/admin-ui/src/user/UserForm.tsx                |  8 +++++++-
 8 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/js/apps/admin-ui/src/clients/add/AccessSettings.tsx b/js/apps/admin-ui/src/clients/add/AccessSettings.tsx
index 624b1f677c..04d3c81a02 100644
--- a/js/apps/admin-ui/src/clients/add/AccessSettings.tsx
+++ b/js/apps/admin-ui/src/clients/add/AccessSettings.tsx
@@ -42,7 +42,7 @@ export const AccessSettings = ({
           name="settings"
           save={save}
           reset={reset}
-          isActive={!isManager}
+          isDisabled={isManager}
         />
       )}
     </FormAccess>
diff --git a/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx b/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
index c21c3c3db5..c95d47a62d 100644
--- a/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
+++ b/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
@@ -157,7 +157,7 @@ export const LogoutPanel = ({
         name="settings"
         save={save}
         reset={reset}
-        isActive={isManager}
+        isDisabled={!isManager}
       />
     </FormAccess>
   );
diff --git a/js/apps/admin-ui/src/clients/authorization/Settings.tsx b/js/apps/admin-ui/src/clients/authorization/Settings.tsx
index ebf7b00364..8908eb4af1 100644
--- a/js/apps/admin-ui/src/clients/authorization/Settings.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/Settings.tsx
@@ -155,7 +155,6 @@ export const AuthorizationSettings = ({ clientId }: { clientId: string }) => {
         <FixedButtonsGroup
           name="authenticationSettings"
           reset={() => reset(resource)}
-          isActive
           isSubmit
         />
       </FormAccess>
diff --git a/js/apps/admin-ui/src/components/form/FixedButtonGroup.tsx b/js/apps/admin-ui/src/components/form/FixedButtonGroup.tsx
index 0c8159357d..1fad64e0df 100644
--- a/js/apps/admin-ui/src/components/form/FixedButtonGroup.tsx
+++ b/js/apps/admin-ui/src/components/form/FixedButtonGroup.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from "react-i18next";
 import { ActionGroup, ActionGroupProps, Button } from "@patternfly/react-core";
-import { PropsWithChildren } from "react";
 
 import style from "./fixed-buttons.module.css";
 
@@ -11,7 +10,7 @@ type FixedButtonGroupProps = ActionGroupProps & {
   reset?: () => void;
   resetText?: string;
   isSubmit?: boolean;
-  isActive?: boolean;
+  isDisabled?: boolean;
 };
 
 export const FixedButtonsGroup = ({
@@ -21,16 +20,16 @@ export const FixedButtonsGroup = ({
   reset,
   resetText,
   isSubmit = false,
-  isActive = true,
+  isDisabled = false,
   children,
   ...rest
-}: PropsWithChildren<FixedButtonGroupProps>) => {
+}: FixedButtonGroupProps) => {
   const { t } = useTranslation();
   return (
     <ActionGroup className={style.buttonGroup} {...rest}>
       {(save || isSubmit) && (
         <Button
-          isDisabled={!isActive}
+          isDisabled={isDisabled}
           data-testid={`${name}-save`}
           onClick={() => save?.()}
           type={isSubmit ? "submit" : "button"}
@@ -40,7 +39,7 @@ export const FixedButtonsGroup = ({
       )}
       {reset && (
         <Button
-          isDisabled={!isActive}
+          isDisabled={isDisabled}
           data-testid={`${name}-revert`}
           variant="link"
           onClick={() => reset()}
diff --git a/js/apps/admin-ui/src/components/key-value-form/AttributeForm.tsx b/js/apps/admin-ui/src/components/key-value-form/AttributeForm.tsx
index 0953a55092..891c1935b1 100644
--- a/js/apps/admin-ui/src/components/key-value-form/AttributeForm.tsx
+++ b/js/apps/admin-ui/src/components/key-value-form/AttributeForm.tsx
@@ -40,7 +40,7 @@ export const AttributesForm = ({
         <KeyValueInput name={name} isDisabled={isDisabled} />
       </FormProvider>
       {!noSaveCancelButtons && (
-        <FixedButtonsGroup name="attributes" reset={reset} isActive isSubmit />
+        <FixedButtonsGroup name="attributes" reset={reset} isSubmit />
       )}
     </FormAccess>
   );
diff --git a/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx b/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
index 60edfa5d94..9668574cc5 100644
--- a/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
@@ -268,7 +268,6 @@ function RealmSettingsGeneralTabForm({
           <FixedButtonsGroup
             name="realmSettingsGeneralTab"
             reset={setupForm}
-            isActive
             isSubmit
           />
         </FormAccess>
diff --git a/js/apps/admin-ui/src/user-federation/UserFederationLdapForm.tsx b/js/apps/admin-ui/src/user-federation/UserFederationLdapForm.tsx
index 8f3b789f3a..4e7919cd6e 100644
--- a/js/apps/admin-ui/src/user-federation/UserFederationLdapForm.tsx
+++ b/js/apps/admin-ui/src/user-federation/UserFederationLdapForm.tsx
@@ -75,7 +75,7 @@ export const UserFederationLdapForm = ({
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <FixedButtonsGroup
           name="ldap"
-          isActive={form.formState.isDirty}
+          isDisabled={!form.formState.isDirty}
           isSubmit
         >
           <Button
diff --git a/js/apps/admin-ui/src/user/UserForm.tsx b/js/apps/admin-ui/src/user/UserForm.tsx
index 5e28fde25e..7553071244 100644
--- a/js/apps/admin-ui/src/user/UserForm.tsx
+++ b/js/apps/admin-ui/src/user/UserForm.tsx
@@ -144,6 +144,12 @@ export const UserForm = ({
     }
   };
 
+  const allFieldsReadOnly = () =>
+    user?.userProfileMetadata?.attributes &&
+    !user?.userProfileMetadata?.attributes
+      ?.map((a) => a.readOnly)
+      .reduce((p, c) => p && c, true);
+
   return (
     <FormAccess
       isHorizontal
@@ -342,7 +348,7 @@ export const UserForm = ({
         saveText={user?.id ? t("save") : t("create")}
         reset={onFormReset}
         resetText={user?.id ? t("revert") : t("cancel")}
-        isActive
+        isDisabled={allFieldsReadOnly()}
         isSubmit
       />
     </FormAccess>