fix: read multiple param variables with the same key

SwissDataScienceCenter · Oct 14, 2022 · 5470841 · 5470841
1 parent dfb4105
commit 5470841
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 34 deletions.
diff --git a/client/src/notebooks/Notebooks.container.js b/client/src/notebooks/Notebooks.container.js
@@ -429,7 +429,11 @@ class StartNotebookServer extends Component {
     Object.keys(search).map( key => {
       if (key.startsWith("env[")) {
         const env_key = key.split("env[").pop().split("]").shift();
-        variables.push({ key: env_key, value: search[key] });
+        const value = search[key];
+        if (Array.isArray(value))
+          value.forEach(val => variables.push({ key: env_key, value: val }));
+        else
+          variables.push({ key: env_key, value: search[key] });
       }
     });
     return variables;

diff --git a/client/src/notebooks/components/EnviromentVariables.tsx b/client/src/notebooks/components/EnviromentVariables.tsx
@@ -19,7 +19,7 @@ import React, { ChangeEvent } from "react";
 import { Button, Col, FormGroup, Input, Label, Row } from "../../utils/ts-wrappers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { InputLabel } from "../../utils/components/formlabels/FormLabels";
+import { ErrorLabel, InputLabel } from "../../utils/components/formlabels/FormLabels";
 
 interface EnvironmentVariablesProps {
   environmentVariables: EnvVariablesField[];
@@ -43,44 +43,66 @@ function EnvironmentVariables({ environmentVariables, setEnvironmentVariables }:
     setEnvironmentVariables([...environmentVariables, object]);
   };
 
+  // const areDuplicatedKeys = (data: EnvVariablesField[]) => {
+  //   const keys = data.filter(variable => variable.key !== "").map( variable => variable.key);
+  //   const uniqueKeys = [...new Set(keys)];
+  //   return keys.length !== uniqueKeys.length;
+  // };
+
+  const isKeyDuplicated = (key: string) => {
+    return environmentVariables.filter( variable => variable.key === key).length >= 2;
+  };
+
   const removeFields = (index: number) => {
     let data = [...environmentVariables];
     data.splice(index, 1);
     setEnvironmentVariables(data);
   };
 
-  const content = environmentVariables?.map((input, index) => {
-    return (
-      <Row key={index}>
-        <Col xs={5}>
-          <FormGroup className="field-group">
-            <Label for="variable" size="sm" className="text-muted d-md-none">Variable</Label>
-            <Input
-              name="variable"
-              value={input.key}
-              onChange={(event: ChangeEvent<HTMLInputElement>) => handleFormChange(index, "key", event.target.value)}
-            />
-          </FormGroup>
+  const form = environmentVariables?.map((input, index) => {
+    const duplicated = isKeyDuplicated(input.key);
+    const warningContent = duplicated ?
+      <Row className="mb-2">
+        <Col sm={12}>
+          <ErrorLabel text="Repeating variable names leads to conflicts" />
         </Col>
-        <Col xs={5}>
-          <FormGroup className="field-group">
-            <Label for="variable" size="sm" className="text-muted d-md-none">Value</Label>
-            <Input
-              name="value"
-              value={input.value}
-              onChange={(event: ChangeEvent<HTMLInputElement>) => handleFormChange(index, "value", event.target.value)}
-            />
-          </FormGroup>
-        </Col>
-        <Col xs={2} className="d-flex align-items-center justify-content-start">
-          <Button
-            size="sm"
-            className="border-0 text-danger bg-transparent mb-3"
-            onClick={() => removeFields(index)}>
-            <FontAwesomeIcon icon={faTrash} />
-          </Button>
-        </Col>
-      </Row>
+      </Row> : null;
+    return (
+      <>
+        <Row key={index}>
+          <Col xs={5}>
+            <FormGroup className="field-group">
+              <Label for="variable" size="sm" className="text-muted d-md-none">Variable</Label>
+              <Input
+                name="variable"
+                value={input.key}
+                invalid={duplicated}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => handleFormChange(index, "key", event.target.value)}
+              />
+            </FormGroup>
+          </Col>
+          <Col xs={5}>
+            <FormGroup className="field-group">
+              <Label for="variable" size="sm" className="text-muted d-md-none">Value</Label>
+              <Input
+                name="value"
+                value={input.value}
+                onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                  handleFormChange(index, "value", event.target.value)}
+              />
+            </FormGroup>
+          </Col>
+          <Col xs={2} className="d-flex align-items-center justify-content-start">
+            <Button
+              size="sm"
+              className="border-0 text-danger bg-transparent mb-3"
+              onClick={() => removeFields(index)}>
+              <FontAwesomeIcon icon={faTrash} />
+            </Button>
+          </Col>
+        </Row>
+        {warningContent}
+      </>
     );
   });
 
@@ -97,7 +119,7 @@ function EnvironmentVariables({ environmentVariables, setEnvironmentVariables }:
   return <div className="mt-3">
     <InputLabel text="Environment Variables" isRequired={false} />
     {header}
-    {content}
+    {form}
     <div><Button className="btn-outline-rk-green my-1" onClick={addFields}>Add Variable</Button></div>
   </div>;
 }