SwissDataScienceCenter · andre-code · Jun 25, 2026 · Jun 14, 2026
@@ -30,7 +30,7 @@ interface UseProjectPermissionsArgs {
 export default function useProjectPermissions({
   projectId,
 }: UseProjectPermissionsArgs): PermissionsWithLoadingState {
-  const { currentData, isLoading, isError, isUninitialized } =
+  const { currentData, isLoading, isError, isUninitialized, error } =
     projectV2Api.endpoints.getProjectsByProjectIdPermissions.useQueryState(
       projectId ? { projectId } : skipToken,
     );
@@ -44,17 +44,25 @@ export default function useProjectPermissions({
   }, [fetchPermissions, isUninitialized, projectId]);
 
   const isLoadingPermissions = isLoading || !!(projectId && isUninitialized);
+  const arePermissionsResolved =
+    !isLoadingPermissions && !isError && currentData != null;
 
   if (isLoading || isError || !currentData) {
     return {
       ...DEFAULT_PERMISSIONS,
+      arePermissionsResolved: false,
       isLoadingPermissions,
+      isPermissionsError: isError,
+      permissionsError: isError ? error : undefined,
     };
   }
 
   return {
     ...DEFAULT_PERMISSIONS,
     ...currentData,
+    arePermissionsResolved,
     isLoadingPermissions: false,
+    isPermissionsError: false,
+    permissionsError: undefined,
   };
 }
@@ -23,5 +23,10 @@ export type Permissions = {
 };
 
 export type PermissionsWithLoadingState = Permissions & {
+  arePermissionsResolved: boolean;
   isLoadingPermissions: boolean;
+  isPermissionsError: boolean;
+  permissionsError?: unknown;
 };
+
+export type ProjectPermissions = PermissionsWithLoadingState;
@@ -59,6 +59,13 @@ const CONTEXT_STRINGS = {
     testError:
       "The data connector could not be mounted. Please retry with different credentials, or skip the data connector. If you skip, the data connector will not be mounted in the session.",
   },
+  job: {
+    continueButton: "Continue",
+    dataCy: "job-data-connector-credentials-modal",
+    header: "Job Storage Credentials",
+    testError:
+      "The data connector could not be mounted. Please retry with different credentials, or skip the data connector. If you skip, the data connector will not be mounted in the job.",
+  },
   storage: {
     continueButton: "Test and Save",
     dataCy: "data-connector-credentials-modal",
@@ -158,7 +165,7 @@ function DataConnectorSecrets({
 }
 
 interface DataConnectorSecretsModalProps {
-  context?: "session" | "storage";
+  context?: "session" | "job" | "storage";
   isOpen: boolean;
   onCancel: () => void;
   onStart: (dataConnectorConfigs: DataConnectorConfiguration[]) => void;
@@ -352,7 +359,9 @@ function CredentialsButtons({
         <XLg className={cx("bi", "me-1")} />
         Cancel
       </Button>
-      {context === "session" && <SkipConnectionTestButton onSkip={onSkip} />}
+      {(context === "session" || context === "job") && (
+        <SkipConnectionTestButton context={context} onSkip={onSkip} />
+      )}
       {context === "storage" && (
         <ClearCredentialsButton
           onSkip={onSkip}
@@ -612,9 +621,11 @@ function SensitiveFieldInput({
 }
 
 function SkipConnectionTestButton({
+  context,
   onSkip,
-}: Pick<CredentialsButtonsProps, "onSkip">) {
+}: Pick<CredentialsButtonsProps, "context" | "onSkip">) {
   const skipButtonRef = useRef<HTMLAnchorElement>(null);
+  const targetLabel = context === "job" ? "job" : "session";
   return (
     <>
       <span ref={skipButtonRef}>
@@ -624,7 +635,7 @@ function SkipConnectionTestButton({
         </Button>
       </span>
       <UncontrolledTooltip target={skipButtonRef}>
-        Skip the data connector. It will not be mounted in the session.
+        {`Skip the data connector. It will not be mounted in the ${targetLabel}.`}
       </UncontrolledTooltip>
     </>
   );

@@ -0,0 +1,184 @@
+/*!
+ * Copyright 2026 - 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 { useEffect, useMemo, useRef, useState } from "react";
+
+import RtkOrDataServicesError from "~/components/errors/RtkOrDataServicesError";
+import ProgressStepsIndicator, {
+  ProgressStyle,
+  ProgressType,
+  StatusStepProgressBar,
+  StepsProgressBar,
+} from "~/components/progress/ProgressSteps";
+import { storageDefinitionAfterSavingCredentialsFromConfig } from "../cloudStorage/projectCloudStorage.utils";
+import { usePatchDataConnectorsByDataConnectorIdSecretsMutation } from "../dataConnectorsV2/api/data-connectors.enhanced-api";
+import { shouldCloudStorageSaveCredentials } from "./sessionLaunchValidation.utils";
+import type { SessionStartDataConnectorConfiguration } from "./startSessionOptionsV2.types";
+
+import progressBoxStyles from "~/components/progress/ProgressBox.module.scss";
+
+interface SaveCloudStorageCredentialsProps {
+  dataConnectors: SessionStartDataConnectorConfiguration[];
+  onComplete: (configs: SessionStartDataConnectorConfiguration[]) => void;
+  title?: string;
+}
+
+export default function SaveCloudStorageCredentials({
+  dataConnectors,
+  onComplete,
+  title = "Saving credentials",
+}: SaveCloudStorageCredentialsProps) {
+  const [steps, setSteps] = useState<StepsProgressBar[]>([]);
+  const [saveCredentials, saveCredentialsResult] =
+    usePatchDataConnectorsByDataConnectorIdSecretsMutation();
+
+  const credentialsToSave = useMemo(() => {
+    return dataConnectors
+      .filter(shouldCloudStorageSaveCredentials)
+      .map((cs) => ({
+        storageName: cs.dataConnector.name,
+        storageId: cs.dataConnector.id,
+        secrets: cs.sensitiveFieldValues,
+      }));
+  }, [dataConnectors]);
+
+  const [results, setResults] = useState<StatusStepProgressBar[]>(
+    credentialsToSave.map(() => StatusStepProgressBar.WAITING),
+  );
+
+  const [index, setIndex] = useState(0);
+  const [hasFailed, setHasFailed] = useState(false);
+  const [failedError, setFailedError] =
+    useState<typeof saveCredentialsResult.error>(undefined);
+  const hasCompletedRef = useRef(false);
+
+  useEffect(() => {
+    const theSteps = credentialsToSave.map((cs, i) => ({
+      id: i,
+      status: results[i],
+      step: `Saving credentials for ${cs.storageName}`,
+    }));
+    // TODO: fix react-hooks/set-state-in-effect
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setSteps(theSteps);
+  }, [credentialsToSave, results]);
+
+  useEffect(() => {
+    if (
+      hasFailed ||
+      credentialsToSave.length < 1 ||
+      index >= credentialsToSave.length
+    )
+      return;
+    // TODO: fix react-hooks/set-state-in-effect
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setResults((prev) => {
+      const newResults = [...prev];
+      newResults[index] = StatusStepProgressBar.EXECUTING;
+      return newResults;
+    });
+    const storage = credentialsToSave[index];
+    saveCredentials({
+      dataConnectorId: storage.storageId,
+      dataConnectorSecretPatchList: Object.entries(storage.secrets).map(
+        ([key, value]) => ({
+          name: key,
+          value,
+        }),
+      ),
+    });
+  }, [credentialsToSave, hasFailed, index, saveCredentials]);
+
+  useEffect(() => {
+    if (
+      saveCredentialsResult.isUninitialized ||
+      saveCredentialsResult.isLoading
+    )
+      return;
+    if (saveCredentialsResult.data != null) {
+      // TODO: fix react-hooks/set-state-in-effect
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setResults((prev) => {
+        const newResults = [...prev];
+        newResults[index] = StatusStepProgressBar.READY;
+        return newResults;
+      });
+      saveCredentialsResult.reset();
+      setIndex((prev) => prev + 1);
+      return;
+    }
+    if (saveCredentialsResult.error != null) {
+      setResults((prev) => {
+        const newResults = [...prev];
+        newResults[index] = StatusStepProgressBar.FAILED;
+        return newResults;
+      });
+      setFailedError(saveCredentialsResult.error);
+      setHasFailed(true);
+      saveCredentialsResult.reset();
+    }
+  }, [index, saveCredentialsResult]);
+
+  useEffect(() => {
+    if (
+      hasFailed ||
+      saveCredentialsResult.isLoading ||
+      hasCompletedRef.current
+    ) {
+      return;
+    }
+    if (index >= credentialsToSave.length) {
+      hasCompletedRef.current = true;
+      const cloudStorageConfigs = dataConnectors.map((cs) =>
+        storageDefinitionAfterSavingCredentialsFromConfig(cs),
+      );
+      onComplete(cloudStorageConfigs);
+    }
+  }, [
+    credentialsToSave.length,
+    dataConnectors,
+    hasFailed,
+    index,
+    onComplete,
+    saveCredentialsResult.isLoading,
+  ]);
+
+  return (
+    <div
+      className={cx(
+        progressBoxStyles.progressBoxSmall,
+        progressBoxStyles.progressBoxSmallSteps,
+      )}
+    >
+      {hasFailed && failedError != null && (
+        <RtkOrDataServicesError
+          dismissible={false}
+          error={failedError as never}
+        />
+      )}
+      <ProgressStepsIndicator
+        description="Saving credentials..."
+        type={ProgressType.Determinate}
+        style={ProgressStyle.Light}
+        title={title}
+        status={steps}
+      />
+    </div>
+  );
+}
@@ -19,6 +19,10 @@
 import cx from "classnames";
 import { Col, Row } from "reactstrap";
 
+import {
+  getLauncherCategoryDefinition,
+  sessionLauncherKindToCategory,
+} from "~/features/sessionsV2/session.utils";
 import { Project } from "../../projectsV2/api/projectV2.api";
 import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton";
 import {
@@ -38,7 +42,9 @@ interface SessionCardProps {
 export default function SessionCard({ project, session }: SessionCardProps) {
   if (!session) return null;
 
+  const launcherCategory = sessionLauncherKindToCategory(session.session_type);
   const stylesPerSession = getSessionStatusStyles(session);
+  const launcherDefinition = getLauncherCategoryDefinition(launcherCategory);
 
   return (
     <div
@@ -50,13 +56,21 @@ export default function SessionCard({ project, session }: SessionCardProps) {
         "pb-3",
       )}
     >
-      <img
-        src={stylesPerSession.sessionLine}
-        className={cx("position-absolute", styles.SessionLine)}
-        alt="Session line indicator"
-        loading="lazy"
-      />
-      <div className={cx("ms-5", "px-3", "pt-3")}>
+      {launcherCategory === "session" && (
+        <img
+          src={stylesPerSession.sessionLine}
+          className={cx("position-absolute", styles.SessionLine)}
+          alt="Session line indicator"
+          loading="lazy"
+        />
+      )}
+      <div
+        className={cx(
+          launcherCategory === "session" ? "ms-5" : "ms-2",
+          "px-3",
+          "pt-3",
+        )}
+      >
         <Row className="g-2">
           <Col xs={12} xl="auto">
             <Row className="g-2">
@@ -71,7 +85,8 @@ export default function SessionCard({ project, session }: SessionCardProps) {
                 )}
               >
                 <span className={cx("small", "text-muted", "me-3")}>
-                  Session
+                  {launcherDefinition.text.display}
+                  {session.submission_id ? `: ${session.submission_id}` : ""}
                 </span>
               </Col>
               <Col