Create the Get Started page

[shcheklein]

Similar to this Python extension one:

How and when does it run itself?

[rogermparent]

It seems the Python extension uses a configuration option and the ExtensionContext.globalState API to store the state required to determine whether the extension was just installed or the version has changed.

Here's the extensionVersionChanged and activateBackground methods that activates the Python extension's StartPage class and are responsible for automatically opening the start page on first load.

    // Public for testing
    public async extensionVersionChanged(): Promise<boolean> {
        const savedVersion: string | undefined = this.context.globalState.get(EXTENSION_VERSION_MEMENTO);
        const { version } = this.appEnvironment.packageJson;
        let shouldShowStartPage: boolean;

        if (savedVersion) {
            if (savedVersion === version || this.savedVersionisOlder(savedVersion, version)) {
                // There has not been an update
                shouldShowStartPage = false;
            } else {
                sendTelemetryEvent(Telemetry.StartPageOpenedFromNewUpdate);
                shouldShowStartPage = true;
            }
        } else {
            sendTelemetryEvent(Telemetry.StartPageOpenedFromNewInstall);
            shouldShowStartPage = true;
        }

        // savedVersion being undefined means this is the first time the user activates the extension.
        // if savedVersion != version, there was an update
        await this.context.globalState.update(EXTENSION_VERSION_MEMENTO, version);
        return shouldShowStartPage;
    }
    
    // [...]
    
    private async activateBackground(): Promise<void> {
        const settings = this.configuration.getSettings();

        if (settings.showStartPage && this.appEnvironment.extensionChannel === 'stable') {
            // extesionVersionChanged() reads CHANGELOG.md
            // So we use separate if's to try and avoid reading a file every time
            const firstTimeOrUpdate = await this.extensionVersionChanged();

            if (firstTimeOrUpdate) {
                this.firstTime = true;
                this.open().ignoreErrors();
            }
        }
    }

We could start with a simple option to toggle if the welcome page is loaded on activation, and make it easy for the user to opt out if they don't want it after the first load.

[mattseddon]

We have added a set of quick picks that can be used by any user to setup the workspace for use with DVC. This lets them set two underlying options. The first is the path to the DVC CLI and the second is a path to their preferred Python interpreter for the project (they can choose to rely on the ms-python extension if they would like to). We should incorporate a link to this flow inside of the get started page. We also need to revisit the copy and flow of these quick picks as I am sure that the UI/UX can be improved.

[mattseddon]

I think we can close this now that we have a walkthrough. WDYT @shcheklein, @rogermparent?

[mattseddon]

I will investigate what the Python extension does now and then circle back. I have the feeling that they have migrated to a walkthrough now.

[mattseddon]

@rogermparent, @shcheklein the ms-python.python team have removed their custom webview in favour of the walkthrough.

The change happened in this release - https://github.com/microsoft/vscode-python/releases/tag/2021.9.1191016588

This was the issue: microsoft/vscode-python#16453

Closing this now.

[shcheklein]

Thanks, Matt! Question - do they launch it after the initial install?

[mattseddon]

At the moment it appears that they do not do that. I will investigate to see if I can make it happen for us.

If you get a new version of VS Code OR open a new workspace then the Welcome page is shown and all of the walkthroughs are on there:

[mattseddon]

Of course this is how you would make an id for the walkthrough...

const categoryID = extension.identifier.value + '#' + walkthrough.id;

I can fire this once after installation. Will raise a PR.