Jupyterlab extensions

.github/workflows/test.yml → .github/workflows/test-docs-python-nbextensions.yml

@@ -1,7 +1,7 @@
 # This is a GitHub workflow defining a set of jobs with a set of steps.
 # ref: https://docs.github.com/en/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions
 #
-name: Test
+name: Test python-nbextensions-doc
 
 on:
   pull_request:
@@ -58,6 +58,10 @@ jobs:
               echo "GROUP=python" >> $GITHUB_ENV
           fi
       - uses: actions/checkout@v2
+      - name: Install node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '17.x'
       # NOTE: actions/setup-python@v2 can make use of a cache within the GitHub
       #       Action virtual environment and setup extremely fast. 3.9 isn't
       #       available in this cache as of November 2020.
@@ -74,6 +78,9 @@ jobs:
           python -m pip install --upgrade pip wheel setuptools
           python tasks.py install --group="$GROUP"
           pip freeze
+      - name: Install Playwright
+        run: |
+          npx playwright install
       - name: Run pytest
         run: |
           python tasks.py tests --group="$GROUP"

.github/workflows/test-labextensions.yml

@@ -0,0 +1,69 @@
+# This is a GitHub workflow defining a set of jobs with a set of steps.
+# ref: https://docs.github.com/en/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions
+#
+name: Test labextensions
+
+on:
+  pull_request:
+    branches: ["**"]
+  push:
+    branches: [main, master]
+    tags: ["**"]
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  test_labextensions:
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 40
+
+    env:
+      # NOTE: UTF-8 content may be interpreted as ascii and causes errors
+      #       without this.
+      LANG: C.UTF-8
+      MOZ_HEADLESS: 1
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [windows-latest, ubuntu-20.04]
+        python: ["3.9", "3.10"]
+    steps:
+      # This is how you set an environment variable in a GitHub workflow that
+      # will be available in following steps as if you would used `export
+      # MY_ENV=my-value`.
+      - name: Configure environment variables from job flags
+        run: |
+          echo "GROUP=labextensions" >> $GITHUB_ENV
+      - uses: actions/checkout@v2
+      - name: Install node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '17.x'
+      # NOTE: actions/setup-python@v2 can make use of a cache within the GitHub
+      #       Action virtual environment and setup extremely fast. 3.9 isn't
+      #       available in this cache as of November 2020.
+      - name: Install Python ${{ matrix.python }}
+        uses: actions/setup-python@v2
+        with:
+          python-version: ${{ matrix.python }}
+      - name: Install Python dependencies
+        run: |
+          python -m pip install --upgrade pip wheel setuptools
+          python tasks.py install --group=labextensions
+          pip freeze
+      - name: Install Playwright
+        run: |
+          npx playwright install
+      - name: Run pytest
+        run: |
+          python tasks.py tests --group=labextensions
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: nbgrader-playwright-tests-os_${{ matrix.os }}-python_${{ matrix.python }}
+          path: |
+            playwright-tests

.gitignore

@@ -22,6 +22,10 @@ var/
 .installed.cfg
 *.egg
 
+# built labextension
+tsconfig.tsbuildinfo
+nbgrader/labextension/
+
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.
@@ -120,3 +124,12 @@ package-lock.json
 .goutputstream*
 .idea
 .mypy_cache
+
+
+# playwright output tests directory
+playwright-tests/
+playwright-report
+test-results
+/test-results/
+/playwright-report/
+/dist-pw/

.readthedocs.yaml

@@ -3,6 +3,7 @@ build:
   os: ubuntu-20.04
   tools:
     python: "3"
+    nodejs: "16"
 sphinx:
   builder: html
   configuration: nbgrader/docs/source/conf.py

MANIFEST.in

@@ -2,13 +2,25 @@ include *.md
 include *.json
 include *.txt
 
-include .coveragerc
+include tasks.py
+include .readthedocs.yaml
 include .bowerrc
 include mypy.ini
-include pytest.ini
 include codecov.yml
