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 && (
+
+ )}
- {hasCreatedEntries ? 'Exit' : 'Cancel'}
+ onClick={onExitReview}
+ aria-label="Close review">
+ Close
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();