Start page (#11605)

* Add command to open the start page

* added the message listener
and added start page to the service registry

* small fix

* added start page front end and its redux store

* add store middleware part 1

* remove redux

* remove redux

* Add functionality to some links/buttons

* open start page on extension activation,
add the last messages like the sample notebook and update settings

* start page will only open the first time the
extension is activated or if the version changes

* localize the start page

* added telemetry

* added functional test that loads the page
and checks the DOM.

* added news file

* Address PR comments and
fix scrapping of release notes

* use one localization per paragraph

* Stop scrapping the date from the release notes.
Added some comments.

* localize the sample notebook

* if the localized sample notebook doesn't exist,
open the english one.

* fix linter complaint

* Change some capitalization,
set the env variable UITEST_DISABLE_INSIDERS

* limit release notes to 5,
increase a margin

* added requested awaits

* Move ipynb to 'pyhtonFiles' and its images to 'images'
other PR comments

* merge mistake,
removed jediEnabled from IPythonSettings

* add function to compare versions

* removed render count from functional test
added unit tests
start page won't open if you go back to a privews version

* moved the start page files to common

* added license

* changed command on package.json

* open a copy of the sample notebook
instead of the original file

* -open a copy of the sample notebook
instead of the original
-set a timeout when opening the start page

build/webpack/webpack.datascience-ui.config.builder.js

@@ -34,7 +34,8 @@ function getEntry(bundle) {
         case 'viewers':
             return {
                 plotViewer: ['babel-polyfill', `./src/datascience-ui/plot/index.tsx`],
-                dataExplorer: ['babel-polyfill', `./src/datascience-ui/data-explorer/index.tsx`]
+                dataExplorer: ['babel-polyfill', `./src/datascience-ui/data-explorer/index.tsx`],
+                startPage: ['babel-polyfill', `./src/datascience-ui/startPage/index.tsx`]
             };
         default:
             throw new Error(`Bundle not supported ${bundle}`);
@@ -107,6 +108,12 @@ function getPlugins(bundle) {
                         indexUrl: `${constants.ExtensionRootDir}/out/1`,
                         chunks: ['commons', 'dataExplorer'],
                         filename: 'index.dataExplorer.html'
+                    }),
+                    new HtmlWebpackPlugin({
+                        template: 'src/datascience-ui/startPage/index.html',
+                        indexUrl: `${constants.ExtensionRootDir}/out/1`,
+                        chunks: ['commons', 'startPage'],
+                        filename: 'index.startPage.html'
                     })
                 ]
             );

news/1 Enhancements/11057.md

@@ -0,0 +1 @@
+Added a start page for the extension. It opens to new users or when there is a new release. It can be disabled with the setting 'Python: Show Start Page'.

package.json

@@ -80,6 +80,7 @@
         "onCommand:python.clearWorkspaceInterpreter",
         "onCommand:python.resetInterpreterSecurityStorage",
         "onCommand:python.datascience.createnewnotebook",
+        "onCommand:python.startPage.open",
         "onCommand:python.datascience.showhistorypane",
         "onCommand:python.datascience.importnotebook",
         "onCommand:python.datascience.importnotebookfile",
@@ -654,6 +655,11 @@
                 "title": "%python.command.python.datascience.createnewnotebook.title%",
                 "category": "Python"
             },
+            {
+                "command": "python.startPage.open",
+                "title": "%python.command.python.startPage.open.title%",
+                "category": "Python"
+            },
             {
                 "command": "python.datascience.scrolltocell",
                 "title": "%python.command.python.datascience.scrolltocell.title%",
@@ -1106,6 +1112,11 @@
                     "title": "%python.command.python.datascience.createnewnotebook.title%",
                     "category": "Python"
                 },
+                {
+                    "command": "python.startPage.open",
+                    "title": "%python.command.python.startPage.open.title%",
+                    "category": "Python"
+                },
                 {
                     "command": "python.datascience.runtoline",
                     "category": "Python",
@@ -2841,6 +2852,12 @@
                         "daily"
                     ],
                     "scope": "application"
