Refactor preview site updating to depend on CLI (#1223)

* [WIP] Refactor Studio to depend on CLI for preview site creation

* More changes

* Fix

* Use node's child_process module to fork CLI process

* Tests

* useGetSnapshotUsage

* Build CLI before starting dev version of app

* Tweaks

* Fixes

* preview ➡️ snapshot

* Improved progress bar

* Display notice when operation completes

* Update zod

* Remove useArchiveSite hook

* Fix test

* Modify exitCode in Logger::reportError

* Set exit code on error and fix outputFormat parsing

* Shorten

* Fix outputFormat parsing

* Clarify naming

* Refactor preview site updating to depend on CLI

* Clean up

* Tweak

* Tweaks

Author: fredrikekelund

src/components/content-tab-previews.tsx

@@ -18,7 +18,6 @@ import {
 import { useAuth } from 'src/hooks/use-auth';
 import { useOffline } from 'src/hooks/use-offline';
 import { useSiteSize } from 'src/hooks/use-site-size';
-import { useUpdateDemoSite } from 'src/hooks/use-update-demo-site';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { CreatePreviewButton } from 'src/modules/preview-site/components/create-preview-button';
 import { PreviewSiteRow } from 'src/modules/preview-site/components/preview-site-row';
@@ -171,17 +170,13 @@ export function ContentTabPreviews( { selectedSite }: ContentTabPreviewsProps )
 	const { data: snapshotUsage } = useGetSnapshotUsage();
 	const { isAuthenticated, user } = useAuth();
 	const { isOverLimit } = useSiteSize( selectedSite.id );
-	const { isDemoSiteUpdating } = useUpdateDemoSite();
 	const activeOperation = useRootSelector( ( state ) =>
-		snapshotSelectors.selectActiveOperationForSite( state, selectedSite.id )
+		snapshotSelectors.selectActiveCreateOperationForSite( state, selectedSite.id )
 	);
-	const snapshots = useRootSelector( ( state ) => snapshotSelectors.selectSnapshots( state ) );
 	const snapshotsOnSite = useRootSelector( ( state ) =>
 		snapshotSelectors.selectSnapshotsBySiteAndUser( state, selectedSite.id, user?.id ?? 0 )
 	);
-	const isAnySnapshotUpdating = snapshots.some( ( snapshot ) =>
-		isDemoSiteUpdating( snapshot.atomicSiteId )
-	);
+	const isAnySnapshotUpdating = useRootSelector( snapshotSelectors.selectIsAnySnapshotUpdating );
 	const isOffline = useOffline();
 
 	const isUpdateDisabled =

src/components/root.tsx

@@ -14,7 +14,6 @@ import { PromptUsageProvider } from 'src/hooks/use-prompt-usage';
 import { SiteDetailsProvider } from 'src/hooks/use-site-details';
 import { SnapshotProvider } from 'src/hooks/use-snapshots';
 import { ThemeDetailsProvider } from 'src/hooks/use-theme-details';
-import { DemoSiteUpdateProvider } from 'src/hooks/use-update-demo-site';
 import { store } from 'src/stores';
 
 const Root = () => {
@@ -27,23 +26,21 @@ const Root = () => {
 						<SnapshotProvider>
 							<SiteDetailsProvider>
 								<FeatureFlagsProvider>
-									<DemoSiteUpdateProvider>
-										<ThemeDetailsProvider>
-											<InstalledAppsProvider>
-												<OnboardingProvider>
-													<PromptUsageProvider>
-														<ImportExportProvider>
-															<ContentTabsProvider>
-																<SyncSitesProvider>
-																	<App />
-																</SyncSitesProvider>
-															</ContentTabsProvider>
-														</ImportExportProvider>
-													</PromptUsageProvider>
-												</OnboardingProvider>
-											</InstalledAppsProvider>
-										</ThemeDetailsProvider>
-									</DemoSiteUpdateProvider>
+									<ThemeDetailsProvider>
+										<InstalledAppsProvider>
+											<OnboardingProvider>
+												<PromptUsageProvider>
+													<ImportExportProvider>
+														<ContentTabsProvider>
+															<SyncSitesProvider>
+																<App />
+															</SyncSitesProvider>
+														</ContentTabsProvider>
+													</ImportExportProvider>
+												</PromptUsageProvider>
+											</OnboardingProvider>
+										</InstalledAppsProvider>
+									</ThemeDetailsProvider>
 								</FeatureFlagsProvider>
 							</SiteDetailsProvider>
 						</SnapshotProvider>