ui and functionality

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

@@ -87,7 +87,7 @@ import type { Optic } from '../../core/shared/optics/optics'
 import { makeOptic } from '../../core/shared/optics/optics'
 import type { ElementPathTrees } from '../../core/shared/element-path-tree'
 import { assertNever } from '../../core/shared/utils'
-import type { ImportOperation, ImportOperationType } from './import-wizard/import-wizard-service'
+import type { ImportOperation, ImportOperationAction } from './import-wizard/import-wizard-service'
 export { isLoggedIn, loggedInUser, notLoggedIn } from '../../common/user'
 export type { LoginState, UserDetails } from '../../common/user'
 
@@ -1001,7 +1001,7 @@ export interface UpdateGithubOperations {
 export interface UpdateImportOperations {
   action: 'UPDATE_IMPORT_OPERATIONS'
   operations: ImportOperation[]
-  type: ImportOperationType
+  type: ImportOperationAction
 }
 
 export interface SetRefreshingDependencies {

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

@@ -270,7 +270,7 @@ import type { Collaborator } from '../../../core/shared/multiplayer'
 import type { PageTemplate } from '../../canvas/remix/remix-utils'
 import type { Bounds } from 'utopia-vscode-common'
 import type { ElementPathTrees } from '../../../core/shared/element-path-tree'
-import type { ImportOperation, ImportOperationType } from '../import-wizard/import-wizard-service'
+import type { ImportOperation, ImportOperationAction } from '../import-wizard/import-wizard-service'
 
 export function clearSelection(): EditorAction {
   return {
@@ -1596,7 +1596,7 @@ export function resetCanvas(): ResetCanvas {
 
 export function updateImportOperations(
   operations: ImportOperation[],
-  type: ImportOperationType,
+  type: ImportOperationAction,
 ): UpdateImportOperations {
   return {
     action: 'UPDATE_IMPORT_OPERATIONS',

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

@@ -632,6 +632,7 @@ import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-ut
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { applyValuesAtPath } from '../../canvas/commands/adjust-number-command'
 import { styleP } from '../../inspector/inspector-common'
+import { getUpdateOperationResult } from '../import-wizard/import-wizard-service'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
 
@@ -2237,45 +2238,14 @@ export const UPDATE_FNS = {
     }
   },
   UPDATE_IMPORT_OPERATIONS: (action: UpdateImportOperations, editor: EditorModel): EditorModel => {
-    const operations = [...editor.importOperations]
-    switch (action.type) {
-      case 'add':
-        action.operations.forEach((operation) => {
-          operations.push(operation)
-        })
-        break
-      case 'remove':
-        // remove according to name
-        action.operations.forEach((operation) => {
-          const idx = operations.findIndex((op) => op.name === operation.name)
-          if (idx >= 0) {
-            operations.splice(idx, 1)
-          }
-        })
-        break
-      case 'update':
-        // update fields according to name
-        action.operations.forEach((operation) => {
-          const idx = operations.findIndex((op) => op.name === operation.name)
-          if (idx >= 0) {
-            operations[idx] = {
-              ...operations[idx],
-              ...operation,
-            }
-          }
-          // if not found, add it
-          if (idx === -1) {
-            operations.push(operation)
-          }
-        })
-        break
-      default:
-        const _exhaustiveCheck: never = action.type
-        throw new Error('Unknown operation type.')
-    }
+    const resultImportOperations = getUpdateOperationResult(
+      editor.importOperations,
+      action.operations,
+      action.type,
+    )
     return {
       ...editor,
-      importOperations: operations,
+      importOperations: resultImportOperations,
     }
   },
   SET_REFRESHING_DEPENDENCIES: (

editor/src/components/editor/editor-component.tsx

@@ -679,11 +679,12 @@ const LockedOverlay = React.memo(() => {
 
   const editorLocked = React.useMemo(() => githubOperations.length > 0, [githubOperations])
 
-  const refreshingDependencies = useEditorState(
-    Substores.restOfEditor,
-    (store) => store.editor.refreshingDependencies,
-    'LockedOverlay refreshingDependencies',
-  )
+  const refreshingDependencies = false
+  // useEditorState(
+  //   Substores.restOfEditor,
+  //   (store) => store.editor.refreshingDependencies,
+  //   'LockedOverlay refreshingDependencies',
+  // )
 
   const forking = useEditorState(
     Substores.restOfEditor,

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

@@ -1,13 +1,16 @@
-import React from 'react'
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import React, { useMemo } from 'react'
 import { getProjectID } from '../../../common/env-vars'
 import { Button, Icons, useColorTheme, UtopiaStyles } from '../../../uuiui'
-import { useDispatch } from '../store/dispatch-context'
+import { GithubSpinner } from '../../navigator/left-pane/github-pane/github-spinner'
 import { useEditorState, Substores } from '../store/store-hook'
 import { when } from '../../../utils/react-conditionals'
-import { hideImportWizard } from './import-wizard-service'
+import type { ImportOperation } from './import-wizard-service'
+import { getImportOperationText, hideImportWizard } from './import-wizard-service'
 
 export const ImportWizard = React.memo(() => {
-  const dispatch = useDispatch()
   const colorTheme = useColorTheme()
 
   const projectId = getProjectID()
@@ -25,8 +28,8 @@ export const ImportWizard = React.memo(() => {
   )
 
   const handleDismiss = React.useCallback(() => {
-    hideImportWizard(dispatch)
-  }, [dispatch])
+    hideImportWizard()
+  }, [])
 
   const stopPropagation = React.useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
@@ -59,13 +62,18 @@ export const ImportWizard = React.memo(() => {
             background: colorTheme.bg0.value,
             boxShadow: UtopiaStyles.popup.boxShadow,
             borderRadius: 10,
-            width: '500px',
-            height: '500px',
+            width: 610,
+            minHeight: 500,
+            maxHeight: 770,
             position: 'relative',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            justifyContent: 'center',
+            fontSize: '14px',
+            lineHeight: 'normal',
+            letterSpacing: 'normal',
+            padding: 40,
+            overflow: 'hidden',
           }}
           onClick={stopPropagation}
         >
@@ -82,10 +90,125 @@ export const ImportWizard = React.memo(() => {
           >
             <Icons.Cross />
           </Button>
-          <div>{JSON.stringify(operations)}</div>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 10,
+              overflow: 'scroll',
+              height: '100%',
+              width: '100%',
+            }}
+          >
+            {operations.map((operation, index) => (
+              <OperationLine key={index} operation={operation} />
+            ))}
+          </div>
         </div>,
       )}
     </div>
   )
 })
 ImportWizard.displayName = 'ImportWizard'
+
+function OperationLine({ operation }: { operation: ImportOperation }) {
+  const operationStatus = useMemo(() => {
+    if (operation.timeStarted == null) {
+      return 'not started'
+    }
+    if (operation.timeDone == null) {
+      return 'running'
+    }
+    return `done`
+  }, [operation.timeStarted, operation.timeDone])
+  const textColor = React.useMemo(() => {
+    if (operationStatus === 'not started') {
+      return 'gray'
+    } else if (operationStatus === 'running') {
+      return 'black'
+    } else {
+      return operation.result === 'success' ? 'green' : 'red'
+    }
+  }, [operationStatus, operation.result])
+  return (
+    <div
+      className='import-wizard-operation-line'
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+      css={{
+        '.import-wizard-operation-children > &': {
+          paddingLeft: 10,
+          fontSize: 12,
+        },
+      }}
+    >
+      <div
+        className='import-wizard-operation-line-content'
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '15px 1fr 50px',
+          gap: 10,
+          alignItems: 'center',
+          color: textColor,
+        }}
+      >
+        <OperationIcon status={operationStatus} result={operation.result} />
+        <div>{getImportOperationText(operation)}</div>
+        <div>
+          <TimeFromInSeconds startTime={operation.timeStarted} endTime={operation.timeDone} />
+        </div>
+      </div>
+      {operation.children != null && operation.children.length > 0 && (
+        <div
+          className='import-wizard-operation-children'
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10,
+          }}
+        >
+          {operation.children.map((child, index) => (
+            <OperationLine key={index} operation={child} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function OperationIcon({ status, result }: { status: string; result?: string }) {
+  if (status === 'running') {
+    return <GithubSpinner />
+  } else if (status === 'done' && result === 'success') {
+    return <Icons.Checkmark />
+  } else if (status === 'not started') {
+    return <Icons.Dot />
+  } else {
+    return <Icons.Cross />
+  }
+}
+
+function TimeFromInSeconds({ startTime, endTime }: { startTime?: number; endTime?: number }) {
+  const [currentTime, setCurrentTime] = React.useState(Date.now())
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(Date.now())
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [])
+  const time = useMemo(() => {
+    if (startTime == null) {
+      return 0
+    }
+    if (endTime == null) {
+      return currentTime - startTime
+    }
+    return endTime - startTime
+  }, [startTime, endTime, currentTime])
+  const timeInSeconds =
+    endTime != null ? (time / 1000).toFixed(2) : Math.max(Math.floor(time / 1000), 0)
+  return startTime == null ? null : <div>{timeInSeconds}s</div>
+}