feat: make the session secret mount location configurable

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/AddSessionSecretButton.tsx

@@ -65,7 +65,8 @@ interface AddSessionSecretModalProps {
 
 function AddSessionSecretModal({ isOpen, toggle }: AddSessionSecretModalProps) {
   const { project } = useProject();
-  const { id: projectId } = project;
+  const { id: projectId, secrets_mount_directory: secretsMountDirectory } =
+    project;
 
   const [postSessionSecretSlot, result] = usePostSessionSecretSlotsMutation();
 
@@ -132,7 +133,12 @@ function AddSessionSecretModal({ isOpen, toggle }: AddSessionSecretModalProps) {
             errors={errors}
             name="description"
           />
-          <FilenameField control={control} errors={errors} name="filename" />
+          <FilenameField
+            control={control}
+            errors={errors}
+            name="filename"
+            secretsMountDirectory={secretsMountDirectory}
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="outline-primary" onClick={toggle}>

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/ProjectSessionSecrets.tsx

@@ -18,23 +18,15 @@
 
 import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
-import { useMemo } from "react";
-import { Key, Lock, ShieldLock } from "react-bootstrap-icons";
-import {
-  Badge,
-  Card,
-  CardBody,
-  CardHeader,
-  Col,
-  ListGroup,
-  ListGroupItem,
-  Row,
-} from "reactstrap";
+import { useEffect, useMemo, useRef } from "react";
+import { ShieldLock } from "react-bootstrap-icons";
+import { Badge, Card, CardBody, CardHeader, ListGroup } from "reactstrap";
 
 import { InfoAlert } from "../../../../components/Alert";
-import { Loader } from "../../../../components/Loader";
 import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
+import { Loader } from "../../../../components/Loader";
 import useLegacySelector from "../../../../utils/customHooks/useLegacySelector.hook";
+import useLocationHash from "../../../../utils/customHooks/useLocationHash.hook";
 import PermissionsGuard from "../../../permissionsV2/PermissionsGuard";
 import type {
   SessionSecret,
@@ -47,17 +39,19 @@ import {
 import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 import AddSessionSecretButton from "./AddSessionSecretButton";
-import SessionSecretActions from "./SessionSecretActions";
-import type { SessionSecretSlotWithSecret } from "./sessionSecrets.types";
+import { SESSION_SECRETS_CARD_ID } from "./sessionSecrets.constants";
 import { getSessionSecretSlotsWithSecrets } from "./sessionSecrets.utils";
+import SessionSecretSlotItem from "./SessionSecretSlotItem";
+import UpdateSecretsMountDirectoryButton from "./UpdateSecretsMountDirectoryButton";
 
 export default function ProjectSessionSecrets() {
   const userLogged = useLegacySelector<boolean>(
     (state) => state.stateModel.user.logged
   );
 
   const { project } = useProject();
-  const { id: projectId } = project;
+  const { id: projectId, secrets_mount_directory: secretsMountDirectory } =
+    project;
   const permissions = useProjectPermissions({ projectId });
   const {
     data: sessionSecretSlots,
@@ -83,19 +77,33 @@ export default function ProjectSessionSecrets() {
     </>
   ) : (
     <ProjectSessionSecretsContent
+      secretsMountDirectory={secretsMountDirectory}
       sessionSecretSlots={sessionSecretSlots}
       sessionSecrets={sessionSecrets ?? []}
     />
   );
 
+  const ref = useRef<HTMLDivElement>(null);
+  const [hash] = useLocationHash();
+  useEffect(() => {
+    if (hash === SESSION_SECRETS_CARD_ID && !isLoading) {
+      ref.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [hash, isLoading]);
+
   return (
-    <Card data-cy="project-settings-session-secrets">
+    <Card
+      id={SESSION_SECRETS_CARD_ID}
+      data-cy="project-settings-session-secrets"
+      innerRef={ref}
+    >
       <CardHeader>
         <div
           className={cx(
             "align-items-center",
             "d-flex",
-            "justify-content-between"
+            "justify-content-between",
+            "mb-2"
           )}
         >
           <div className={cx("align-items-center", "d-flex")}>
@@ -116,10 +124,27 @@ export default function ProjectSessionSecrets() {
           </div>
         </div>
 
-        <p className="mb-0">
+        <p className="mb-1">
           Use session secrets to connect to resources from inside a session that
           require a password or credential.
         </p>
+        <div className={cx("align-items-center", "d-flex", "gap-2")}>
+          <p className="mb-0">
+            Session secrets will be mounted at{" "}
+            <code>
+              {secretsMountDirectory.startsWith("/")
+                ? secretsMountDirectory
+                : `<work-dir>/${secretsMountDirectory}`}
+            </code>
+            .
+          </p>
+          <PermissionsGuard
+            disabled={null}
+            enabled={<UpdateSecretsMountDirectoryButton />}
+            requestedPermission="write"
+            userPermissions={permissions}
+          />
+        </div>
 
         {!userLogged && (
           <InfoAlert
@@ -141,11 +166,13 @@ export default function ProjectSessionSecrets() {
 }
 
 interface ProjectSessionSecretsContentProps {
+  secretsMountDirectory: string;
   sessionSecretSlots: SessionSecretSlot[];
   sessionSecrets: SessionSecret[];
 }
 
 function ProjectSessionSecretsContent({
+  secretsMountDirectory,
   sessionSecretSlots,
   sessionSecrets,
 }: ProjectSessionSecretsContentProps) {
@@ -164,61 +191,10 @@ function ProjectSessionSecretsContent({
       {sessionSecretSlotsWithSecrets.map((secretSlot) => (
         <SessionSecretSlotItem
           key={secretSlot.secretSlot.id}
+          secretsMountDirectory={secretsMountDirectory}
           secretSlot={secretSlot}
         />
       ))}
     </ListGroup>
   );
 }
-
-interface SessionSecretSlotItemProps {
-  secretSlot: SessionSecretSlotWithSecret;
-}
-
-function SessionSecretSlotItem({ secretSlot }: SessionSecretSlotItemProps) {
-  const { filename, name, description } = secretSlot.secretSlot;
-
-  return (
-    <ListGroupItem action data-cy="session-secret-slot-item">
-      <Row>
-        <Col>
-          <div className={cx("align-items-center", "d-flex")}>
-            <span className={cx("fw-bold", "me-2")}>{name}</span>
-            {secretSlot.secretId ? (
-              <Badge
-                className={cx(
-                  "border",
-                  "border-success",
-                  "bg-success-subtle",
-                  "text-success-emphasis"
-                )}
-                pill
-              >
-                <Key className={cx("bi", "me-1")} />
-                Secret saved
-              </Badge>
-            ) : (
-              <Badge
-                className={cx(
-                  "border",
-                  "border-dark-subtle",
-                  "bg-light",
-                  "text-dark-emphasis"
-                )}
-                pill
-              >
-                <Lock className={cx("bi", "me-1")} />
-                Secret not provided
-              </Badge>
-            )}
-          </div>
-          <div>
-            filename: <code>{filename}</code>
-          </div>
-          {description && <p className="mb-0">{description}</p>}
-        </Col>
-        <SessionSecretActions secretSlot={secretSlot} />
-      </Row>
-    </ListGroupItem>
-  );
-}

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/SessionSecretActions.tsx

@@ -52,6 +52,7 @@ import {
   usePatchProjectsByProjectIdSessionSecretsMutation,
   usePatchSessionSecretSlotsBySlotIdMutation,
 } from "../../../projectsV2/api/projectV2.enhanced-api";
+import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 import DescriptionField from "./fields/DescriptionField";
 import FilenameField from "./fields/FilenameField";
@@ -242,6 +243,9 @@ function EditSessionSecretModal({
 }: EditSessionSecretModalProps) {
   const { id: slotId } = secretSlot;
 
+  const { project } = useProject();
+  const { secrets_mount_directory: secretsMountDirectory } = project;
+
   const [patchSessionSecretSlot, result] =
     usePatchSessionSecretSlotsBySlotIdMutation();
 
@@ -321,7 +325,12 @@ function EditSessionSecretModal({
             errors={errors}
             name="description"
           />
-          <FilenameField control={control} errors={errors} name="filename" />
+          <FilenameField
+            control={control}
+            errors={errors}
+            name="filename"
+            secretsMountDirectory={secretsMountDirectory}
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="outline-primary" onClick={toggle}>

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/SessionSecretSlotItem.tsx

@@ -0,0 +1,110 @@
+/*!
+ * 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 { ArrowRight, Key, Lock } from "react-bootstrap-icons";
+import { Badge, Col, ListGroupItem, Row } from "reactstrap";
+
+import { useGetUserSecretByIdQuery } from "../../../usersV2/api/users.api";
+import SessionSecretActions from "./SessionSecretActions";
+import type { SessionSecretSlotWithSecret } from "./sessionSecrets.types";
+
+interface SessionSecretSlotItemProps {
+  secretsMountDirectory: string;
+  secretSlot: SessionSecretSlotWithSecret;
+  noActions?: boolean;
+}
+
+export default function SessionSecretSlotItem({
+  secretsMountDirectory,
+  secretSlot,
+  noActions,
+}: SessionSecretSlotItemProps) {
+  const { filename, name, description } = secretSlot.secretSlot;
+
+  const mountDir = secretsMountDirectory.startsWith("/")
+    ? secretsMountDirectory
+    : `<work-dir>/${secretsMountDirectory}`;
+  const fullPath = `${mountDir}/${filename}`;
+
+  return (
+    <ListGroupItem action={!noActions} data-cy="session-secret-slot-item">
+      <Row>
+        <Col>
+          <div className={cx("align-items-center", "d-flex")}>
+            <span className={cx("fw-bold", "me-2")}>{name}</span>
+            {secretSlot.secretId ? (
+              <Badge
+                className={cx(
+                  "border",
+                  "border-success",
+                  "bg-success-subtle",
+                  "text-success-emphasis"
+                )}
+                pill
+              >
+                <Key className={cx("bi", "me-1")} />
+                Secret saved
+                <ArrowRight className={cx("bi", "mx-1")} />
+                <SessionSecretSlotItemSecretReference
+                  userSecretId={secretSlot.secretId}
+                />
+              </Badge>
+            ) : (
+              <Badge
+                className={cx(
+                  "border",
+                  "border-dark-subtle",
+                  "bg-light",
+                  "text-dark-emphasis"
+                )}
+                pill
+              >
+                <Lock className={cx("bi", "me-1")} />
+                Secret not provided
+              </Badge>
+            )}
+          </div>
+          <div>
+            Location in sessions: <code>{fullPath}</code>
+          </div>
+          {description && <p className="mb-0">{description}</p>}
+        </Col>
+        {!noActions && <SessionSecretActions secretSlot={secretSlot} />}
+      </Row>
+    </ListGroupItem>
+  );
+}
+
+interface SessionSecretSlotItemSecretReferenceProps {
+  userSecretId: string;
+}
+
+function SessionSecretSlotItemSecretReference({
+  userSecretId,
+}: SessionSecretSlotItemSecretReferenceProps) {
+  const { data: userSecret, error } = useGetUserSecretByIdQuery({
+    secretId: userSecretId,
+  });
+
+  if (error || !userSecret) {
+    return null;
+  }
+
+  return <>{userSecret.name}</>;
+}