+                },
+                "python.showStartPage": {
+                    "type": "boolean",
+                    "default": true,
+                    "description": "Show the Python Start Page when a new update is released.",
+                    "scope": "application"
                 }
             }
         },

package.nls.json

@@ -75,6 +75,7 @@
     "python.command.python.datascience.addcellbelow.title": "Add Empty Cell to File",
     "python.command.python.datascience.scrolltocell.title": "Scroll Cell Into View",
     "python.command.python.datascience.createnewnotebook.title": "Create New Blank Jupyter Notebook",
+    "python.command.python.startPage.open.title": "Open Start Page",
     "python.command.python.datascience.selectJupyterInterpreter.title": "Select Interpreter to start Jupyter server",
     "Datascience.currentlySelectedJupyterInterpreterForPlaceholder": "current: {0}",
     "python.command.python.analysis.clearCache.title": "Clear Module Analysis Cache",
@@ -491,6 +492,19 @@
     "DataScience.unhandledMessage": "Unhandled kernel message from a widget: {0} : {1}",
     "DataScience.qgridWidgetScriptVersionCompatibilityWarning": "Unable to load a compatible version of the widget 'qgrid'. Consider downgrading to version 1.1.1.",
     "DataScience.kernelStarted": "Started kernel {0}",
+    "StartPage.getStarted": "Python - Get Started",
+    "StartPage.pythonExtensionTitle": "Python Extension",
+    "StartPage.createJupyterNotebook": "Create a Jupyter Notebook",
+    "StartPage.notebookDescription": "- Use \"<div class=\"italics\">Shift + Command + P</div> \" to open the <div class=\"link\" role=\"button\" onclick={0}>Command Palette</div><br />- Type \"<div class=\"link italics\" role=\"button\" onclick={1}>Create New Blank Jupyter Notebook</div> \"<br />- Explore our <div class=\"link\" role=\"button\" onclick={2}>sample notebook</div> to learn about notebook features",
+    "StartPage.createAPythonFile": "Create a Python File",
+    "StartPage.pythonFileDescription": "- Create a new file and use the .py extension<br />- <div class=\"link\" role=\"button\" onclick={0}>Open a file or workspace</div> to continue work",
+    "StartPage.openInteractiveWindow": "Open the Interactive Window",
+    "StartPage.interactiveWindowDesc": "- You can create cells on a Python file by typing \"#%%\" <br /> - Use \"<div class=\"italics\">Shift + Enter</div> \" to run a cell, the output will be shown in the interactive window",
+    "StartPage.releaseNotes": "Take a look at our <a class=\"link\" href={0}>Release Notes</a> to learn more about the latest features",
+    "StartPage.tutorialAndDoc": "Explore more features in our <a class=\"link\" href={0}>Tutorials</a> or check <a class=\"link\" href={1}>Documentation</a> for tips and troubleshooting.",
+    "StartPage.dontShowAgain": "Don't show this page again",
+    "StartPage.helloWorld": "Hello world",
+    "StartPage.sampleNotebook": "Welcome_To_VSCode_Notebooks.ipynb",
     "DataScience.libraryRequiredToLaunchJupyterKernelNotInstalledInterpreter": "{0} requires {1} to be installed.",
     "DataScience.runByLine": "Run by line",
     "DataScience.continueRunByLine": "Stop",

pythonFiles/Welcome_To_VSCode_Notebooks.ipynb

