feat(import): allow continuing the import after an error (#6614)

This PR adds the ability to control the import process after an error:
1. Import a different project
2. Decide to continue anyway (for example to correct it using our
editor).
This PR distinguishes between an `Error` (that can be continued) and a
`Critical Error` (for example a non-existent repo) - that we cannot
recover from.

**PR details:**
1. In
[editor/src/core/shared/github/operations/load-branch.ts](https://github.com/concrete-utopia/utopia/pull/6614/files#diff-3c1474cac72b0e757d951539630bd72175135c05eddbff91d9f10639d2796440)
this PR adds the ability to stop before dependencies fetching and resume
afterwards
2. In
[editor/src/components/editor/import-wizard/import-wizard.tsx](https://github.com/concrete-utopia/utopia/pull/6614/files#diff-a1ec93eec4b0720f01ff6ec77bb4efb6cc3ac0ba4297d3fe7bb77049c601ca94)
this PR adds the UI for displaying the correct status/buttons according
to the current import state.
3. The rest of the changes are mostly actions/state changes.


For example this flow:
1. Importing a non-existing repo (critical error)
2. Then importing a project with errors (TS/server packages, etc),
choosing to continue importing
3. Deciding to import a different project - which is a success

<video
src="https://github.com/user-attachments/assets/39eaeedd-14fd-4819-b590-39a92629ad8e"></video>

Current design:
<img width="693" alt="image"
src="https://github.com/user-attachments/assets/a609068f-dece-4448-a31d-c266969a6341">

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Author: liady

editor/src/components/editor/action-types.ts

@@ -90,6 +90,7 @@ import { assertNever } from '../../core/shared/utils'
 import type {
   ImportOperation,
   ImportOperationAction,
+  ImportStatus,
 } from '../../core/shared/import/import-operation-types'
 import type { ProjectRequirements } from '../../core/shared/import/project-health-check/utopia-requirements-types'
 export { isLoggedIn, loggedInUser, notLoggedIn } from '../../common/user'
@@ -1008,6 +1009,11 @@ export interface UpdateImportOperations {
   type: ImportOperationAction
 }
 
+export interface UpdateImportStatus {
+  action: 'UPDATE_IMPORT_STATUS'
+  importStatus: ImportStatus
+}
+
 export interface UpdateProjectRequirements {
   action: 'UPDATE_PROJECT_REQUIREMENTS'
   requirements: Partial<ProjectRequirements>
@@ -1376,6 +1382,7 @@ export type EditorAction =
   | SetImageDragSessionState
   | UpdateGithubOperations
   | UpdateImportOperations
+  | UpdateImportStatus
   | UpdateProjectRequirements
   | SetImportWizardOpen
   | UpdateBranchContents

editor/src/components/editor/actions/action-creators.ts

@@ -240,6 +240,7 @@ import type {
   SetImportWizardOpen,
   UpdateImportOperations,
   UpdateProjectRequirements,
+  UpdateImportStatus,
 } from '../action-types'
 import type { InsertionSubjectWrapper, Mode } from '../editor-modes'
 import { EditorModes, insertionSubject } from '../editor-modes'
@@ -274,6 +275,7 @@ import type { ElementPathTrees } from '../../../core/shared/element-path-tree'
 import type {
   ImportOperation,
   ImportOperationAction,
+  ImportStatus,
 } from '../../../core/shared/import/import-operation-types'
 import type { ProjectRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
@@ -1610,6 +1612,13 @@ export function updateImportOperations(
   }
 }
 
+export function updateImportStatus(importStatus: ImportStatus): UpdateImportStatus {
+  return {
+    action: 'UPDATE_IMPORT_STATUS',
+    importStatus: importStatus,
+  }
+}
+
 export function updateProjectRequirements(
   requirements: Partial<ProjectRequirements>,
 ): UpdateProjectRequirements {

editor/src/components/editor/actions/action-utils.ts

@@ -141,6 +141,7 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'SET_ERROR_BOUNDARY_HANDLING':
     case 'SET_IMPORT_WIZARD_OPEN':
     case 'UPDATE_IMPORT_OPERATIONS':
+    case 'UPDATE_IMPORT_STATUS':
     case 'UPDATE_PROJECT_REQUIREMENTS':
       return true
 

editor/src/components/editor/actions/actions.tsx

@@ -355,6 +355,7 @@ import type {
   SetImportWizardOpen,
   UpdateImportOperations,
   UpdateProjectRequirements,
+  UpdateImportStatus,
 } from '../action-types'
 import { isAlignment, isLoggedIn } from '../action-types'
 import type { Mode } from '../editor-modes'
@@ -1034,7 +1035,7 @@ export function restoreEditorState(
     githubSettings: currentEditor.githubSettings,
     imageDragSessionState: currentEditor.imageDragSessionState,
     githubOperations: currentEditor.githubOperations,
-    importOperations: currentEditor.importOperations,
+    importState: currentEditor.importState,
     projectRequirements: currentEditor.projectRequirements,
     importWizardOpen: currentEditor.importWizardOpen,
     branchOriginContents: currentEditor.branchOriginContents,
@@ -2178,13 +2179,22 @@ export const UPDATE_FNS = {
   },
   UPDATE_IMPORT_OPERATIONS: (action: UpdateImportOperations, editor: EditorModel): EditorModel => {
     const resultImportOperations = getUpdateOperationResult(
-      editor.importOperations,
+      editor.importState.importOperations,
       action.operations,
       action.type,
     )
     return {
       ...editor,
-      importOperations: resultImportOperations,
+      importState: { ...editor.importState, importOperations: resultImportOperations },
+    }
+  },
+  UPDATE_IMPORT_STATUS: (action: UpdateImportStatus, editor: EditorModel): EditorModel => {
+    return {
+      ...editor,
+      importState: {
+        ...editor.importState,
+        importStatus: action.importStatus,
+      },
     }
   },
   UPDATE_PROJECT_REQUIREMENTS: (

editor/src/components/editor/import-wizard/components.tsx

@@ -15,11 +15,10 @@ import { RequirementResolutionResult } from '../../../core/shared/import/project
 
 export function OperationLine({ operation }: { operation: ImportOperation }) {
   const operationRunningStatus = React.useMemo(() => {
-    return operation.timeStarted == null
-      ? 'waiting'
-      : operation.timeDone == null
-      ? 'running'
-      : 'done'
+    if (operation.timeDone != null) {
+      return 'done'
+    }
+    return operation.timeStarted == null ? 'waiting' : 'running'
   }, [operation.timeStarted, operation.timeDone])
   const colorTheme = useColorTheme()
   const textColor = operationRunningStatus === 'waiting' ? 'gray' : colorTheme.fg0.value
@@ -29,7 +28,7 @@ export function OperationLine({ operation }: { operation: ImportOperation }) {
     () =>
       childrenShown ||
       operation.timeDone == null ||
-      operation.result == ImportOperationResult.Error,
+      operation.result != ImportOperationResult.Success,
     [childrenShown, operation.timeDone, operation.result],
   )
   const hasChildren = React.useMemo(
@@ -253,14 +252,26 @@ function getImportOperationText(operation: ImportOperation): React.ReactNode {
   }
   switch (operation.type) {
     case 'loadBranch':
-      return (
-        <span>
-          Loading branch{' '}
-          <strong>
-            {operation.githubRepo?.owner}/{operation.githubRepo?.repository}@{operation.branchName}
-          </strong>
-        </span>
-      )
+      if (operation.branchName != null) {
+        return (
+          <span>
+            Loading branch{' '}
+            <strong>
+              {operation.githubRepo?.owner}/{operation.githubRepo?.repository}@
+              {operation.branchName}
+            </strong>
+          </span>
+        )
+      } else {
+        return (
+          <span>
+            Loading repository{' '}
+            <strong>
+              {operation.githubRepo?.owner}/{operation.githubRepo?.repository}
+            </strong>
+          </span>
+        )
+      }
     case 'fetchDependency':
       return `Fetching ${operation.dependencyName}@${operation.dependencyVersion}`
     case 'parseFiles':