Lockfile upload

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.

docker-compose.yml

@@ -1,5 +1,3 @@
-version: "3.8"
-
 services:
   conda-store-worker:
     image: quansight/conda-store-server:${CONDA_STORE_SERVER_VERSION:-2024.3.1}

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",

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;
       }
     );

src/features/dependencies/components/Dependencies.tsx

@@ -64,7 +64,10 @@ export const Dependencies = ({
       <StyledAccordionSummary expandIcon={<ArrowIcon />}>
         <StyledAccordionTitle sx={{ color: "primary.main" }}>
           Installed Packages{" "}
-          <Tooltip title="Includes requested packages and their dependencies">
+          <Tooltip
+            title="Includes requested packages and their dependencies"
+            tabIndex={0}
+          >
             <InfoOutlinedIcon
               sx={{
                 fontSize: "20px",

src/features/environmentCreate/components/EnvironmentCreate.tsx

@@ -69,14 +69,27 @@ export const EnvironmentCreate = () => {
     dispatch(descriptionChanged(value));
   }, 300);
 
-  const createEnvironment = async (code: ICreateEnvironmentArgs) => {
+  const createEnvironment = async (code: ICreateEnvironmentArgs | string) => {
     const namespace = newEnvironment?.namespace;
-    const environmentInfo = {
-      namespace,
-      specification: `${stringify(
-        code
-      )}\ndescription: '${description}'\nname: ${name}\nprefix: null`
-    };
+    const isLockfile = typeof code === "string";
+
+    let environmentInfo;
+    if (isLockfile) {
+      environmentInfo = {
+        namespace,
+        specification: code,
+        environment_name: name,
+        environment_description: description,
+        is_lockfile: true
+      };
+    } else {
+      environmentInfo = {
+        namespace,
+        specification: `${stringify(
+          code
+        )}\ndescription: '${description}'\nname: ${name}\nprefix: null`
+      };
+    }
 
     try {
       const { data } = await createOrUpdate(environmentInfo).unwrap();