feat: add custom values in add environment form for admins

client/src/features/admin/AddSessionEnvironmentButton.tsx

@@ -35,6 +35,7 @@ import SessionEnvironmentFormContent, {
   SessionEnvironmentForm,
 } from "./SessionEnvironmentFormContent";
 import { useAddSessionEnvironmentMutation } from "./adminSessions.api";
+import { safeParse } from "../sessionsV2/session.utils";
 
 export default function AddSessionEnvironmentButton() {
   const [isOpen, setIsOpen] = useState(false);
@@ -84,6 +85,17 @@ function AddSessionEnvironmentModal({
         name: data.name,
         default_url: data.default_url.trim() ? data.default_url : undefined,
         description: data.description.trim() ? data.description : undefined,
+        port: data.port ?? undefined,
+        working_directory: data.working_directory.trim()
+          ? data.working_directory
+          : undefined,
+        mount_directory: data.mount_directory.trim()
+          ? data.working_directory
+          : undefined,
+        uid: data.uid ?? undefined,
+        gid: data.gid ?? undefined,
+        command: safeParse(data.command),
+        args: safeParse(data.args),
       });
     },
     [addSessionEnvironment]

client/src/features/admin/SessionEnvironmentAdvanceFields.tsx

@@ -0,0 +1,62 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { useCallback, useState } from "react";
+import { Control, FieldErrors } from "react-hook-form";
+import { Collapse } from "reactstrap";
+import ChevronFlippedIcon from "../../components/icons/ChevronFlippedIcon";
+import { AdvanceSettingsFields } from "../sessionsV2/components/SessionForm/AdvanceSettingsFields";
+import { SessionEnvironmentForm } from "./SessionEnvironmentFormContent";
+
+interface SessionEnvironmentAdvanceFieldsProps {
+  control: Control<SessionEnvironmentForm, unknown>;
+  errors: FieldErrors<SessionEnvironmentForm>;
+}
+
+export default function SessionEnvironmentAdvanceFields({
+  control,
+  errors,
+}: SessionEnvironmentAdvanceFieldsProps) {
+  const [isAdvanceSettingOpen, setIsAdvanceSettingsOpen] = useState(false);
+  const toggleIsOpen = useCallback(
+    () =>
+      setIsAdvanceSettingsOpen((isAdvanceSettingOpen) => !isAdvanceSettingOpen),
+    []
+  );
+  return (
+    <>
+      <div>
+        <span
+          className={cx("fw-bold", "cursor-pointer")}
+          onClick={toggleIsOpen}
+        >
+          Advance settings <ChevronFlippedIcon flipped={isAdvanceSettingOpen} />
+        </span>
+      </div>
+      <Collapse isOpen={isAdvanceSettingOpen}>
+        <div className="mt-3">
+          <AdvanceSettingsFields<SessionEnvironmentForm>
+            control={control}
+            errors={errors}
+          />
+        </div>
+      </Collapse>
+    </>
+  );
+}

client/src/features/admin/SessionEnvironmentFormContent.tsx

@@ -19,12 +19,20 @@
 import cx from "classnames";
 import { Control, Controller, FieldErrors } from "react-hook-form";
 import { Input, Label } from "reactstrap";
