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:
parent
fc80cc75fe
commit
d9555e4c9f
8 changed files with 16 additions and 13 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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()}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -268,7 +268,6 @@ function RealmSettingsGeneralTabForm({
|
||||||
<FixedButtonsGroup
|
<FixedButtonsGroup
|
||||||
name="realmSettingsGeneralTab"
|
name="realmSettingsGeneralTab"
|
||||||
reset={setupForm}
|
reset={setupForm}
|
||||||
isActive
|
|
||||||
isSubmit
|
isSubmit
|
||||||
/>
|
/>
|
||||||
</FormAccess>
|
</FormAccess>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue