diff --git a/apps/drive-integration/src/locations/Page/components/mainpage/MainPageView.tsx b/apps/drive-integration/src/locations/Page/components/mainpage/MainPageView.tsx index 26f663c7a3..81b556ef73 100644 --- a/apps/drive-integration/src/locations/Page/components/mainpage/MainPageView.tsx +++ b/apps/drive-integration/src/locations/Page/components/mainpage/MainPageView.tsx @@ -37,13 +37,15 @@ export const MainPageView = ({ flexDirection="column" gap="spacingXl" style={{ maxWidth: '900px', margin: `${tokens.spacingL} auto` }}> - Drive Integration - + + Drive Integration + + {() => ( <> - + - No entries will be created and you'll need to start over. + + This will permanently delete the job. No entries will be created and you'll need + to start over. + diff --git a/apps/drive-integration/src/locations/Page/components/review/ReviewPage.styles.ts b/apps/drive-integration/src/locations/Page/components/review/ReviewPage.styles.ts index d90f0b2de5..febe00b638 100644 --- a/apps/drive-integration/src/locations/Page/components/review/ReviewPage.styles.ts +++ b/apps/drive-integration/src/locations/Page/components/review/ReviewPage.styles.ts @@ -61,25 +61,3 @@ export const modeToggleButtonActive = css({ color: tokens.gray900, }, }); - -export const cancelReviewButton = css({ - '&, &&': { - backgroundColor: tokens.colorWhite, - border: `1px solid ${tokens.gray300}`, - borderRadius: tokens.borderRadiusMedium, - boxShadow: 'none', - color: tokens.gray900, - fontWeight: tokens.fontWeightDemiBold, - }, - - '&:hover, &&:hover': { - backgroundColor: tokens.gray100, - borderColor: tokens.gray400, - color: tokens.gray900, - }, - - '&:focus-visible, &&:focus-visible': { - boxShadow: `0 0 0 3px ${tokens.blue200}`, - outline: 'none', - }, -}); diff --git a/apps/drive-integration/src/locations/Page/components/review/ReviewPage.tsx b/apps/drive-integration/src/locations/Page/components/review/ReviewPage.tsx index e37ba48ef7..cb9ecec489 100644 --- a/apps/drive-integration/src/locations/Page/components/review/ReviewPage.tsx +++ b/apps/drive-integration/src/locations/Page/components/review/ReviewPage.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { Button, Flex, Heading, Layout } from '@contentful/f36-components'; -import { EyeIcon, PencilSimpleIcon } from '@contentful/f36-icons'; +import { Button, Flex, Heading, IconButton, Layout, Menu } from '@contentful/f36-components'; +import { DotsThreeIcon, EyeIcon, PencilSimpleIcon } from '@contentful/f36-icons'; import tokens from '@contentful/f36-tokens'; import { PageAppSDK } from '@contentful/app-sdk'; import { cx } from '@emotion/css'; @@ -22,7 +22,6 @@ import { SummaryModal } from '../modals/SummaryModal'; import OverviewSection from '../overview/OverviewSection'; import { MappingView } from './mapping/MappingView'; import { - cancelReviewButton, modeToggleButton, modeToggleButtonActive, modeToggleWrapper, @@ -193,14 +192,9 @@ export const ReviewPage = ({ void handleCreateEntries(); }, [hasCreatedEntries, handleCreateEntries]); - const handleCancelOrExitReview = useCallback(() => { - if (hasCreatedEntries) { - onExitReview(); - return; - } - + const handleDeleteJob = useCallback(() => { setIsConfirmCancelModalOpen(true); - }, [hasCreatedEntries, onExitReview]); + }, []); const handleSummaryDone = useCallback(() => { setIsSummaryModalOpen(false); @@ -230,30 +224,48 @@ export const ReviewPage = ({ {title}
- - +
+ {!hasCreatedEntries && ( + + + } + /> + + + + Delete + + + + )}
diff --git a/apps/drive-integration/src/locations/Page/components/runs/RunsPage.tsx b/apps/drive-integration/src/locations/Page/components/runs/RunsPage.tsx index a3e16ee935..1e55cbea3e 100644 --- a/apps/drive-integration/src/locations/Page/components/runs/RunsPage.tsx +++ b/apps/drive-integration/src/locations/Page/components/runs/RunsPage.tsx @@ -97,7 +97,7 @@ export function RunsPage({ }); return ( - + {/* Page header */} diff --git a/apps/drive-integration/test/locations/Page/components/mainpage/ModalOrchestrator.spec.tsx b/apps/drive-integration/test/locations/Page/components/mainpage/ModalOrchestrator.spec.tsx index bed607ef7d..68ef1c15e3 100644 --- a/apps/drive-integration/test/locations/Page/components/mainpage/ModalOrchestrator.spec.tsx +++ b/apps/drive-integration/test/locations/Page/components/mainpage/ModalOrchestrator.spec.tsx @@ -184,9 +184,7 @@ describe('ModalOrchestrator', () => { fireEvent.click(screen.getByRole('button', { name: 'Cancel' })); await waitFor(() => { - expect( - screen.getByRole('heading', { name: "You're about to lose your progress" }) - ).toBeTruthy(); + expect(screen.getByRole('heading', { name: 'Delete this job?' })).toBeTruthy(); }); }); @@ -205,18 +203,14 @@ describe('ModalOrchestrator', () => { fireEvent.click(screen.getByRole('button', { name: 'Cancel' })); await waitFor(() => { - expect( - screen.getByRole('heading', { name: "You're about to lose your progress" }) - ).toBeTruthy(); + expect(screen.getByRole('heading', { name: 'Delete this job?' })).toBeTruthy(); }); - fireEvent.click(screen.getByRole('button', { name: 'Cancel without creating' })); + fireEvent.click(screen.getByRole('button', { name: 'Delete' })); await waitFor(() => { expect(screen.queryByRole('heading', { name: 'Select content type(s)' })).toBeNull(); - expect( - screen.queryByRole('heading', { name: "You're about to lose your progress" }) - ).toBeNull(); + expect(screen.queryByRole('heading', { name: 'Delete this job?' })).toBeNull(); }); }); @@ -253,9 +247,7 @@ describe('ModalOrchestrator', () => { await waitFor(() => { expect(screen.queryByRole('button', { name: 'Pick document' })).toBeNull(); - expect( - screen.queryByRole('heading', { name: "You're about to lose your progress" }) - ).toBeNull(); + expect(screen.queryByRole('heading', { name: 'Delete this job?' })).toBeNull(); }); }); @@ -272,12 +264,10 @@ describe('ModalOrchestrator', () => { fireEvent.click(screen.getByRole('button', { name: 'Cancel' })); await waitFor(() => { - expect( - screen.getByRole('heading', { name: "You're about to lose your progress" }) - ).toBeTruthy(); + expect(screen.getByRole('heading', { name: 'Delete this job?' })).toBeTruthy(); }); - fireEvent.click(screen.getByRole('button', { name: 'Cancel without creating' })); + fireEvent.click(screen.getByRole('button', { name: 'Delete' })); await waitFor(() => { expect(mockAddRun).not.toHaveBeenCalled(); diff --git a/apps/drive-integration/test/locations/Page/components/modals/ConfirmCancelModal.spec.tsx b/apps/drive-integration/test/locations/Page/components/modals/ConfirmCancelModal.spec.tsx index a59c80d0b5..adf6c62214 100644 --- a/apps/drive-integration/test/locations/Page/components/modals/ConfirmCancelModal.spec.tsx +++ b/apps/drive-integration/test/locations/Page/components/modals/ConfirmCancelModal.spec.tsx @@ -24,28 +24,28 @@ describe('ConfirmCancelModal', () => { render(); await waitFor(() => { + expect(screen.getByRole('heading', { name: 'Delete this job?' })).toBeTruthy(); expect( - screen.getByRole('heading', { name: "You're about to lose your progress" }) - ).toBeTruthy(); - expect( - screen.getByText("No entries will be created and you'll need to start over.") + screen.getByText( + "This will permanently delete the job. No entries will be created and you'll need to start over." + ) ).toBeTruthy(); }); }); - it('renders Keep creating and Cancel without creating buttons', async () => { + it('renders Keep review open and Delete buttons', async () => { render(); await waitFor(() => { - expect(screen.getByRole('button', { name: 'Keep creating' })).toBeTruthy(); - expect(screen.getByRole('button', { name: 'Cancel without creating' })).toBeTruthy(); + expect(screen.getByRole('button', { name: 'Keep review open' })).toBeTruthy(); + expect(screen.getByRole('button', { name: 'Delete' })).toBeTruthy(); }); }); - it('calls onConfirm when Cancel without creating is clicked', async () => { + it('calls onConfirm when Delete is clicked', async () => { render(); - fireEvent.click(screen.getByRole('button', { name: 'Cancel without creating' })); + fireEvent.click(screen.getByRole('button', { name: 'Delete' })); await waitFor(() => { expect(onConfirm).toHaveBeenCalledTimes(1); @@ -53,10 +53,10 @@ describe('ConfirmCancelModal', () => { }); }); - it('calls onCancel when Keep creating is clicked', async () => { + it('calls onCancel when Keep review open is clicked', async () => { render(); - fireEvent.click(screen.getByRole('button', { name: 'Keep creating' })); + fireEvent.click(screen.getByRole('button', { name: 'Keep review open' })); await waitFor(() => { expect(onCancel).toHaveBeenCalledTimes(1); @@ -68,9 +68,7 @@ describe('ConfirmCancelModal', () => { render(); await waitFor(() => { - expect( - screen.queryByRole('heading', { name: "You're about to lose your progress" }) - ).toBeNull(); + expect(screen.queryByRole('heading', { name: 'Delete this job?' })).toBeNull(); }); }); @@ -85,16 +83,13 @@ describe('ConfirmCancelModal', () => { ); await waitFor(() => { - expect(screen.getByRole('button', { name: 'Keep creating' })).toHaveProperty( + expect(screen.getByRole('button', { name: 'Keep review open' })).toHaveProperty( 'disabled', true ); // When isLoading, F36 injects a spinner so the accessible name gains "Loading…". // Query by partial text match to stay resilient to the spinner label. - expect(screen.getByRole('button', { name: /Cancel without creating/ })).toHaveProperty( - 'disabled', - true - ); + expect(screen.getByRole('button', { name: /Delete/ })).toHaveProperty('disabled', true); }); }); @@ -108,10 +103,10 @@ describe('ConfirmCancelModal', () => { /> ); - await waitFor(() => screen.getByRole('button', { name: 'Keep creating' })); + await waitFor(() => screen.getByRole('button', { name: 'Keep review open' })); - fireEvent.click(screen.getByRole('button', { name: /Cancel without creating/ })); - fireEvent.click(screen.getByRole('button', { name: 'Keep creating' })); + fireEvent.click(screen.getByRole('button', { name: /Delete/ })); + fireEvent.click(screen.getByRole('button', { name: 'Keep review open' })); expect(onConfirm).not.toHaveBeenCalled(); expect(onCancel).not.toHaveBeenCalled();