+import SessionEnvironmentAdvanceFields from "./SessionEnvironmentAdvanceFields";
 
 export interface SessionEnvironmentForm {
   container_image: string;
   default_url: string;
   description: string;
   name: string;
+  port: number;
+  working_directory: string;
+  uid: number;
+  gid: number;
+  mount_directory: string;
+  command: string;
+  args: string;
 }
 
 interface SessionEnvironmentFormContentProps {
@@ -101,25 +109,7 @@ export default function SessionEnvironmentFormContent({
         />
         <div className="invalid-feedback">Please provide a container image</div>
       </div>
-
-      <div>
-        <Label className="form-label" for="addSessionEnvironmentDefaultUrl">
-          Default URL
-        </Label>
-        <Controller
-          control={control}
-          name="default_url"
-          render={({ field }) => (
-            <Input
-              className="form-control"
-              id="addSessionEnvironmentDefaultUrl"
-              placeholder="/lab"
-              type="text"
-              {...field}
-            />
-          )}
-        />
-      </div>
+      <SessionEnvironmentAdvanceFields control={control} errors={errors} />
     </>
   );
 }

client/src/features/admin/SessionEnvironmentsSection.tsx

@@ -39,11 +39,12 @@ import AddSessionEnvironmentButton from "./AddSessionEnvironmentButton";
 import DeleteSessionEnvironmentButton from "./DeleteSessionEnvironmentButton";
 import UpdateSessionEnvironmentButton from "./UpdateSessionEnvironmentButton";
 import { useGetSessionEnvironmentsQuery } from "./adminSessions.api";
+import { safeStringify } from "../sessionsV2/session.utils";
 
 export default function SessionEnvironmentsSection() {
   return (
     <section className="mt-5">
-      <h2 className="fs-5">Session Environments - Renku 1.0</h2>
+      <h2 className="fs-5">Session Environments - Renku 2.0</h2>
       <SessionEnvironments />
     </section>
   );
@@ -107,8 +108,20 @@ interface SessionEnvironmentDisplayProps {
 function SessionEnvironmentDisplay({
   environment,
 }: SessionEnvironmentDisplayProps) {
-  const { container_image, creation_date, name, default_url, description } =
-    environment;
+  const {
+    container_image,
+    creation_date,
+    name,
+    default_url,
+    description,
+    port,
+    gid,
+    uid,
+    working_directory,
+    mount_directory,
+    command,
+    args,
+  } = environment;
 
   return (
     <Col className={cx("col-12", "col-sm-6")}>
@@ -135,6 +148,27 @@ function SessionEnvironmentDisplay({
               </i>
             )}
           </CardText>
+          <CardText className="mb-0">
+            Mount directory: <code>{mount_directory}</code>
+          </CardText>
+          <CardText className="mb-0">
+            Work directory: <code>{working_directory}</code>
+          </CardText>
+          <CardText className="mb-0">
+            Port: <code>{port}</code>
+          </CardText>
+          <CardText className="mb-0">
+            GID: <code>{gid}</code>
+          </CardText>
+          <CardText className="mb-0">
+            UID: <code>{uid}</code>
+          </CardText>
+          <CardText className="mb-0">
+            Command: <code>{command ? safeStringify(command) : "-"}</code>
+          </CardText>
+          <CardText className="mb-0">
+            Args: <code>{args ? safeStringify(args) : "-"}</code>
+          </CardText>
           <CardText>
             <TimeCaption
               datetime={creation_date}

client/src/features/admin/UpdateSessionEnvironmentButton.tsx

@@ -32,6 +32,7 @@ import {
 import { Loader } from "../../components/Loader";
 import ButtonStyles from "../../components/buttons/Buttons.module.scss";
 import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
+import { safeParse, safeStringify } from "../sessionsV2/session.utils";
 import { SessionEnvironment } from "../sessionsV2/sessionsV2.types";
 import SessionEnvironmentFormContent, {
   SessionEnvironmentForm,
@@ -98,6 +99,17 @@ function UpdateSessionEnvironmentModal({
       default_url: environment.default_url,
       description: environment.description,
       name: environment.name,
+      port: environment.port ?? undefined,
+      working_directory: environment.working_directory?.trim()
+        ? environment.working_directory
+        : undefined,
+      mount_directory: environment.mount_directory?.trim()
+        ? environment.working_directory
+        : undefined,
+      uid: environment.uid ?? undefined,
+      gid: environment.gid ?? undefined,
+      command: safeStringify(environment.command),
+      args: safeStringify(environment.args),
     },
   });
   const onSubmit = useCallback(
@@ -108,6 +120,17 @@ function UpdateSessionEnvironmentModal({
         name: data.name,
         default_url: data.default_url.trim() ? data.default_url : "",
         description: data.description.trim() ? data.description : "",
+        port: data.port ?? undefined,
+        working_directory: data.working_directory.trim()
+          ? data.working_directory
+          : undefined,
+        mount_directory: data.mount_directory.trim()
+          ? data.working_directory
+          : undefined,
+        uid: data.uid ?? undefined,
+        gid: data.gid ?? undefined,
+        command: safeParse(data.command),
+        args: safeParse(data.args),
       });
     },
     [environment.id, updateSessionEnvironment]
@@ -132,6 +155,17 @@ function UpdateSessionEnvironmentModal({
       default_url: environment.default_url ?? "",
       description: environment.description ?? "",
       name: environment.name,
+      port: environment.port ?? undefined,
+      working_directory: environment.working_directory?.trim()
+        ? environment.working_directory
+        : undefined,
+      mount_directory: environment.mount_directory?.trim()
+        ? environment.working_directory
+        : undefined,
+      uid: environment.uid ?? undefined,
+      gid: environment.gid ?? undefined,
+      command: safeStringify(environment.command),
+      args: safeStringify(environment.args),
     });
   }, [environment, reset]);
 
@@ -152,7 +186,6 @@ function UpdateSessionEnvironmentModal({
         <ModalHeader toggle={toggle}>Update session environment</ModalHeader>
         <ModalBody>
           {result.error && <RtkErrorAlert error={result.error} />}
-
           <SessionEnvironmentFormContent control={control} errors={errors} />
         </ModalBody>
         <ModalFooter>

client/src/features/admin/adminSessions.types.ts

@@ -21,6 +21,13 @@ export interface AddSessionEnvironmentParams {
   name: string;
   default_url?: string;
   description?: string;
+  uid?: number;
+  gid?: number;
+  working_directory?: string;
+  mount_directory?: string;
+  port?: number;
+  command?: string[];
+  args?: string[];
 }
 
 export interface UpdateSessionEnvironmentParams {
@@ -29,6 +36,13 @@ export interface UpdateSessionEnvironmentParams {
   default_url?: string;
   description?: string;
   name?: string;
+  uid?: number;
+  gid?: number;
+  working_directory?: string;
+  mount_directory?: string;
+  port?: number;
+  command?: string[];
+  args?: string[];
 }
 
 export interface DeleteSessionEnvironmentParams {