feat: [M3-10324] - Add type-to-confirm to Images (linode#12740)

* support type to confirm on Images

* fix up cypress test and loading states

* remove question mark from dialog title

* add unit test for image row fix

* fix type-safety issue

* Added changeset: Type-to-confirm to Image deletion dialog

---------

Co-authored-by: Banks Nussman <[email protected]>

Author: bnussman-akamai

packages/manager/.changeset/pr-12740-added-1756313628688.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Type-to-confirm to Image deletion dialog ([#12740](https://github.com/linode/manager/pull/12740))

packages/manager/cypress/e2e/core/images/machine-image-upload.spec.ts

@@ -16,6 +16,8 @@ import { apiMatcher } from 'support/util/intercepts';
 import { randomLabel, randomPhrase } from 'support/util/random';
 import { chooseRegion } from 'support/util/regions';
 
+import { DISALLOWED_IMAGE_REGIONS } from 'src/constants';
+
 import type { EventStatus } from '@linode/api-v4';
 import type { RecPartial } from 'factory.ts';
 
@@ -121,7 +123,7 @@ const uploadImage = (label: string) => {
   // See also BAC-862.
   const region = chooseRegion({
     capabilities: ['Object Storage'],
-    exclude: ['au-mel', 'gb-lon', 'sg-sin-2'],
+    exclude: DISALLOWED_IMAGE_REGIONS,
   });
   const upload = 'machine-images/test-image.gz';
   cy.visitWithLogin('/images/create/upload');
@@ -238,8 +240,13 @@ describe('machine image', () => {
       .findByTitle(`Delete Image ${updatedLabel}`)
       .should('be.visible')
       .within(() => {
+        cy.findByLabelText('Image Label')
+          .should('be.visible')
+          .should('be.enabled')
+          .type(updatedLabel);
+
         ui.buttonGroup
-          .findButtonByTitle('Delete Image')
+          .findButtonByTitle('Delete')
           .should('be.visible')
           .should('be.enabled')
           .click();

packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx

@@ -28,6 +28,7 @@ interface EntityInfo {
     | 'Bucket'
     | 'Database'
     | 'Domain'
+    | 'Image'
     | 'Kubernetes'
     | 'Linode'
     | 'Load Balancer'
@@ -87,7 +88,7 @@ interface TypeToConfirmDialogProps {
    */
   reversePrimaryButtonPosition?: boolean;
   /** Props for the secondary button */
-  secondaryButtonProps?: Omit<ActionButtonsProps, 'label'>;
+  secondaryButtonProps?: ActionButtonsProps;
 }
 
 type CombinedProps = TypeToConfirmDialogProps &
@@ -176,10 +177,10 @@ export const TypeToConfirmDialog = (props: CombinedProps) => {
     };
 
     const cancelProps: ActionButtonsProps = {
-      ...secondaryButtonProps,
       'data-testid': 'cancel',
       label: 'Cancel',
       onClick: () => onClose?.({}, 'escapeKeyDown'),
+      ...secondaryButtonProps,
     };
 
     return {
@@ -207,7 +208,7 @@ export const TypeToConfirmDialog = (props: CombinedProps) => {
     }
 
     const typeInstructions =
-      entity.action === 'cancellation'
+      entity.action === 'cancellation' && entity.type === 'AccountSetting'
         ? 'type your Username '
         : `type the name of the ${entity.type} ${entity.subType || ''} `;
 

packages/manager/src/features/Images/ImagesLanding/DeleteImageDialog.tsx

@@ -0,0 +1,59 @@
+import { useDeleteImageMutation, useImageQuery } from '@linode/queries';
+import { useSnackbar } from 'notistack';
+import React from 'react';
+
+import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
+
+interface Props {
+  imageId: string | undefined;
+  onClose: () => void;
+  open: boolean;
+}
+
+export const DeleteImageDialog = (props: Props) => {
+  const { imageId, open, onClose } = props;
+  const { enqueueSnackbar } = useSnackbar();
+
+  const {
+    data: image,
+    isLoading,
+    error,
+  } = useImageQuery(imageId ?? '', Boolean(imageId));
+
+  const { mutate: deleteImage, isPending } = useDeleteImageMutation({
+    onSuccess() {
+      enqueueSnackbar('Image has been scheduled for deletion.', {
+        variant: 'info',
+      });
+      onClose();
+    },
+  });
+
+  const isPendingUpload = image?.status === 'pending_upload';
+
+  return (
+    <TypeToConfirmDialog
+      entity={{
+        type: 'Image',
+        primaryBtnText: isPendingUpload ? 'Cancel Upload' : 'Delete',
+        action: isPendingUpload ? 'cancellation' : 'deletion',
+        name: image?.label,
+      }}
+      errors={error}
+      isFetching={isLoading}
+      label="Image Label"
+      loading={isPending}
+      onClick={() => deleteImage({ imageId: imageId ?? '' })}
+      onClose={onClose}
+      open={open}
+      secondaryButtonProps={{
+        label: isPendingUpload ? 'Keep Image' : 'Cancel',
+      }}
+      title={
+        isPendingUpload
+          ? 'Cancel Upload'
+          : `Delete Image ${image?.label ?? imageId}`
+      }
+    />
+  );
+};

packages/manager/src/features/Images/ImagesLanding/ImageRow.test.tsx

@@ -109,6 +109,27 @@ describe('Image Table Row', () => {
     ).toBeNull();
   });
 
+  it('should not show an unencrypted icon when an Image is still "pending_upload"', () => {
+    // The API does not populate the "distributed-sites" capability until the image is done creating.
+    // We must account for this because the image would show as "Unencrypted" while it is creating,
+    // then suddenly show as encrypted once it was done creating. We don't want that.
+    // Therefore, we decided we won't show the unencrypted icon until the image is done uploading to
+    // prevent confusion.
+    const image = imageFactory.build({
+      capabilities: ['cloud-init'],
+      status: 'pending_upload',
+      type: 'manual',
+    });
+
+    const { queryByLabelText } = renderWithTheme(
+      wrapWithTableBody(<ImageRow handlers={handlers} image={image} />)
+    );
+
+    expect(
+      queryByLabelText('This image is not encrypted.', { exact: false })
+    ).toBeNull();
+  });
+
   it('should show N/A if Image does not have any regions', () => {
     const image = imageFactory.build({ regions: [] });
 

packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx

@@ -78,6 +78,7 @@ export const ImageRow = (props: Props) => {
           <Stack alignItems="center" direction="row" gap={1}>
             {type === 'manual' &&
               status !== 'creating' &&
+              status !== 'pending_upload' &&
               !image.capabilities.includes('distributed-sites') && (
                 <TooltipIcon
                   icon={<UnlockIcon height="18px" width="18px" />}