Initial New Project Wizard scaffolding #2534

sharon-wang · 2024-03-25T21:59:22Z

Intent

First PR for Epic: New Project Wizards for Beta #2110.

This PR mainly includes scaffolding and initial setup/components for the New Project flow, currently only allowing for the creation of a new folder based on the user's project name and directory selections. At this moment, the usable functionality of the New Project wizard is equivalent to the New Folder modal.

This video shows the "happy path" flow:

newprojectwizard.mp4

This video shows the different ways to trigger the New Project Wizard, as well as what's stored in the projectConfig data structure upon "accepting" the wizard modal.

newprojectwizard_projectconfig.mp4

UI Notes

checking the git repo checkbox doesn't yet do anything
project type selection doesn't yet do anything
radio buttons on the Python interpreter page don't yet do anything
Venv/Conda dropdown options are hardcoded text
Conda Python interpreter versions are hardcoded text

Dev Notes

this is feature-flagged by adding IsDevelopmentContext to the precondition for the New Project Wizard action
lots of TODOs in the code! I am keeping track of what still needs to be done/fixed this way
lots of commented out code in the components as placeholders for now
lots of strings are not localized yet

Approach

Create the modal for the New Project flow based on the New Folder modal
Add the New Project action to the same places where you can create a new folder
- Application menu bar: File > New Project…
- IDE Actions bar: New > New Project…
- IDE Top Action Bar Custom Folder Menu: {myCurrentFolderName} > New Project…
- Command Palette (Cmd+Shift+P): Workspaces: New Project…
Handle navigating between steps (back/next buttons) in the wizard
- Create an action bar with ok, cancel, back and next buttons
- Each step in the modal is called a WizardStep (e.g, setting the project name and location is a WizardStep, setting up the Python environment/interpreter is a WizardStep)
- Each substep in a WizardStep is called a WizardSubStep (e.g., setting the project name is a substep, setting the project parent directory is a substep, choosing if the project should be initialized as a git repo is a substep)
Store the user's project configuration state via useContext, so the project config can be accessed from any step
Populate the Python interpreter dropdown with the detected runtimes from the languageRuntimeService.registeredRuntimes

Here's a visualization of the component hierarchy:

The CurrentStep is replaced with the appropriate step each time the user navigates in the wizard (using Back/Next buttons)
- Steps that currently exist: projectTypeStep, projectNameLocationStep, pythonEnvironmentStep

QA Notes

At this point, this work is not meant to be QA'd.

Functionality is a duplication of New Folder.

Can't use keyboard 'Enter' key to create the project.

re-rendering the combo box with the detected python runtimes isn't working yet. Currently, you need to go back a step and come back to the python env step to see the populated combo box.

While the new project feature is under development, include precondition `IsDevelopmentContext`

If the button should be hidden, the config corresponding to the button should be supplied to the OKCancelBackNextActionBar.

Resolves the issue where the Enter key can't be used to accept the modal.

...unless the project type has changed.

sharon-wang · 2024-03-25T22:00:54Z

src/vs/workbench/browser/actions/positronActions.ts

+			category: workspacesCategory,
+			f1: true,
+			// TODO: remove feature flag IsDevelopmentContext when the feature is ready
+			precondition: ContextKeyExpr.and(EnterMultiRootWorkspaceSupportContext, IsDevelopmentContext),


IsDevelopmentContext feature flag here -- this means the Create New Project action won't show up in a release build.

softwarenerd

Looks good. Some localization missing where I mentioned it and elsewhere. 😀

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/newProjectWizardState.tsx

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/steps/pythonEnvironmentStep.tsx

nstrayer

Looks good to me!
I had some React style comments.

One thing I'm curious about is the file organization. it seems like most of the code is in a subfolder of workbench/browser/positronModalDialogs, is there a reason for this rather than having it in its own folder such as workbench/browser/newProjectWizard?

src/vs/workbench/browser/positronComponents/positronModalDialog/components/checkbox.tsx

...ench/browser/positronComponents/positronModalDialog/components/okCancelBackNextActionBar.tsx

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/newProjectModalDialog.css

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/newProjectModalDialog.tsx

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/newProjectWizardContext.tsx

nstrayer · 2024-03-26T20:06:23Z

...vs/workbench/browser/positronModalDialogs/newProjectWizard/steps/projectNameLocationStep.tsx

+				{/* <div style={{ marginBottom: '16px' }}>
+					Your project will be created at:&nbsp;
+					<span style={{ fontFamily: 'monospace', color: '#D7BA7D' }}>
+						{newProjectResult.parentFolder + '/' + newProjectResult.projectName}
+					</span>
+				</div> */}


Will these chunks be uncommented in the future?

Yes, either uncommented or probably replaced.

I have a few spots where I want to display a mixture of regular text and code, but I don't yet have a good way to do that without adding these div+span elements.

There seems to be some sort of string localization support with markdown rendering in other areas (such as Settings), but I haven't figured out how to make that work yet.

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/steps/pythonEnvironmentStep.tsx

...instead of using the && operator, to avoid hitting unexpected behaviour when the object (left operand) being checked is falsy (e.g. 0, NaN), but when returned ends up being rendered as a string.

sharon-wang · 2024-03-27T18:09:58Z

