fix: [M3-9034] - Use empty string instead of unknown for delete dialog titles

packages/manager/.changeset/pr-12701-fixed-1755186870164.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Use empty string instead of unknown for delete dialog titles ([#12701](https://github.com/linode/manager/pull/12701))

packages/manager/cypress/e2e/core/placementGroups/delete-placement-groups.spec.ts

@@ -84,7 +84,7 @@ describe('Placement Group deletion', () => {
     ).as('deletePlacementGroupError');
 
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         cy.findByLabelText('Placement Group').type(mockPlacementGroup.label);
@@ -106,7 +106,7 @@ describe('Placement Group deletion', () => {
 
     // Confirm deletion warning appears, complete Type-to-Confirm, and submit confirmation.
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         cy.findByText(deletionWarning).should('be.visible');
@@ -197,7 +197,7 @@ describe('Placement Group deletion', () => {
     ).as('UnassignPlacementGroupError');
 
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         cy.get('[data-qa-selection-list]').within(() => {
@@ -223,7 +223,7 @@ describe('Placement Group deletion', () => {
     // Confirm deletion warning appears and that form cannot be submitted
     // while Linodes are assigned.
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         cy.findByText(deletionWarning).should('be.visible');
@@ -346,7 +346,7 @@ describe('Placement Group deletion', () => {
 
     // The dialog can be closed after an unexpect error show up
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         cy.findByLabelText('Placement Group').type(mockPlacementGroup.label);
@@ -366,9 +366,9 @@ describe('Placement Group deletion', () => {
           .should('be.enabled')
           .click();
       });
-    cy.findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`).should(
-      'not.exist'
-    );
+    cy.findByTitle(
+      `Delete Placement Group ${mockPlacementGroup.label}?`
+    ).should('not.exist');
 
     // Click "Delete" button next to the mock Placement Group,
     // mock a successful response and confirm that Cloud
@@ -389,7 +389,7 @@ describe('Placement Group deletion', () => {
 
     // Confirm deletion warning appears, complete Type-to-Confirm, and submit confirmation.
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         // ensure error message not exist when reopening the dialog
@@ -472,7 +472,7 @@ describe('Placement Group deletion', () => {
     ).as('UnassignPlacementGroupError');
 
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         cy.get('[data-qa-selection-list]').within(() => {
@@ -501,9 +501,9 @@ describe('Placement Group deletion', () => {
           .click();
       });
 
-    cy.findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`).should(
-      'not.exist'
-    );
+    cy.findByTitle(
+      `Delete Placement Group ${mockPlacementGroup.label}?`
+    ).should('not.exist');
 
     // Click "Delete" button next to the mock Placement Group to reopen the dialog.
     cy.findByText(mockPlacementGroup.label)
@@ -519,7 +519,7 @@ describe('Placement Group deletion', () => {
 
     // Confirm that the error message from the previous attempt is no longer present.
     ui.dialog
-      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}`)
+      .findByTitle(`Delete Placement Group ${mockPlacementGroup.label}?`)
       .should('be.visible')
       .within(() => {
         cy.findByText(PlacementGroupErrorMessage).should('not.exist');

packages/manager/src/features/Domains/DeleteDomainDialog.tsx

@@ -0,0 +1,68 @@
+import { useDeleteDomainMutation } from '@linode/queries';
+import { Notice, Typography } from '@linode/ui';
+import { useSnackbar } from 'notistack';
+import * as React from 'react';
+
+import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
+
+import type { APIError } from '@linode/api-v4';
+export interface DeleteDomainProps {
+  domainError: APIError[] | null;
+  domainId?: number;
+  domainLabel?: string;
+  isFetching: boolean;
+  onClose?: () => void;
+  // Function that is invoked after Domain has been successfully deleted.
+  onSuccess?: () => void;
+  open: boolean;
+}
+
+export const DeleteDomainDialog = (props: DeleteDomainProps) => {
+  const { domainError, domainId, domainLabel, open, onClose, isFetching } =
+    props;
+  const { enqueueSnackbar } = useSnackbar();
+
+  const {
+    error,
+    isPending,
+    mutateAsync: deleteDomain,
+  } = useDeleteDomainMutation(domainId ?? 0);
+
+  const onDelete = () => {
+    deleteDomain().then(() => {
+      enqueueSnackbar('Domain deleted successfully.', {
+        variant: 'success',
+      });
+      if (props.onSuccess) {
+        props.onSuccess();
+      }
+    });
+  };
+
+  return (
+    <TypeToConfirmDialog
+      entity={{
+        action: 'deletion',
+        error: domainError,
+        name: domainLabel,
+        primaryBtnText: 'Delete Domain',
+        type: 'Domain',
+      }}
+      errors={error}
+      isFetching={isFetching}
+      label="Domain Name"
+      loading={isPending}
+      onClick={onDelete}
+      onClose={onClose}
+      open={open}
+      title={`Delete Domain${domainLabel ? ` ${domainLabel}` : ''}?`}
+    >
+      <Notice variant="warning">
+        <Typography>
+          <strong>Warning:</strong> Deleting this domain is permanent and can’t
+          be undone.
+        </Typography>
+      </Notice>
+    </TypeToConfirmDialog>
+  );
+};

packages/manager/src/features/Domains/DisableDomainDialog.tsx

@@ -62,7 +62,7 @@ export const DisableDomainDialog = React.memo(
         isFetching={isFetching}
         onClose={onClose}
         open={open}
-        title={`Disable Domain ${domain?.domain ?? 'Unknown'}?`}
+        title={`Disable Domain${domain ? ` ${domain.domain}` : ''}?`}
       >
         Are you sure you want to disable this DNS zone?
       </ConfirmationDialog>

packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx

@@ -4,6 +4,7 @@ import {
   useUpdateDomainMutation,
 } from '@linode/queries';
 import {
+  Button,
   CircleProgress,
   ErrorState,
   Notice,
@@ -20,7 +21,7 @@ import { LandingHeader } from 'src/components/LandingHeader';
 import { TagCell } from 'src/components/TagCell/TagCell';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 
-import { DeleteDomain } from '../DeleteDomain';
+import { DeleteDomainDialog } from '../DeleteDomainDialog';
 import { DownloadDNSZoneFileButton } from '../DownloadDNSZoneFileButton';
 import { DomainRecords } from './DomainRecords/DomainRecords';
 
@@ -35,6 +36,7 @@ export const DomainDetail = () => {
   const {
     data: domain,
     error,
+    isFetching: isFetchingDomain,
     isLoading,
   } = useDomainQuery(domainId, !!domainId);
   const { mutateAsync: updateDomain } = useUpdateDomainMutation();
@@ -52,6 +54,8 @@ export const DomainDetail = () => {
   });
 
   const [updateError, setUpdateError] = React.useState<string | undefined>();
+  const [isDeleteDomainDialogOpen, setDeleteDomainDialogOpen] =
+    React.useState(false);
 
   const handleLabelChange = (label: string) => {
     setUpdateError(undefined);
@@ -146,11 +150,20 @@ export const DomainDetail = () => {
             />
           </StyledPaper>
           <StyledDiv>
-            <DeleteDomain
+            <StyledButton
+              buttonType="outlined"
+              onClick={() => setDeleteDomainDialogOpen(true)}
+            >
+              Delete Domain
+            </StyledButton>
+            <DeleteDomainDialog
               domainError={error}
               domainId={domain.id}
               domainLabel={domain.domain}
+              isFetching={isFetchingDomain}
+              onClose={() => setDeleteDomainDialogOpen(false)}
               onSuccess={() => navigate({ to: '/domains' })}
+              open={isDeleteDomainDialogOpen}
             />
           </StyledDiv>
         </StyledTagSectionGrid>
@@ -209,3 +222,9 @@ const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
     marginLeft: theme.spacing(),
   },
 }));
+
+const StyledButton = styled(Button, { label: 'StyledButton' })(({ theme }) => ({
+  [theme.breakpoints.down('lg')]: {
+    marginRight: theme.spacing(),
+  },
+}));