migrate to JupyterLab 4.x, add ui-tests

.copier-answers.yml

@@ -0,0 +1,14 @@
+# Changes here will be overwritten by Copier; NEVER EDIT MANUALLY
+_commit: v4.1.0
+_src_path: https://github.com/jupyterlab/extension-template
+author_email: [email protected]
+author_name: ii masamitsu
+has_binder: true
+has_settings: false
+kind: frontend
+labextension_name: lc_index
+project_short_description: Open README on started
+python_name: lc_index
+repository: https://github.com/entap/jupyterlab_lc_index.git
+test: false
+

.eslintignore

@@ -3,3 +3,5 @@ dist
 coverage
 **/*.d.ts
 tests
+
+_temp_extension

.github/workflows/build.yml

@@ -17,7 +17,7 @@ jobs:
       uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
 
     - name: Install dependencies
-      run: python -m pip install -U jupyterlab~=3.1 check-manifest
+      run: python -m pip install -U 'jupyterlab>=4.0.0,<5'
 
     - name: Build the extension
       run: |
@@ -29,8 +29,6 @@ jobs:
         jupyter labextension list 2>&1 | grep -ie "lc_index.*OK"
         python -m jupyterlab.browser_check
 
-        check-manifest -v
-
         pip install build
         python -m build --sdist
         cp dist/*.tar.gz myextension.tar.gz
@@ -52,7 +50,7 @@ jobs:
     - name: Install Python
       uses: actions/setup-python@v2
       with:
-        python-version: '3.8'
+        python-version: '3.9'
         architecture: 'x64'
     - uses: actions/download-artifact@v2
       with:

.github/workflows/check-release.yml

@@ -22,9 +22,9 @@ jobs:
           python-version: 3.9
           architecture: 'x64'
       - name: Install node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: 18
 
 
       - name: Get pip cache dir

.github/workflows/release.yml

@@ -0,0 +1,125 @@
+name: Release
+
+on:
+  workflow_dispatch:
+  push:
+    tags: ['*']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: Install node
+      uses: actions/setup-node@v3
+      with:
+       node-version: 18
+    - name: Install Python
+      uses: actions/setup-python@v2
+      with:
+        python-version: '3.9'
+        architecture: 'x64'
+
+
+    - name: Setup pip cache
+      uses: actions/cache@v2
+      with:
+        path: ~/.cache/pip
+        key: pip-3.9-${{ hashFiles('package.json') }}
+        restore-keys: |
+          pip-3.9-
+          pip-
+
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir-path
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+    - name: Setup yarn cache
+      uses: actions/cache@v2
+      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          yarn-
+
+    - name: Install dependencies
+      run: python -m pip install -U 'jupyterlab>=4.0.0,<5'
+    - name: Build the extension
+      run: |
+        set -eux
+        jlpm
+        jlpm run eslint:check
+        python -m pip install .
+
+        jupyter labextension list 2>&1 | grep -ie "lc_index.*OK"
+        python -m jupyterlab.browser_check
+
+        jlpm install
+        cd ./ui-tests
+        jlpm install
+        jlpm playwright install
+        jlpm playwright test
+        cd ..
+
+        pip install build
+        python -m build --sdist
+        cp dist/*.tar.gz myextension.tar.gz
+        pip uninstall -y myextension jupyterlab
+        rm -rf myextension
+
+        npm pack
+        mv lc_index-*.tgz myextension-nodejs.tgz
+
+    - uses: actions/upload-artifact@v2
+      with:
+        name: myextension-sdist
+        path: myextension.tar.gz
+
+    - uses: actions/upload-artifact@v2
+      with:
+        name: myextension-nodejs
+        path: myextension-nodejs.tgz
+
+  draft_release:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - uses: actions/download-artifact@v2
+      with:
+        name: myextension-sdist
+    - uses: actions/download-artifact@v2
+      with:
+        name: myextension-nodejs
+    - name: release
+      uses: actions/create-release@v1
+      id: create_release
+      with:
+        draft: true
+        prerelease: false
+        release_name: ${{ github.ref }}
+        tag_name: ${{ github.ref }}
+        body_path: CHANGELOG.md
+      env:
+        GITHUB_TOKEN: ${{ github.token }}
+    - name: upload pip package
+      uses: actions/upload-release-asset@v1
+      env:
+        GITHUB_TOKEN: ${{ github.token }}
+      with:
+        upload_url: ${{ steps.create_release.outputs.upload_url }}
+        asset_path: myextension.tar.gz
+        asset_name: lc_index-${{ github.ref_name }}.tar.gz
+        asset_content_type: application/gzip
+    - name: upload nodejs package
+      uses: actions/upload-release-asset@v1
+      env:
+        GITHUB_TOKEN: ${{ github.token }}
+      with:
+        upload_url: ${{ steps.create_release.outputs.upload_url }}
+        asset_path: myextension-nodejs.tgz
+        asset_name: lc_index-${{ github.ref_name }}.tgz
+        asset_content_type: application/gzip

.gitignore

@@ -1,12 +1,19 @@
 *.bundle.*
 lib/
 node_modules/
+*.log
 .eslintcache
 .stylelintcache
 *.egg-info/
 .ipynb_checkpoints
 *.tsbuildinfo
 lc_index/labextension
+# Version file is handled by hatchling
+lc_index/_version.py
+
+# Integration tests
+ui-tests/test-results/
+ui-tests/playwright-report/
 
 # Created by https://www.gitignore.io/api/python
 # Edit at https://www.gitignore.io/?templates=python
@@ -58,6 +65,7 @@ htmlcov/
 .coverage.*
 .cache
 nosetests.xml
+coverage/
 coverage.xml
 *.cover
 .hypothesis/
@@ -112,3 +120,6 @@ dmypy.json
 
 # OSX files
 .DS_Store
+
+# Yarn cache
+.yarn/

.prettierignore

@@ -2,4 +2,5 @@ node_modules
 **/node_modules
 **/lib
 **/package.json
