Store environment form values in hash object

src/features/dependencies/components/Dependencies.tsx

@@ -11,7 +11,7 @@ import {
 import { Dependency } from "../../../common/models";
 import { DependenciesItem } from "./DependenciesItem";
 import { useAppDispatch, useAppSelector } from "../../../hooks";
-import { dependencyPromoted } from "../../../features/requestedPackages";
+import { requestedPackageAdded } from "../../environmentCreate/environmentCreateSlice";
 import { ArrowIcon } from "../../../components";
 
 export interface IDependenciesProps {
@@ -91,7 +91,21 @@ export const Dependencies = ({
                   <DependenciesItem
                     mode={mode}
                     dependency={dependency}
-                    handleClick={() => dispatch(dependencyPromoted(dependency))}
+                    handleClick={() => {
+                      if (!selectedEnvironment) {
+                        return;
+                      }
+                      const {
+                        namespace: { name: namespaceName },
+                        name: environmentName
+                      } = selectedEnvironment;
+                      dispatch(
+                        requestedPackageAdded([
+                          `${namespaceName}/${environmentName}`,
+                          `${dependency.name}==${dependency.version}`
+                        ])
+                      );
+                    }}
                   />
                 </Box>
               ))}

src/features/environmentCreate/components/CreateEnvironmentPackages.tsx

@@ -20,25 +20,28 @@
   StyledEditPackagesTableCell
 } from "../../../styles";
 import { AddRequestedPackage } from "../../requestedPackages";
-import { requestedPackagesChanged } from "../environmentCreateSlice";
+import { requestedPackageAdded } from "../environmentCreateSlice";
 import { CreateEnvironmentPackagesTableRow } from "./CreateEnvironmentPackagesTableRow";
