Studio: User can't delete expired demo site from Studio (#218)

* Add button and functionality to reset state when there is an expired site

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

src/components/content-tab-snapshots.tsx

@@ -52,8 +52,10 @@ function SnapshotRow( {
 	const { url, date, isDeleting } =
 		previousSnapshot && snapshot.isLoading ? previousSnapshot : snapshot;
 	const { countDown, isExpired, dateString } = useExpirationDate( date );
-	const { deleteSnapshot } = useSnapshots();
+	const { isUploadingSiteId } = useArchiveSite();
+	const isUploading = isUploadingSiteId( selectedSite.id );
 	const { updateDemoSite, isDemoSiteUpdating } = useUpdateDemoSite();
+	const { removeSnapshot, deleteSnapshot } = useSnapshots();
 
 	const isOffline = useOffline();
 	const updateDemoSiteOfflineMessage = __(
@@ -149,6 +151,11 @@ function SnapshotRow( {
 						isSnapshotLoading={ snapshot.isLoading }
 						tagline={ __( "We're creating your new demo site." ) }
 					/>
+					{ ! snapshot.isLoading && ! isUploading && (
+						<Button isDestructive onClick={ () => removeSnapshot( snapshot ) }>
+							{ __( 'Clear expired site' ) }
+						</Button>
+					) }
 				</div>
 			</div>
 		);
@@ -433,21 +440,23 @@ function AddDemoSiteWithProgress( {
 					</div>
 				</div>
 			) : (
-				<Tooltip disabled={ ! tooltipContent } { ...tooltipContent }>
-					<Button
-						aria-description={ tooltipContent?.text ?? '' }
-						aria-disabled={ isDisabled }
-						variant="primary"
-						onClick={ () => {
-							if ( isDisabled ) {
-								return;
-							}
-							archiveSite( selectedSite.id );
-						} }
-					>
-						{ __( 'Add demo site' ) }
-					</Button>
-				</Tooltip>
+				<div className="flex gap-4">
+					<Tooltip disabled={ ! tooltipContent } { ...tooltipContent }>
+						<Button
+							aria-description={ tooltipContent?.text ?? '' }
+							aria-disabled={ isDisabled }
+							variant="primary"
+							onClick={ () => {
+								if ( isDisabled ) {
+									return;
+								}
+								archiveSite( selectedSite.id );
+							} }
+						>
+							{ __( 'Add demo site' ) }
+						</Button>
+					</Tooltip>
+				</div>
 			) }
 		</div>
 	);
@@ -456,7 +465,6 @@ function AddDemoSiteWithProgress( {
 export function ContentTabSnapshots( { selectedSite }: ContentTabSnapshotsProps ) {
 	const { snapshots } = useSnapshots();
 	const { isAuthenticated } = useAuth();
-
 	if ( ! isAuthenticated ) {
 		return <NoAuth selectedSite={ selectedSite } />;
 	}

src/components/tests/content-tab-snapshots.test.tsx

@@ -1,6 +1,5 @@
 // To run tests, execute `npm run test -- src/components/content-tab-snapshots.test.tsx` from the root directory
-//
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { LIMIT_OF_ZIP_SITES_PER_USER } from '../../constants';
 import { useArchiveSite } from '../../hooks/use-archive-site';
@@ -383,6 +382,46 @@ describe( 'ContentTabSnapshots', () => {
 			} )
 		).toBeVisible();
 	} );
+
+	test( 'confirms that Clear expired site button is present on expired snapshot and calls removeSnapshot when clicked', async () => {
+		const user = userEvent.setup();
+		( useAuth as jest.Mock ).mockReturnValue( { isAuthenticated: true } );
+
+		const dateMS = new Date().getTime() - 9 * 24 * 60 * 60 * 1000; // Set the snapshot to be created 9 days ago
+		const snapshot = {
+			url: 'fake-site.fake',
+			atomicSiteId: 150,
+			localSiteId: 'site-id-1',
+			date: dateMS,
+			deleted: false,
+		};
+		const removeSnapshot = jest.fn();
+		( useSnapshots as jest.Mock ).mockReturnValue( {
+			snapshots: [ snapshot ],
+			removeSnapshot,
+		} );
+
+		const { rerender } = render( <ContentTabSnapshots selectedSite={ selectedSite } /> );
+
+		const clearSnapshotsButton = await screen.findByRole( 'button', {
+			name: 'Clear expired site',
+		} );
+		expect( clearSnapshotsButton ).toBeInTheDocument();
+
+		await user.click( clearSnapshotsButton );
+		expect( removeSnapshot ).toHaveBeenCalledWith( snapshot );
+
+		( useSnapshots as jest.Mock ).mockReturnValueOnce( {
+			snapshots: [],
+			removeSnapshot,
+		} );
+
+		rerender( <ContentTabSnapshots selectedSite={ selectedSite } /> );
+
+		await waitFor( () => {
+			expect( clearSnapshotsButton ).not.toBeInTheDocument();
+		} );
+	} );
 } );
 
 describe( 'AddDemoSiteWithProgress', () => {