+!/package.json
 lc_index

.yarnrc.yml

@@ -0,0 +1,3 @@
+enableImmutableInstalls: false
+
+nodeLinker: node-modules

Dockerfile

@@ -1,4 +1,4 @@
-FROM jupyter/scipy-notebook
+FROM jupyter/scipy-notebook:latest
 
 USER root
 
@@ -7,10 +7,16 @@ RUN pip install --no-cache  jupyter_nbextensions_configurator
 COPY . /tmp/nbindex
 RUN pip install --no-cache /tmp/nbindex
 
+RUN jupyter labextension enable lc_index
+
 RUN mv /tmp/nbindex/example $HOME/ && chown $NB_USER -R $HOME/example && \
     cp /tmp/nbindex/README.* $HOME/ && chown $NB_USER $HOME/README.*
-USER $NB_UID
 
-RUN jupyter nbextensions_configurator enable --user && \
-    jupyter nbextension install --py --user notebook_index && \
-    jupyter nbextension enable --py --user notebook_index
+RUN jupyter nbclassic-extension install --py jupyter_nbextensions_configurator --sys-prefix && \
+    jupyter nbclassic-extension enable --py jupyter_nbextensions_configurator --sys-prefix && \
+    jupyter nbclassic-serverextension enable --py jupyter_nbextensions_configurator --sys-prefix && \
+    jupyter nbclassic-extension install --py --user lc_index && \
+    jupyter nbclassic-extension enable --py --user lc_index && \
+    fix-permissions /home/$NB_USER
+
+USER $NB_USER

README.md

@@ -6,20 +6,80 @@ Jupyter-LC\_index is an extension that puts README.svg and README.md on the tree
 
 README.svg appears on top of the page, and README.md appears on the bottom.
 
-## Prerequisite
+## Requirements
 
-* Jupyter Notebook 5.x or 6.x
+* JupyterLab >= 4.0.0
 
-## Installation
+## Install
 
         $ pip install git+https://github.com/NII-cloud-operation/Jupyter-LC_index
 
 To use the extension you will also need to install and enable, you can use Jupyter subcommand:
 
-        $ jupyter nbextension install --py notebook_index
-        $ jupyter nbextension enable --py notebook_index
+        $ jupyter nbclassic-extension install --py notebook_index
+        $ jupyter nbclassic-extension enable --py notebook_index
 
-then restart Jupyter notebook.
+then restart Jupyter lab.
 
 ## How to Use
 https://github.com/mnagaku/notebooks-diagram is a good example.
+
+## Uninstall
+
+To remove the extension, execute:
+
+```bash
+pip uninstall lc_index
+```
+
+## Contributing
+
+### Development install
+
+Note: You will need NodeJS to build the extension package.
+
+The `jlpm` command is JupyterLab's pinned version of
+[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
+`yarn` or `npm` in lieu of `jlpm` below.
+
+```bash
+# Clone the repo to your local environment
+# Change directory to the lc_index directory
+# Install package in development mode
+pip install -e .
+# Link your development version of the extension with JupyterLab
+jupyter labextension develop . --overwrite
+# Rebuild extension Typescript source after making changes
+jlpm build
+```
+
+You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
+
+```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
+jlpm watch
+# Run JupyterLab in another terminal
+jupyter lab
+```
+
+With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
+
+By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
+
+```bash
+jupyter lab build --minimize=False
+```
+
+### Development uninstall
+
+```bash
+pip uninstall lc_index
+```
+
+In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
+command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
+folder is located. Then you can remove the symlink named `lc_index` within that folder.
+
+### Packaging the extension
+
+See [RELEASE](RELEASE.md)