refactor: use redux environment_variables for EnvironmentVariables state

client/src/api-client/utils.js

@@ -79,4 +79,15 @@ function fetchJson(...args) {
   return fetch(...args).then(response => response.json());
 }
 
-export { fetchJson, renkuFetch, AUTH_HEADER, RETURN_TYPES };
+function formatEnvironmentVariables(variables) {
+  const env_variables = {};
+  if (variables?.length > 0) {
+    variables.map( variable => {
+      if (variable.key && variable.value)
+        env_variables[variable.key] = variable.value;
+    });
+  }
+  return env_variables;
+}
+
+export { fetchJson, renkuFetch, formatEnvironmentVariables, AUTH_HEADER, RETURN_TYPES };

client/src/model/RenkuModels.js

@@ -364,6 +364,8 @@ const projectSchema = new Schema({
   },
 });
 
+const DEFAULT_ENV_VARIABLES = [{ key: "", value: "" }];
+
 const notebooksSchema = new Schema({
   autosaves: {
     schema: {
@@ -391,7 +393,7 @@ const notebooksSchema = new Schema({
       commit: { initial: {} },
       discard: { initial: false },
       options: { initial: {} },
-      environment_variables: { initial: [{ key: "", value: "" }] },
+      environment_variables: { initial: DEFAULT_ENV_VARIABLES },
       objectStoresConfiguration: { initial: [] },
       includeMergedBranches: { initial: false },
       displayedCommits: { initial: 25 },
@@ -723,5 +725,5 @@ const formGeneratorSchema = new Schema({
 export {
   datasetFormSchema, datasetSchema, datasetImportFormSchema, environmentSchema,
   formGeneratorSchema, issueFormSchema, newProjectSchema, notebooksSchema, notificationsSchema,
-  projectSchema, projectsSchema, statuspageSchema, userSchema, webSocketSchema
+  projectSchema, projectsSchema, statuspageSchema, userSchema, webSocketSchema, DEFAULT_ENV_VARIABLES
 };

client/src/notebooks/NotebookStart.present.js

@@ -48,6 +48,7 @@ import { NotebooksHelper } from "./index";
 import { ObjectStoresConfigurationButton, ObjectStoresConfigurationModal } from "./ObjectStoresConfig.present";
 import ProgressIndicator, { ProgressStyle, ProgressType } from "../utils/components/progress/Progress";
 import EnvironmentVariables from "./components/EnviromentVariables";
+import { useSelector } from "react-redux";
 
 function ProjectSessionLockAlert({ lockStatus }) {
   if (lockStatus == null) return null;
@@ -124,18 +125,11 @@ function StartNotebookServer(props) {
   const location = useLocation();
 
   const [showShareLinkModal, setShowShareLinkModal] = useState(location?.state?.showShareLinkModal ?? false);
-  const [environmentVariables, setEnvironmentVariables] = useState([ { key: "", value: "" }]);
-
+  const environmentVariables = useSelector(state => state.stateModel.notebooks.filters?.environment_variables);
   const setNotebookEnvVariables = (variables) => {
     props.handlers.setNotebookEnvVariables(variables);
-    setEnvironmentVariables(variables);
   };
 
-  useEffect(() => {
-    if (props.envVariablesQueryParams)
-      setEnvironmentVariables(props.envVariablesQueryParams);
-  }, []); // eslint-disable-line
-
   const toggleShareLinkModal = () => setShowShareLinkModal(!showShareLinkModal);
 
   // Show fetching status when auto-starting

client/src/notebooks/Notebooks.container.js

@@ -30,6 +30,7 @@ import { StatusHelper } from "../model/Model";
 import { Url } from "../utils/helpers/url";
 import { sleep } from "../utils/helpers/HelperFunctions";
 import ShowSessionFullscreen from "./components/SessionFullScreen";
+import { DEFAULT_ENV_VARIABLES } from "../model/RenkuModels";
 
 
 /**
@@ -300,7 +301,7 @@ class StartNotebookServer extends Component {
 
     const environmentVariables = this.getEnvironmentVariablesFromSearch(currentSearch);
     this.customEnvVariables = currentSearch && this.autostart && environmentVariables.length ?
-      environmentVariables : undefined;
+      environmentVariables : DEFAULT_ENV_VARIABLES;
 
     this.state = {
       autosavesCommit: false,
@@ -418,14 +419,7 @@ class StartNotebookServer extends Component {
   }
 
   setNotebookEnvVariables(variables) {
-    const env_variables = {};
-    if (variables?.length > 0) {
-      variables.map( variable => {
-        if (variable.key && variable.value)
-          env_variables[variable.key] = variable.value;
-      });
-    }
-    this.coordinator.setNotebookEnvironmentVariables(env_variables);
+    this.coordinator.setNotebookEnvironmentVariables(variables);
   }
 
   getEnvironmentVariablesFromSearch(search) {

client/src/notebooks/Notebooks.state.js

@@ -28,6 +28,7 @@ import _ from "lodash";
 import { API_ERRORS } from "../api-client/errors";
 import { notebooksSchema } from "../model";
 import { parseINIString, sleep } from "../utils/helpers/HelperFunctions";
+import { formatEnvironmentVariables } from "../api-client/utils";
 
 
 const POLLING_INTERVAL = 3000;
@@ -1266,7 +1267,7 @@ class NotebooksCoordinator {
     const image = projectOptions.image ?
       projectOptions.image :
       null;
-    const env_variables = this.model.get("filters.environment_variables");
+    const env_variables = formatEnvironmentVariables(this.model.get("filters.environment_variables"));
 
     return this.client.startNotebook(namespace, project, branch, commit, image, options, env_variables);
   }

client/src/notebooks/Notebooks.test.js

@@ -372,23 +372,29 @@ describe("rendering", () => {
     document.body.appendChild(div);
     await act(async () => {
       ReactDOM.render(
-        <MemoryRouter>
-          <StartNotebookServer {...props} />
-        </MemoryRouter>, div);
+        <Provider store={model.reduxStore}>
+          <MemoryRouter>
+            <StartNotebookServer {...props} />
+          </MemoryRouter>
+        </Provider>, div);
     });
     await act(async () => {
       ReactDOM.render(
-        <MemoryRouter>
-          <StartNotebookServer {...props} scope={scope} />
-        </MemoryRouter>, div);
+        <Provider store={model.reduxStore}>
+          <MemoryRouter>
+            <StartNotebookServer {...props} scope={scope} />
+          </MemoryRouter>
+        </Provider>, div);
     });
     // autostart session
     const autostartFakeLocation = { pathname: "", search: "autostart=1" };
     await act(async () => {
       ReactDOM.render(
-        <MemoryRouter>
-          <StartNotebookServer {...props} location={autostartFakeLocation} />
-        </MemoryRouter>, div);
+        <Provider store={model.reduxStore}>
+          <MemoryRouter>
+            <StartNotebookServer {...props} location={autostartFakeLocation} />
+          </MemoryRouter>
+        </Provider>, div);
     });
   });