feat(import): github import wizard #6507

liady · 2024-10-09T14:59:18Z

This PR adds a Github import wizard, tracking the progress of importing a project from Github, showing errors or warnings. The design is still preliminary, but it is hidden behind a feature switch so that the logic can be reviewed and merges, in order not to create a long living PR.

Monosnap.screencast.2024-10-15.14-33-44.mp4

It supports error/warning states:

PR Includes:

Adding three actions
- SetImportWizardOpen - controlling the wizard UI
- UpdateImportOperations - updating the results of individual import operations (desc. to follow).
- UpdateProjectRequirements - updating the results of checking and fixing Utopia specific requirements
Utilities to start/end tracking of import operations, their results and timings.
Tracked import operations - tracking hooks are being called at appropriate places in the code.
- Loading the code from Github
- Parsing the files
- Checking specific Utopia requirements
- Loading dependencies
Utopia checks:
- storyboard file (created if not present)
- utopia entry in package.json
- project composition (JS/TS)
Not tracked in this PR but will in subsequent ones (can be added modularily):
- React version - currently a placeholder
- Server side packages - mainly Node builtins
- Style frameworks
The wizard UI itself - showing progress and results (still preliminary)

Note for reviewers: there are a lot of changed files due to adding new actions and passing down the dispatch parameter, but the main logic is contained in the new services and the wizard React components.

Manual Tests:
I hereby swear that:

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

github-actions · 2024-10-09T15:02:19Z

Try me

relativeci · 2024-10-09T15:09:24Z

#14940 Bundle Size — 58.02MiB (+0.07%).

8fb5834(current) vs 916e8b9 master#14936(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics

4 changes

1 regression

	Current #14940	Baseline #14936
Initial JS	`41.01MiB`(`+0.09%`)	`40.97MiB`
Initial CSS	`0B`	`0B`
Cache Invalidation	`18.29%`	`0%`
Chunks	`20`	`20`
Assets	`22`	`22`
Modules	`4159`(`+0.17%`)	`4152`
Duplicate Modules	`213`	`213`
Duplicate Code	`27.32%`(`-0.04%`)	`27.33%`
Packages	`477`	`477`
Duplicate Packages	`70`	`70`

Bundle size by type

2 changes

1 regression

1 improvement

	Current #14940	Baseline #14936
JS	`58.02MiB` (`+0.07%`)	`57.98MiB`
HTML	`7.37KiB` (`-0.25%`)	`7.39KiB`

Bundle analysis report Branch feat/github-import-wizard Project dashboard

^{Generated by RelativeCI Documentation Report issue}

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

bkrmendy · 2024-10-15T13:00:01Z

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

