Add namespace to create environment form (#361)

conda-incubator · Mar 20, 2024 · ee80e93 · ee80e93
1 parent 8b84d27
commit ee80e93
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 7 deletions.
diff --git a/src/features/environmentCreate/components/EnvironmentCreate.tsx b/src/features/environmentCreate/components/EnvironmentCreate.tsx
@@ -106,6 +106,7 @@ export const EnvironmentCreate = ({ environmentNotification }: IEnvCreate) => {
   return (
     <Box sx={{ padding: "14px 12px" }}>
       <EnvironmentDetailsHeader
+        namespace={newEnvironment.namespace}
         onUpdateName={handleChangeName}
         showEditButton={true}
       />

diff --git a/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx b/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx
@@ -13,15 +13,18 @@ import {
 interface IEnvironmentDetailsHeaderProps {
   /**
    * @param envName name of the selected environment
+   * @param namespace namespace of the environment
    * @param onUpdateName change environment name
    */
   envName?: string;
+  namespace?: string;
   showEditButton: boolean | undefined;
   onUpdateName: (value: string) => void;
 }
 
 export const EnvironmentDetailsHeader = ({
   envName = "",
+  namespace,
   onUpdateName,
   showEditButton = true
 }: IEnvironmentDetailsHeaderProps) => {
@@ -34,7 +37,8 @@ export const EnvironmentDetailsHeader = ({
       sx={{
         display: "flex",
         alignItems: "center",
-        justifyContent: "space-between",
+        justifyContent:
+          mode === EnvironmentDetailsModes.CREATE ? "start" : "space-between",
         marginBottom: "15px"
       }}
     >
@@ -64,9 +68,28 @@ export const EnvironmentDetailsHeader = ({
       )}
       {mode === EnvironmentDetailsModes.CREATE && (
         <>
+          {namespace && (
+            <>
+              <TextField
+                label="Namespace"
+                value={namespace}
+                disabled
+                size="small"
+              />
+              <div
+                aria-hidden
+                style={{
+                  borderRight: `2px solid ${palette.secondary.main}`,
+                  transform: "skew(-15deg)",
+                  margin: "0 1rem",
+                  height: "1.6rem"
+                }}
+              />
+            </>
+          )}
           <TextField
             autoFocus
-            placeholder="Environment name"
+            label="Environment name"
             sx={{
               backgroundColor: palette.grey[100],
               minWidth: "450px",
@@ -76,11 +99,10 @@ export const EnvironmentDetailsHeader = ({
             }}
             inputProps={{
               style: {
-                padding: "8px 15px",
-                fontSize: "15px",
                 color: palette.common.black
               }
             }}
+            size="small"
             onChange={e => onUpdateName(e.target.value)}
           />
           {/* <StyledButtonPrimary>Archive</StyledButtonPrimary> */}

diff --git a/test/environmentDetails/EnvironmentDetailsHeader.test.tsx b/test/environmentDetails/EnvironmentDetailsHeader.test.tsx
@@ -53,7 +53,7 @@ describe("<EnvironmentDetailsHeader />", () => {
     });
   });
 
-  it("should render component in create mode", () => {
+  it("should render component in create mode without namespace", () => {
     const mockOnUpdateName = jest.fn();
     const component = render(
       mockTheme(
@@ -70,9 +70,30 @@ describe("<EnvironmentDetailsHeader />", () => {
       store.dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
     });
 
-    const input = component.getByPlaceholderText("Environment name");
+    const input = component.getByLabelText("Environment name");
     const newEnvName = "My new environment name";
     fireEvent.change(input, { target: { value: newEnvName } });
     expect(mockOnUpdateName).toHaveBeenCalledWith(newEnvName);
+    expect(component.queryByText("Namespace")).not.toBeInTheDocument();
+  });
+
+  it("should render component in create mode with namespace", () => {
+    const mockOnUpdateName = jest.fn();
+    const component = render(
+      mockTheme(
+        <Provider store={store}>
+          <EnvironmentDetailsHeader
+            envName={undefined}
+            namespace="test-namespace"
+            onUpdateName={mockOnUpdateName}
+            showEditButton={true}
+          />
+        </Provider>
+      )
+    );
+    act(() => {
+      store.dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
+    });
+    expect(component.getByLabelText("Namespace")).toBeInTheDocument();
   });
 });
diff --git a/test/playwright/test_ux.py b/test/playwright/test_ux.py
@@ -97,7 +97,7 @@ def _create_new_environment(page, screenshot=False):
     if screenshot:
         page.screenshot(path="test-results/conda-store-new-env.png")
     # fill in the env name
-    page.get_by_placeholder("Environment name").fill(new_env_name)
+    page.get_by_label("Environment name").fill(new_env_name)
     # fill in the description
     page.get_by_placeholder("Enter here the description of your environment").fill("description")
     # click the + to add a package