Merge branch 'main' into playwright_action

.github/ISSUE_TEMPLATE/release.md

@@ -22,11 +22,11 @@ Release captain responsible - <@gh_username>
 
 ### 2. Prepare the codebase for a new release
 
-- [ ] Create a new git branch for the release `git checkout -b release-2023.9.1`
+- [ ] Create a new git branch for the release `git checkout -b release-2024.9.1`
   - [ ] Prepare the branch just in case `git clean -fxdq`
 - [ ] Bump `conda-store-ui` version in `package.json`
-- [ ] Follow the manual release instructions in the Release.md file (do not make the release yet!)
-- [ ] Make a release commit: `git commit -m 'REL - 2023.9.1'`
+- [ ] Follow the manual release instructions in the `Release.md` file (do not make the release yet!)
+- [ ] Make a release commit: `git commit -m 'REL - 2024.9.1'`
 - [ ] Push the release (REL) commit
 - [ ] If a **release candidate** is needed, tick this box when we're ready for a full release.
 
@@ -39,6 +39,7 @@ Release captain responsible - <@gh_username>
   - Add release notes in the field below [^github-activity].
 - [ ] Confirm that the release completed
   - [The `release` GitHub action job](https://github.com/conda-incubator/conda-store-ui/blob/main/.github/workflows/release.yml) has been completed successfully in the [actions tab](https://github.com/conda-incubator/conda-store-ui/actions).
+- Once the release is completed open a PR to adjust the `version` in `package.json` to the next release-dev (e.g., `2023.9.1-dev`)
 - [ ] Celebrate, you're done! 🎉
 
 [^github-activity]: If you wish, use [`github-activity` to generate a changelog](https://github.com/choldgraf/github-activity), e.g. `github-activity conda-incubator/conda-store --since 2023.9.1 --until 2023.10.1`.

.github/workflows/build.yml

@@ -18,10 +18,10 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "Set up Node.js 🧶"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
-          cache: 'yarn'
+          cache: "yarn"
 
       - name: "Install dependencies 📦"
         run: yarn
@@ -33,10 +33,11 @@ jobs:
         run: yarn run build
 
       - name: "Build application artifacts 🏗"
-        run: yarn run webpack bundle
+        # ensure we use the prod target to minimise assets
+        run: yarn run webpack:prod bundle
 
       - name: "Upload artifacts 📤"
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: webpack-bundle
           path: dist/

.github/workflows/javascript-tests.yml

@@ -8,27 +8,29 @@ name: JavaScript tests (Jest)
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'yarn' 
-        # https://github.com/actions/setup-node?tab=readme-ov-file#caching-global-packages-data
-    - run: yarn install --immutable
-      # https://yarnpkg.com/cli/install#options
-    - run: yarn test
+      - name: "Checkout repository 🛎"
+        uses: actions/checkout@v4
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+          # https://github.com/actions/setup-node?tab=readme-ov-file#caching-global-packages-data
+      - name: "Install dependencies 📦"
+        run: yarn install --immutable
+        # https://yarnpkg.com/cli/install#options
+      - name: "Run tests 🧪"
+        run: yarn test

.github/workflows/pages.yml

@@ -2,27 +2,27 @@ name: pages-build-and-deploy-gh-pages
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
 
   workflow_dispatch:
-  
+
 permissions:
   contents: write
-  
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v3
+      - name: "Checkout repositorty 🛎️"
+        uses: actions/checkout@v4
 
-      - name: Install and Build 🔧 
+      - name: "Install and Build 🔧"
         run: |
           yarn
           yarn run storybook:build
-          
-      - name: Deploy 🚀
+
+      - name: "Deploy pages 🚀"
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           folder: storybook-static

.github/workflows/release.yml

@@ -21,10 +21,10 @@ jobs:
 
       # Setup .npmrc file to publish to npm
       - name: "Set up Node.js 🧶"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
-          registry-url: 'https://registry.npmjs.org'
+          registry-url: "https://registry.npmjs.org"
           scope: "@conda-store-ui"
 
       - name: "Install dependencies 📦"
@@ -34,7 +34,7 @@ jobs:
         run: yarn eslint:check
 
       - name: "Download webpack bundle 📦"
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: webpack-bundle
           path: dist/

.github/workflows/test.yml

@@ -22,27 +22,27 @@ jobs:
       - name: "Checkout repository 🛎"
         uses: actions/checkout@v4
 
-      - name: "Set up Python"
+      - name: "Set up Python 🐍"
         uses: conda-incubator/setup-miniconda@v3
-        env:
-          CONDA_SOLVER: libmamba
         with:
+          mamba-version: "*"
+          channels: conda-forge
           activate-environment: cs-ui-dev-env
           environment-file: environment_dev.yml
           auto-activate-base: false
 
-      - name: "Set up environment variables"
+      - name: "Set up environment variables 🔨"
         run: |
           cp .env.example .env
 
-      - name: "Install Dependencies"
+      - name: "Install Dependencies 📦"
         run: |
           sudo apt install wait-for-it -y
           playwright install chromium
           yarn install --immutable
           yarn run build
 
-      - name: "Start web server"
+      - name: "Start web server and run tests 🧪"
         shell: bash -el {0}
         run: |
           yarn run start &
@@ -53,14 +53,14 @@ jobs:
         run: |
           pytest --video on --output video --screenshots true test/playwright/test_ux.py
 
-      - name: "Upload screenshot artifacts"
+      - name: "Upload screenshot artifacts 📤"
         uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:
           name: screenshots
           path: test-results
 
-      - name: "Upload video artifact"
+      - name: "Upload video artifact 📤"
         uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:

README.md

@@ -32,16 +32,24 @@ This guide will help you to set up your local development environment.
 
 Before setting up conda-store-ui, you must prepare your environment.
 
-We use [Docker Compose](https://docs.docker.com/compose/) to set up the infrastructure before starting ensure that you have Docker Compose installed. If you need to install Docker Compose, please see their [installation documentation](https://docs.docker.com/compose/install/)
+We use [Docker Compose](https://docs.docker.com/compose/) to set up the infrastructure. Before starting ensure that you
+have Docker Compose installed.
+If you need to install Docker Compose, please see their [installation documentation](https://docs.docker.com/compose/install/)
 
 1. Clone the [conda-store-ui](https://github.com/conda-incubator/conda-store-ui.git) repository.
-2. Copy `.env.example` to `.env`. All default settings should work, but if you want to test against a different version of conda-store-server, you can specify if in the `.env` file by setting the `CONDA_STORE_SERVER_VERSION` variable to the desired version. Refer to the [Configuration documentation](https://conda-incubator.github.io/conda-store-ui/?path=/docs/docs-configuration--page) for more information on the `.env` file.
+2. Copy `.env.example` to `.env`. All default settings should work, but if you want to test against a different version
+   of conda-store-server, you can specify if in the `.env` file by setting the `CONDA_STORE_SERVER_VERSION` variable to
+   the desired version.
+   Refer to the [Configuration documentation](https://conda.store/conda-store-ui/how-tos/configure-ui/) for more
+   information on the `.env` file.
 
 ### Local Development with conda-store-ui running in Docker 🐳
 
 Running conda-store-ui in Docker is the most straightforward way to set up your local development environment.
 
-1. Run `yarn install`. This will download the needed JavaScript dependencies into a directory named `node_modules/`. This directory will later be copied into the `conda-store-ui` Docker container for use at runtime by the Conda Store UI app.
+1. Run `yarn install`. This will download the needed JavaScript dependencies into a directory named `node_modules/`.
+   This directory will later be copied into the `conda-store-ui` Docker container for use at runtime by the Conda Store
+   UI app.
 2. Run `yarn run start:docker` to start the entire development stack.
 3. Open you local browser and go to [http://localhost:8000](http://localhost:8000) so see conda-store-ui.
 4. You can then log in using the default username of `username` and default password of `password`.
@@ -54,7 +62,8 @@ This setup still uses Docker for supporting services but runs conda-store-ui loc
 
 #### Set up your environment
 
-This project uses [Conda](https://conda.io) for package management. To set up Conda, please see their [installation documentation](https://docs.conda.io/projects/conda/en/latest/user-guide/install/index.html).
+This project uses [conda](https://conda.io) for package management.
+To set up conda, please see their [installation documentation](https://docs.conda.io/projects/conda/en/latest/user-guide/install/index.html).
 
 1. Change to the project root `cd conda-store-ui`
 2. From the project root create the conda environment `conda env create -f environment_dev.yml`
@@ -71,18 +80,11 @@ Hot reloading is enabled, so when you make changes to source files, your browser
 
 ### Making a release 🚀
 
-To create a new version of this package, follow these steps:
+To create a new version of this package: the release captain will open an issue with the `release` template and follow
+the steps outlined in the issue.
 
-1. Bump the version number in `package.json` (we use CalVer: `YYYY.MM.releaseNumber` starting with `releaseNumber=1`)
-2. [Start a new GitHub release](https://github.com/conda-incubator/conda-store-ui/releases/new)
-   - Call the release the current version, e.g. `2023.9.1`
-   - In the **`Choose a Tag:`** dropdown, type in the release name (e.g., `2023.9.1`) and click "Create new tag"
-   - Add the release notes in the text field [^github-activity]
-3. Confirm that the release completed successfully by checking the [GitHub Actions page](https://github.com/conda-incubator/conda-store-ui/actions). Once completed, a new release will be available at [npm - @conda-store/conda-store-ui](https://libraries.io/npm/@conda-store%2Fconda-store-ui)
-
-🔗 You can find more details about out release process and versioning approach in our [Maintenance docs](https://conda.store/community/maintenance/release).
-
-[^github-activity]: If you wish, use [`github-activity` to generate a Changelog](https://github.com/choldgraf/github-activity), e.g. `github-activity conda-incubator/conda-store-ui --since 2023.9.1 --until 2023.10.1 --auth <GH personal access token>`
+🔗 You can find more details about out release process and versioning approach in our
+[Maintenance docs](https://conda.store/community/maintenance/release).
 
 ### Running Tests
 
@@ -125,19 +127,17 @@ Steps to install and set up:
    yarn build
    ```
 
-To run the tests, you will need to run commands in two separate terminal windows
-or tabs.
-
-Steps to run:
+To run the tests, you will need to run the following commands in two separate terminal windows
+or tabs:
 
 1. In the first terminal window/tab, enter the following:
    ```sh
    conda activate cs-ui-dev-env
    yarn start
    ```
 2. Wait for server to start (you'll know it's ready when it says "webpack 5.xx.x
-compiled successfully"). Open a **new terminal window or tab** and enter the
-following:
+   compiled successfully"). Open a **new terminal window or tab** and enter the
+   following:
    ```sh
    conda activate cs-ui-dev-env
    pytest
@@ -149,8 +149,8 @@ If you need to debug, try replacing the last command with:
 PWDEBUG=1 pytest
 ```
 
-Note: PW stands for Playwright. `PWDEBUG=1` puts [Playwright in debug
-mode](https://playwright.dev/python/docs/debug).
+> [!NOTE]
+> PW stands for Playwright. `PWDEBUG=1` puts [Playwright in debug mode](https://playwright.dev/python/docs/debug).
 
 ## Code of Conduct 🤝
 

RELEASE.md

@@ -1,25 +1,32 @@
 # Manual release process
 
-1. Create a new branch for the release `git checkout -b release-2023.9.1`
-2. Clean the branch `git clean -fxdq`
-3. Increment version in `package.json`
-4. Build the package locally:
+1. Open a new release issue in the repository, following the [release issue template](../.github/ISSUE_TEMPLATE/release.md).
+1. Create a new branch for the release `git checkout -b release-2024.9.1`
+1. Clean the branch `git clean -fxdq`
+1. Increment the version in `package.json`
+1. Build the package locally:
 
    ```bash
    yarn install
 
    # build the package
    yarn run build
 
-   # for the browser bundle
-   yarn run webpack bundle
+   # for the browser bundle - this will generate a dist directory for the
+   # compiled assets, by using the prod target we ensure assets will be
+   # optimised accordingly, you can check the contents in the /dist directory
+   yarn run webpack:prod bundle
 
    # pack the bundle
    yarn pack --filename conda-store-ui.tgz
 
    ```
 
-5. Perform a local dry run publish:
+> [!IMPORTANT]  
+> You need to be logged in to the npmjs registry to publish the package.
+> And have access to the conda-store npm namespace.
+
+1. Perform a local dry run publish:
 
    ```bash
    # dry run publish to npmjs
@@ -30,25 +37,25 @@ If the dry run looks good, continue with the release checklist items.
 
 ## Troubleshooting notes
 
-* If there are issues with the [GitHub Release UI](https://github.com/conda-incubator/conda-store-ui/releases/new), ensure that whatever code you published is checked into git, then tag and push the commit and tag:
+- If there are issues with the [GitHub Release UI](https://github.com/conda-incubator/conda-store-ui/releases/new), ensure that whatever code you published is checked into git, then tag and push both the commit and the tag:
 
-   ```bash
-   # use the same version here as in package.json, but without a leading `v`
-   git tag -a YYYY.M.ReleaseNumber
+  ```bash
+  # use the same version here as in package.json, but without a leading `v`
+  git tag -a YYYY.M.ReleaseNumber
 
-   # push to upstream
-   git push && git push --tags
-   ```
+  # push to upstream
+  git push && git push --tags
+  ```
 
-* In case the [Release GitHub Actions workflow][release-action] fails, publish to npmjs manually. You need access to the [conda-store-ui npm package][cs-ui-npm] for this:
+- In case the [Release GitHub Actions workflow][release-action] fails, publish to npmjs manually. You need access to the [conda-store-ui npm package][cs-ui-npm] for this:
 
-   ```bash
-   # you likely need to login first
-   # npm login --registry https://registry.npmjs.org --scope @conda-store-ui
+  ```bash
+  # you will need to login first - and have access to the npm namespace
+  # npm login --registry https://registry.npmjs.org --scope @conda-store-ui
 
-   # publish release to npmjs
-   npm publish --verbose --access public conda-store-ui.tgz
-   ```
+  # publish release to npmjs
+  npm publish --verbose --access public conda-store-ui.tgz
+  ```
 
 <!-- Link -->
 

docker/assets/conda_store_config.py

@@ -53,7 +53,7 @@
 c.CondaStoreServer.authentication_class = DummyAuthentication
 c.CondaStoreServer.template_vars = {
     "banner": '<div class="alert alert-danger" role="alert">This is a localhost server</div>',
-    "logo": "https://quansight.com/_next/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F147759%2F1076x520%2Fe6cd6af012%2Fquansight-logo-no-tagline.png&w=3840&q=75",
+    "logo": "https://raw.githubusercontent.com/conda-incubator/conda-store/main/docusaurus-docs/static/img/conda-store-logo-horizontal-lockup.svg",
 }
 
 # ==================================