Merge branch 'main' into playwright_action

.env.example

@@ -23,4 +23,4 @@ REACT_APP_LOGOUT_PAGE_URL=http://localhost:8080/conda-store/logout?next=/
 
 # If you want to use a version other than the pinned conda-store-server version
 # Set the CONDA_STORE_SERVER_VERSION to the package version that you want
-# CONDA_STORE_SERVER_VERSION="2023.10.1"
+# CONDA_STORE_SERVER_VERSION="2024.3.1"

.github/workflows/build.yml

@@ -21,6 +21,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: 'yarn'
 
       - name: "Install dependencies 📦"
         run: yarn

.gitignore

@@ -155,11 +155,13 @@ static
 test-results/*
 
 # yarn
+# not using Zero-installs
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 
 .yarn/*
 !.yarn/releases
 !.yarn/patches
 !.yarn/plugins
 !.yarn/sdks
 !.yarn/versions
-.pnp.*# 
+.pnp.*#

.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

README.md

@@ -32,7 +32,7 @@ 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.
@@ -41,9 +41,10 @@ We use [Docker Compose](https://docs.docker.com/compose/) to set up the infrastr
 
 Running conda-store-ui in Docker is the most straightforward way to set up your local development environment.
 
-1. Run `yarn run start:docker` to start the entire development stack.
-2. Open your local browser and go to [http://localhost:8000](http://localhost:8000) to see conda-store-ui.
-3. You can then log in using the default username of `username` and default password of `password`.
+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`.
 
 Hot reloading is enabled, so when you make changes to source files, your browser will reload and reflect the changes.
 

RELEASE.md

@@ -26,22 +26,31 @@
    npm publish --verbose --access public conda-store-ui.tgz --dry-run
    ```
 
-6. If the dry run looks good, publish to npmjs:
+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:
+
+   ```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
+   ```
+
+* 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 will more than likely need to login first
+   # you likely need to login first
    # npm login --registry https://registry.npmjs.org --scope @conda-store-ui
 
    # publish release to npmjs
    npm publish --verbose --access public conda-store-ui.tgz
    ```
 
-7. Ensure that whatever code you published is checked into git, then tag and push the commit and tag
-
-```bash
-# use the same version here as in package.json, but without a leading `v`
-git tag -a YYYY.M.ReleaseNumber
+<!-- Link -->
 
-# push to upstream
-git push && git push --tags
-```
+[cs-ui-npm]: https://www.npmjs.com/package/@conda-store/conda-store-ui
+[release-action]: https://github.com/conda-incubator/conda-store-ui/blob/main/.github/workflows/release.yml

docker-compose.yml

@@ -1,8 +1,6 @@
-version: "3.8"
-
 services:
   conda-store-worker:
-    image: quansight/conda-store-server:${CONDA_STORE_SERVER_VERSION:-2023.10.1}
+    image: quansight/conda-store-server:${CONDA_STORE_SERVER_VERSION:-2024.3.1}
     volumes:
       - ./docker/assets/environments:/opt/environments:ro
       - ./docker/assets/conda_store_config.py:/opt/conda_store/conda_store_config.py:ro
@@ -18,7 +16,7 @@ services:
       ]
 
   conda-store-server:
-    image: quansight/conda-store-server:${CONDA_STORE_SERVER_VERSION:-2023.10.1}
+    image: quansight/conda-store-server:${CONDA_STORE_SERVER_VERSION:-2024.3.1}
     depends_on:
       postgres:
         condition: service_healthy

environment_dev.yml

@@ -6,7 +6,7 @@ channels:
   - conda-forge
 dependencies:
   - python=3.10
-  - yarn
+  - yarn>=4.4.0
   - nodejs>=18.0
   - pytest
   - pip

package.json

@@ -11,14 +11,14 @@
     "build:watch": "tsc --build --watch",
     "clean": "rimraf coverage lib storybook-static types .env  *.tsbuildinfo",
     "clean:slate": "yarn run clean && rimraf node_modules",
-    "clean:docker": "docker-compose down -v --remove-orphans",
+    "clean:docker": "docker compose down -v --remove-orphans",
     "eslint": "eslint . --ext .ts,.tsx --fix",
     "eslint:check": "eslint . --ext .ts,.tsx",
     "prepare": "yarnpkg run build && husky install",
     "prepublishOnly": "yarnpkg run clean && yarnpkg run webpack:prod",
-    "start:docker": "docker-compose --profile local-dev up --build",
+    "start:docker": "docker compose --profile local-dev up --build",
     "start": "yarn run start:services && yarn run start:ui",
-    "start:services": "docker-compose up -d",
+    "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",
@@ -70,6 +70,7 @@
     "date-fns-tz": "^1.3.7",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
+    "mui-file-dropzone": "^4.0.2",
     "react": "^18.0.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.0.0",
@@ -141,5 +142,6 @@
   },
   "engines": {
     "node": ">=18.0.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/common/models/CondaSpecification.ts

@@ -1,9 +1,11 @@
-import { CondaSpecificationPip } from "./CondaSpecificationPip";
+import type { CondaSpecificationPip } from "./CondaSpecificationPip";
+import type { Lockfile } from "./Lockfile";
 
 export type CondaSpecification = {
   name: string;
   channels: string[];
   dependencies: (string | CondaSpecificationPip)[];
   variables: Record<string, string>;
   prefix?: string | null;
+  lockfile?: Lockfile;
 };

src/common/models/Lockfile.ts

@@ -0,0 +1,2 @@
+// TODO: define lockfile type better
+export type Lockfile = Record<string, any>;

src/common/models/index.ts

@@ -7,3 +7,4 @@ export * from "./Artifact";
 export * from "./BuildPackage";
 export * from "./BuildArtifact";
 export * from "./Namespace";
+export * from "./Lockfile";

src/components/BlockContainerEditMode.tsx

@@ -4,19 +4,23 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { CodeIcon } from "../components";
 import { StyledSwitch } from "../styles";
+import Button from "@mui/material/Button";
+import UploadFileRoundedIcon from "@mui/icons-material/UploadFileRounded";
 
 interface IBlockContainerProps {
   title: string;
   children: React.ReactNode;
   onToggleEditMode: (show: boolean) => void;
   isEditMode: boolean;
+  setShowDialog: (show: boolean) => void;
 }
 
 export const BlockContainerEditMode = ({
   title,
   children,
   onToggleEditMode,
-  isEditMode
+  isEditMode,
+  setShowDialog
 }: IBlockContainerProps) => {
   return (
     <Box
@@ -44,46 +48,58 @@ export const BlockContainerEditMode = ({
           >
             {title}
           </Typography>
-          <Grid
-            component="label"
-            container
-            spacing={1}
-            justifyContent={"center"}
-            sx={{ width: "auto" }}
-          >
-            <Grid item sx={{ alignSelf: "baseline" }}>
-              <Typography
-                data-testid="block-container-title"
-                sx={{
-                  fontSize: "14px",
-                  color: "#333",
-                  fontWeight: isEditMode ? "400" : "600"
-                }}
-              >
-                GUI
-              </Typography>
-            </Grid>
-            <Grid item sx={{ alignSelf: "baseline" }}>
-              <StyledSwitch
-                checked={isEditMode}
-                onClick={e => onToggleEditMode(!isEditMode)}
-                icon={<CodeIcon />}
-                checkedIcon={<CodeIcon />}
-              />
-            </Grid>
-            <Grid item sx={{ alignSelf: "baseline" }}>
-              <Typography
-                data-testid="block-container-title"
-                sx={{
-                  fontSize: "14px",
-                  color: "#333",
-                  fontWeight: isEditMode ? "600" : "400"
-                }}
-              >
-                YAML
-              </Typography>
+          <Box display="flex" alignItems="center">
+            <Button
+              variant="outlined"
+              color="secondary"
+              size="small"
+              startIcon={<UploadFileRoundedIcon />}
+              onClick={() => setShowDialog(true)}
+              sx={{ mx: "1em" }}
+            >
+              Switch to Conda Lockfile Upload
+            </Button>{" "}
+            <Grid
+              component="label"
+              container
+              spacing={1}
+              justifyContent={"center"}
+              sx={{ width: "auto" }}
+            >
+              <Grid item sx={{ alignSelf: "baseline" }}>
+                <Typography
+                  data-testid="block-container-title"
+                  sx={{
+                    fontSize: "14px",
+                    color: "#333",
+                    fontWeight: isEditMode ? "400" : "600"
+                  }}
+                >
+                  GUI
+                </Typography>
+              </Grid>
+              <Grid item sx={{ alignSelf: "baseline" }}>
+                <StyledSwitch
+                  checked={isEditMode}
+                  onClick={e => onToggleEditMode(!isEditMode)}
+                  icon={<CodeIcon />}
+                  checkedIcon={<CodeIcon />}
+                />
+              </Grid>
+              <Grid item sx={{ alignSelf: "baseline" }}>
+                <Typography
+                  data-testid="block-container-title"
+                  sx={{
+                    fontSize: "14px",
+                    color: "#333",
+                    fontWeight: isEditMode ? "600" : "400"
+                  }}
+                >
+                  YAML
+                </Typography>
+              </Grid>
             </Grid>
-          </Grid>
+          </Box>
         </Box>
       </Box>
       <Box

src/components/Dialog.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -12,14 +13,16 @@ interface IAlertDialog {
   isOpen: boolean;
   closeAction: () => void;
   confirmAction: () => void;
+  confirmText?: string;
 }
 
 export const AlertDialog = ({
   title,
   description,
   isOpen,
   closeAction,
-  confirmAction
+  confirmAction,
+  confirmText = "Delete"
 }: IAlertDialog) => {
   return (
     <Dialog open={isOpen} onClose={closeAction}>
@@ -45,11 +48,15 @@ export const AlertDialog = ({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <StyledButton color="primary" onClick={closeAction}>
+        <Button color="secondary" onClick={closeAction}>
           Cancel
-        </StyledButton>
-        <StyledButton color="primary" onClick={() => confirmAction()}>
-          Delete
+        </Button>
+        <StyledButton
+          color="primary"
+          onClick={() => confirmAction()}
+          sx={{ textTransform: "uppercase" }}
+        >
+          {confirmText}
         </StyledButton>
       </DialogActions>
     </Dialog>

src/components/LockfileSupportInfo.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+
+export const LockfileSupportInfo = () => (
+  <Typography sx={{ fontSize: "12px" }}>
+    We currently only support the{" "}
+    <a
+      href="https://conda.github.io/conda-lock/"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Conda lockfile
+    </a>{" "}
+    format. Other lockfile formats such as Poetry are not supported.
+  </Typography>
+);
+
+export default LockfileSupportInfo;

src/features/channels/channelsSlice.ts

@@ -24,13 +24,22 @@ export const channelsSlice = createSlice({
         {
           payload: {
             data: {
-              specification: {
-                spec: { channels }
-              }
+              specification: { spec }
             }
           }
         }
       ) => {
+        let channels = [];
+
+        if (spec.channels) {
+          channels = spec.channels;
+        } else if (spec.lockfile?.metadata?.channels) {
+          channels = spec.lockfile.metadata.channels.map(
+            // Note: in the lockfile spec, a channel URL can be a string identifier like "conda-forge"
+            (channel: { url: string }) => channel.url
+          );
+        }
+
         state.channels = channels;
       }
     );