Studio: Snapshot counter not updating in settings when a site is deleted

src/components/content-tab-snapshots.tsx

@@ -7,12 +7,10 @@ import { PropsWithChildren, useEffect } from 'react';
 import { CLIENT_ID, PROTOCOL_PREFIX, WP_AUTHORIZE_ENDPOINT, SCOPES } from '../constants';
 import { useArchiveSite } from '../hooks/use-archive-site';
 import { useAuth } from '../hooks/use-auth';
-import { useDeleteSnapshot } from '../hooks/use-delete-snapshot';
 import { useExpirationDate } from '../hooks/use-expiration-date';
 import { useOffline } from '../hooks/use-offline';
 import { useProgressTimer } from '../hooks/use-progress-timer';
-import { useSiteDetails } from '../hooks/use-site-details';
-import { useSiteUsage } from '../hooks/use-site-usage';
+import { useSnapshots } from '../hooks/use-snapshots';
 import { useUpdateDemoSite } from '../hooks/use-update-demo-site';
 import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
@@ -54,7 +52,7 @@ function SnapshotRow( {
 	const { url, date, isDeleting } =
 		previousSnapshot && snapshot.isLoading ? previousSnapshot : snapshot;
 	const { countDown, isExpired, dateString } = useExpirationDate( date );
-	const { deleteSnapshot } = useDeleteSnapshot();
+	const { deleteSnapshot } = useSnapshots();
 	const { updateDemoSite, isDemoSiteUpdating } = useUpdateDemoSite();
 
 	const isOffline = useOffline();
@@ -383,8 +381,8 @@ function AddDemoSiteWithProgress( {
 	const { __, _n } = useI18n();
 	const { archiveSite, isUploadingSiteId, isAnySiteArchiving } = useArchiveSite();
 	const isUploading = isUploadingSiteId( selectedSite.id );
-	const { siteLimit, siteCount, isLoading: isFetchingUsage } = useSiteUsage();
-	const isLimitUsed = siteCount >= siteLimit;
+	const { activeSnapshotCount, snapshotQuota, isLoadingSnapshotUsage } = useSnapshots();
+	const isLimitUsed = activeSnapshotCount >= snapshotQuota;
 	const isOffline = useOffline();
 	const { progress, setProgress } = useProgressTimer( {
 		paused: ! isUploading && ! isSnapshotLoading,
@@ -399,17 +397,17 @@ function AddDemoSiteWithProgress( {
 	}, [ isSnapshotLoading, setProgress ] );
 
 	const isDisabled =
-		isAnySiteArchiving || isUploading || isFetchingUsage || isLimitUsed || isOffline;
+		isAnySiteArchiving || isUploading || isLoadingSnapshotUsage || isLimitUsed || isOffline;
 	const siteArchivingMessage = __(
 		'A different demo site is being created. Please wait for it to finish before creating another.'
 	);
 	const allotmentConsumptionMessage = sprintf(
 		_n(
 			"You've used %s demo site available on your account.",
 			"You've used all %s demo sites available on your account.",
-			siteLimit
+			snapshotQuota
 		),
-		siteLimit
+		snapshotQuota
 	);
 	const offlineMessage = __( 'Creating a demo site requires an internet connection.' );
 
@@ -456,8 +454,7 @@ function AddDemoSiteWithProgress( {
 }
 
 export function ContentTabSnapshots( { selectedSite }: ContentTabSnapshotsProps ) {
-	const { __, _n } = useI18n();
-	const { snapshots } = useSiteDetails();
+	const { snapshots } = useSnapshots();
 	const { isAuthenticated } = useAuth();
 
 	if ( ! isAuthenticated ) {

src/components/delete-site.tsx

@@ -3,6 +3,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { useOffline } from '../hooks/use-offline';
 import { useSiteDetails } from '../hooks/use-site-details';
+import { useSnapshots } from '../hooks/use-snapshots';
 import { getIpcApi } from '../lib/get-ipc-api';
 import Button from './button';
 import offlineIcon from './offline-icon';
@@ -19,7 +20,7 @@ const DeleteSite = () => {
 		'This site has active demo sites that cannot be deleted without an internet connection.'
 	);
 
-	const { snapshots } = useSiteDetails();
+	const { snapshots } = useSnapshots();
 	const snapshotsOnSite = snapshots.filter(
 		( snapshot ) => snapshot.localSiteId === selectedSite?.id
 	);

src/components/root.tsx

@@ -4,6 +4,7 @@ import { FeatureFlagsProvider } from '../hooks/use-feature-flags';
 import { OnboardingProvider } from '../hooks/use-onboarding';
 import { PromptUsageProvider } from '../hooks/use-prompt-usage';
 import { SiteDetailsProvider } from '../hooks/use-site-details';
+import { SnapshotProvider } from '../hooks/use-snapshots';
 import { ThemeDetailsProvider } from '../hooks/use-theme-details';
 import { DemoSiteUpdateProvider } from '../hooks/use-update-demo-site';
 import App from './app';
@@ -16,23 +17,25 @@ const Root = () => {
 		<ErrorBoundary>
 			<CrashTester />
 			<AuthProvider>
-				<SiteDetailsProvider>
-					<FeatureFlagsProvider>
-						<DemoSiteUpdateProvider>
-							<ThemeDetailsProvider>
-								<InstalledAppsProvider>
-									<OnboardingProvider>
-										<PromptUsageProvider>
-											<ChatProvider>
-												<App />
-											</ChatProvider>
-										</PromptUsageProvider>
-									</OnboardingProvider>
-								</InstalledAppsProvider>
-							</ThemeDetailsProvider>
-						</DemoSiteUpdateProvider>
-					</FeatureFlagsProvider>
-				</SiteDetailsProvider>
+				<SnapshotProvider>
+					<SiteDetailsProvider>
+						<FeatureFlagsProvider>
+							<DemoSiteUpdateProvider>
+								<ThemeDetailsProvider>
+									<InstalledAppsProvider>
+										<OnboardingProvider>
+											<PromptUsageProvider>
+												<ChatProvider>
+													<App />
+												</ChatProvider>
+											</PromptUsageProvider>
+										</OnboardingProvider>
+									</InstalledAppsProvider>
+								</ThemeDetailsProvider>
+							</DemoSiteUpdateProvider>
+						</FeatureFlagsProvider>
+					</SiteDetailsProvider>
+				</SnapshotProvider>
 			</AuthProvider>
 		</ErrorBoundary>
 	);

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

@@ -1,13 +1,15 @@
-// To run tests, execute `npm run test -- src/components/content-tab-settings.test.tsx` from the root directory
+// To run tests, execute `npm run test -- src/components/tests/content-tab-settings.test.tsx` from the root directory
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { useGetWpVersion } from '../../hooks/use-get-wp-version';
 import { useOffline } from '../../hooks/use-offline';
 import { useSiteDetails } from '../../hooks/use-site-details';
+import { useSnapshots } from '../../hooks/use-snapshots';
 import { getIpcApi } from '../../lib/get-ipc-api';
 import { ContentTabSettings } from '../content-tab-settings';
 
 jest.mock( '../../hooks/use-get-wp-version' );
+jest.mock( '../../hooks/use-snapshots' );
 jest.mock( '../../hooks/use-site-details' );
 jest.mock( '../../lib/get-ipc-api' );
 
@@ -34,9 +36,12 @@ describe( 'ContentTabSettings', () => {
 			generateProposedSitePath,
 		} );
 
+		( useSnapshots as jest.Mock ).mockReturnValue( {
+			snapshots: [],
+		} );
+
 		( useSiteDetails as jest.Mock ).mockReturnValue( {
 			selectedSite,
-			snapshots: [],
 			uploadingSites: {},
 			deleteSite: jest.fn(),
 			isDeleting: false,
@@ -117,9 +122,11 @@ describe( 'ContentTabSettings', () => {
 		( useOffline as jest.Mock ).mockReturnValue( true );
 
 		// Mock snapshots to include a snapshot for the selected site
+		( useSnapshots as jest.Mock ).mockReturnValue( {
+			snapshots: [ { localSiteId: selectedSite.id } ],
+		} );
 		( useSiteDetails as jest.Mock ).mockReturnValue( {
 			selectedSite: selectedSite,
-			snapshots: [ { localSiteId: selectedSite.id } ],
 			deleteSite: jest.fn(),
 			isDeleting: false,
 		} );
@@ -157,10 +164,14 @@ describe( 'ContentTabSettings', () => {
 			const updateSite = jest.fn();
 			const startServer = jest.fn();
 			const stopServer = jest.fn();
+
+			( useSnapshots as jest.Mock ).mockReturnValue( {
+				snapshots: [ { localSiteId: selectedSite.id } ],
+			} );
+
 			// Mock snapshots to include a snapshot for the selected site
 			( useSiteDetails as jest.Mock ).mockReturnValue( {
 				selectedSite: { ...selectedSite, running: false } as SiteDetails,
-				snapshots: [ { localSiteId: selectedSite.id } ],
 				updateSite,
 				startServer,
 				stopServer,
@@ -197,9 +208,11 @@ describe( 'ContentTabSettings', () => {
 			const startServer = jest.fn();
 			const stopServer = jest.fn();
 			// Mock snapshots to include a snapshot for the selected site
+			( useSnapshots as jest.Mock ).mockReturnValue( {
+				snapshots: [ { localSiteId: selectedSite.id } ],
+			} );
 			( useSiteDetails as jest.Mock ).mockReturnValue( {
 				selectedSite: { ...selectedSite, running: true } as SiteDetails,
-				snapshots: [ { localSiteId: selectedSite.id } ],
 				updateSite,
 				startServer,
 				stopServer,