POC: Disable ConfirmButton (#89539)

packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx

@@ -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));
+    setIsDisabled(disabled ? true : Boolean(confirmPromptText));
-  }, [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}
           >

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -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>
   );

public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx

@@ -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}
     />
   );
 };