-include .readthedocs.yaml
-include tasks.py
+include yarn.lock
+
+include pytest.ini
+include .coveragerc
+include conftest.py
+include playwright.config.ts
+
+# Lab extension files
+graft nbgrader/labextension
+graft src
+graft style
+graft schema
+prune **/node_modules
+prune lib
 
 #nbgrader format files
 include nbgrader/nbgraderformat/*.json
@@ -32,11 +44,14 @@ recursive-include nbgrader/alembic *
 include nbgrader/tests/apps/files/*
 include nbgrader/tests/preprocessors/files/*
 include nbgrader/tests/nbextensions/files/*
-
+recursive-include nbgrader/tests/labextension_ui-tests *
 # global exclusion
 global-exclude *.pyc
 global-exclude .ipynb_checkpoints
 global-exclude __pycache__
+global-exclude .git
+global-exclude *.pyo
+global-exclude *~
 
 # directories to prune
 prune demos

README.md

@@ -1,8 +1,8 @@
 # nbgrader
 
-Build: [![Build](https://img.shields.io/github/workflow/status/jupyter/nbgrader/Test?logo=github&label=tests)](https://github.com/jupyter/nbgrader/actions)  
-Forum: [![Google Group](https://img.shields.io/badge/-Google%20Group-lightgrey.svg)](https://groups.google.com/forum/#!forum/jupyter)  
-Coverage: [![codecov.io](http://codecov.io/github/jupyter/nbgrader/coverage.svg?branch=master)](http://codecov.io/github/jupyter/nbgrader?branch=master)  
+Build: [![Build](https://img.shields.io/github/workflow/status/jupyter/nbgrader/Test?logo=github&label=tests)](https://github.com/jupyter/nbgrader/actions)
+Forum: [![Google Group](https://img.shields.io/badge/-Google%20Group-lightgrey.svg)](https://groups.google.com/forum/#!forum/jupyter)
+Coverage: [![codecov.io](http://codecov.io/github/jupyter/nbgrader/coverage.svg?branch=master)](http://codecov.io/github/jupyter/nbgrader?branch=master)
 Cite: [![DOI](https://jose.theoj.org/papers/10.21105/jose.00032/status.svg)](https://doi.org/10.21105/jose.00032)
 
 A system for assigning and grading Jupyter notebooks.

conftest.py

@@ -0,0 +1,8 @@
+import pytest
+
+pytest_plugins = ["jupyter_server.pytest_plugin"]
+
+
+@pytest.fixture
+def jp_server_config(jp_server_config):
+    return {"ServerApp": {"jpserver_extensions": {"nbgrader": True}}}

demos/formgrader_workspace.json

@@ -0,0 +1,26 @@
+{
+  "data": {
+    "layout-restorer:data": {
+      "main": {
+        "dock": {
+          "type": "tab-area",
+          "currentIndex": 0,
+          "widgets": [
+            "nbgrader-formgrader:nbgrader-formgrader"
+          ]
+        },
+        "current": "nbgrader-formgrader:nbgrader-formgrader"
+      },
+      "down": {
+        "size": 0,
+        "widgets": []
+      }
+    },
+    "nbgrader-formgrader:nbgrader-formgrader": {
+      "data": {}
+    }
+  },
+  "metadata": {
+    "id": "formgrader"
+  }
+}

install.json

@@ -0,0 +1,5 @@
+{
+  "packageManager": "python",
+  "packageName": "nbgrader",
+  "uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package nbgrader"
+}

nbgrader/__init__.py

@@ -4,7 +4,34 @@
 
 import os
 import sys
-from ._version import version_info, __version__
+import json
+from pathlib import Path
+from ._version import __version__
+
+from .server_extensions.assignment_list import load_jupyter_server_extension as load_assignments
+from .server_extensions.course_list import load_jupyter_server_extension as load_courses
+from .server_extensions.validate_assignment import load_jupyter_server_extension as load_validate
+from .server_extensions.formgrader import load_jupyter_server_extension as load_formgrader
+
+HERE = Path(__file__).parent.resolve()
+
+
+if os.path.exists(HERE / "labextension"):
+    with (HERE / "labextension" / "package.json").open() as fid:
+        data = json.load(fid)
+
+
+    def _jupyter_labextension_paths():
+        return [{
+            "src": "labextension",
+            "dest": data["name"]
+        }]
+
+
+def _jupyter_server_extension_points():
+    return [{
+        "module": "nbgrader"
+    }]
 
 
 # Classic notebook extensions
@@ -51,20 +78,6 @@ def _jupyter_nbextension_paths():
     return paths
 
 
-# Jupyter server extensions
-def _jupyter_server_extension_points():
-    paths = [
-        dict(module="nbgrader.server_extensions.formgrader"),
-        dict(module="nbgrader.server_extensions.validate_assignment")
-    ]
-
-    if sys.platform != 'win32':
-        paths.append(dict(module="nbgrader.server_extensions.assignment_list"))
-        paths.append(dict(module="nbgrader.server_extensions.course_list"))
-
-    return paths
-
-
 # Classic notebook server extensions
 def _jupyter_server_extension_paths():
     paths = [
@@ -77,3 +90,10 @@ def _jupyter_server_extension_paths():
         paths.append(dict(module="nbgrader.server_extensions.course_list"))
 
     return paths
+
+
+def _load_jupyter_server_extension(app):
+    load_assignments(app)
+    load_courses(app)
+    load_formgrader(app)
+    load_validate(app)

nbgrader/docs/source/configuration/jupyterhub_config.rst

@@ -85,7 +85,7 @@ You will additionally need to install and enable the various nbgrader extensions
    :widths: 33 33 33 33
    :header-rows: 1
 
-   * - 
+   * -
      - Students
      - Instructors
      - Formgraders

nbgrader/docs/source/contributor_guide/installation_developer.rst

@@ -11,35 +11,38 @@ clone the nbgrader repository::
 
 Installing and building nbgrader
 -------------------------------------
-nbgrader installs and builds with one command::
+Building nbgrader jupyterlab extension requires nodejs to be installed.
+We recommand using `conda environment <https://docs.conda.io/en/latest/miniconda.html>`_ with `mamba <https://mamba.readthedocs.io/en/latest/>`_::
 
-    pip install -e .[docs,tests]
+    # create a new environment
+    mamba create -n nbgrader -c conda-forge python nodejs -y
 
+    # activate the environment
+    mamba activate nbgrader
 
-Installing notebook extensions
-------------------------------
-Previously this was done using the ``nbgrader extension install`` command.
-However, moving forward this is done using the ``jupyter nbextension`` and
-``jupyter serverextension`` commands.
+    pip install -e ".[docs,tests]"
 
-The nbextensions are Javascript/HTML/CSS so they require
-separate installation and enabling.
-The --symlink option is recommended since it updates the extensions
-whenever you update the nbgrader repository.
-The serverextension is a Python module inside nbgrader, so only an
-enable step is needed.
-To install and enable all the frontend nbextensions (*assignment list*,
-*create assignment*, and *formgrader*) along with the server extensions
-(*assignment list* and *formgrader*) run::
+Installing Jupyter labextensions
+--------------------------------
+The labextensions are compiled during installation, and should be in the ``nbgrader/labextension`` directory.
+There are 5 of them (*formgrader*, *assignment list*, *course list*, *validate assignment* and *create assignment*),
+and with the exception of *create assignment* they must be installed along with the server extensions.
 
-    jupyter nbextension install --symlink --sys-prefix --py nbgrader
-    jupyter nbextension enable --sys-prefix --py nbgrader
-    jupyter serverextension enable --sys-prefix --py nbgrader
+To install the server extensions all together run::
 
-To work properly, the *assignment list* and *formgrader* extensions require
-both the nbextension and serverextension. The *create assignment* extension
-only has an nbextension part.
+    jupyter server extension enable nbgrader --sys-prefix
 
-Installing Firefox Headless WebDriver
--------------------------------------
-To run tests while developing nbgrader and its documentation, the Firefox headless webdriver must be installed. Please `follow the Mozilla installation instructions <https://developer.mozilla.org/en-US/docs/Web/WebDriver>`_ to get Firefox properly setup on your system.
+It is possible to enable only some of them by running::
+
+    jupyter server extension enable nbgrader.server_extensions.formgrader --sys-prefix
+    jupyter server extension enable nbgrader.server_extensions.assignment_list --sys-prefix
+    jupyter server extension enable nbgrader.server_extensions.course_list --sys-prefix
+    jupyter server extension enable nbgrader.server_extensions.validate_assignment --sys-prefix
+
+To install labextensions run::
+
+    jupyter labextension install .
+
+or in developer mode::
+
+    jupyter labextension develop --overwrite .

nbgrader/docs/source/contributor_guide/testing.rst

@@ -27,6 +27,9 @@ To run a selective group of tests you can use one of the following commands:
 | ``python tasks.py tests --group=nbextensions`` | Run tests only for the notebook    |
 |                                                | extensions                         |
 +------------------------------------------------+------------------------------------+
+| ``python tasks.py tests --group=labextensions``| Run tests only for the jupyter lab |
+|                                                | extensions                         |
++------------------------------------------------+------------------------------------+
 | ``python tasks.py tests --group=docs``         | Build the docs                     |
 +------------------------------------------------+------------------------------------+
 | ``python tasks.py tests --group=all``          | Same as ``python tasks.py tests``  |