Merge pull request #60 from fcollonval/add-tour

Add tour

README.md

@@ -3,7 +3,7 @@
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/fcollonval/jupyter_conda/master?urlpath=lab)
 [![Install with conda](https://anaconda.org/conda-forge/jupyter_conda/badges/installer/conda.svg)](https://anaconda.org/conda-forge/jupyter_conda)
 [![npm](https://img.shields.io/npm/v/jupyterlab_conda.svg?style=flat-square)](https://www.npmjs.com/package/jupyterlab_conda)
-[![Build Status](https://travis-ci.com/fcollonval/jupyter_conda.svg?branch=master)](https://travis-ci.com/fcollonval/jupyter_conda)
+![Github Actions Status](https://github.com/fcollonval/jupyter_conda/workflows/Test/badge.svg)
 [![Coverage Status](https://coveralls.io/repos/github/fcollonval/jupyter_conda/badge.svg?branch=master)](https://coveralls.io/github/fcollonval/jupyter_conda?branch=master)
 [![Swagger Validator](https://img.shields.io/swagger/valid/3.0?specUrl=https%3A%2F%2Fraw.githubusercontent.com%2Ffcollonval%2Fjupyter_conda%2Fmaster%2Fjupyter_conda%2Frest_api.yml)](https://petstore.swagger.io/?url=https://raw.githubusercontent.com/fcollonval/jupyter_conda/master/jupyter_conda/rest_api.yml)
 
@@ -33,6 +33,9 @@ conda install -c conda-forge jupyterlab jupyter_conda
 jupyter labextension install jupyterlab_conda
 ```
 
+> Optionally, you could install [`jupyterlab-tour`](https://github.com/fcollonval/jupyterlab-tour) to
+> add a help tour for the conda packages manager.
+
 ## Classical Jupyter Notebook
 
 ### Conda tab in the Jupyter file browser

binder/environment.yml

@@ -3,6 +3,6 @@ channels:
 dependencies:
   - jupyterlab ~=2.0
   - nb_conda_kernels >=2.2.3
-  - nodejs >=11,<13
+  - nodejs >=11
   - notebook >=4.3.1
   - packaging

binder/postBuild

@@ -3,4 +3,4 @@
 # Binder postBuild instructions
 set -eux
 python -m pip install .
-jupyter labextension install jupyterlab_conda
+jupyter labextension install jupyterlab_conda jupyterlab-tour

labextension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab_conda",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Manage your conda environments from JupyterLab",
   "keywords": [
     "jupyter",

labextension/src/components/CondaEnvList.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { style } from "typestyle";
+import { ENVIRONMENT_PANEL_ID } from "../constants";
 import { Conda } from "../tokens";
 import { CondaEnvItem } from "./CondaEnvItem";
 import { CondaEnvToolBar, ENVIRONMENT_TOOLBAR_HEIGHT } from "./CondaEnvToolBar";
@@ -93,6 +94,7 @@ export const CondaEnvList: React.FunctionComponent<IEnvListProps> = (
         onRemove={props.onRemove}
       />
       <div
+        id={ENVIRONMENT_PANEL_ID}
         className={Style.ListEnvs(
           props.height - ENVIRONMENT_TOOLBAR_HEIGHT - 32
         )}

labextension/src/components/CondaEnvToolBar.tsx

@@ -11,6 +11,7 @@ import {
 } from "@jupyterlab/ui-components";
 import * as React from "react";
 import { style } from "typestyle";
+import { ENVIRONMENT_TOOLBAR_CLASS } from "../constants";
 
 //Toolbar height to align with package toolbar
 export const ENVIRONMENT_TOOLBAR_HEIGHT = 40;
@@ -71,7 +72,7 @@ export const CondaEnvToolBar = (props: ICondaEnvToolBarProps): JSX.Element => {
           />
         </Button>
       </div>
-      <div className="lm-Widget jp-Toolbar jp-NbConda-EnvToolbar">
+      <div className={`lm-Widget jp-Toolbar ${ENVIRONMENT_TOOLBAR_CLASS}`}>
         <ToolbarButtonComponent
           icon={addIcon}
           tooltip="Create"

labextension/src/components/CondaPkgList.tsx

@@ -8,6 +8,7 @@ import { HTMLSelect } from "@jupyterlab/ui-components";
 import * as React from "react";
 import { AutoSizer, Column, Table } from "react-virtualized";
 import { classes, style } from "typestyle";
+import { PACKAGES_PANEL_ID, PACKAGE_SELECT_CLASS } from "../constants";
 import { Conda } from "../tokens";
 
 /**
@@ -142,7 +143,7 @@ export class CondaPkgList extends React.Component<IPkgListProps> {
     const changeRender = ({ rowData }: ICellRender): JSX.Element => (
       <div className={"lm-Widget"}>
         <HTMLSelect
-          className={Style.VersionSelection}
+          className={classes(Style.VersionSelection, PACKAGE_SELECT_CLASS)}
           value={rowData.version_selected}
           onClick={(evt: React.MouseEvent): void => {
             evt.stopPropagation();
@@ -175,7 +176,7 @@ export class CondaPkgList extends React.Component<IPkgListProps> {
     );
 
     return (
-      <div className={Style.TableContainer}>
+      <div id={PACKAGES_PANEL_ID} className={Style.TableContainer}>
         <AutoSizer disableHeight>
           {({ width }): JSX.Element => (
             <Table

labextension/src/components/CondaPkgToolBar.tsx

@@ -8,6 +8,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, HTMLSelect, InputGroup } from "@jupyterlab/ui-components";
 import * as React from "react";
 import { classes, style } from "typestyle/lib";
+import { PACKAGES_TOOLBAR_CLASS } from "../constants";
 
 export const PACKAGE_TOOLBAR_HEIGHT = 40;
 
@@ -68,7 +69,7 @@ export interface ICondaPkgToolBarProps {
 
 export const CondaPkgToolBar = (props: ICondaPkgToolBarProps): JSX.Element => {
   return (
-    <div className="lm-Widget jp-NbConda-ToolbarPackages jp-Toolbar">
+    <div className={`lm-Widget ${PACKAGES_TOOLBAR_CLASS} jp-Toolbar`}>
       <div className="lm-Widget jp-Toolbar-item">
         <HTMLSelect
           value={props.category}

labextension/src/constants.ts

@@ -0,0 +1,6 @@
+export const WIDGET_CLASS = "jp-NbConda";
+export const ENVIRONMENT_PANEL_ID = "jp-NbConda-environment";
+export const ENVIRONMENT_TOOLBAR_CLASS = "jp-NbConda-EnvToolbar";
+export const PACKAGES_PANEL_ID = "jp-NbConda-packages";
+export const PACKAGES_TOOLBAR_CLASS = "jp-NbConda-ToolbarPackages";
+export const PACKAGE_SELECT_CLASS = "jp-NbConda-package-select";

labextension/src/index.ts

@@ -20,6 +20,8 @@ import {
   CompanionValidator,
   ICompanionValidator
 } from "./validator";
+import { WIDGET_CLASS } from "./constants";
+import { managerTour } from "./tour";
 
 export { Conda, IEnvironmentManager } from "./tokens";
 
@@ -30,6 +32,7 @@ async function activateCondaEnv(
   restorer: ILayoutRestorer,
   settingsRegistry: ISettingRegistry
 ): Promise<IEnvironmentManager> {
+  let tour: any;
   const { commands, shell } = app;
   const pluginNamespace = "conda-env";
   const command = "jupyter_conda:open-ui";
@@ -55,7 +58,7 @@ async function activateCondaEnv(
       }
 
       content = new CondaEnvWidget(-1, -1, model);
-      content.addClass("jp-NbConda");
+      content.addClass(WIDGET_CLASS);
       content.id = pluginNamespace;
       content.title.label = "Packages";
       content.title.caption = "Conda Packages Manager";
@@ -64,6 +67,13 @@ async function activateCondaEnv(
 
       void tracker.add(widget);
       shell.add(widget, "main");
+
+      if (tour) {
+        commands.execute("jupyterlab-tour:launch", {
+          id: tour.id,
+          force: false
+        });
+      }
     }
   });
 
@@ -79,6 +89,18 @@ async function activateCondaEnv(
   // Add command to settings menu
   menu.settingsMenu.addGroup([{ command: command }], 999);
 
+  app.restored.then(() => {
+    if (commands.hasCommand("jupyterlab-tour:add")) {
+      commands
+        .execute("jupyterlab-tour:add", {
+          tour: managerTour as any
+        })
+        .then(result => {
+          tour = result;
+        });
+    }
+  });
+
   return model;
 }
 

labextension/src/tour.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import {
+  ENVIRONMENT_PANEL_ID,
+  ENVIRONMENT_TOOLBAR_CLASS,
+  PACKAGES_PANEL_ID,
+  PACKAGES_TOOLBAR_CLASS,
+  PACKAGE_SELECT_CLASS,
+  WIDGET_CLASS
+} from "./constants";
+
+export const managerTour = {
+  id: "jupyterlab-conda:tour",
+  label: "Conda Packages Manager Tour",
+  hasHelpEntry: true,
+  steps: [
+    {
+      content: (
+        <p>
+          Thanks for installing <em>jupyter_conda</em>.<br />
+          Let&apos;s have a tour of the UI.
+        </p>
+      ),
+      placement: "center",
+      target: `.${WIDGET_CLASS}`,
+      title: "Conda Packages Manager"
+    },
+    {
+      content: (
+        <p>
+          Your conda environment are listed here.
+          <br />
+          Click on it to manage its packages.
+        </p>
+      ),
+      placement: "right",
+      target: `#${ENVIRONMENT_PANEL_ID}`
+    },
+    {
+      content: (
+        <p>
+          This toolbar contains environment actions like creation, deletion,
+          exportation,...
+        </p>
+      ),
+      placement: "bottom",
+      target: `.${ENVIRONMENT_TOOLBAR_CLASS}`
+    },
+    {
+      content: (
+        <p>
+          This table lists all available conda packages and their status within
+          the selected environment (i.e. installed, updatable or available).
+        </p>
+      ),
+      target: `#${PACKAGES_PANEL_ID}`
+    },
+    {
+      content: (
+        <p>
+          A package can be installed, removed or updated by selecting a status
+          in these selectors.
+        </p>
+      ),
+      placement: "bottom",
+      target: `.${PACKAGE_SELECT_CLASS}`
+    },
+    {
+      content: (
+        <p>
+          The package list can be filtered by packages status and with a search
+          term.
+        </p>
+      ),
+      placement: "bottom-start",
+      target: `.${PACKAGES_TOOLBAR_CLASS}`
+    },
+    {
+      content: <p>Execute package changes with the cart button.</p>,
+      placement: "bottom",
+      target: `.${PACKAGES_TOOLBAR_CLASS} .fa-cart-arrow-down`
+    }
+  ]
+};

labextension/yarn.lock

@@ -5422,7 +5422,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^7.3.2:
+semver@^7.0.0, semver@^7.3.2:
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
   integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==