mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
POC: Disable ConfirmButton
(#89539)
This commit is contained in:
parent
2035814059
commit
fd96edaef7
@ -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}
|
||||
>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user