+import { RequirementResolutionResult } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+
+export function OperationLine({ operation }: { operation: ImportOperation }) {
+  const operationRunningStatus = React.useMemo(() => {


the useMemo is not necessary here, because the return value is a string, which has value equality semantics by default

I was actually trying to save the internal comparisons from running every render if they don't need to (similar to what a computed field would have done)

editor/src/core/es-modules/package-manager/fetch-packages.ts

editor/src/core/shared/import/import-operation-service.ts

editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts

seanparsons · 2024-10-22T15:39:48Z

editor/src/components/editor/store/editor-state.ts

@@ -1452,6 +1457,9 @@ export interface EditorState {
  githubSettings: ProjectGithubSettings
  imageDragSessionState: ImageDragSessionState
  githubOperations: Array<GithubOperation>
+  importOperations: Array<ImportOperation>


I wonder if these should be under some umbrella field rather than at the root of EditorState.

interesting point! which field, for example? I followed the githubOperations line, which also describe a temporary chain of operations, very similar to the importOperations one

seanparsons · 2024-10-22T15:48:36Z

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

+            height: 12,
+          },
+        },
+        '.import-wizard-operation-children .operation-done [data-short-time=true]': {


I feel a little uneasy about using these class names to hide things, it's a bit action at a distance to me.

good point! however the design is still temporary (and pending @lankaukk 's insights) - including whether or not to even have these kind of timings..
this is also the reason it's currently behind a (turned-off) flag - so we could merge the logic and iterate on the design later on..

seanparsons · 2024-10-22T15:52:23Z

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

+  operation: ImportOperation,
+) {
+  if (operationRunningStatus === 'waiting') {
+    return 'gray'


Should this be using our color themes? As I would surmise that it will look a little weird in dark mode.

yes, definitely should come from the theme... this is also temporary design and definitely going to be changed in the design iteration

This PR adds a Github import wizard, tracking the progress of importing a project from Github, showing errors or warnings. The design is still preliminary, but it is hidden behind a feature switch so that the logic can be reviewed and merges, in order not to create a long living PR. <video src="https://github.com/user-attachments/assets/65c484b2-815a-4c07-8fb2-2346f06a466e"></video> It supports error/warning states: <img width="1362" alt="image" src="https://github.com/user-attachments/assets/cc999476-f2d8-43bb-b7aa-4999fe15f589"> ## PR Includes: 1. Adding three actions - `SetImportWizardOpen` - controlling the wizard UI - `UpdateImportOperations` - updating the results of individual import operations (desc. to follow). - `UpdateProjectRequirements` - updating the results of checking and fixing Utopia specific requirements 2. Utilities to start/end tracking of import operations, their results and timings. 3. Tracked import operations - tracking hooks are being called at appropriate places in the code. - Loading the code from Github - Parsing the files - Checking specific Utopia requirements - Loading dependencies 4. Utopia checks: - storyboard file (created if not present) - `utopia` entry in package.json - project composition (JS/TS) 5. Not tracked in this PR but will in subsequent ones (can be added modularily): - React version - currently a placeholder - Server side packages - mainly Node builtins - Style frameworks 6. The wizard UI itself - showing progress and results (still preliminary) **Note for reviewers:** there are a lot of changed files due to adding new actions and passing down the `dispatch` parameter, but the main logic is contained in the new services and the wizard React components. **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

liady added 2 commits October 8, 2024 18:30

import wizard

76d0a72

ui and functionality

536c747

file

a898956

liady added 15 commits October 9, 2024 23:39

collapse dependencies

a715add

add requirements service

a5c5a2b

cleanup

8ad412f

dont close on click outside

96649ac

move files around

7bdc946

move to enums

120a6f2

move state to editorState

4e96929

organize

809a8ef

collapse met requirements

37375a0

colors

8eb5f4f

design

d0fb49d

Merge branch 'master' into feat/github-import-wizard

2cad416

refactor enum

3e3b796

fix imports

9fe1a99

add feature switch

cb7f0d7

bkrmendy reviewed Oct 15, 2024

View reviewed changes

editor/src/components/editor/editor-component.tsx Outdated Show resolved Hide resolved

bkrmendy reviewed Oct 15, 2024

View reviewed changes

editor/src/core/es-modules/package-manager/fetch-packages.ts Outdated Show resolved Hide resolved

bkrmendy reviewed Oct 15, 2024

View reviewed changes

editor/src/core/shared/import/import-operation-service.ts Outdated Show resolved Hide resolved

bkrmendy reviewed Oct 15, 2024

View reviewed changes

editor/src/core/shared/import/import-operation-service.ts Outdated Show resolved Hide resolved

liady added 2 commits October 15, 2024 15:39

fix

231b46d

add event handlers

e07ea32

Rheeseyb reviewed Oct 16, 2024

View reviewed changes

editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts Outdated Show resolved Hide resolved

Rheeseyb reviewed Oct 16, 2024

View reviewed changes

editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts Outdated Show resolved Hide resolved

pr comments

888354b

liady added 4 commits October 19, 2024 22:39

refactor (cr)

378deb9

refactor: pass dispatch down instead of a global state

36cadba

Merge branch 'master' into feat/github-import-wizard

e1d8f89

remove enums

a283b4f

liady marked this pull request as ready for review October 20, 2024 03:04

dispatch notifications asynchronously

20f4dc5

liady changed the title ~~feat(import): github import wizard WIP~~ feat(import): github import wizard Oct 20, 2024

seanparsons reviewed Oct 22, 2024

View reviewed changes

liady added 2 commits October 27, 2024 23:03

Merge branch 'master' into feat/github-import-wizard

8a1b91a

dont fire actions if flag is turned off

8fb5834

bkrmendy approved these changes Oct 29, 2024

View reviewed changes

balazsbajorics approved these changes Oct 29, 2024

View reviewed changes

Rheeseyb approved these changes Oct 29, 2024

View reviewed changes

liady merged commit 914b7bc into master Oct 29, 2024
16 checks passed

liady deleted the feat/github-import-wizard branch October 29, 2024 12:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(import): github import wizard #6507

feat(import): github import wizard #6507

liady commented Oct 9, 2024 •

edited

Loading

github-actions bot commented Oct 9, 2024 •

edited

Loading

relativeci bot commented Oct 9, 2024 •

edited

Loading

bkrmendy Oct 15, 2024

liady Oct 16, 2024

seanparsons Oct 22, 2024

liady Oct 28, 2024 •

edited

Loading

seanparsons Oct 22, 2024 •

edited

Loading

liady Oct 28, 2024

seanparsons Oct 22, 2024

liady Oct 28, 2024

feat(import): github import wizard #6507

feat(import): github import wizard #6507

Conversation

liady commented Oct 9, 2024 • edited Loading

PR Includes:

github-actions bot commented Oct 9, 2024 • edited Loading

Try me

relativeci bot commented Oct 9, 2024 • edited Loading

#14940 Bundle Size — 58.02MiB (+0.07%).

bkrmendy Oct 15, 2024

Choose a reason for hiding this comment

liady Oct 16, 2024

Choose a reason for hiding this comment

seanparsons Oct 22, 2024

Choose a reason for hiding this comment

liady Oct 28, 2024 • edited Loading

Choose a reason for hiding this comment

seanparsons Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

liady Oct 28, 2024

Choose a reason for hiding this comment

seanparsons Oct 22, 2024

Choose a reason for hiding this comment

liady Oct 28, 2024

Choose a reason for hiding this comment

liady commented Oct 9, 2024 •

edited

Loading

github-actions bot commented Oct 9, 2024 •

edited

Loading

relativeci bot commented Oct 9, 2024 •

edited

Loading

liady Oct 28, 2024 •

edited

Loading

seanparsons Oct 22, 2024 •

edited

Loading