@@ -0,0 +1,192 @@
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# Creating a new notebook\n",
+        "\n",
+        "<style type=\"text/css\">\n",
+        "dt, dd {\n",
+        "            display: inline-block;\n",
+        "            margin: 0px;\n",
+        "            padding: 0px;\n",
+        "            margin-bottom: 5px;\n",
+        "        }\n",
+        "</style>\n",
+        "\n",
+        "1. <dl>\n",
+        "    <dt>Open the command palette with the shortcut:</dt>\n",
+        "    <dd>\n",
+        "        <div class=\"monaco-keybinding\" title=\"Control+Shift+P\">\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">Ctrl/Command</span>\n",
+        "            <span class=\"monaco-keybinding-key-separator\">+</span>\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">Shift</span>\n",
+        "            <span class=\"monaco-keybinding-key-separator\">+</span>\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">P</span>\n",
+        "        </div>\n",
+        "    </dd>\n",
+        "</dl>\n",
+        "\n",
+        "2. <p>Search for the command <code>Create New Blank Jupyter Notebook</code></p>\n",
+        "\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# How to get back to the start page\n",
+        "\n",
+        "1. <dl>\n",
+        "    <dt style=\"display: inline-block\">Open the command palette with the shortcut:</dt>\n",
+        "    <dd style=\"display: inline-block\">\n",
+        "        <div class=\"monaco-keybinding\" title=\"Control+Shift+P\">\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">Ctrl/Command</span>\n",
+        "            <span class=\"monaco-keybinding-key-separator\">+</span>\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">Shift</span>\n",
+        "            <span class=\"monaco-keybinding-key-separator\">+</span>\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">P</span>\n",
+        "        </div>\n",
+        "    </dd>\n",
+        "</dl>\n",
+        "\n",
+        "2. <p>Search for the command <code>Python: Open Start Page</code></p>\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# Getting started\n",
+        "\n",
+        "This view is what we call our Notebook Editor, an interactive environment that lets you write and execute code."
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "print('hello world')"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "- <dl>\n",
+        "    <dt>To execute the code in the cell above, click on the cell to select it and then either press the play <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
+        "<path style=\"fill: #388A34 !important; fill-rule: evenodd !important; clip-rule: evenodd !important\" d=\"M3.99977 14V2.18091L12.9998 8.06215L3.99977 14ZM5.5 4.99997L10.3145 8.06215L5.5 11.1809L5.5 4.99997Z\"/>\n",
+        "</svg>\n",
+        " button in the cell toolbar, or use the keyboard shortcut</dt>\n",
+        "    <dd style=\"display: inline-block\">\n",
+        "        <div class=\"monaco-keybinding\">\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">Ctrl/Command</span>\n",
+        "            <span class=\"monaco-keybinding-key-separator\">+</span>\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">Enter</span>\n",
+        "        </div>\n",
+        "    </dd>\n",
+        "</dl>\n",
+        "- To edit the code, just click in cell and start editing.\n",
+        "- <dl>\n",
+        "    <dt>To add a new cell below, click the <code>Add Cell</code> icon \n",
+        "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
+        "<path style=\"fill: currentColor !important;\" d=\"M14 7V8H8V14H7V8H1V7H7V1H8V7H14Z\"/>\n",
+        "</svg> \n",
+        "at the bottom left of the cell or enter command mode with the</dt>\n",
+        "    <dd>\n",
+        "        <div class=\"monaco-keybinding\">\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">ESC</span>\n",
+        "        </div>\n",
+        "    </dd>\n",
+        "    <dt>Key and then use the keyboard shortcut</dt>\n",
+        "    <dd>\n",
+        "        <div class=\"monaco-keybinding\">\n",
+        "            <span class=\"monaco-keybinding-key\" style=\"color: inherit !important; background-color: inherit !important;\">B</span>\n",
+        "        </div>\n",
+        "    </dd>\n",
+        "    <dt>to create the new cell below.</dt>\n",
+        "</dl>\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# Features\n",
+        "\n",
+        "**Variable explorer**\n",
+        "\n",
+        "<p>To view all your active variables and their current values in the notebook, click on the variable explorer icon \n",
+        "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
+        "<path style=\"fill: currentColor !important;\" d=\"M2.75 3.5H12.5V12.5H2.75V3.5ZM6.5 8V9.5H8.75V8H6.5ZM8.75 7.25V5.75H6.5V7.25H8.75ZM5.75 7.25V5.75H3.5V7.25H5.75ZM3.5 8V9.5H5.75V8H3.5ZM5.75 11.75V10.25H3.5V11.75H5.75ZM8.75 11.75V10.25H6.5V11.75H8.75ZM11.75 11.75V10.25H9.5V11.75H11.75ZM11.75 9.5V8H9.5V9.5H11.75ZM11.75 7.25V5.75H9.5V7.25H11.75ZM3.5 5H11.75V4.25H3.5V5Z\"/>\n",
+        "</svg>\n",
+        "in the top toolbar.</p>\n",
+        "\n",
+        "<img src=\"https://raw.githubusercontent.com/microsoft/vscode-python/master/images/variableexplorer.png\" width=\"638\" height=\"318\" />\n",
+        "\n",
+        "**Data Viewer**\n",
+        "\n",
+        "<p>To view your data frame in a more visual \"Excel\" like format, open the variable explorer and to the left of any dataframe object, you will see the data viewer icon\n",
+        "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
+        "<path style=\"fill: currentColor !important;\" d=\"M12 0V9.75H9.75V12H0V2.25H2.25V0H12ZM11.25 9V0.75H3V2.25H4.5V3H0.75V11.25H9V7.5H9.75V9H11.25ZM5.51367 7.01367L4.98633 6.48633L8.4668 3H6V2.25H9.75V6H9V3.5332L5.51367 7.01367Z\"/>\n",
+        "</svg>\n",
+        "which you can click to open the data viewer.<p>\n",
+        "\n",
+        "<img src=\"https://raw.githubusercontent.com/microsoft/vscode-python/master/images/dataviewer.gif\" width=\"638\" height=\"318\" />\n",
+        "\n",
+        "**Convert to Python File**\n",
+        "\n",
+        "<p>To export your notebook to a Python file (.py), click on the <code>Convert to Python script</code> icon \n",
+        "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
+        "<path style=\"fill: currentColor !important;\" d=\"M11 7.394L13.0177 9.41086L12.4109 10.0169L11.4286 9.03457V12.2857H8V11.4286H10.5714V9.03457L9.58914 10.0169L8.98229 9.41086L11 7.394ZM14 3.53686V8.85714H13.1429V4.57143H11.4286V2.85714H9.71429V8H8.85714V2H12.4631L14 3.53686ZM12.9654 3.71429L12.2857 3.03457V3.71429H12.9654ZM2 12.2857H7.14286V11.4286H2V12.2857ZM2 14H7.14286V13.1429H2V14ZM2 10.5714H7.14286V9.71429H2V10.5714Z\"/>\n",
+        "<path style=\"fill: #007ACC !important;\" d=\"M11 7.38538L13.0177 9.40223L12.4109 10.0082L11.4286 9.02595V12.2771H8V11.4199H10.5714V9.02595L9.58914 10.0082L8.98229 9.40223L11 7.38538Z\"/>\n",
+        "</svg>\n",
+        "in the top toolbar \n",
+        "</p>\n",
+        "\n",
+        "<img src=\"https://raw.githubusercontent.com/microsoft/vscode-python/master/images/savetopythonfile.png\" width=\"638\" height=\"113\" />\n",
+        "\n",
+        "**Plot Viewer**\n",
+        "\n",
+        "<p>If you have a graph (such as matplotlib) in your output, you'll notice if you hover over the graph, the <code>Plot Viewer</code> icon \n",
+        "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
+        "<path style=\"fill: currentColor !important;\" d=\"M9.71429 6.28571V12.2857H7.14286V6.28571H9.71429ZM13.1429 2.85714V12.2857H10.5714V2.85714H13.1429ZM2.85714 13.1429H14V14H2V2H2.85714V13.1429ZM6.28571 4.57143V12.2857H3.71429V4.57143H6.28571Z\"/>\n",
+        "</svg>\n",
+        "will appear in the top left. Click the icon to open up the graph in the Plotviewer which allows you to zoom on your plots and export it in formats such as png and jpeg.</p>\n",
+        "\n",
+        "<img src=\"https://raw.githubusercontent.com/microsoft/vscode-python/master/images/plotviewer.gif\" width=\"638\" height=\"318\" />\n",
+        "\n",
+        "**Switching Kernels**\n",
+        "\n",
+        "The notebook editor will detect all kernels in your system by default. To change your notebook kernel, click on the kernel status in the top toolbar at the far right. For example, your kernel status may say \"Python 3: Idle\". This will open up the kernel selector where you can choose your desired kernel.\n",
+        "\n",
+        "<img src=\"https://raw.githubusercontent.com/microsoft/vscode-python/master/images/kernelchange.gif\" width=\"638\" height=\"318\" />\n",
+        "\n",
+        "**Remote Jupyter Server**\n",
+        "\n",
+        "<p>To connect to a remote Jupyter server, open the command prompt and search for the command <code>Specify remote or local Jupyter server for connections</code>. Then select <code>Existing</code> and enter the remote Jupyter server URL. Afterwards, you'll be prompted to reload the window and the Notebook will be opened connected to the remote Jupyter server.</p>\n",
+        "\n",
+        "<img src=\"https://raw.githubusercontent.com/microsoft/vscode-python/master/images/remoteserver.gif\" width=\"638\" height=\"318\" />"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "colab_type": "text",
+        "id": "-Rh3-Vt9Nev9"
+      },
+      "source": [
+        "## More Resources\n",
+        "\n",
+        "- [Data science tutorial for Visual Studio Code](https://code.visualstudio.com/docs/python/data-science-tutorial)\n",
+        "- [Jupyter Notebooks in Visual Studio Code documentation](https://code.visualstudio.com/docs/python/jupyter-support)\n"
+      ]
+    }
+  ],
+  "metadata": {},
+  "nbformat": 4,
+  "nbformat_minor": 0
+}

