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>
This commit is contained in:
Erik Jan de Wit 2024-07-23 13:38:08 +02:00 committed by GitHub
parent fc80cc75fe
commit d9555e4c9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 16 additions and 13 deletions

View file

@ -42,7 +42,7 @@ export const AccessSettings = ({
name="settings" name="settings"
save={save} save={save}
reset={reset} reset={reset}
isActive={!isManager} isDisabled={isManager}
/> />
)} )}
</FormAccess> </FormAccess>

View file

@ -157,7 +157,7 @@ export const LogoutPanel = ({
name="settings" name="settings"
save={save} save={save}
reset={reset} reset={reset}
isActive={isManager} isDisabled={!isManager}
/> />
</FormAccess> </FormAccess>
); );

View file

@ -155,7 +155,6 @@ export const AuthorizationSettings = ({ clientId }: { clientId: string }) => {
<FixedButtonsGroup <FixedButtonsGroup
name="authenticationSettings" name="authenticationSettings"
reset={() => reset(resource)} reset={() => reset(resource)}
isActive
isSubmit isSubmit
/> />
</FormAccess> </FormAccess>

View file

@ -1,6 +1,5 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ActionGroup, ActionGroupProps, Button } from "@patternfly/react-core"; import { ActionGroup, ActionGroupProps, Button } from "@patternfly/react-core";
import { PropsWithChildren } from "react";
import style from "./fixed-buttons.module.css"; import style from "./fixed-buttons.module.css";
@ -11,7 +10,7 @@ type FixedButtonGroupProps = ActionGroupProps & {
reset?: () => void; reset?: () => void;
resetText?: string; resetText?: string;
isSubmit?: boolean; isSubmit?: boolean;
isActive?: boolean; isDisabled?: boolean;
}; };
export const FixedButtonsGroup = ({ export const FixedButtonsGroup = ({
@ -21,16 +20,16 @@ export const FixedButtonsGroup = ({
reset, reset,
resetText, resetText,
isSubmit = false, isSubmit = false,
isActive = true, isDisabled = false,
children, children,
...rest ...rest
}: PropsWithChildren<FixedButtonGroupProps>) => { }: FixedButtonGroupProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<ActionGroup className={style.buttonGroup} {...rest}> <ActionGroup className={style.buttonGroup} {...rest}>
{(save || isSubmit) && ( {(save || isSubmit) && (
<Button <Button
isDisabled={!isActive} isDisabled={isDisabled}
data-testid={`${name}-save`} data-testid={`${name}-save`}
onClick={() => save?.()} onClick={() => save?.()}
type={isSubmit ? "submit" : "button"} type={isSubmit ? "submit" : "button"}
@ -40,7 +39,7 @@ export const FixedButtonsGroup = ({
)} )}
{reset && ( {reset && (
<Button <Button
isDisabled={!isActive} isDisabled={isDisabled}
data-testid={`${name}-revert`} data-testid={`${name}-revert`}
variant="link" variant="link"
onClick={() => reset()} onClick={() => reset()}

View file

@ -40,7 +40,7 @@ export const AttributesForm = ({
<KeyValueInput name={name} isDisabled={isDisabled} /> <KeyValueInput name={name} isDisabled={isDisabled} />
</FormProvider> </FormProvider>
{!noSaveCancelButtons && ( {!noSaveCancelButtons && (
<FixedButtonsGroup name="attributes" reset={reset} isActive isSubmit /> <FixedButtonsGroup name="attributes" reset={reset} isSubmit />
)} )}
</FormAccess> </FormAccess>
); );

View file

@ -268,7 +268,6 @@ function RealmSettingsGeneralTabForm({
<FixedButtonsGroup <FixedButtonsGroup
name="realmSettingsGeneralTab" name="realmSettingsGeneralTab"
reset={setupForm} reset={setupForm}
isActive
isSubmit isSubmit
/> />
</FormAccess> </FormAccess>

View file

@ -75,7 +75,7 @@ export const UserFederationLdapForm = ({
<Form onSubmit={form.handleSubmit(onSubmit)}> <Form onSubmit={form.handleSubmit(onSubmit)}>
<FixedButtonsGroup <FixedButtonsGroup
name="ldap" name="ldap"
isActive={form.formState.isDirty} isDisabled={!form.formState.isDirty}
isSubmit isSubmit
> >
<Button <Button

View file

@ -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 ( return (
<FormAccess <FormAccess
isHorizontal isHorizontal
@ -342,7 +348,7 @@ export const UserForm = ({
saveText={user?.id ? t("save") : t("create")} saveText={user?.id ? t("save") : t("create")}
reset={onFormReset} reset={onFormReset}
resetText={user?.id ? t("revert") : t("cancel")} resetText={user?.id ? t("revert") : t("cancel")}
isActive isDisabled={allFieldsReadOnly()}
isSubmit isSubmit
/> />
</FormAccess> </FormAccess>