change: [M3-6843] - Move manual snapshot error message to snapshot confirmation dialog

packages/manager/.changeset/pr-10791-changed-1723820950904.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Move manual snapshot error message from Linode Backups page to snapshot confirmation dialog ([#10791](https://github.com/linode/manager/pull/10791))

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx

@@ -6,7 +6,6 @@ import * as React from 'react';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { FormControl } from 'src/components/FormControl';
-import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
@@ -31,6 +30,7 @@ export const CaptureSnapshot = (props: Props) => {
     error: snapshotError,
     isLoading: isSnapshotLoading,
     mutateAsync: takeSnapshot,
+    reset,
   } = useLinodeBackupSnapshotMutation(linodeId);
 
   const [
@@ -65,19 +65,14 @@ export const CaptureSnapshot = (props: Props) => {
         manual snapshot will not be overwritten by automatic backups.
       </Typography>
       <FormControl>
-        {hasErrorFor.none && (
-          <Notice spacingBottom={8} variant="error">
-            {hasErrorFor.none}
-          </Notice>
-        )}
         <StyledBox>
           <TextField
-            sx={{ minWidth: 275 }}
             data-qa-manual-name
             errorText={hasErrorFor.label}
             label="Name Snapshot"
             name="label"
             onChange={snapshotForm.handleChange}
+            sx={{ minWidth: 275 }}
             value={snapshotForm.values.label}
           />
           <Button
@@ -91,8 +86,10 @@ export const CaptureSnapshot = (props: Props) => {
         </StyledBox>
       </FormControl>
       <CaptureSnapshotConfirmationDialog
+        error={hasErrorFor.none}
         loading={isSnapshotLoading}
         onClose={() => setIsSnapshotConfirmationDialogOpen(false)}
+        onExited={() => reset()}
         onSnapshot={() => snapshotForm.handleSubmit()}
         open={isSnapshotConfirmationDialogOpen}
       />

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshotConfirmationDialog.test.tsx

@@ -0,0 +1,84 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CaptureSnapshotConfirmationDialog } from './CaptureSnapshotConfirmationDialog';
+
+const props = {
+  error: undefined,
+  loading: false,
+  onClose: vi.fn(),
+  onExited: vi.fn(),
+  onSnapshot: vi.fn(),
+  open: true,
+};
+
+describe('CaptureSnapshotConfirmationDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render the dialog', () => {
+    const { getByTestId, getByText } = renderWithTheme(
+      <CaptureSnapshotConfirmationDialog {...props} />
+    );
+
+    const takeSnapshotButton = getByTestId('confirm');
+    const cancelButton = getByText('Cancel');
+    const title = getByText('Take a snapshot?');
+    const body = getByText(
+      'Taking a snapshot will back up your Linode in its current state, overriding your previous snapshot. Are you sure?'
+    );
+
+    expect(takeSnapshotButton).toBeVisible();
+    expect(cancelButton).toBeVisible();
+    expect(title).toBeVisible();
+    expect(body).toBeVisible();
+  });
+
+  it('should send a request to create a snapshot if loading is false', () => {
+    const { getByTestId } = renderWithTheme(
+      <CaptureSnapshotConfirmationDialog {...props} />
+    );
+
+    const takeSnapshotButton = getByTestId('confirm');
+    expect(takeSnapshotButton).toBeVisible();
+    fireEvent.click(takeSnapshotButton);
+    expect(props.onSnapshot).toHaveBeenCalled();
+  });
+
+  it('should not send a request to create a snapshot if loading is true', () => {
+    const { getByTestId } = renderWithTheme(
+      <CaptureSnapshotConfirmationDialog {...props} loading={true} />
+    );
+
+    const takeSnapshotButton = getByTestId('confirm');
+    expect(takeSnapshotButton).toBeVisible();
+    fireEvent.click(takeSnapshotButton);
+    expect(props.onSnapshot).not.toHaveBeenCalled();
+  });
+
+  it('should close the dialog when the "Cancel" button is clicked', () => {
+    const { getByText } = renderWithTheme(
+      <CaptureSnapshotConfirmationDialog {...props} />
+    );
+
+    const cancelButton = getByText('Cancel');
+    expect(cancelButton).toBeVisible();
+    fireEvent.click(cancelButton);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('should render the dialog with an error message', () => {
+    const { getByText } = renderWithTheme(
+      <CaptureSnapshotConfirmationDialog
+        {...props}
+        error={'mock error message'}
+      />
+    );
+
+    const errorMessage = getByText('mock error message');
+    expect(errorMessage).toBeVisible();
+  });
+});

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshotConfirmationDialog.tsx

@@ -5,15 +5,16 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati
 import { Typography } from 'src/components/Typography';
 
 interface Props {
-  error?: string;
+  error: string | undefined;
   loading: boolean;
   onClose: () => void;
+  onExited: () => void;
   onSnapshot: () => void;
   open: boolean;
 }
 
 export const CaptureSnapshotConfirmationDialog = (props: Props) => {
-  const { error, loading, onClose, onSnapshot, open } = props;
+  const { error, loading, onClose, onExited, onSnapshot, open } = props;
 
   const actions = (
     <ActionsPanel
@@ -37,6 +38,7 @@ export const CaptureSnapshotConfirmationDialog = (props: Props) => {
       actions={actions}
       error={error}
       onClose={onClose}
+      onExited={onExited}
       open={open}
       title="Take a snapshot?"
     >

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx

@@ -1,4 +1,3 @@
-import { LinodeBackup, PriceObject } from '@linode/api-v4/lib/linodes';
 import { Box, Stack } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
@@ -23,13 +22,15 @@ import { useRegionsQuery } from 'src/queries/regions/regions';
 import { useTypeQuery } from 'src/queries/types';
 import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 
-import { BackupTableRow } from './BackupTableRow';
 import { BackupsPlaceholder } from './BackupsPlaceholder';
+import { BackupTableRow } from './BackupTableRow';
 import { CancelBackupsDialog } from './CancelBackupsDialog';
 import { CaptureSnapshot } from './CaptureSnapshot';
 import { RestoreToLinodeDrawer } from './RestoreToLinodeDrawer';
 import { ScheduleSettings } from './ScheduleSettings';
 
+import type { LinodeBackup, PriceObject } from '@linode/api-v4/lib/linodes';
+
 export const LinodeBackups = () => {
   const { linodeId } = useParams<{ linodeId: string }>();
   const id = Number(linodeId);