POC: Disable ConfirmButton (#89539)

This commit is contained in:
Laura Fernández 2024-06-25 09:42:18 +02:00 committed by GitHub
parent 2035814059
commit fd96edaef7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 11 deletions

View File

@ -7,8 +7,8 @@ import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '../../themes';
import { Button, ButtonVariant } from '../Button';
import { Field } from '../Forms/Field';
import { Input } from '../Input/Input';
import { Box } from '../Layout/Box/Box';
import { Stack } from '../Layout/Stack/Stack';
import { JustifyContent } from '../Layout/types';
import { ResponsiveProp } from '../Layout/utils/responsiveness';
@ -40,6 +40,8 @@ export interface ConfirmContentProps {
onDismiss(): void;
/** Alternative action callback */
onAlternative?(): void;
/** Disable the confirm button and the confirm text input if needed */
disabled?: boolean;
}
export const ConfirmContent = ({
@ -55,13 +57,14 @@ export const ConfirmContent = ({
alternativeButtonLabel,
description,
justifyButtons = 'flex-end',
disabled,
}: ConfirmContentProps) => {
const [disabled, setDisabled] = useState(Boolean(confirmPromptText));
const [isDisabled, setIsDisabled] = useState(disabled);
const styles = useStyles2(getStyles);
const buttonRef = useRef<HTMLButtonElement>(null);
const onConfirmationTextChange = (event: React.FormEvent<HTMLInputElement>) => {
setDisabled(confirmPromptText?.toLowerCase().localeCompare(event.currentTarget.value.toLowerCase()) !== 0);
setIsDisabled(confirmPromptText?.toLowerCase().localeCompare(event.currentTarget.value.toLowerCase()) !== 0);
};
useEffect(() => {
@ -69,15 +72,15 @@ export const ConfirmContent = ({
}, []);
useEffect(() => {
setDisabled(Boolean(confirmPromptText));
}, [confirmPromptText]);
setIsDisabled(disabled ? true : Boolean(confirmPromptText));
}, [confirmPromptText, disabled]);
const onConfirmClick = async () => {
setDisabled(true);
setIsDisabled(true);
try {
await onConfirm();
} finally {
setDisabled(false);
setIsDisabled(false);
}
};
@ -91,9 +94,9 @@ export const ConfirmContent = ({
{confirmPromptText ? (
<div className={styles.confirmationInput}>
<Stack alignItems="flex-start">
<Box>
<Field disabled={disabled}>
<Input placeholder={`Type "${confirmPromptText}" to confirm`} onChange={onConfirmationTextChange} />
</Box>
</Field>
</Stack>
</div>
) : null}
@ -106,7 +109,7 @@ export const ConfirmContent = ({
<Button
type="submit"
variant={confirmButtonVariant}
disabled={disabled}
disabled={isDisabled}
ref={buttonRef}
data-testid={selectors.pages.ConfirmModal.delete}
>

View File

@ -44,6 +44,8 @@ export interface ConfirmModalProps {
onDismiss(): void;
/** Alternative action callback */
onAlternative?(): void;
/** Disable the confirm button and the confirm text input if needed */
disabled?: boolean;
}
export const ConfirmModal = ({
@ -63,6 +65,7 @@ export const ConfirmModal = ({
onDismiss,
onAlternative,
confirmButtonVariant = 'destructive',
disabled,
}: ConfirmModalProps): JSX.Element => {
const styles = useStyles2(getStyles);
@ -80,6 +83,7 @@ export const ConfirmModal = ({
onConfirm={onConfirm}
onDismiss={onDismiss}
onAlternative={onAlternative}
disabled={disabled}
/>
</Modal>
);

View File

@ -18,7 +18,7 @@ export interface Props {
export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Props) => {
const { data } = useGetAffectedItemsQuery(selectedItems);
const deleteIsInvalid = !config.featureToggles.nestedFolders && data && (data.alertRule || data.libraryPanel);
const deleteIsInvalid = Boolean(data && (data.alertRule || data.libraryPanel));
const [isDeleting, setIsDeleting] = useState(false);
const onDelete = async () => {
setIsDeleting(true);
@ -80,6 +80,7 @@ export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: P
onConfirm={onDelete}
title={t('browse-dashboards.action.delete-modal-title', 'Delete')}
{...props}
disabled={deleteIsInvalid}
/>
);
};