Merge branch 'main' into main

.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

@@ -36,7 +36,8 @@ 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@v4

README.md

@@ -29,18 +29,11 @@ Please refer to the `conda-store` docs: [Local development setup for conda-store
 
 ### 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
 
@@ -78,19 +71,17 @@ Line by line, here's what the commands above do:
 6. Use Yarn to install JavaScript dependencies
 7. Build app
 
-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
@@ -102,8 +93,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",
 }
 
 # ==================================

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conda-store/conda-store-ui",
-  "version": "2024.6.1",
+  "version": "2024.9.1-dev",
   "description": "UI elements for building a frontend for conda-store",
   "homepage": "https://github.com/conda-incubator/conda-store-ui",
   "bugs": {
@@ -21,7 +21,7 @@
     "start:services": "docker compose up -d",
     "start:ui": "REACT_APP_VERSION=$npm_package_version webpack server --history-api-fallback",
     "start:chromium": "webpack serve --open 'chromium'",
-    "start:prod": "NODE_ENV=production webpack serve",
+    "start:prod": "yarn run start:services && REACT_APP_VERSION=$npm_package_version NODE_ENV=production webpack serve",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "test": "jest --coverage",
@@ -133,6 +133,8 @@
     "rimraf": "^3.0.2",
     "source-map-loader": "^3.0.1",
     "storybook": "^8.0.4",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^8.0.17",
     "typescript": "^4.6.3",
     "webpack": "^5.72.0",
@@ -144,4 +146,4 @@
     "node": ">=20.0.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/features/yamlEditor/components/editor.tsx

@@ -27,7 +27,7 @@ export const CodeEditor = ({ code, onChangeEditor }: ICodeEditor) => {
   const convertToJSON = (e: string) => {
     try {
       setIsError(false);
-      onChangeEditor(parse(e));
+      onChangeEditor(parse(e) || {});
     } catch (e) {
       setIsError(true);
     }
@@ -52,6 +52,7 @@ export const CodeEditor = ({ code, onChangeEditor }: ICodeEditor) => {
         theme={isGrayscaleStyleType ? undefined : greenAccentTheme}
         extensions={[StreamLanguage.define(yamlLanguage)]}
         onChange={e => convertToJSON(e)}
+        data-testid="yaml-editor"
       />
 
       <Box

src/index.tsx

@@ -1,5 +1,5 @@
 export * from "./App";
-export { IPreferences } from "./preferences";
+export type { IPreferences } from "./preferences";
 export { store } from "./store";
 export { grayscaleTheme, condaStoreTheme, themeDecorator } from "./theme";
 export * from "./colors";

test/playwright/test_ux.py

@@ -10,7 +10,7 @@
 import random
 
 
-DEFAULT_TIMEOUT = 30_000  # time in ms
+DEFAULT_TIMEOUT = 60_000  # time in ms
 
 expect.set_options(timeout=DEFAULT_TIMEOUT)
 
@@ -120,7 +120,7 @@ def _create_new_environment(page, screenshot=False):
 
 
 def _existing_environment_interactions(
-    page, env_name, time_to_build_env=3 * 60 * 1000, screenshot=False
+    page, env_name, time_to_build_env=5 * 60 * 1000, screenshot=False
 ):
     """test interactions with existing environments.
     During this test, the test will be rebuilt twice.
@@ -145,18 +145,23 @@ def _existing_environment_interactions(
     env_link = page.get_by_role("link", name=env_name)
     edit_button = page.get_by_role("button", name="Edit")
 
-    # edit existing environment throught the YAML editor
+    # edit existing environment through the YAML editor
     env_link.click()
     edit_button.click()
     page.get_by_label("YAML").check()
     if screenshot:
         page.screenshot(path="test-results/conda-store-yaml-editor.png")
-    page.get_by_text("- rich").click()
-    page.get_by_text(
-        "channels: - conda-forgedependencies: - rich - pip: - nothing - ipykernel"
-    ).fill(
+
+    # set the YAML editor to a particular environment specification
+    yaml_editor = page.get_by_test_id("yaml-editor").get_by_role("textbox")
+    # note: I'm not sure this is necessary but I deliberately chose to match
+    # text near the end of the editor to prevent the possibility of Playwright
+    # acting on the editor before it has finished rendering its initial value
+    yaml_editor.filter(has_text=r"variables: {}").clear()
+    yaml_editor.fill(
         "channels:\n  - conda-forge\ndependencies:\n  - rich\n  - python\n  - pip:\n      - nothing\n  - ipykernel\n\n"
     )
+
     page.get_by_role("button", name="Save").click()
     edit_button.wait_for(state="attached")
 

tsconfig.eslint.json

@@ -1,7 +1,4 @@
 {
   "extends": "./tsconfig",
-  "include": [
-    "src/**/*",
-    "test/**/*",
-  ]
+  "include": ["src/**/*", "test/**/*"]
 }