src/client/common/application/commands.ts

@@ -29,6 +29,7 @@ interface ICommandNameWithoutArgumentTypeMapping {
     [Commands.Set_ShebangInterpreter]: [];
     [Commands.Run_Linter]: [];
     [Commands.Enable_Linter]: [];
+    ['workbench.action.showCommands']: [];
     ['workbench.action.debug.continue']: [];
     ['workbench.action.debug.stepOver']: [];
     ['workbench.action.debug.stop']: [];
@@ -72,6 +73,7 @@ interface ICommandNameWithoutArgumentTypeMapping {
     [DSCommands.ExportOutputAsNotebook]: [];
     [DSCommands.AddCellBelow]: [];
     [DSCommands.CreateNewNotebook]: [];
+    [Commands.OpenStartPage]: [];
     [LSCommands.ClearAnalyisCache]: [];
 }
 
@@ -83,6 +85,7 @@ interface ICommandNameWithoutArgumentTypeMapping {
  * @extends {ICommandNameWithoutArgumentTypeMapping}
  */
 export interface ICommandNameArgumentTypeMapping extends ICommandNameWithoutArgumentTypeMapping {
+    ['workbench.action.quickOpen']: [string];
     ['workbench.extensions.installExtension']: [Uri | 'ms-python.python'];
     ['setContext']: [string, boolean];
     ['python.reloadVSCode']: [string];

src/client/common/configSettings.ts

@@ -85,6 +85,7 @@ export class PythonSettings implements IPythonSettings {
         }
     }
     private static pythonSettings: Map<string, PythonSettings> = new Map<string, PythonSettings>();
+    public showStartPage = true;
     public downloadLanguageServer = true;
     public jediPath = '';
     public jediMemoryLimit = 1024;

src/client/common/constants.ts

@@ -66,6 +66,7 @@ export namespace Commands {
     export const GetSelectedInterpreterPath = 'python.interpreterPath';
     export const ClearWorkspaceInterpreter = 'python.clearWorkspaceInterpreter';
     export const ResetInterpreterSecurityStorage = 'python.resetInterpreterSecurityStorage';
+    export const OpenStartPage = 'python.startPage.open';
 }
 export namespace Octicons {
     export const Test_Pass = '$(check)';