One thing I'm curious about is the file organization. it seems like most of the code is in a subfolder of workbench/browser/positronModalDialogs, is there a reason for this rather than having it in its own folder such as workbench/browser/newProjectWizard?

I added the new project wizard as a subfolder of workbench/browser/positronModalDialogs, since the entrypoint/action to opening up the modal sits alongside the entrypoints of the other dialogs in that directory (new folder, new folder from git). I suppose I thought of the wizard as "one of the dialogs" instead of a more separate component. I can totally move it to workbench/browser/positronNewProjectWizard though -- I can see that making sense since it has more functionality than the existing modal dialogs.

sharon-wang · 2024-03-27T19:43:58Z

Thank you both for the reviews and React insight!

sharon-wang added 26 commits March 25, 2024 13:33

add New Project to top action bar and custom folder menu

7758822

Functionality is a duplication of New Folder.

create OKCancelBackNextActionBar component

312d0ba

create OKCancelBackNextModalDialog component

612231e

WIP: new project modal dialog layout

9cc7ce7

use WizardStep and WizardSubStep to organize inputs

8d9d1b0

remove dependency install step and fix up some code text styling

2d282c7

update newProjectModalDialog with merged dialog enhancements

8d74660

use positron Button instead of HTML button in OKCancelBackNextActionBar

fc1e12f

get useContext somewhat working and separate out step components

21d3fc7

fix circular dependency issues

eb809b8

Can't use keyboard 'Enter' key to create the project.

Update newProjectModalDialog with modal renderer changes

af43759

clean up NewProjectType options

2856e6b

display the detected python runtimes in the combobox

88bb196

re-rendering the combo box with the detected python runtimes isn't working yet. Currently, you need to go back a step and come back to the python env step to see the populated combo box.

add initial placeholder for python environment type selection

1fb143b

get python interpreter dropdown rendering and filtering working

31e8a4c

add feature flag around PositronNewProjectAction

c3096ef

While the new project feature is under development, include precondition `IsDevelopmentContext`

fix up New Project related CSS file formatting

918b680

set the default color for ComboBox title and items

2ad6ac0

remove hide property from ActionBarButtonConfig

d936953

If the button should be hidden, the config corresponding to the button should be supplied to the OKCancelBackNextActionBar.

add comments and note TODOs in the code

01e7f56

fix merge conflicts after rebase with modal dialog refactor

43679e6

add jsdoc for python interpreter drop down utils

4748edd

remove extra leading separator in python interpreters dropdown

67aea70

fix scoping of NewProjectWizardContextProvider

63306ce

Resolves the issue where the Enter key can't be used to accept the modal.

alphabetize services for new project wizard

4cce9db

don't overwrite the project name if it's already set

7a88951

...unless the project type has changed.

sharon-wang requested review from softwarenerd and nstrayer March 25, 2024 21:59

sharon-wang commented Mar 25, 2024

View reviewed changes

update React imports to use ESM import instead of CJS

3d2095c

fix filename for css import

94da3dc

softwarenerd approved these changes Mar 26, 2024

View reviewed changes

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/newProjectWizardState.tsx Outdated Show resolved Hide resolved

src/vs/workbench/browser/positronModalDialogs/newProjectWizard/steps/pythonEnvironmentStep.tsx Outdated Show resolved Hide resolved

nstrayer approved these changes Mar 26, 2024

View reviewed changes

sharon-wang added 5 commits March 26, 2024 16:26

test that the new project wizard context is defined before using it

0d4580f

add missing string localizations or localization TODOs

cc604ec

use logService for logging errors instead of console.log

f5b155c

remove unused empty css file and fix minor css formatting

a1cb7c8

use ternary operator for conditional rendering

7b51b93

...instead of using the && operator, to avoid hitting unexpected behaviour when the object (left operand) being checked is falsy (e.g. 0, NaN), but when returned ends up being rendered as a string.

sharon-wang added 2 commits March 27, 2024 14:34

reorganize new project wizard directory structure

1870073

rename checkbox prop defaultValue to initialChecked

8a6b9a4

sharon-wang merged commit 0326a4e into main Mar 27, 2024
1 check passed

sharon-wang deleted the feature/project-wizard branch March 27, 2024 19:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial New Project Wizard scaffolding #2534

Initial New Project Wizard scaffolding #2534

sharon-wang commented Mar 25, 2024 •

edited

Loading

sharon-wang Mar 25, 2024

softwarenerd left a comment

nstrayer left a comment

nstrayer Mar 26, 2024

sharon-wang Mar 26, 2024

sharon-wang commented Mar 27, 2024

sharon-wang commented Mar 27, 2024

Initial New Project Wizard scaffolding #2534

Initial New Project Wizard scaffolding #2534

Conversation

sharon-wang commented Mar 25, 2024 • edited Loading

Intent

Approach

QA Notes

sharon-wang Mar 25, 2024

Choose a reason for hiding this comment

softwarenerd left a comment

Choose a reason for hiding this comment

nstrayer left a comment

Choose a reason for hiding this comment

nstrayer Mar 26, 2024

Choose a reason for hiding this comment

sharon-wang Mar 26, 2024

Choose a reason for hiding this comment

sharon-wang commented Mar 27, 2024

sharon-wang commented Mar 27, 2024

sharon-wang commented Mar 25, 2024 •

edited

Loading