+import { CondaSpecificationPip } from "../../../common/models/CondaSpecificationPip";
 
 interface ICreateEnvironmentPackagesProps {
   /**
    * @param requestedPackages list of created packages
    */
-  requestedPackages: string[];
+  namespaceName: string;
+  requestedPackages: (string | CondaSpecificationPip)[];
 }
 
 export const CreateEnvironmentPackages = ({
+  namespaceName,
   requestedPackages
 }: ICreateEnvironmentPackagesProps) => {
   const dispatch = useAppDispatch();
   const [isAdding, setIsAdding] = useState(false);
   const { palette } = useTheme();
 
-  const filteredRequestedPackages = useMemo(
-    () => requestedPackages.filter(item => typeof item !== "object"),
+  const filteredRequestedPackages: string[] = useMemo(
+    () => requestedPackages.filter(item => typeof item === "string") as string[],
     [requestedPackages]
   );
 
@@ -87,6 +90,7 @@
             {filteredRequestedPackages.map(requestedPackage => (
               <CreateEnvironmentPackagesTableRow
                 key={requestedPackage}
+                namespaceName={namespaceName}
                 requestedPackage={requestedPackage}
               />
             ))}
@@ -97,8 +101,8 @@
             <AddRequestedPackage
               onSubmit={(value: string) =>
                 dispatch(
-                  requestedPackagesChanged([
-                    ...filteredRequestedPackages,
+                  requestedPackageAdded([
+                    `${namespaceName}/new-environment`,
                     value
                   ])
                 )

src/features/environmentCreate/components/CreateEnvironmentPackagesTableRow.tsx

@@ -21,10 +21,12 @@ interface IProps {
   /**
    * @param requestedPackage requested package
    */
+  namespaceName: string;
   requestedPackage: string;
 }
 
 const BaseCreateEnvironmentPackagesTableRow = ({
+  namespaceName,
   requestedPackage
 }: IProps) => {
   const dispatch = useAppDispatch();
@@ -35,10 +37,13 @@ const BaseCreateEnvironmentPackagesTableRow = ({
     const updatedPackage = `${name}${value}${version}`;
 
     dispatch(
-      requestedPackageUpdated({
-        currentPackage: requestedPackage,
-        updatedPackage
-      })
+      requestedPackageUpdated([
+        `${namespaceName}/new-environment`,
+        {
+          currentPackage: requestedPackage,
+          updatedPackage
+        }
+      ])
     );
   };
 
@@ -52,15 +57,23 @@ const BaseCreateEnvironmentPackagesTableRow = ({
     const updatedPackage = `${name}${pkgConstraint}${value}`;
 
     dispatch(
-      requestedPackageUpdated({
-        currentPackage: requestedPackage,
-        updatedPackage
-      })
+      requestedPackageUpdated([
+        `${namespaceName}/new-environment`,
+        {
+          currentPackage: requestedPackage,
+          updatedPackage
+        }
+      ])
     );
   };
 
   const handleRemovePackage = (requestedPackage: string) => {
-    dispatch(requestedPackageRemoved(requestedPackage));
+    dispatch(
+      requestedPackageRemoved([
+        `${namespaceName}/new-environment`,
+        requestedPackage
+      ])
+    );
   };
 
   return (

src/features/environmentCreate/components/EnvironmentCreate.tsx

@@ -2,8 +2,6 @@
 import { useNavigate, useParams } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
-import { stringify } from "yaml";
-import { debounce } from "lodash";
 import {
   EnvironmentDetailsHeader,
   modeChanged,
@@ -22,37 +20,44 @@
 } from "../../../features/tabs";
 import { useAppDispatch, useAppSelector } from "../../../hooks";
 import { SpecificationCreate, SpecificationReadOnly } from "./Specification";
-import { descriptionChanged, nameChanged } from "../environmentCreateSlice";
+import {
+  descriptionChanged,
+  nameChanged,
+  startNewEnvironmentForm,
+  clearNewEnvironmentForm
+} from "../environmentCreateSlice";
 import createLabel from "../../../common/config/labels";
 import { showNotification } from "../../notification/notificationSlice";
 
-interface ICreateEnvironmentArgs {
-  code: { channels: string[]; dependencies: string[] };
-}
 
 export const EnvironmentCreate = () => {
   const dispatch = useAppDispatch();
 
   // Url routing params
   // If user loads the app at /<namespace_name>/new-environment
   // This will put the app in the correct state
-  const { namespaceName } = useParams<{
+  const { namespaceName = "" } = useParams<{
     namespaceName: string;
   }>();
 
+  const environmentForm = useAppSelector(
+    state => state.environmentCreate[`${namespaceName}/new-environment`]
+  );
+
   useEffect(() => {
     if (namespaceName) {
       dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
       dispatch(openCreateNewEnvironmentTab(namespaceName));
+      if (!environmentForm) {
+        dispatch(startNewEnvironmentForm(`${namespaceName}/new-environment`));
+      }
     }
   }, [namespaceName]);
 
   const navigate = useNavigate();
 
   const { mode } = useAppSelector(state => state.environmentDetails);
-  const { name, description } = useAppSelector(
-    state => state.environmentCreate
-  );
+  const { name = "", description = "" } = environmentForm || {};
   const { newEnvironment } = useAppSelector(state => state.tabs);
   const [error, setError] = useState({
     message: "",
@@ -61,21 +66,13 @@
   const [createOrUpdate] = useCreateOrUpdateMutation();
   const [triggerQuery] = useLazyGetEnviromentBuildQuery();
 
-  const handleChangeName = debounce((value: string) => {
-    dispatch(nameChanged(value));
-  }, 300);
-
-  const handleChangeDescription = debounce((value: string) => {
-    dispatch(descriptionChanged(value));
-  }, 300);
-
-  const createEnvironment = async (code: ICreateEnvironmentArgs) => {
+  const createEnvironment = async (yaml: string) => {
     const namespace = newEnvironment?.namespace;
     const environmentInfo = {
       namespace,
-      specification: `${stringify(
-        code
-      )}\ndescription: '${description}'\nname: ${name}\nprefix: null`
+      specification:
+        yaml.trimEnd() +
+        `\ndescription: '${description}'\nname: ${name}\nprefix: null`
     };
 
     try {
@@ -112,14 +109,20 @@
         message: e?.data?.message ?? createLabel(undefined, "error"),
         visible: true
       });
+    } finally {
+      // clear form datha from app state
+      dispatch(clearNewEnvironmentForm(`${namespaceName}/new-environment`));
     }
   };
 
   return (
     <Box sx={{ padding: "14px 12px" }}>
       <EnvironmentDetailsHeader
+        envName={name}
         namespace={newEnvironment.namespace}
-        onUpdateName={handleChangeName}
+        onUpdateName={(value: string) => {
+          dispatch(nameChanged([`${namespaceName}/new-environment`, value]));
+        }}
         showEditButton={true}
       />
       {error.visible && (
@@ -135,14 +138,22 @@
       <Box sx={{ marginBottom: "30px" }}>
         <EnvMetadata
           mode={mode}
-          onUpdateDescription={handleChangeDescription}
+          description={description}
+          onUpdateDescription={(value: string) => {
+            dispatch(
+              descriptionChanged([`${namespaceName}/new-environment`, value])
+            );
+          }}
           onUpdateBuildId={() => {}}
         />
       </Box>
       <Box sx={{ marginBottom: "30px" }}>
         {mode === "read-only" && <SpecificationReadOnly />}
         {mode === "create" && (
-          <SpecificationCreate onCreateEnvironment={createEnvironment} />
+          <SpecificationCreate
+            namespaceName={namespaceName}
+            onCreateEnvironment={createEnvironment}
+          />
         )}
       </Box>
     </Box>