From 5e5c2a1fb8d7cd1abb435386da9b7878e1b87b13 Mon Sep 17 00:00:00 2001
From: Lorenzo Cavazzi <43481553+lorenzo-cavazzi@users.noreply.github.com>
Date: Tue, 21 Nov 2023 16:47:29 +0100
Subject: [PATCH 1/5] feat: enable RW option on cloud storage (#2901)

fix #2899
---
 .../components/AddCloudStorageButton.tsx      | 159 +++++++-----------
 .../ProjectSettingsCloudStorage.tsx           |  87 ++++------
 .../project/projectCloudStorage.constants.ts  |   2 -
 .../options/SessionCloudStorageOption.tsx     | 141 ++++++----------
 tests/cypress.config.ts                       |   3 -
 tests/cypress/e2e/newSession.spec.ts          |   8 +-
 tests/cypress/e2e/projectSettings.spec.ts     |  37 ++--
 7 files changed, 156 insertions(+), 281 deletions(-)

diff --git a/client/src/features/project/components/AddCloudStorageButton.tsx b/client/src/features/project/components/AddCloudStorageButton.tsx
index 665aa93201..1af9740dc2 100644
--- a/client/src/features/project/components/AddCloudStorageButton.tsx
+++ b/client/src/features/project/components/AddCloudStorageButton.tsx
@@ -49,7 +49,6 @@ import {
 } from "../projectCloudStorage.api";
 import {
   CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER,
-  CLOUD_STORAGE_READWRITE_ENABLED,
   CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
 } from "../projectCloudStorage.constants";
 import {
@@ -205,7 +204,7 @@ function AdvancedAddCloudStorage({
       configuration: "",
       name: "",
       private: true,
-      readonly: true,
+      readonly: false,
       source_path: "",
     },
   });
@@ -321,55 +320,34 @@ function AdvancedAddCloudStorage({
               </FormText>
             </div>
 
-            {!CLOUD_STORAGE_READWRITE_ENABLED ? null : (
-              <div className="mb-3">
-                <div className="form-label">Mode</div>
-                <Controller
-                  control={control}
-                  name="readonly"
-                  render={({ field }) => (
-                    <>
-                      <div className="form-check">
-                        <Input
-                          type="radio"
-                          className="form-check-input"
-                          name="readonlyRadio"
-                          id="addCloudStorageReadOnly"
-                          autoComplete="off"
-                          checked={field.value}
-                          onBlur={field.onBlur}
-                          onChange={() => field.onChange(true)}
-                        />
-                        <Label
-                          className={cx("form-check-label", "ms-2")}
-                          for="addCloudStorageReadOnly"
-                        >
-                          Read-only
-                        </Label>
-                      </div>
-                      <div className="form-check">
-                        <Input
-                          type="radio"
-                          className="form-check-input"
-                          name="readonlyRadio"
-                          id="addCloudStorageReadWrite"
-                          autoComplete="off"
-                          checked={!field.value}
-                          onBlur={field.onBlur}
-                          onChange={() => field.onChange(false)}
-                        />
-                        <Label
-                          className={cx("form-check-label", "ms-2")}
-                          for="addCloudStorageReadWrite"
-                        >
-                          Read/Write
-                        </Label>
-                      </div>
-                    </>
-                  )}
-                />
-              </div>
-            )}
+            <div className="mb-3">
+              <Controller
+                control={control}
+                name="readonly"
+                render={({ field }) => (
+                  <Input
+                    aria-describedby="addCloudStorageReadOnlyHelp"
+                    className="form-check-input"
+                    id="addCloudStorageReadOnly"
+                    type="checkbox"
+                    checked={field.value}
+                    innerRef={field.ref}
+                    onBlur={field.onBlur}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+              <Label
+                className={cx("form-check-label", "ms-2")}
+                for="addCloudStorageReadOnly"
+              >
+                Read-only
+              </Label>
+              <FormText id="addCloudStorageReadOnlyHelp" tag="div">
+                Check this box to mount the storage in read-only mode. Use this
+                setting to prevent accidental data modifications.
+              </FormText>
+            </div>
 
             <div className="mb-3">
               <Label className="form-label" for="addCloudStorageSourcePath">
@@ -495,7 +473,7 @@ function SimpleAddCloudStorage({
       name: "",
       endpointUrl: "",
       private: true,
-      readonly: true,
+      readonly: false,
     },
   });
   const onSubmit = useCallback(
@@ -674,55 +652,34 @@ function SimpleAddCloudStorage({
               </FormText>
             </div>
 
-            {!CLOUD_STORAGE_READWRITE_ENABLED ? null : (
-              <div>
-                <div className="form-label">Mode</div>
-                <Controller
-                  control={control}
-                  name="readonly"
-                  render={({ field }) => (
-                    <>
-                      <div className="form-check">
-                        <Input
-                          type="radio"
-                          className="form-check-input"
-                          name="addCloudStorageReadOnlyRadio"
-                          id="addCloudStorageReadOnly"
-                          autoComplete="off"
-                          checked={field.value}
-                          onBlur={field.onBlur}
-                          onChange={() => field.onChange(true)}
-                        />
-                        <Label
-                          className={cx("form-check-label", "ms-2")}
-                          for="addCloudStorageReadOnly"
-                        >
-                          Read-only
-                        </Label>
-                      </div>
-                      <div className="form-check">
-                        <Input
-                          type="radio"
-                          className="form-check-input"
-                          name="addCloudStorageReadOnlyRadio"
-                          id="addCloudStorageReadWrite"
-                          autoComplete="off"
-                          checked={!field.value}
-                          onBlur={field.onBlur}
-                          onChange={() => field.onChange(false)}
-                        />
-                        <Label
-                          className={cx("form-check-label", "ms-2")}
-                          for="addCloudStorageReadWrite"
-                        >
-                          Read/Write
-                        </Label>
-                      </div>
-                    </>
-                  )}
-                />
-              </div>
-            )}
+            <div>
+              <Controller
+                control={control}
+                name="readonly"
+                render={({ field }) => (
+                  <Input
+                    aria-describedby="addCloudStorageReadOnlyHelp"
+                    className="form-check-input"
+                    id="addCloudStorageReadOnly"
+                    type="checkbox"
+                    checked={field.value}
+                    innerRef={field.ref}
+                    onBlur={field.onBlur}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+              <Label
+                className={cx("form-check-label", "ms-2")}
+                for="addCloudStorageReadOnly"
+              >
+                Read-only
+              </Label>
+              <FormText id="addCloudStorageReadOnlyHelp" tag="div">
+                Check this box to mount the storage in read-only mode. Use this
+                setting to prevent accidental data modifications.
+              </FormText>
+            </div>
           </div>
         </Form>
       </ModalBody>
diff --git a/client/src/features/project/components/ProjectSettingsCloudStorage.tsx b/client/src/features/project/components/ProjectSettingsCloudStorage.tsx
index 639bd135b3..634be2e875 100644
--- a/client/src/features/project/components/ProjectSettingsCloudStorage.tsx
+++ b/client/src/features/project/components/ProjectSettingsCloudStorage.tsx
@@ -70,7 +70,6 @@ import {
 } from "../projectCloudStorage.api";
 import {
   CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER,
-  CLOUD_STORAGE_READWRITE_ENABLED,
   CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
 } from "../projectCloudStorage.constants";
 import {
@@ -645,55 +644,35 @@ function EditCloudStorage({
           </div>
         )}
 
-        {!CLOUD_STORAGE_READWRITE_ENABLED ? null : (
-          <div className="mb-3">
-            <div className="form-label">Mode</div>
-            <Controller
-              control={control}
-              name="readonly"
-              render={({ field }) => (
-                <>
-                  <div className="form-check">
-                    <Input
-                      type="radio"
-                      className="form-check-input"
-                      name={`updateCloudStorageReadOnlyRadio-${name}`}
-                      id={`updateCloudStorageReadOnly-${name}`}
-                      autoComplete="off"
-                      checked={field.value}
-                      onBlur={field.onBlur}
-                      onChange={() => field.onChange(true)}
-                    />
-                    <Label
-                      className={cx("form-check-label", "ms-2")}
-                      for={`updateCloudStorageReadOnly-${name}`}
-                    >
-                      Read-only
-                    </Label>
-                  </div>
-                  <div className="form-check">
-                    <Input
-                      type="radio"
-                      className="form-check-input"
-                      name={`updateCloudStorageReadOnlyRadio-${name}`}
-                      id={`updateCloudStorageReadWrite-${name}`}
-                      autoComplete="off"
-                      checked={!field.value}
-                      onBlur={field.onBlur}
-                      onChange={() => field.onChange(false)}
-                    />
-                    <Label
-                      className={cx("form-check-label", "ms-2")}
-                      for={`updateCloudStorageReadWrite-${name}`}
-                    >
-                      Read/Write
-                    </Label>
-                  </div>
-                </>
-              )}
-            />
-          </div>
-        )}
+        <div className="mb-3">
+          <Controller
+            control={control}
+            name="readonly"
+            render={({ field }) => (
+              <Input
+                aria-describedby="updateCloudStorageReadOnlyHelp"
+                className="form-check-input"
+                id={`updateCloudStorageReadOnly-${name}`}
+                type="checkbox"
+                checked={field.value}
+                innerRef={field.ref}
+                onBlur={field.onBlur}
+                onChange={field.onChange}
+              />
+            )}
+          />
+          <Label
+            className={cx("form-check-label", "ms-2")}
+            for={`updateCloudStorageReadOnly-${name}`}
+          >
+            Read-only
+          </Label>
+          <FormText id="updateCloudStorageReadOnlyHelp" tag="div">
+            Check this box to mount the storage in read-only mode. Use this
+            setting to prevent accidental data modifications.
+          </FormText>
+        </div>
+
         <div className="mb-3">
           <Label
             className="form-label"
@@ -854,9 +833,13 @@ function CloudStorageDetails({
         )}
         <div className="mt-2">
           <div className="text-rk-text-light">
-            <small>Mode</small>
+            <small>Access mode</small>
+          </div>
+          <div>
+            {readonly
+              ? "Force Read-only"
+              : "Allow Read-Write (requires adequate privileges on the storage)"}
           </div>
-          <div>{readonly ? "Read-only" : "Read/Write"}</div>
         </div>
         <div className="mt-2">
           <div className="text-rk-text-light">
diff --git a/client/src/features/project/projectCloudStorage.constants.ts b/client/src/features/project/projectCloudStorage.constants.ts
index 4329066acc..0a13958c25 100644
--- a/client/src/features/project/projectCloudStorage.constants.ts
+++ b/client/src/features/project/projectCloudStorage.constants.ts
@@ -20,5 +20,3 @@ export const CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN = "<sensitive>";
 
 export const CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER =
   "[example]\ntype = s3\nprovider = AWS\nregion = us-east-1";
-
-export const CLOUD_STORAGE_READWRITE_ENABLED = false;
diff --git a/client/src/features/session/components/options/SessionCloudStorageOption.tsx b/client/src/features/session/components/options/SessionCloudStorageOption.tsx
index c0d26c5898..986cd7d4e3 100644
--- a/client/src/features/session/components/options/SessionCloudStorageOption.tsx
+++ b/client/src/features/session/components/options/SessionCloudStorageOption.tsx
@@ -78,7 +78,6 @@ import {
 } from "../../../project/projectCloudStorage.api";
 import {
   CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER,
-  CLOUD_STORAGE_READWRITE_ENABLED,
   CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
 } from "../../../project/projectCloudStorage.constants";
 import {
@@ -695,45 +694,27 @@ function CloudStorageDetails({ index, storage }: CloudStorageItemProps) {
         />
       </div>
 
-      {!CLOUD_STORAGE_READWRITE_ENABLED ? null : (
-        <div className="mb-3">
-          <div className="form-label">Mode</div>
-          <div className="form-check">
-            <Input
-              type="radio"
-              className="form-check-input"
-              name={`updateCloudStorageReadOnlyRadio-${index}`}
-              id={`updateCloudStorageReadOnly-${index}`}
-              autoComplete="off"
-              checked={!!readonly}
-              onChange={onChangeReadWriteMode}
-            />
-            <Label
-              className={cx("form-check-label", "ms-2")}
-              for={`updateCloudStorageReadOnly-${index}`}
-            >
-              Read-only
-            </Label>
-          </div>
-          <div className="form-check">
-            <Input
-              type="radio"
-              className="form-check-input"
-              name={`updateCloudStorageReadOnlyRadio-${index}`}
-              id={`updateCloudStorageReadWrite-${index}`}
-              autoComplete="off"
-              checked={!readonly}
-              onChange={onChangeReadWriteMode}
-            />
-            <Label
-              className={cx("form-check-label", "ms-2")}
-              for={`updateCloudStorageReadWrite-${index}`}
-            >
-              Read/Write
-            </Label>
-          </div>
-        </div>
-      )}
+      <div className="mb-3">
+        <Input
+          aria-describedby={`updateCloudStorageReadOnlyHelp-${index}`}
+          className="form-check-input"
+          id={`updateCloudStorageReadOnly-${index}`}
+          type="checkbox"
+          checked={!!readonly}
+          onChange={onChangeReadWriteMode}
+        />
+        <Label
+          className={cx("form-check-label", "ms-2")}
+          for={`updateCloudStorageReadOnly-${index}`}
+        >
+          Read-only
+        </Label>
+        <FormText id={`updateCloudStorageReadOnlyHelp-${index}`} tag="div">
+          Check this box to mount the storage in read-only mode. Use this
+          setting to prevent accidental data modifications.
+        </FormText>
+      </div>
+
       <div>
         <Label className="form-label" for={`updateCloudStorageConfig-${index}`}>
           Configuration
@@ -819,7 +800,7 @@ function AddTemporaryCloudStorageModal({
     defaultValues: {
       configuration: "",
       name: "",
-      readonly: true,
+      readonly: false,
       source_path: "",
     },
   });
@@ -920,55 +901,35 @@ function AddTemporaryCloudStorageModal({
             <div className="invalid-feedback">Please provide a name</div>
           </div>
 
-          {!CLOUD_STORAGE_READWRITE_ENABLED ? null : (
-            <div className="mb-3">
-              <div className="form-label">Mode</div>
-              <Controller
-                control={control}
-                name="readonly"
-                render={({ field }) => (
-                  <>
-                    <div className="form-check">
-                      <Input
-                        type="radio"
-                        className="form-check-input"
-                        name="readonlyRadio"
-                        id="addCloudStorageReadOnly"
-                        autoComplete="off"
-                        checked={field.value}
-                        onBlur={field.onBlur}
-                        onChange={() => field.onChange(true)}
-                      />
-                      <Label
-                        className={cx("form-check-label", "ms-2")}
-                        for="addCloudStorageReadOnly"
-                      >
-                        Read-only
-                      </Label>
-                    </div>
-                    <div className="form-check">
-                      <Input
-                        type="radio"
-                        className="form-check-input"
-                        name="readonlyRadio"
-                        id="addCloudStorageReadWrite"
-                        autoComplete="off"
-                        checked={!field.value}
-                        onBlur={field.onBlur}
-                        onChange={() => field.onChange(false)}
-                      />
-                      <Label
-                        className={cx("form-check-label", "ms-2")}
-                        for="addCloudStorageReadWrite"
-                      >
-                        Read/Write
-                      </Label>
-                    </div>
-                  </>
-                )}
-              />
-            </div>
-          )}
+          <div className="mb-3">
+            <Controller
+              control={control}
+              name="readonly"
+              render={({ field }) => (
+                <Input
+                  aria-describedby="addCloudStorageReadOnlyHelp"
+                  className="form-check-input"
+                  id="addCloudStorageReadOnly"
+                  type="checkbox"
+                  checked={field.value}
+                  innerRef={field.ref}
+                  onBlur={field.onBlur}
+                  onChange={field.onChange}
+                />
+              )}
+            />
+            <Label
+              className={cx("form-check-label", "ms-2")}
+              for="addCloudStorageReadOnly"
+            >
+              Read-only
+            </Label>
+            <FormText id="addCloudStorageReadOnlyHelp" tag="div">
+              Check this box to mount the storage in read-only mode. Use this
+              setting to prevent accidental data modifications.
+            </FormText>
+          </div>
+
           <div className="mb-3">
             <Label className="form-label" for="addCloudStorageSourcePath">
               Source Path
diff --git a/tests/cypress.config.ts b/tests/cypress.config.ts
index 6998bf740b..052612220b 100644
--- a/tests/cypress.config.ts
+++ b/tests/cypress.config.ts
@@ -5,9 +5,6 @@ export default defineConfig({
     baseUrl: "http://localhost:3000",
     specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
   },
-  env: {
-    CLOUD_STORAGE_READWRITE_ENABLED: false,
-  },
   retries: {
     runMode: 2,
     openMode: 0,
diff --git a/tests/cypress/e2e/newSession.spec.ts b/tests/cypress/e2e/newSession.spec.ts
index 8c06014e6e..cf8fca771b 100644
--- a/tests/cypress/e2e/newSession.spec.ts
+++ b/tests/cypress/e2e/newSession.spec.ts
@@ -205,12 +205,6 @@ describe("launch sessions", () => {
       .should("have.value", "mount/path")
       .should("be.visible");
 
-    if (Cypress.env("CLOUD_STORAGE_READWRITE_ENABLED")) {
-      cy.contains("Read-only").siblings("input").should("be.checked");
-      cy.get("label")
-        .contains("Read/Write")
-        .siblings("input")
-        .should("not.be.checked");
-    }
+    cy.contains("Read-only").siblings("input").should("be.checked");
   });
 });
diff --git a/tests/cypress/e2e/projectSettings.spec.ts b/tests/cypress/e2e/projectSettings.spec.ts
index 417a1a67a5..5af6b91c69 100644
--- a/tests/cypress/e2e/projectSettings.spec.ts
+++ b/tests/cypress/e2e/projectSettings.spec.ts
@@ -323,17 +323,11 @@ describe("Cloud storage settings page", () => {
       .siblings("input")
       .should("not.be.checked");
 
-    if (Cypress.env("CLOUD_STORAGE_READWRITE_ENABLED")) {
-      cy.get("label")
-        .contains("Read/Write")
-        .click()
-        .siblings("input")
-        .should("be.checked");
-      cy.get("label")
-        .contains("Read-only")
-        .siblings("input")
-        .should("not.be.checked");
-    }
+    cy.get("label")
+      .contains("Read-only")
+      .click()
+      .siblings("input")
+      .should("not.be.checked");
 
     cy.get("button[type='submit']")
       .contains("Save changes")
@@ -352,7 +346,7 @@ describe("Cloud storage settings page", () => {
 
       expect(name).to.equal("My special storage");
       expect(isPrivate).to.be.false;
-      expect(readonly).to.be.undefined;
+      expect(readonly).to.be.false;
       expect(source_path).to.equal("bucket/source/subfolder");
       expect(target_path).to.equal("/mnt/special");
     });
@@ -421,17 +415,10 @@ describe("Cloud storage settings page", () => {
       .siblings("input")
       .should("be.checked");
 
-    if (Cypress.env("CLOUD_STORAGE_READWRITE_ENABLED")) {
-      cy.get("label")
-        .contains("Read/Write")
-        .click()
-        .siblings("input")
-        .should("be.checked");
-      cy.get("label")
-        .contains("Read-only")
-        .siblings("input")
-        .should("not.be.checked");
-    }
+    cy.get("label")
+      .contains("Read-only")
+      .siblings("input")
+      .should("not.be.checked");
 
     cy.get("button[type='submit']")
       .contains("Add Storage")
@@ -444,9 +431,7 @@ describe("Cloud storage settings page", () => {
 
       expect(name).to.equal("My new storage");
       expect(isPrivate).to.be.true;
-      expect(readonly).to.equal(
-        !Cypress.env("CLOUD_STORAGE_READWRITE_ENABLED")
-      );
+      expect(readonly).to.be.false;
       expect(target_path).to.equal("My new storage");
     });
 

From b8e0a9c6aace99a1d3aa5f8c0bb83a4e1e96bc41 Mon Sep 17 00:00:00 2001
From: Lorenzo Cavazzi <43481553+lorenzo-cavazzi@users.noreply.github.com>
Date: Tue, 19 Dec 2023 10:18:05 +0100
Subject: [PATCH 2/5] feat: support more cloud storage options from the backend
 (#2908)

Fixes #2900.

Support all the cloud storage options coming from the `GET /storage/get_storage_schema` endpoint.
---
 .github/workflows/acceptance-tests.yml        |   12 +-
 .../src/components/errors/RtkErrorAlert.tsx   |   36 +-
 .../AddCloudStorageButton.module.scss         |    3 -
 .../components/AddCloudStorageButton.tsx      |  844 --------------
 .../ProjectSettingsCloudStorage.tsx           |  871 +-------------
 .../cloudStorage/AddOrEditCloudStorage.tsx    | 1013 +++++++++++++++++
 .../AddOrEditCloudStorageButton.tsx           |   94 ++
 .../cloudStorage/CloudStorage.module.scss     |   13 +
 .../cloudStorage/CloudStorageItem.tsx         |  417 +++++++
 .../cloudStorage/CloudStorageModal.tsx        |  491 ++++++++
 .../cloudStorage}/projectCloudStorage.api.ts  |   10 +
 .../projectCloudStorage.constants.ts          |  113 ++
 .../cloudStorage/projectCloudStorage.types.ts |  154 +++
 .../project/projectCloudStorage.constants.ts  |   22 -
 .../project/projectCloudStorage.types.ts      |   91 --
 .../utils/projectCloudStorage.utils.ts        |  319 +++++-
 .../session/components/StartNewSession.tsx    |    3 +-
 .../options/AutostartSessionOptions.tsx       |    7 +-
 .../options/SessionCloudStorageOption.tsx     |  970 +++-------------
 .../useDefaultCloudStorageOption.hook.ts      |   26 +-
 .../features/session/sessions.api.utils.ts    |   57 +-
 client/src/features/session/sessions.types.ts |   22 +-
 .../session/startSessionOptions.types.ts      |   13 +-
 client/src/features/versions/versions.api.ts  |   13 +-
 .../src/features/versions/versions.types.ts   |   14 +-
 .../_custom_bootstrap_variables.scss          |    3 +
 client/src/utils/helpers/EnhancedState.ts     |    2 +-
 tests/cypress/e2e/newSession.spec.ts          |   40 +-
 tests/cypress/e2e/projectSettings.spec.ts     |  173 ++-
 .../fixtures/cloudStorage/cloud-storage.json  |    3 +-
 .../cloudStorage/new-cloud-storage.json       |    6 +-
 .../fixtures/cloudStorage/storage-schema.json |  234 ++++
 .../support/renkulab-fixtures/cloudStorage.ts |   36 +
 33 files changed, 3243 insertions(+), 2882 deletions(-)
 delete mode 100644 client/src/features/project/components/AddCloudStorageButton.module.scss
 delete mode 100644 client/src/features/project/components/AddCloudStorageButton.tsx
 create mode 100644 client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx
 create mode 100644 client/src/features/project/components/cloudStorage/AddOrEditCloudStorageButton.tsx
 create mode 100644 client/src/features/project/components/cloudStorage/CloudStorage.module.scss
 create mode 100644 client/src/features/project/components/cloudStorage/CloudStorageItem.tsx
 create mode 100644 client/src/features/project/components/cloudStorage/CloudStorageModal.tsx
 rename client/src/features/project/{ => components/cloudStorage}/projectCloudStorage.api.ts (93%)
 create mode 100644 client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts
 create mode 100644 client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts
 delete mode 100644 client/src/features/project/projectCloudStorage.constants.ts
 delete mode 100644 client/src/features/project/projectCloudStorage.types.ts
 create mode 100644 tests/cypress/fixtures/cloudStorage/storage-schema.json

diff --git a/.github/workflows/acceptance-tests.yml b/.github/workflows/acceptance-tests.yml
index 9f2cc43e96..366d9423e9 100644
--- a/.github/workflows/acceptance-tests.yml
+++ b/.github/workflows/acceptance-tests.yml
@@ -31,11 +31,12 @@ jobs:
       renku-graph: ${{ steps.deploy-comment.outputs.renku-graph}}
       renku-notebooks: ${{ steps.deploy-comment.outputs.renku-notebooks}}
       renku-data-services: ${{ steps.deploy-comment.outputs.renku-data-services}}
+      amalthea: ${{ steps.deploy-comment.outputs.amalthea}}
       test-enabled: ${{ steps.deploy-comment.outputs.test-enabled}}
       extra-values: ${{ steps.deploy-comment.outputs.extra-values}}
     steps:
       - id: deploy-comment
-        uses: SwissDataScienceCenter/renku-actions/check-pr-description@v1.8.5
+        uses: SwissDataScienceCenter/renku-actions/check-pr-description@amalthea-deploy
         with:
           string: /deploy
           pr_ref: ${{ github.event.number }}
@@ -65,7 +66,7 @@ jobs:
           body: |
             You can access the deployment of this PR at https://renku-ci-ui-${{ github.event.number }}.dev.renku.ch
       - name: Build and deploy
-        uses: SwissDataScienceCenter/renku-actions/deploy-renku@v1.8.5
+        uses: SwissDataScienceCenter/renku-actions/deploy-renku@amalthea-deploy
         env:
           RANCHER_PROJECT_ID: ${{ secrets.CI_RANCHER_PROJECT }}
           DOCKER_PASSWORD: ${{ secrets.RENKU_DOCKER_PASSWORD }}
@@ -88,6 +89,7 @@ jobs:
           renku_graph: "${{ needs.check-deploy.outputs.renku-graph }}"
           renku_notebooks: "${{ needs.check-deploy.outputs.renku-notebooks }}"
           renku_data_services: "${{ needs.check-deploy.outputs.renku-data-services }}"
+          amalthea: "${{ needs.check-deploy.outputs.amalthea }}"
           extra_values: "${{ needs.check-deploy.outputs.extra-values }}"
 
   selenium-acceptance-tests:
@@ -95,7 +97,7 @@ jobs:
     if: github.event.action != 'closed' && needs.check-deploy.outputs.pr-contains-string == 'true' && needs.check-deploy.outputs.test-enabled == 'true'
     runs-on: ubuntu-22.04
     steps:
-      - uses: SwissDataScienceCenter/renku-actions/test-renku@v1.8.5
+      - uses: SwissDataScienceCenter/renku-actions/test-renku@amalthea-deploy
         with:
           kubeconfig: ${{ secrets.RENKUBOT_DEV_KUBECONFIG }}
           renku-release: renku-ci-ui-${{ github.event.number }}
@@ -124,7 +126,7 @@ jobs:
     steps:
       - name: Extract Renku repository reference
         run: echo "RENKU_REFERENCE=`echo '${{ needs.check-deploy.outputs.renku }}' | cut -d'@' -f2`" >> $GITHUB_ENV
-      - uses: SwissDataScienceCenter/renku-actions/test-renku-cypress@v1.8.5
+      - uses: SwissDataScienceCenter/renku-actions/test-renku-cypress@amalthea-deploy
         with:
           e2e-target: ${{ matrix.tests }}
           renku-reference: ${{ env.RENKU_REFERENCE }}
@@ -152,7 +154,7 @@ jobs:
           body: |
             Tearing down the temporary RenkuLab deplyoment for this PR.
       - name: renku teardown
-        uses: SwissDataScienceCenter/renku-actions/cleanup-renku-ci-deployments@v1.8.5
+        uses: SwissDataScienceCenter/renku-actions/cleanup-renku-ci-deployments@amalthea-deploy
         env:
           HELM_RELEASE_REGEX: "^renku-ci-ui-${{ github.event.number }}$"
           GITLAB_TOKEN: ${{ secrets.DEV_GITLAB_TOKEN }}
diff --git a/client/src/components/errors/RtkErrorAlert.tsx b/client/src/components/errors/RtkErrorAlert.tsx
index 6503c44196..5d28f976dd 100644
--- a/client/src/components/errors/RtkErrorAlert.tsx
+++ b/client/src/components/errors/RtkErrorAlert.tsx
@@ -19,11 +19,12 @@
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 
-import { ErrorAlert } from "../Alert";
+import { ErrorAlert, RenkuAlert } from "../Alert";
 import { CoreErrorAlert } from "./CoreErrorAlert";
 import { CoreErrorResponse } from "../../utils/types/coreService.types";
 import { extractTextFromObject } from "../../utils/helpers/TextUtils";
 import { UpdateProjectResponse } from "../../features/project/Project";
+import { NotebooksErrorResponse } from "../../features/session/sessions.types";
 
 export function extractRkErrorMessage(
   error: FetchBaseQueryError | SerializedError,
@@ -93,7 +94,10 @@ export function RtkErrorAlert({
   );
 }
 
-export function RtkOrCoreError({ error }: RtkErrorAlertProps) {
+export function RtkOrCoreError({
+  error,
+  dismissible = true,
+}: RtkErrorAlertProps) {
   if (!error) return null;
   return "status" in error &&
     typeof error.status === "number" &&
@@ -104,6 +108,32 @@ export function RtkOrCoreError({ error }: RtkErrorAlertProps) {
     (error.data as CoreErrorResponse).error ? (
     <CoreErrorAlert error={(error.data as CoreErrorResponse).error} />
   ) : (
-    <RtkErrorAlert dismissible={true} error={error} />
+    <RtkErrorAlert dismissible={dismissible} error={error} />
   );
 }
+
+export function RtkOrNotebooksError({
+  error,
+  dismissible = true,
+}: RtkErrorAlertProps) {
+  if (!error) return null;
+  if (
+    "status" in error &&
+    typeof error.status === "number" &&
+    (error.status as number) >= 400 &&
+    typeof error.data === "object" &&
+    error.data &&
+    "error" in error.data &&
+    (error.data as NotebooksErrorResponse).error
+  ) {
+    return (
+      <RenkuAlert color="danger" dismissible={dismissible} timeout={0}>
+        <h3>Error {(error.data as NotebooksErrorResponse).error.code}</h3>
+        <p className="mb-0">
+          {(error.data as NotebooksErrorResponse).error.message}
+        </p>
+      </RenkuAlert>
+    );
+  }
+  return <RtkErrorAlert dismissible={dismissible} error={error} />;
+}
diff --git a/client/src/features/project/components/AddCloudStorageButton.module.scss b/client/src/features/project/components/AddCloudStorageButton.module.scss
deleted file mode 100644
index ec983852a8..0000000000
--- a/client/src/features/project/components/AddCloudStorageButton.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.modal :global(.modal-content) {
-  height: unset !important;
-}
diff --git a/client/src/features/project/components/AddCloudStorageButton.tsx b/client/src/features/project/components/AddCloudStorageButton.tsx
deleted file mode 100644
index 1af9740dc2..0000000000
--- a/client/src/features/project/components/AddCloudStorageButton.tsx
+++ /dev/null
@@ -1,844 +0,0 @@
-/*!
- * Copyright 2023 - 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, useEffect, useMemo, useState } from "react";
-import { CheckLg, CloudFill, PlusLg, XLg } from "react-bootstrap-icons";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import {
-  Button,
-  Card,
-  CardBody,
-  Col,
-  Container,
-  Form,
-  FormText,
-  Input,
-  Label,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Row,
-} from "reactstrap";
-
-import { ExternalLink } from "../../../components/ExternalLinks";
-import { Loader } from "../../../components/Loader";
-import { RtkErrorAlert } from "../../../components/errors/RtkErrorAlert";
-import LazyRenkuMarkdown from "../../../components/markdown/LazyRenkuMarkdown";
-import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook";
-import { StateModelProject } from "../Project";
-import {
-  useAddCloudStorageForProjectMutation,
-  useUpdateCloudStorageMutation,
-} from "../projectCloudStorage.api";
-import {
-  CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER,
-  CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
-} from "../projectCloudStorage.constants";
-import {
-  CloudStorage,
-  CloudStorageCredential,
-} from "../projectCloudStorage.types";
-import {
-  getCredentialFieldDefinitions,
-  parseCloudStorageConfiguration,
-} from "../utils/projectCloudStorage.utils";
-
-import { useGetNotebooksVersionQuery } from "../../versions/versions.api";
-import styles from "./AddCloudStorageButton.module.scss";
-
-export default function AddCloudStorageButton() {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = useCallback(() => {
-    setIsOpen((open) => !open);
-  }, []);
-
-  return (
-    <>
-      <Button className={cx("btn-outline-rk-green")} onClick={toggle}>
-        <PlusLg className={cx("bi", "me-1")} />
-        Add Cloud Storage
-      </Button>
-      <AddCloudStorageModal isOpen={isOpen} toggle={toggle} />
-    </>
-  );
-}
-
-interface AddCloudStorageModalProps {
-  isOpen: boolean;
-  toggle: () => void;
-}
-
-function AddCloudStorageModal({ isOpen, toggle }: AddCloudStorageModalProps) {
-  const [state, setState] = useState<AddCloudStorageModalState>({
-    step: "configuration",
-    mode: "simple",
-  });
-  const toggleAdvanced = useCallback(() => {
-    setState((prevState) => {
-      if (prevState.step === "credentials") {
-        return prevState;
-      }
-      return {
-        ...prevState,
-        mode: prevState.mode === "advanced" ? "simple" : "advanced",
-      };
-    });
-  }, []);
-  const goToCredentialsStep = useCallback((storageDefinition: CloudStorage) => {
-    setState({ step: "credentials", storageDefinition });
-  }, []);
-
-  // Reset state when closed
-  useEffect(() => {
-    if (!isOpen) {
-      setState({ step: "configuration", mode: "simple" });
-    }
-  }, [isOpen]);
-
-  return (
-    <Modal
-      backdrop="static"
-      centered
-      className={styles.modal}
-      fullscreen="lg"
-      isOpen={isOpen}
-      scrollable
-      size="lg"
-      toggle={toggle}
-    >
-      <ModalHeader toggle={toggle}>
-        <CloudFill className={cx("bi", "me-2")} />
-        Add Cloud Storage
-      </ModalHeader>
-      {state.step === "configuration" && (
-        <ModalBody className="flex-shrink-0">
-          <div className="form-rk-green">
-            <div className={cx("form-check", "form-switch")}>
-              <Input
-                className={cx("form-check-input", "rounded-pill")}
-                checked={state.mode === "advanced"}
-                id="addCloudStorageAdvancedSwitch"
-                onChange={toggleAdvanced}
-                role="switch"
-                type="checkbox"
-              />
-              <Label
-                className="form-check-label"
-                for="addCloudStorageAdvancedSwitch"
-              >
-                Advanced mode
-              </Label>
-            </div>
-          </div>
-        </ModalBody>
-      )}
-      {state.step === "credentials" ? (
-        <AddCloudStorageCredentialsStep
-          storageDefinition={state.storageDefinition}
-          toggle={toggle}
-        />
-      ) : state.mode === "advanced" ? (
-        <AdvancedAddCloudStorage
-          goToCredentialsStep={goToCredentialsStep}
-          toggle={toggle}
-        />
-      ) : (
-        <SimpleAddCloudStorage
-          goToCredentialsStep={goToCredentialsStep}
-          toggle={toggle}
-        />
-      )}
-    </Modal>
-  );
-}
-
-type AddCloudStorageModalState =
-  | {
-      step: "configuration";
-      mode: "simple" | "advanced";
-    }
-  | {
-      step: "credentials";
-      storageDefinition: CloudStorage;
-    };
-
-interface AddCloudStorageProps {
-  goToCredentialsStep: (storageDefinition: CloudStorage) => void;
-  toggle: () => void;
-}
-
-function AdvancedAddCloudStorage({
-  goToCredentialsStep,
-  toggle,
-}: AddCloudStorageProps) {
-  const projectId = useLegacySelector<StateModelProject["metadata"]["id"]>(
-    (state) => state.stateModel.project.metadata.id
-  );
-
-  const [addCloudStorageForProject, result] =
-    useAddCloudStorageForProjectMutation();
-
-  const {
-    control,
-    formState: { errors },
-    handleSubmit,
-  } = useForm<AdvancedAddCloudStorageForm>({
-    defaultValues: {
-      configuration: "",
-      name: "",
-      private: true,
-      readonly: false,
-      source_path: "",
-    },
-  });
-  const onSubmit = useCallback(
-    (data: AdvancedAddCloudStorageForm) => {
-      const configuration = parseCloudStorageConfiguration(data.configuration);
-      addCloudStorageForProject({
-        configuration,
-        name: data.name,
-        private: data.private,
-        readonly: data.readonly,
-        project_id: `${projectId}`,
-        source_path: data.source_path,
-        target_path: data.name,
-      });
-    },
-    [addCloudStorageForProject, projectId]
-  );
-
-  // Handle picking required credentials if necessary
-  useEffect(() => {
-    if (!result.isSuccess) {
-      return;
-    }
-    if (
-      !result.data.storage.private ||
-      result.data.sensitive_fields == null ||
-      result.data.sensitive_fields.length == 0
-    ) {
-      toggle();
-      return;
-    }
-    goToCredentialsStep(result.data);
-  }, [goToCredentialsStep, result.data, result.isSuccess, toggle]);
-
-  return (
-    <>
-      <ModalBody>
-        <Form
-          className="form-rk-green"
-          noValidate
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          {result.error && <RtkErrorAlert error={result.error} />}
-
-          <div className="form-rk-green">
-            <p className="mb-0">
-              Advanced mode uses <code>rclone</code> configurations to set up
-              cloud storage.
-            </p>
-            <p className="mb-3">
-              Learn more at the{" "}
-              <ExternalLink
-                url="https://rclone.org/"
-                title="rclone documentation"
-                role="link"
-              />
-              .
-            </p>
-
-            <div className="mb-3">
-              <Label className="form-label" for="addCloudStorageName">
-                Name
-              </Label>
-              <FormText id="addCloudStorageNameHelp" tag="div">
-                The name also determines the mount location, though it is
-                possible to change it later.
-              </FormText>
-              <Controller
-                control={control}
-                name="name"
-                render={({ field }) => (
-                  <Input
-                    aria-describedby="addCloudStorageNameHelp"
-                    className={cx("form-control", errors.name && "is-invalid")}
-                    id="addCloudStorageName"
-                    placeholder="storage"
-                    type="text"
-                    {...field}
-                  />
-                )}
-                rules={{ required: true }}
-              />
-              <div className="invalid-feedback">Please provide a name</div>
-            </div>
-
-            <div className="mb-3">
-              <Controller
-                control={control}
-                name="private"
-                render={({ field }) => (
-                  <Input
-                    aria-describedby="addCloudStoragePrivateHelp"
-                    className="form-check-input"
-                    id="addCloudStoragePrivate"
-                    type="checkbox"
-                    checked={field.value}
-                    innerRef={field.ref}
-                    onBlur={field.onBlur}
-                    onChange={field.onChange}
-                  />
-                )}
-              />
-              <Label
-                className={cx("form-check-label", "ms-2")}
-                for="addCloudStoragePrivate"
-              >
-                Requires credentials
-              </Label>
-              <FormText id="addCloudStoragePrivateHelp" tag="div">
-                Check this box if this cloud storage requires credentials to be
-                used.
-              </FormText>
-            </div>
-
-            <div className="mb-3">
-              <Controller
-                control={control}
-                name="readonly"
-                render={({ field }) => (
-                  <Input
-                    aria-describedby="addCloudStorageReadOnlyHelp"
-                    className="form-check-input"
-                    id="addCloudStorageReadOnly"
-                    type="checkbox"
-                    checked={field.value}
-                    innerRef={field.ref}
-                    onBlur={field.onBlur}
-                    onChange={field.onChange}
-                  />
-                )}
-              />
-              <Label
-                className={cx("form-check-label", "ms-2")}
-                for="addCloudStorageReadOnly"
-              >
-                Read-only
-              </Label>
-              <FormText id="addCloudStorageReadOnlyHelp" tag="div">
-                Check this box to mount the storage in read-only mode. Use this
-                setting to prevent accidental data modifications.
-              </FormText>
-            </div>
-
-            <div className="mb-3">
-              <Label className="form-label" for="addCloudStorageSourcePath">
-                Source Path
-              </Label>
-              <Controller
-                control={control}
-                name="source_path"
-                render={({ field }) => (
-                  <Input
-                    className={cx(
-                      "form-control",
-                      errors.source_path && "is-invalid"
-                    )}
-                    id="addCloudStorageSourcePath"
-                    placeholder="bucket/folder"
-                    type="text"
-                    {...field}
-                  />
-                )}
-                rules={{ required: true }}
-              />
-              <div className="invalid-feedback">
-                Please provide a valid source path
-              </div>
-            </div>
-
-            <div>
-              <Label className="form-label" for="addCloudStorageConfig">
-                Configuration
-              </Label>
-              <FormText id="addCloudStorageConfigHelp" tag="div">
-                You can paste here the output of{" "}
-                <code className="user-select-all">
-                  rclone config show &lt;name&gt;
-                </code>
-                .
-              </FormText>
-              <Controller
-                control={control}
-                name="configuration"
-                render={({ field }) => (
-                  <textarea
-                    aria-describedby="addCloudStorageConfigHelp"
-                    className={cx(
-                      "form-control",
-                      errors.configuration && "is-invalid"
-                    )}
-                    id="addCloudStorageConfig"
-                    placeholder={CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER}
-                    rows={10}
-                    {...field}
-                  />
-                )}
-                rules={{ required: true }}
-              />
-              <div className="invalid-feedback">
-                Please provide a valid <code>rclone</code> configuration
-              </div>
-            </div>
-          </div>
-        </Form>
-      </ModalBody>
-      <ModalFooter>
-        <Button className="btn-outline-rk-green" onClick={toggle}>
-          <XLg className={cx("bi", "me-1")} />
-          Close
-        </Button>
-        <Button
-          disabled={result.isLoading}
-          onClick={handleSubmit(onSubmit)}
-          type="submit"
-        >
-          {result.isLoading ? (
-            <Loader className="me-1" inline size={16} />
-          ) : (
-            <PlusLg className={cx("bi", "me-1")} />
-          )}
-          Add Storage
-        </Button>
-      </ModalFooter>
-    </>
-  );
-}
-
-interface AdvancedAddCloudStorageForm {
-  configuration: string;
-  name: string;
-  private: boolean;
-  readonly: boolean;
-  source_path: string;
-}
-
-function SimpleAddCloudStorage({
-  goToCredentialsStep,
-  toggle,
-}: AddCloudStorageProps) {
-  const projectId = useLegacySelector<StateModelProject["metadata"]["id"]>(
-    (state) => state.stateModel.project.metadata.id
-  );
-
-  const { data: notebooksVersion } = useGetNotebooksVersionQuery();
-  const support = useMemo(
-    () =>
-      notebooksVersion != null && notebooksVersion.cloudStorageEnabled.s3
-        ? "s3"
-        : notebooksVersion != null &&
-          notebooksVersion.cloudStorageEnabled.azureBlob
-        ? "azure"
-        : "none",
-    [notebooksVersion]
-  );
-
-  const [addCloudStorageForProject, result] =
-    useAddCloudStorageForProjectMutation();
-
-  const {
-    control,
-    formState: { errors },
-    handleSubmit,
-  } = useForm<SimpleAddCloudStorageForm>({
-    defaultValues: {
-      name: "",
-      endpointUrl: "",
-      private: true,
-      readonly: false,
-    },
-  });
-  const onSubmit = useCallback(
-    (data: SimpleAddCloudStorageForm) => {
-      addCloudStorageForProject({
-        name: data.name,
-        private: data.private,
-        project_id: `${projectId}`,
-        readonly: data.readonly,
-        storage_url: data.endpointUrl,
-        target_path: data.name,
-      });
-    },
-    [addCloudStorageForProject, projectId]
-  );
-
-  // Handle picking required credentials if necessary
-  useEffect(() => {
-    if (!result.isSuccess) {
-      return;
-    }
-    if (
-      !result.data.storage.private ||
-      result.data.sensitive_fields == null ||
-      result.data.sensitive_fields.length == 0
-    ) {
-      toggle();
-      return;
-    }
-    goToCredentialsStep(result.data);
-  }, [goToCredentialsStep, result.data, result.isSuccess, toggle]);
-
-  return (
-    <>
-      <ModalBody>
-        <Form
-          className="form-rk-green"
-          noValidate
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          {result.error && <RtkErrorAlert error={result.error} />}
-
-          <div className="form-rk-green">
-            <div className="mb-3">
-              <Label className="form-label" for="addCloudStorageName">
-                Name
-              </Label>
-              <FormText id="addCloudStorageNameHelp" tag="div">
-                The name also determines the mount location, though it is
-                possible to change it later.
-              </FormText>
-              <Controller
-                control={control}
-                name="name"
-                render={({ field }) => (
-                  <Input
-                    aria-describedby="addCloudStorageNameHelp"
-                    className={cx(errors.name && "is-invalid")}
-                    id="addCloudStorageName"
-                    placeholder="storage"
-                    type="text"
-                    {...field}
-                  />
-                )}
-                rules={{ required: true }}
-              />
-              <div className="invalid-feedback">Please provide a name</div>
-            </div>
-
-            <div className="mb-3">
-              <Label className="form-label" for="addCloudStorageUrl">
-                Endpoint URL
-              </Label>
-              <FormText id="addCloudStorageUrlHelp" tag="div">
-                {support === "s3" ? (
-                  <>
-                    <p className="mb-0">
-                      For AWS S3 buckets, supported URLs are of the form:
-                    </p>
-                    <ul className={cx("mb-0", "ps-4")}>
-                      <li>
-                        {"s3://s3.<region>.amazonaws.com/<bucket>/[path]"}
-                      </li>
-                      <li>
-                        {"s3://<bucket>.s3.<region>.amazonaws.com/[path]"}
-                      </li>
-                      <li>{"s3://<bucket>/"}</li>
-                    </ul>
-                    <p className="mb-0">
-                      For S3-compatible buckets, supported URLs are of the form:
-                    </p>
-                    <ul className={cx("mb-0", "ps-4")}>
-                      <li>{"https://<endpoint>/<bucket>/[path]"}</li>
-                    </ul>
-                  </>
-                ) : (
-                  <>
-                    <p className="mb-0">
-                      Supported Azure Blob Store URLs are of the form:
-                    </p>
-                    <ul className={cx("mb-0", "ps-4")}>
-                      <li>
-                        {
-                          "azure://<account>.dfs.core.windows.net/<container>/[path]"
-                        }
-                      </li>
-                      <li>
-                        {
-                          "az://<account>.dfs.core.windows.net/<container>/[path]"
-                        }
-                      </li>
-                      <li>
-                        {
-                          "azure://<account>.blob.core.windows.net/<container>/[path]"
-                        }
-                      </li>
-                      <li>
-                        {
-                          "az://<account>.blob.core.windows.net/<container>/[path]"
-                        }
-                      </li>
-                      <li>{"azure://<container>/[path]"}</li>
-                      <li>{"az://<container>/[path]"}</li>
-                    </ul>
-                  </>
-                )}
-              </FormText>
-              <Controller
-                control={control}
-                name="endpointUrl"
-                render={({ field }) => (
-                  <Input
-                    aria-describedby="addCloudStorageUrlHelp"
-                    className={cx(errors.endpointUrl && "is-invalid")}
-                    id="addCloudStorageUrl"
-                    placeholder={
-                      support === "s3"
-                        ? "s3://bucket.s3.region.amazonaws.com/"
-                        : "azure://account.blob.core.windows.net/container"
-                    }
-                    type="text"
-                    {...field}
-                  />
-                )}
-                rules={{ required: true }}
-              />
-              <div className="invalid-feedback">Please provide a valid URL</div>
-            </div>
-
-            <div className="mb-3">
-              <Controller
-                control={control}
-                name="private"
-                render={({ field }) => (
-                  <Input
-                    aria-describedby="addCloudStoragePrivateHelp"
-                    className="form-check-input"
-                    id="addCloudStoragePrivate"
-                    type="checkbox"
-                    checked={field.value}
-                    innerRef={field.ref}
-                    onBlur={field.onBlur}
-                    onChange={field.onChange}
-                  />
-                )}
-              />
-              <Label
-                className={cx("form-check-label", "ms-2")}
-                for="addCloudStoragePrivate"
-              >
-                Requires credentials
-              </Label>
-              <FormText id="addCloudStoragePrivateHelp" tag="div">
-                Check this box if this cloud storage requires credentials to be
-                used.
-              </FormText>
-            </div>
-
-            <div>
-              <Controller
-                control={control}
-                name="readonly"
-                render={({ field }) => (
-                  <Input
-                    aria-describedby="addCloudStorageReadOnlyHelp"
-                    className="form-check-input"
-                    id="addCloudStorageReadOnly"
-                    type="checkbox"
-                    checked={field.value}
-                    innerRef={field.ref}
-                    onBlur={field.onBlur}
-                    onChange={field.onChange}
-                  />
-                )}
-              />
-              <Label
-                className={cx("form-check-label", "ms-2")}
-                for="addCloudStorageReadOnly"
-              >
-                Read-only
-              </Label>
-              <FormText id="addCloudStorageReadOnlyHelp" tag="div">
-                Check this box to mount the storage in read-only mode. Use this
-                setting to prevent accidental data modifications.
-              </FormText>
-            </div>
-          </div>
-        </Form>
-      </ModalBody>
-      <ModalFooter>
-        <Button className="btn-outline-rk-green" onClick={toggle}>
-          <XLg className={cx("bi", "me-1")} />
-          Close
-        </Button>
-        <Button
-          disabled={result.isLoading}
-          onClick={handleSubmit(onSubmit)}
-          type="submit"
-        >
-          {result.isLoading ? (
-            <Loader className="me-1" inline size={16} />
-          ) : (
-            <PlusLg className={cx("bi", "me-1")} />
-          )}
-          Add Storage
-        </Button>
-      </ModalFooter>
-    </>
-  );
-}
-
-interface SimpleAddCloudStorageForm {
-  name: string;
-  endpointUrl: string;
-  private: boolean;
-  readonly: boolean;
-}
-
-interface AddCloudStorageCredentialsStepProps {
-  storageDefinition: CloudStorage;
-  toggle: () => void;
-}
-
-function AddCloudStorageCredentialsStep({
-  storageDefinition,
-  toggle,
-}: AddCloudStorageCredentialsStepProps) {
-  const { storage } = storageDefinition;
-  const { configuration, name, project_id, storage_id } = storage;
-
-  const [updateCloudStorage, result] = useUpdateCloudStorageMutation();
-
-  const { control, handleSubmit } = useForm<AddCloudStorageCredentialsForm>({
-    defaultValues: {
-      requiredCredentials: getCredentialFieldDefinitions(storageDefinition),
-    },
-  });
-  const { fields: credentialFields } = useFieldArray({
-    control,
-    name: "requiredCredentials",
-  });
-  const onSubmit = useCallback(
-    (data: AddCloudStorageCredentialsForm) => {
-      const updateConfig = data.requiredCredentials.reduce(
-        (prev, { name, requiredCredential }) => ({
-          ...prev,
-          ...(requiredCredential
-            ? { [name]: CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN }
-            : {}),
-        }),
-        {} as Record<string, string>
-      );
-
-      updateCloudStorage({
-        project_id,
-        storage_id,
-        configuration: {
-          ...configuration,
-          ...updateConfig,
-        },
-      });
-    },
-    [configuration, project_id, storage_id, updateCloudStorage]
-  );
-
-  useEffect(() => {
-    if (result.isSuccess) {
-      toggle();
-    }
-  }, [result.isSuccess, toggle]);
-
-  return (
-    <Form
-      className={cx(
-        "form-rk-green",
-        "d-flex",
-        "flex-column",
-        "mh-100",
-        "overflow-y-hidden"
-      )}
-      noValidate
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <ModalBody>
-        <h5>Credentials</h5>
-        <p>
-          Please select which credentials are required for the{" "}
-          <strong>{name}</strong> cloud storage.
-        </p>
-
-        <Container className={cx("form-rk-green", "p-0")} fluid>
-          <Row className={cx("row-cols-1", "gy-2")}>
-            {credentialFields.map((item, index) => (
-              <Col key={item.id}>
-                <Card>
-                  <CardBody className="pb-0">
-                    <Controller
-                      control={control}
-                      name={`requiredCredentials.${index}.requiredCredential`}
-                      render={({ field }) => (
-                        <Input
-                          aria-describedby={`configureCloudStorageCredentialsHelp-${item.id}`}
-                          className="form-check-input"
-                          id={`configureCloudStorageCredentials-${item.id}`}
-                          type="checkbox"
-                          checked={field.value}
-                          innerRef={field.ref}
-                          onBlur={field.onBlur}
-                          onChange={field.onChange}
-                        />
-                      )}
-                    />
-                    <Label
-                      className={cx("form-check-label", "ms-2")}
-                      for={`configureCloudStorageCredentials-${item.id}`}
-                    >
-                      {item.name}
-                    </Label>
-                    <FormText
-                      id={`configureCloudStorageCredentialsHelp-${item.id}`}
-                      tag="div"
-                    >
-                      <LazyRenkuMarkdown markdownText={item.help} />
-                    </FormText>
-                  </CardBody>
-                </Card>
-              </Col>
-            ))}
-          </Row>
-        </Container>
-      </ModalBody>
-      <ModalFooter>
-        <Button disabled={result.isLoading} type="submit">
-          {result.isLoading ? (
-            <Loader className="me-1" inline size={16} />
-          ) : (
-            <CheckLg className={cx("bi", "me-1")} />
-          )}
-          Finish cloud storage setup
-        </Button>
-      </ModalFooter>
-    </Form>
-  );
-}
-
-interface AddCloudStorageCredentialsForm {
-  requiredCredentials: CloudStorageCredential[];
-}
diff --git a/client/src/features/project/components/ProjectSettingsCloudStorage.tsx b/client/src/features/project/components/ProjectSettingsCloudStorage.tsx
index 634be2e875..fd4d43f23a 100644
--- a/client/src/features/project/components/ProjectSettingsCloudStorage.tsx
+++ b/client/src/features/project/components/ProjectSettingsCloudStorage.tsx
@@ -17,83 +17,32 @@
  */
 
 import cx from "classnames";
-import {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {
-  CheckLg,
-  InfoCircleFill,
-  PencilSquare,
-  TrashFill,
-  XLg,
-} from "react-bootstrap-icons";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import {
-  Button,
-  Card,
-  CardBody,
-  Col,
-  Collapse,
-  Container,
-  Form,
-  FormText,
-  Input,
-  Label,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  PopoverBody,
-  Row,
-  UncontrolledPopover,
-} from "reactstrap";
+import { ReactNode } from "react";
+import { Col, Container, Row } from "reactstrap";
 
 import { ACCESS_LEVELS } from "../../../api-client";
-import { ErrorAlert, InfoAlert, WarnAlert } from "../../../components/Alert";
+import { ErrorAlert, WarnAlert } from "../../../components/Alert";
 import { Loader } from "../../../components/Loader";
-import ChevronFlippedIcon from "../../../components/icons/ChevronFlippedIcon";
 import LoginAlert from "../../../components/loginAlert/LoginAlert";
-import LazyRenkuMarkdown from "../../../components/markdown/LazyRenkuMarkdown";
 import { User } from "../../../model/RenkuModels";
 import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook";
 import { useGetNotebooksVersionQuery } from "../../versions/versions.api";
 import { NotebooksVersion } from "../../versions/versions.types";
 import { StateModelProject } from "../Project";
-import {
-  useDeleteCloudStorageMutation,
-  useGetCloudStorageForProjectQuery,
-  useUpdateCloudStorageMutation,
-} from "../projectCloudStorage.api";
-import {
-  CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER,
-  CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
-} from "../projectCloudStorage.constants";
-import {
-  CloudStorage,
-  CloudStorageConfiguration,
-  CloudStorageCredential,
-} from "../projectCloudStorage.types";
-import {
-  formatCloudStorageConfiguration,
-  getCredentialFieldDefinitions,
-  parseCloudStorageConfiguration,
-} from "../utils/projectCloudStorage.utils";
-import AddCloudStorageButton from "./AddCloudStorageButton";
+import { useGetCloudStorageForProjectQuery } from "./cloudStorage/projectCloudStorage.api";
+import { CloudStorage } from "./cloudStorage/projectCloudStorage.types";
+import AddOrEditCloudStorageButton from "./cloudStorage/AddOrEditCloudStorageButton";
+import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
+import CloudStorageItem from "./cloudStorage/CloudStorageItem";
 
 export default function ProjectSettingsCloudStorage() {
   const logged = useLegacySelector<User["logged"]>(
     (state) => state.stateModel.user.logged
   );
 
-  // Project options
   const { accessLevel, id: projectId } = useLegacySelector<
     StateModelProject["metadata"]
   >((state) => state.stateModel.project.metadata);
-
   const devAccess = accessLevel >= ACCESS_LEVELS.DEVELOPER;
 
   const {
@@ -126,14 +75,6 @@ export default function ProjectSettingsCloudStorage() {
     );
   }
 
-  if (!devAccess) {
-    return (
-      <CloudStorageSection>
-        <p>Settings can be changed only by developers and maintainers.</p>
-      </CloudStorageSection>
-    );
-  }
-
   if (isLoading) {
     return (
       <CloudStorageSection>
@@ -145,11 +86,15 @@ export default function ProjectSettingsCloudStorage() {
   if (!storageForProject || !notebooksVersion || error) {
     return (
       <CloudStorageSection>
-        <ErrorAlert dismissible={false}>
-          <h3 className={cx("fs-6", "fw-bold")}>
-            Error on loading cloud storage settings
-          </h3>
-        </ErrorAlert>
+        {error ? (
+          <RtkOrNotebooksError error={error} />
+        ) : (
+          <ErrorAlert dismissible={false}>
+            <h3 className={cx("fs-6", "fw-bold")}>
+              Error loading cloud storage settings.
+            </h3>
+          </ErrorAlert>
+        )}
       </CloudStorageSection>
     );
   }
@@ -158,13 +103,24 @@ export default function ProjectSettingsCloudStorage() {
     <CloudStorageSection isFetching={isFetching}>
       <CloudStorageSupportNotice notebooksVersion={notebooksVersion} />
 
-      <Row>
-        <Col>
-          <AddCloudStorageButton />
-        </Col>
-      </Row>
+      {notebooksVersion.cloudStorageEnabled ? (
+        <Row>
+          <Col>
+            <AddOrEditCloudStorageButton devAccess={devAccess} />
+          </Col>
+        </Row>
+      ) : (
+        <WarnAlert dismissible={false}>
+          <p className="mb-0">
+            Cloud storage is not enabled for this instance of RenkuLab.
+          </p>
+        </WarnAlert>
+      )}
 
-      <CloudStorageList storageForProject={storageForProject} />
+      <CloudStorageList
+        devAccess={devAccess}
+        storageForProject={storageForProject}
+      />
     </CloudStorageSection>
   );
 }
@@ -177,7 +133,7 @@ function CloudStorageSection({
   children?: ReactNode;
 }) {
   return (
-    <div className="mt-2">
+    <div className="mt-2" data-cy="cloud-storage-section">
       <h3>
         Cloud storage settings
         {isFetching && <Loader className="ms-1" inline size={20} />}
@@ -195,17 +151,7 @@ interface CloudStorageSupportNoticeProps {
 function CloudStorageSupportNotice({
   notebooksVersion,
 }: CloudStorageSupportNoticeProps) {
-  const support = useMemo(
-    () =>
-      notebooksVersion.cloudStorageEnabled.s3
-        ? "s3"
-        : notebooksVersion.cloudStorageEnabled.azureBlob
-        ? "azure"
-        : "none",
-    [notebooksVersion.cloudStorageEnabled]
-  );
-
-  if (support === "none") {
+  if (!notebooksVersion.cloudStorageEnabled) {
     return (
       <WarnAlert dismissible={false}>
         <p>
@@ -215,42 +161,28 @@ function CloudStorageSupportNotice({
       </WarnAlert>
     );
   }
-
-  if (support === "azure") {
-    return (
-      <InfoAlert dismissible={false} timeout={0}>
-        <p>
-          This instance of RenkuLab currently only supports starting sessions
-          with Azure Blob Store cloud storage.
-        </p>
-      </InfoAlert>
-    );
-  }
-
-  return (
-    <InfoAlert dismissible={false} timeout={0}>
-      <p>
-        This instance of RenkuLab currently only supports starting sessions with
-        S3 or S3-compatible cloud storage.
-      </p>
-    </InfoAlert>
-  );
+  return null;
 }
 
 interface CloudStorageListProps {
+  devAccess: boolean;
   storageForProject: CloudStorage[];
 }
 
-function CloudStorageList({ storageForProject }: CloudStorageListProps) {
+function CloudStorageList({
+  devAccess,
+  storageForProject,
+}: CloudStorageListProps) {
   if (storageForProject.length == 0) {
     return null;
   }
 
   return (
-    <Container className={cx("p-0", "mt-2")} fluid>
+    <Container className={cx("p-0", "mt-2")} fluid data-cy="cloud-storage-rows">
       <Row className={cx("row-cols-1", "gy-2")}>
         {storageForProject.map((storageDefinition) => (
           <CloudStorageItem
+            devAccess={devAccess}
             key={storageDefinition.storage.name}
             storageDefinition={storageDefinition}
           />
@@ -259,718 +191,3 @@ function CloudStorageList({ storageForProject }: CloudStorageListProps) {
     </Container>
   );
 }
-
-interface CloudStorageItemProps {
-  storageDefinition: CloudStorage;
-}
-
-function CloudStorageItem({ storageDefinition }: CloudStorageItemProps) {
-  const { storage } = storageDefinition;
-  const { configuration, name, source_path, target_path } = storage;
-
-  const formattedConfiguration = formatCloudStorageConfiguration({
-    configuration,
-    name,
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = useCallback(() => {
-    setIsOpen((isOpen) => !isOpen);
-  }, []);
-
-  return (
-    <Col>
-      <Card>
-        <CardBody className="p-0">
-          <h3 className={cx("fs-6", "m-0")}>
-            <button
-              className={cx(
-                "d-flex",
-                "gap-3",
-                "align-items-center",
-                "w-100",
-                "p-3",
-                "bg-transparent",
-                "border-0"
-              )}
-              onClick={toggle}
-              type="button"
-            >
-              <div className="fw-bold">{name}</div>
-              <div className={cx("small", "d-none", "d-sm-block")}>
-                <span className="text-rk-text-light">Source path: </span>
-                <span>{source_path}</span>
-              </div>
-              <div className={cx("small", "d-none", "d-sm-block")}>
-                <span className="text-rk-text-light">Mount point: </span>
-                <span>{target_path}</span>
-              </div>
-              <div className="ms-auto">
-                <ChevronFlippedIcon flipped={isOpen} />
-              </div>
-            </button>
-          </h3>
-        </CardBody>
-        <Collapse isOpen={isOpen}>
-          <CloudStorageItemCollapsibleContent
-            formattedConfiguration={formattedConfiguration}
-            storageDefinition={storageDefinition}
-          />
-        </Collapse>
-      </Card>
-    </Col>
-  );
-}
-
-interface CloudStorageItemCollapsibleContentProps {
-  formattedConfiguration: string;
-  storageDefinition: CloudStorage;
-}
-
-function CloudStorageItemCollapsibleContent({
-  formattedConfiguration,
-  storageDefinition,
-}: CloudStorageItemCollapsibleContentProps) {
-  const [editMode, setEditMode] = useState(false);
-  const toggleEditMode = useCallback(() => {
-    setEditMode((editMode) => !editMode);
-  }, []);
-
-  return (
-    <CardBody className="pt-0">
-      {editMode ? (
-        <EditCloudStorage
-          formattedConfiguration={formattedConfiguration}
-          storageDefinition={storageDefinition}
-          toggleEditMode={toggleEditMode}
-        />
-      ) : (
-        <CloudStorageDetails
-          formattedConfiguration={formattedConfiguration}
-          storageDefinition={storageDefinition}
-          toggleEditMode={toggleEditMode}
-        />
-      )}
-    </CardBody>
-  );
-}
-
-interface CloudStorageDetailsProps {
-  formattedConfiguration: string;
-  storageDefinition: CloudStorage;
-  toggleEditMode: () => void;
-}
-
-function EditCloudStorage({
-  formattedConfiguration,
-  storageDefinition,
-  toggleEditMode,
-}: CloudStorageDetailsProps) {
-  const { storage } = storageDefinition;
-  const {
-    configuration,
-    name,
-    readonly,
-    source_path,
-    storage_id,
-    target_path,
-  } = storage;
-
-  const credentialFieldDefinitions = useMemo(
-    () => getCredentialFieldDefinitions(storageDefinition),
-    [storageDefinition]
-  );
-
-  const projectId = useLegacySelector<StateModelProject["metadata"]["id"]>(
-    (state) => state.stateModel.project.metadata.id
-  );
-
-  const [updateCloudStorage, result] = useUpdateCloudStorageMutation();
-
-  const {
-    control,
-    formState: { errors, isDirty },
-    handleSubmit,
-    watch,
-  } = useForm<UpdateCloudStorageForm>({
-    defaultValues: {
-      formattedConfiguration,
-      name,
-      private: storage.private,
-      readonly,
-      source_path,
-      target_path,
-      requiredCredentials: credentialFieldDefinitions ?? [],
-    },
-  });
-  const { fields: requiredCredentialsFields } = useFieldArray({
-    control,
-    name: "requiredCredentials",
-  });
-  const onSubmit = useCallback(
-    (data: UpdateCloudStorageForm) => {
-      const nameUpdate = name !== data.name ? { name: data.name } : {};
-      const sourcePathUpdate =
-        source_path !== data.source_path
-          ? { source_path: data.source_path }
-          : {};
-      const targetPathUpdate =
-        target_path !== data.target_path
-          ? { target_path: data.target_path }
-          : {};
-      const privateUpdate =
-        storage.private !== data.private ? { private: data.private } : {};
-      const readonlyUpdate =
-        readonly !== data.readonly ? { readonly: data.readonly } : {};
-      const credentialsUpdate = data.private
-        ? data.requiredCredentials
-            .filter(({ requiredCredential }) => requiredCredential)
-            .reduce(
-              (obj, { name }) => ({
-                ...obj,
-                [name]: CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
-              }),
-              {} as Record<string, string>
-            )
-        : {};
-      const parsedConfiguration =
-        formattedConfiguration !== data.formattedConfiguration
-          ? parseCloudStorageConfiguration(data.formattedConfiguration)
-          : storage.configuration;
-      const sensitiveFields =
-        credentialFieldDefinitions?.map(({ name }) => name) ?? [];
-      const filteredConfiguration = Object.entries(parsedConfiguration)
-        .filter(([key]) => !sensitiveFields.includes(key))
-        .reduce(
-          (obj, [key, value]) => ({ ...obj, [key]: value }),
-          {} as Record<string, string | undefined>
-        );
-      const removedKeysConfiguration = Object.keys(configuration)
-        .filter((key) => !sensitiveFields.includes(key))
-        .filter((key) => !Object.keys(filteredConfiguration).includes(key))
-        .reduce(
-          (obj, key) => ({ ...obj, [key]: null }),
-          {} as Record<string, string | undefined | null>
-        );
-      const configurationUpdate = {
-        configuration: {
-          ...filteredConfiguration,
-          ...credentialsUpdate,
-          ...removedKeysConfiguration,
-        },
-      };
-
-      updateCloudStorage({
-        storage_id,
-        project_id: `${projectId}`,
-        ...nameUpdate,
-        ...sourcePathUpdate,
-        ...targetPathUpdate,
-        ...privateUpdate,
-        ...readonlyUpdate,
-        ...configurationUpdate,
-      });
-    },
-    [
-      configuration,
-      credentialFieldDefinitions,
-      formattedConfiguration,
-      name,
-      projectId,
-      readonly,
-      source_path,
-      storage.configuration,
-      storage.private,
-      storage_id,
-      target_path,
-      updateCloudStorage,
-    ]
-  );
-
-  const watchPrivateToggle = watch("private");
-
-  useEffect(() => {
-    if (result.isSuccess || result.isError) {
-      toggleEditMode();
-    }
-  }, [result.isError, result.isSuccess, toggleEditMode]);
-
-  return (
-    <Form
-      className="form-rk-green"
-      noValidate
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div className="form-rk-green">
-        <div className="mb-3">
-          <Label className="form-label" for={`updateCloudStorageName-${name}`}>
-            Name
-          </Label>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field }) => (
-              <Input
-                className={cx("form-control", errors.name && "is-invalid")}
-                id={`updateCloudStorageName-${name}`}
-                placeholder="storage"
-                type="text"
-                {...field}
-              />
-            )}
-            rules={{ required: true }}
-          />
-          <div className="invalid-feedback">Please provide a name</div>
-        </div>
-
-        <div className="mb-3">
-          <Label
-            className="form-label"
-            for={`updateCloudStorageSourcePath-${name}`}
-          >
-            Source path
-          </Label>
-          <Controller
-            control={control}
-            name="source_path"
-            render={({ field }) => (
-              <Input
-                className={cx(
-                  "form-control",
-                  errors.source_path && "is-invalid"
-                )}
-                id={`updateCloudStorageSourcePath-${name}`}
-                placeholder="bucket/folder"
-                type="text"
-                {...field}
-              />
-            )}
-            rules={{ required: true }}
-          />
-          <div className="invalid-feedback">
-            Please provide a valid source path
-          </div>
-        </div>
-
-        <div className="mb-3">
-          <Label
-            className="form-label"
-            for={`updateCloudStorageTargetPath-${name}`}
-          >
-            Mount point
-          </Label>
-          <Controller
-            control={control}
-            name="target_path"
-            render={({ field }) => (
-              <Input
-                className={cx(
-                  "form-control",
-                  errors.target_path && "is-invalid"
-                )}
-                id={`updateCloudStorageTargetPath-${name}`}
-                placeholder="folder"
-                type="text"
-                {...field}
-              />
-            )}
-            rules={{ required: true }}
-          />
-          <div className="invalid-feedback">
-            Please provide a valid mount point
-          </div>
-        </div>
-
-        <div className="mb-3">
-          <Controller
-            control={control}
-            name="private"
-            render={({ field }) => (
-              <Input
-                aria-describedby={`updateCloudStoragePrivateHelp-${name}`}
-                className="form-check-input"
-                id={`updateCloudStoragePrivate-${name}`}
-                type="checkbox"
-                checked={field.value}
-                innerRef={field.ref}
-                onBlur={field.onBlur}
-                onChange={field.onChange}
-              />
-            )}
-          />
-          <Label
-            className={cx("form-check-label", "ms-2")}
-            for={`updateCloudStoragePrivate-${name}`}
-          >
-            Requires credentials
-          </Label>
-          <FormText id={`updateCloudStoragePrivateHelp-${name}`} tag="div">
-            Check this box if this cloud storage requires credentials to be
-            used.
-          </FormText>
-        </div>
-
-        {watchPrivateToggle && requiredCredentialsFields.length > 0 && (
-          <div className="mb-3">
-            <div className="form-label">Required credentials</div>
-            <div>
-              {requiredCredentialsFields.map((item, index) => (
-                <div key={index}>
-                  <Controller
-                    control={control}
-                    name={`requiredCredentials.${index}.requiredCredential`}
-                    render={({ field }) => (
-                      <Input
-                        className="form-check-input"
-                        id={`updateCloudStorageCredentials-${name}-${item.id}`}
-                        type="checkbox"
-                        checked={field.value}
-                        innerRef={field.ref}
-                        onBlur={field.onBlur}
-                        onChange={field.onChange}
-                      />
-                    )}
-                  />
-                  <Label
-                    className={cx("form-check-label", "ms-2")}
-                    for={`updateCloudStorageCredentials-${name}-${item.id}`}
-                  >
-                    {item.name}
-                    <CredentialMoreInfo help={item.help} />
-                  </Label>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        <div className="mb-3">
-          <Controller
-            control={control}
-            name="readonly"
-            render={({ field }) => (
-              <Input
-                aria-describedby="updateCloudStorageReadOnlyHelp"
-                className="form-check-input"
-                id={`updateCloudStorageReadOnly-${name}`}
-                type="checkbox"
-                checked={field.value}
-                innerRef={field.ref}
-                onBlur={field.onBlur}
-                onChange={field.onChange}
-              />
-            )}
-          />
-          <Label
-            className={cx("form-check-label", "ms-2")}
-            for={`updateCloudStorageReadOnly-${name}`}
-          >
-            Read-only
-          </Label>
-          <FormText id="updateCloudStorageReadOnlyHelp" tag="div">
-            Check this box to mount the storage in read-only mode. Use this
-            setting to prevent accidental data modifications.
-          </FormText>
-        </div>
-
-        <div className="mb-3">
-          <Label
-            className="form-label"
-            for={`updateCloudStorageConfig-${name}`}
-          >
-            Configuration
-          </Label>
-          <FormText id={`updateCloudStorageConfigHelp-${name}`} tag="div">
-            You can paste here the output of{" "}
-            <code className="user-select-all">
-              rclone config show &lt;name&gt;
-            </code>
-            .
-          </FormText>
-          <Controller
-            control={control}
-            name="formattedConfiguration"
-            render={({ field }) => (
-              <textarea
-                aria-describedby={`updateCloudStorageConfigHelp-${name}`}
-                className={cx(
-                  "form-control",
-                  errors.formattedConfiguration && "is-invalid"
-                )}
-                id={`updateCloudStorageConfig-${name}`}
-                placeholder={CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER}
-                rows={Object.keys(storage.configuration).length + 2}
-                {...field}
-              />
-            )}
-            rules={{ required: true }}
-          />
-          <div className="invalid-feedback">
-            Please provide a valid <code>rclone</code> configuration
-          </div>
-        </div>
-      </div>
-
-      <section className={cx("d-flex", "justify-content-end", "mt-3")}>
-        <Button
-          className={cx("btn-outline-rk-green", "ms-2")}
-          onClick={toggleEditMode}
-          type="button"
-        >
-          <XLg className={cx("bi", "me-1")} />
-          Discard
-        </Button>
-        <Button className="ms-2" disabled={!isDirty} type="submit">
-          {result.isLoading ? (
-            <Loader className="me-1" inline size={16} />
-          ) : (
-            <PencilSquare className={cx("bi", "me-1")} />
-          )}
-          Save changes
-        </Button>
-        <DeleteCloudStorageButton storageDefinition={storageDefinition} />
-      </section>
-    </Form>
-  );
-}
-
-interface UpdateCloudStorageForm {
-  formattedConfiguration: string;
-  name: string;
-  private: boolean;
-  readonly: boolean;
-  source_path: string;
-  target_path: string;
-  requiredCredentials: CloudStorageCredential[];
-}
-
-function CloudStorageDetails({
-  formattedConfiguration,
-  storageDefinition,
-  toggleEditMode,
-}: CloudStorageDetailsProps) {
-  const { storage } = storageDefinition;
-  const {
-    configuration,
-    name,
-    readonly,
-    source_path,
-    storage_type,
-    target_path,
-  } = storage;
-
-  const credentialFieldDefinitions = useMemo(
-    () => getCredentialFieldDefinitions(storageDefinition),
-    [storageDefinition]
-  );
-  const requiredCredentials = useMemo(
-    () =>
-      credentialFieldDefinitions?.filter(
-        ({ requiredCredential }) => requiredCredential
-      ),
-    [credentialFieldDefinitions]
-  );
-
-  return (
-    <>
-      <section>
-        <div>
-          <div className="text-rk-text-light">
-            <small>Name</small>
-          </div>
-          <div>{name}</div>
-        </div>
-        <div className="mt-2">
-          <div className="text-rk-text-light">
-            <small>Storage type</small>
-          </div>
-          <div>{storage_type}</div>
-        </div>
-        <div className="mt-2">
-          <div className="text-rk-text-light">
-            <small>
-              Source path {"("}usually &lt;bucket&gt; or
-              &lt;bucket&gt;/&lt;folder&gt;{")"}
-            </small>
-          </div>
-          <div>{source_path}</div>
-        </div>
-        <div className="mt-2">
-          <div className="text-rk-text-light">
-            <small>
-              Mount point {"("}this is where the storage will be mounted during
-              sessions{")"}
-            </small>
-          </div>
-          <div>{target_path}</div>
-        </div>
-        <div className="mt-2">
-          <div className="text-rk-text-light">
-            <small>Requires credentials</small>
-          </div>
-          <div>{storage.private ? "Yes" : "No"}</div>
-        </div>
-        {storage.private && (
-          <div className="mt-2">
-            <div className="text-rk-text-light">
-              <small>Required crendentials</small>
-            </div>
-            {requiredCredentials != null && requiredCredentials.length > 0 ? (
-              <ul className="ps-4">
-                {requiredCredentials.map(({ name, help }, index) => (
-                  <li key={index}>
-                    {name}
-                    <CredentialMoreInfo help={help} />
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <div>
-                <span className="fst-italic">None</span>
-              </div>
-            )}
-          </div>
-        )}
-        <div className="mt-2">
-          <div className="text-rk-text-light">
-            <small>Access mode</small>
-          </div>
-          <div>
-            {readonly
-              ? "Force Read-only"
-              : "Allow Read-Write (requires adequate privileges on the storage)"}
-          </div>
-        </div>
-        <div className="mt-2">
-          <div className="text-rk-text-light">
-            <small>
-              Configuration (uses <code>rclone config</code>)
-            </small>
-          </div>
-          <div>
-            <textarea
-              className="form-control"
-              readOnly
-              rows={Object.keys(configuration).length + 2}
-              tabIndex={-1}
-              value={formattedConfiguration}
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className={cx("d-flex", "justify-content-end", "mt-3")}>
-        <Button color="outline-secondary" onClick={toggleEditMode}>
-          <PencilSquare className={cx("bi", "me-1")} />
-          Edit
-        </Button>
-        <DeleteCloudStorageButton storageDefinition={storageDefinition} />
-      </section>
-    </>
-  );
-}
-
-function CredentialMoreInfo({ help }: { help: string }) {
-  const ref = useRef<HTMLSpanElement>(null);
-
-  return (
-    <>
-      <span ref={ref}>
-        <InfoCircleFill className={cx("bi", "ms-1")} tabIndex={0} />
-      </span>
-      <UncontrolledPopover target={ref} placement="right" trigger="hover focus">
-        <PopoverBody>
-          <LazyRenkuMarkdown markdownText={help} />
-        </PopoverBody>
-      </UncontrolledPopover>
-    </>
-  );
-}
-
-function DeleteCloudStorageButton({
-  storageDefinition,
-}: CloudStorageItemProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = useCallback(() => {
-    setIsOpen((open) => !open);
-  }, []);
-
-  return (
-    <>
-      <Button className="ms-2" color="outline-danger" onClick={toggle}>
-        <TrashFill className={cx("bi", "me-1")} />
-        Delete
-      </Button>
-      <DeleteCloudStorageModal
-        isOpen={isOpen}
-        storage={storageDefinition.storage}
-        toggle={toggle}
-      />
-    </>
-  );
-}
-
-interface DeleteCloudStorageModalProps {
-  isOpen: boolean;
-  storage: CloudStorageConfiguration;
-  toggle: () => void;
-}
-
-function DeleteCloudStorageModal({
-  isOpen,
-  storage,
-  toggle,
-}: DeleteCloudStorageModalProps) {
-  const { name, storage_id } = storage;
-
-  const projectId = useLegacySelector<StateModelProject["metadata"]["id"]>(
-    (state) => state.stateModel.project.metadata.id
-  );
-
-  const [deleteCloudStorage, result] = useDeleteCloudStorageMutation();
-  const onDelete = useCallback(() => {
-    deleteCloudStorage({
-      project_id: `${projectId}`,
-      storage_id,
-    });
-  }, [deleteCloudStorage, projectId, storage_id]);
-
-  useEffect(() => {
-    if (result.isSuccess || result.isError) {
-      toggle();
-    }
-  }, [result.isError, result.isSuccess, toggle]);
-
-  return (
-    <Modal
-      className="modal-dialog-centered"
-      isOpen={isOpen}
-      size="lg"
-      toggle={toggle}
-    >
-      <ModalBody>
-        <h3 className={cx("fs-6", "lh-base", "text-danger", "fw-bold")}>
-          Are you sure?
-        </h3>
-        <p className="mb-0">
-          Please confirm that you want to delete the <strong>{name}</strong>{" "}
-          storage configuration.
-        </p>
-      </ModalBody>
-      <ModalFooter className="pt-0">
-        <Button className="ms-2" color="outline-secondary" onClick={toggle}>
-          <XLg className={cx("bi", "me-1")} />
-          Cancel, keep configuration
-        </Button>
-        <Button className="ms-2" color="danger" onClick={onDelete}>
-          {result.isLoading ? (
-            <Loader className="me-1" inline size={16} />
-          ) : (
-            <CheckLg className={cx("bi", "me-1")} />
-          )}
-          Yes, delete this configuration
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
diff --git a/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx
new file mode 100644
index 0000000000..3cfca7df12
--- /dev/null
+++ b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx
@@ -0,0 +1,1013 @@
+/*!
+ * Copyright 2023 - 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 { RefObject, useCallback, useMemo, useRef, useState } from "react";
+import {
+  ExclamationTriangleFill,
+  EyeFill,
+  EyeSlashFill,
+  KeyFill,
+  QuestionCircle,
+} from "react-bootstrap-icons";
+import { Controller, useForm } from "react-hook-form";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Input,
+  InputGroup,
+  Label,
+  ListGroup,
+  ListGroupItem,
+  PopoverBody,
+  PopoverHeader,
+  UncontrolledPopover,
+  UncontrolledTooltip,
+} from "reactstrap";
+
+import {
+  CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER,
+  CLOUD_STORAGE_TOTAL_STEPS,
+} from "./projectCloudStorage.constants";
+import {
+  AddCloudStorageState,
+  CloudStorageDetails,
+  CloudStorageSchema,
+  CloudStorageSchemaOptions,
+} from "./projectCloudStorage.types";
+import {
+  convertFromAdvancedConfig,
+  getSchemaOptions,
+  getSchemaProviders,
+  getSchemaStorage,
+  getSourcePathHint,
+  hasProviderShortlist,
+  parseCloudStorageConfiguration,
+} from "../../utils/projectCloudStorage.utils";
+import { ExternalLink } from "../../../../components/ExternalLinks";
+import { WarnAlert } from "../../../../components/Alert";
+
+import styles from "./CloudStorage.module.scss";
+
+interface AddOrEditCloudStorageProps {
+  schema: CloudStorageSchema[];
+  setStorage: (newDetails: Partial<CloudStorageDetails>) => void;
+  setState: (newState: Partial<AddCloudStorageState>) => void;
+  state: AddCloudStorageState;
+  storage: CloudStorageDetails;
+}
+
+export default function AddOrEditCloudStorage({
+  schema,
+  setStorage,
+  setState,
+  state,
+  storage,
+}: AddOrEditCloudStorageProps) {
+  const ContentByStep =
+    state.step >= 0 && state.step <= CLOUD_STORAGE_TOTAL_STEPS
+      ? mapStepToElement[state.step]
+      : null;
+
+  if (ContentByStep)
+    return (
+      <>
+        <AddStorageAdvancedToggle state={state} setState={setState} />
+        <AddStorageBreadcrumbNavbar state={state} setState={setState} />
+        <ContentByStep
+          schema={schema}
+          state={state}
+          storage={storage}
+          setState={setState}
+          setStorage={setStorage}
+        />
+      </>
+    );
+  return <p>Error - not implemented yet</p>;
+}
+
+// *** Navigation: breadcrumbs and advanced mode selector *** //
+
+interface AddStorageBreadcrumbNavbarProps {
+  setState: (newState: Partial<AddCloudStorageState>) => void;
+  state: AddCloudStorageState;
+}
+
+function AddStorageBreadcrumbNavbar({
+  setState,
+  state,
+}: AddStorageBreadcrumbNavbarProps) {
+  const { step, completedSteps } = state;
+  const items = useMemo(() => {
+    const steps = state.advancedMode
+      ? [0, CLOUD_STORAGE_TOTAL_STEPS]
+      : Array.from(
+          { length: CLOUD_STORAGE_TOTAL_STEPS },
+          (_, index) => index + 1
+        );
+    const items = steps.map((stepNumber) => {
+      const active = stepNumber === step;
+      const disabled = stepNumber > completedSteps + 1;
+      return (
+        <BreadcrumbItem active={active} key={stepNumber}>
+          {active ? (
+            <>{mapStepToName[stepNumber]}</>
+          ) : (
+            <>
+              <Button
+                className={cx(
+                  "p-0",
+                  (active || disabled) && "text-decoration-none"
+                )}
+                color="link"
+                disabled={disabled}
+                onClick={() => {
+                  setState({ step: stepNumber });
+                }}
+              >
+                {mapStepToName[stepNumber]}
+              </Button>
+            </>
+          )}
+        </BreadcrumbItem>
+      );
+    });
+    return items;
+  }, [completedSteps, setState, step, state.advancedMode]);
+
+  return (
+    <Breadcrumb data-cy="cloud-storage-edit-navigation">{items}</Breadcrumb>
+  );
+}
+
+interface AddStorageAdvancedToggleProps {
+  setState: (newState: Partial<AddCloudStorageState>) => void;
+  state: AddCloudStorageState;
+}
+function AddStorageAdvancedToggle({
+  setState,
+  state,
+}: AddStorageAdvancedToggleProps) {
+  const toggleAdvanced = useCallback(() => {
+    setState({ advancedMode: !state.advancedMode });
+  }, [setState, state.advancedMode]);
+  const infoId = "switch-storage-advanced-mode-info";
+  return (
+    <>
+      <div className="form-rk-green">
+        <div
+          className={cx("form-check", "form-switch", "mb-3", "d-flex")}
+          data-cy="cloud-storage-edit-advanced-toggle"
+        >
+          <Input
+            className={cx(
+              "form-check-input",
+              "rounded-pill",
+              "my-auto",
+              "me-2"
+            )}
+            checked={state.advancedMode}
+            id="switch-storage-advanced-mode"
+            onChange={toggleAdvanced}
+            role="switch"
+            type="checkbox"
+          />
+          <Label
+            className={cx("form-check-label", "my-auto")}
+            for="addCloudStorageAdvancedSwitch"
+          >
+            Advanced mode{" "}
+            <QuestionCircle id={infoId} className={cx("bi", "ms-1")} />
+          </Label>
+        </div>
+      </div>
+      <UncontrolledTooltip placement="bottom" target={infoId}>
+        Advanced mode uses rclone configurations to set up cloud storage.
+      </UncontrolledTooltip>
+    </>
+  );
+}
+// *** Add storage: helpers *** //
+
+interface AddStorageStepProps {
+  schema: CloudStorageSchema[];
+  setStorage: (newDetails: Partial<CloudStorageDetails>) => void;
+  setState: (newState: Partial<AddCloudStorageState>) => void;
+  state: AddCloudStorageState;
+  storage: CloudStorageDetails;
+}
+
+const mapStepToElement: {
+  [key: number]: React.ComponentType<AddStorageStepProps>;
+} = {
+  0: AddStorageAdvanced,
+  1: AddStorageType,
+  2: AddStorageOptions,
+  3: AddStorageMount,
+};
+const mapStepToName: { [key: number]: string } = {
+  0: "Advanced configuration",
+  1: "Storage",
+  2: "Options",
+  3: "Mount",
+};
+
+interface AddStorageAdvancedForm {
+  sourcePath: string;
+  configuration: string;
+}
+function AddStorageAdvanced({ storage, setStorage }: AddStorageStepProps) {
+  const {
+    control,
+    formState: { errors },
+  } = useForm<AddStorageAdvancedForm>({
+    defaultValues: {
+      sourcePath: storage.sourcePath || "",
+    },
+  });
+
+  const onConfigurationChange = useCallback(
+    (value: string) => {
+      const config = parseCloudStorageConfiguration(value);
+      const { type, provider, ...options } = config;
+      setStorage({
+        schema: type,
+        provider,
+        options,
+      });
+    },
+    [setStorage]
+  );
+
+  const onSourcePathChange = useCallback(
+    (value: string) => {
+      setStorage({ sourcePath: value });
+    },
+    [setStorage]
+  );
+
+  const sourcePathHelp = useMemo(() => {
+    return getSourcePathHint(storage.schema);
+  }, [storage.schema]);
+
+  return (
+    <form className="form-rk-green" data-cy="cloud-storage-edit-advanced">
+      <div className="mb-3">
+        <Controller
+          name="sourcePath"
+          control={control}
+          render={({ field }) => (
+            <input
+              id="sourcePath"
+              type="string"
+              {...field}
+              className="form-control"
+              onChange={(e) => {
+                field.onChange(e);
+                onSourcePathChange(e.target.value);
+              }}
+              placeholder={sourcePathHelp.placeholder}
+            />
+          )}
+        />
+        <Label className="form-label" for="add-storage-name">
+          Source path
+        </Label>
+        <div className={cx("form-text", "text-muted")}>
+          {sourcePathHelp.help}
+        </div>
+      </div>
+
+      <div className="mb-3">
+        <h5>Advanced storage configuration</h5>
+        <Label className={cx("form-label", "mb-3")} for="addCloudStorageConfig">
+          Under the hood, we use{" "}
+          <ExternalLink
+            showLinkIcon={true}
+            iconAfter={true}
+            iconSup={true}
+            url="https://rclone.org/"
+            title="rclone"
+            role="link"
+          />{" "}
+          to mount the cloud storage. Here you can copy/paste the rclone
+          configuration you get from{" "}
+          <code className="user-select-all">
+            rclone config show &lt;name&gt;
+          </code>
+        </Label>
+        <Controller
+          control={control}
+          name="configuration"
+          defaultValue={convertFromAdvancedConfig(storage)}
+          render={({ field }) => (
+            <textarea
+              aria-describedby="addCloudStorageConfigHelp"
+              className={cx(
+                "form-control",
+                errors.configuration && "is-invalid"
+              )}
+              id="addCloudStorageConfig"
+              placeholder={CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER}
+              rows={10}
+              {...field}
+              onChange={(e) => {
+                field.onChange(e);
+                onConfigurationChange(e.target.value);
+              }}
+            />
+          )}
+          rules={{ required: true }}
+        />
+        <div className="invalid-feedback">
+          Please provide a valid <code>rclone</code> configuration
+        </div>
+      </div>
+    </form>
+  );
+}
+
+// *** Add storage: page 1 of 3, with storage type and provider *** //
+
+function AddStorageType({
+  schema,
+  state,
+  storage,
+  setState,
+  setStorage,
+}: AddStorageStepProps) {
+  const providerRef: RefObject<HTMLDivElement> = useRef(null);
+  const scrollToProvider = () => {
+    setTimeout(() => {
+      if (!providerRef.current) return;
+      providerRef.current.scrollIntoView({ behavior: "smooth" });
+    }, 100);
+  };
+
+  const availableSchema = useMemo(
+    () => getSchemaStorage(schema, !state.showAllSchema, storage.schema),
+    [schema, state.showAllSchema, storage.schema]
+  );
+  const setFinalSchema = (value: string) => {
+    setStorage({ schema: value });
+    if (state.showAllSchema) setState({ showAllSchema: false });
+    hasProviderShortlist(value) && scrollToProvider();
+  };
+
+  const schemaItems = availableSchema.map((s, index) => {
+    const topBorder = index === 0 ? "rounded-top-3" : null;
+    const itemActive =
+      s.prefix === storage.schema ? styles.listGroupItemActive : null;
+    return (
+      <ListGroupItem
+        action
+        className={cx("cursor-pointer", topBorder, itemActive)}
+        key={s.name}
+        value={s.prefix}
+        tag="div"
+        onClick={() => setFinalSchema(s.prefix)}
+      >
+        <p className="mb-0">
+          <b>{s.name}</b>
+          <br />
+          <small>{s.description}</small>
+        </p>
+      </ListGroupItem>
+    );
+  });
+  const finalSchemaItems = [
+    ...schemaItems,
+    <ListGroupItem
+      action
+      className={cx("cursor-pointer", "rounded-bottom-3")}
+      key="_show_all"
+      tag="div"
+      onClick={() => setState({ showAllSchema: !state.showAllSchema })}
+    >
+      <b>Show {state.showAllSchema ? "less" : "more"}</b>
+    </ListGroupItem>,
+  ];
+
+  const missingSchema =
+    storage.schema && !schema?.find((s) => s.prefix === storage.schema) ? (
+      <WarnAlert>
+        The storage type <code>{storage.schema}</code> might be invalid. You
+        should select a valid storage from the list.
+      </WarnAlert>
+    ) : null;
+
+  const finalSchema = (
+    <div className="mt-3" data-cy="cloud-storage-edit-schema">
+      <h5>Storage type</h5>
+      <p>
+        Pick a storage from this list to start our guided procedure. You can
+        switch to the Advanced mode if you prefer to manually configure the
+        storage using an rclone configuration.
+      </p>
+      {missingSchema}
+      <ListGroup
+        className={cx("bg-white", "rounded-3", "border", "border-rk-green")}
+      >
+        {finalSchemaItems}
+      </ListGroup>
+    </div>
+  );
+
+  const setFinalProvider = (value: string) => {
+    setStorage({ provider: value });
+    if (state.showAllProviders) setState({ showAllProviders: false });
+  };
+
+  const availableProviders = useMemo(
+    () =>
+      getSchemaProviders(
+        schema,
+        !state.showAllProviders,
+        storage.schema,
+        storage.provider
+      ),
+    [schema, state.showAllProviders, storage.schema, storage.provider]
+  );
+  const providerHasShortlist = useMemo(
+    () => hasProviderShortlist(storage.schema),
+    [storage.schema]
+  );
+  const providerItems = availableProviders
+    ? availableProviders.map((p, index) => {
+        const topBorder = index === 0 ? "rounded-top-3" : null;
+        const bottomBorder =
+          index === availableProviders.length - 1 && !providerHasShortlist
+            ? "rounded-bottom-3"
+            : null;
+        const itemActive =
+          p.name === storage.provider ? styles.listGroupItemActive : null;
+        return (
+          <ListGroupItem
+            action
+            className={cx(
+              "cursor-pointer",
+              topBorder,
+              bottomBorder,
+              itemActive
+            )}
+            key={p.name}
+            tag="div"
+            value={p.name}
+            onClick={() => setFinalProvider(p.name)}
+          >
+            <p className="mb-0">
+              <b>{p.name}</b>
+              <br />
+              <small>{p.description}</small>
+            </p>
+          </ListGroupItem>
+        );
+      })
+    : null;
+  const finalProviderItems =
+    providerItems && providerHasShortlist
+      ? [
+          ...providerItems,
+          <ListGroupItem
+            action
+            className={cx("cursor-pointer", "rounded-bottom-3")}
+            key="_show_all"
+            tag="div"
+            onClick={() =>
+              setState({ showAllProviders: !state.showAllProviders })
+            }
+          >
+            <b>Show {state.showAllProviders ? "less" : "more"}</b>
+          </ListGroupItem>,
+        ]
+      : providerItems;
+
+  const missingProvider =
+    availableProviders &&
+    storage.provider &&
+    !availableProviders.find((p) => p.name === storage.provider) ? (
+      <WarnAlert>
+        The storage provider <code>{storage.provider}</code> might be invalid.
+        You should select a valid provider from the list.
+      </WarnAlert>
+    ) : null;
+
+  const finalProviders = providerItems ? (
+    <div className="mt-3" data-cy="cloud-storage-edit-providers">
+      <h5>Provider</h5>
+      <p>
+        We support the following providers for this storage type. If you do not
+        find yours, you can select Others to manually specify the required
+        options, or switch to the Advanced mode to manually configure the
+        storage using an rclone configuration.
+      </p>
+      {missingProvider}
+      <div ref={providerRef}>
+        <ListGroup
+          className={cx("bg-white", "rounded-3", "border", "border-rk-green")}
+        >
+          {finalProviderItems}
+        </ListGroup>
+      </div>
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {finalSchema}
+      {finalProviders}
+    </>
+  );
+}
+
+// *** Add storage: page 2 of 3, with storage options *** //
+
+interface AddStorageOptionsExamplesProps {
+  examples: CloudStorageSchemaOptions["examples"];
+  name: string;
+  provider?: string;
+}
+function AddStorageOptionsExamples({
+  examples,
+  name,
+  provider,
+}: AddStorageOptionsExamplesProps) {
+  // TODO: We should use examples as enum, or items in an autocomplete. But sometimes we get just "None" 🥴
+  if (!examples?.length) return null;
+  const filterExamples = provider
+    ? examples.filter((e) => !e.provider || e.provider === provider)
+    : examples;
+  if (!filterExamples?.length) return null;
+
+  const popoverId = `popover-${name}`;
+  const exampleItems = filterExamples.map((e) => {
+    return (
+      <li className="mb-1" key={e.value}>
+        <code>{e.value}</code>
+        <br />
+        <small>{e.help}</small>
+      </li>
+    );
+  });
+
+  return (
+    <>
+      <QuestionCircle id={popoverId} className={cx("bi", "ms-1")} />
+      <UncontrolledPopover
+        target={popoverId}
+        placement="right"
+        style={{ maxHeight: "98vh", overflow: "auto" }} // eslint-disable-line spellcheck/spell-checker
+        trigger="hover focus"
+      >
+        <PopoverHeader>Examples</PopoverHeader>
+        <PopoverBody>
+          <ul>{exampleItems}</ul>
+        </PopoverBody>
+      </UncontrolledPopover>
+    </>
+  );
+}
+
+interface SecretOptionWarningProps {
+  isSecret?: boolean;
+  name: string;
+}
+function SecretOptionWarning({
+  isSecret = true,
+  name,
+}: SecretOptionWarningProps) {
+  if (!isSecret) return null;
+  const id = `option-is-secret-${name}`;
+  return (
+    <>
+      <div id={id} className="d-inline">
+        <KeyFill className={cx("bi", "ms-1")} />
+        <ExclamationTriangleFill className={cx("bi", "ms-1", "text-warning")} />
+      </div>
+      <UncontrolledTooltip placement="top" target={id}>
+        This field contains sensitive data (E.G. password, access token, ...).
+        We currently cannot store it safely, so you might be asked this value
+        again when starting a session.
+      </UncontrolledTooltip>
+    </>
+  );
+}
+
+function AddStorageOptions({
+  schema,
+  setState,
+  setStorage,
+  state,
+  storage,
+}: AddStorageStepProps) {
+  const options = getSchemaOptions(
+    schema,
+    !state.showAllOptions,
+    storage.schema,
+    storage.provider
+  );
+
+  const [showPassword, setShowPassword] = useState<string[]>([]);
+  const getPasswordType = (name: string) => {
+    return showPassword.includes(name) ? "text" : "password";
+  };
+  const swapShowPassword = (name: string) => {
+    setShowPassword((prev) => {
+      if (prev.includes(name)) {
+        return prev.filter((n) => n !== name);
+      }
+      return [...prev, name];
+    });
+  };
+
+  const { control, setValue, getValues } = useForm();
+
+  const onFieldValueChange = (
+    option: string,
+    value: string | number | boolean
+  ) => {
+    setValue(option, value);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { sourcePath, ...validOptions } = getValues();
+    setStorage({ options: validOptions });
+  };
+
+  const optionItems =
+    options &&
+    options.map((o) => {
+      const inputType = !o.convertedType
+        ? "text"
+        : o.convertedType === "secret"
+        ? "password"
+        : o.convertedType === "boolean"
+        ? "checkbox"
+        : o.convertedType === "number"
+        ? "number"
+        : "text";
+
+      const placeholder = o.examples?.length
+        ? o.examples[0].value
+          ? o.examples[0].value
+          : undefined
+        : undefined;
+
+      const examples = (
+        <AddStorageOptionsExamples
+          examples={o.examples}
+          name={o.name}
+          provider={storage.provider}
+        />
+      );
+
+      const warning =
+        o.convertedType === "secret" ? (
+          <SecretOptionWarning name={o.name} />
+        ) : null;
+
+      return (
+        <div className="mb-3" key={o.name}>
+          <label htmlFor={o.name}>
+            {o.friendlyName ?? o.name} {examples} {warning}
+          </label>
+
+          {inputType === "checkbox" ? (
+            <Controller
+              name={o.name}
+              control={control}
+              defaultValue={
+                storage.options && storage.options[o.name]
+                  ? storage.options[o.name]
+                  : o.convertedDefault ?? false
+              }
+              render={({ field }) => (
+                <input
+                  id={o.name}
+                  type={inputType}
+                  {...field}
+                  className={cx("form-check-input", "ms-1")}
+                  onChange={(e) => {
+                    field.onChange(e);
+                    onFieldValueChange(o.name, e.target.checked);
+                  }}
+                />
+              )}
+            />
+          ) : inputType === "password" ? (
+            <InputGroup>
+              <Controller
+                name={o.name}
+                control={control}
+                defaultValue={
+                  storage.options && storage.options[o.name]
+                    ? storage.options[o.name]
+                    : o.convertedDefault ?? ""
+                }
+                render={({ field }) => (
+                  <input
+                    id={o.name}
+                    type={getPasswordType(o.name)}
+                    {...field}
+                    className={cx("form-control", "rounded-0", "rounded-start")}
+                    placeholder={placeholder}
+                    onChange={(e) => {
+                      field.onChange(e);
+                      onFieldValueChange(o.name, e.target.value);
+                    }}
+                  />
+                )}
+              />
+              <Button
+                className="rounded-end"
+                id={`show-password-${o.name}`}
+                onClick={() => swapShowPassword(o.name)}
+              >
+                {getPasswordType(o.name) === "password" ? (
+                  <EyeSlashFill className="bi" />
+                ) : (
+                  <EyeFill className="bi" />
+                )}
+                <UncontrolledTooltip
+                  placement="top"
+                  target={`show-password-${o.name}`}
+                >
+                  Hide/show sensistive data
+                </UncontrolledTooltip>
+              </Button>
+            </InputGroup>
+          ) : (
+            <Controller
+              name={o.name}
+              control={control}
+              defaultValue={
+                storage.options && storage.options[o.name]
+                  ? storage.options[o.name]
+                  : o.convertedDefault ?? ""
+              }
+              render={({ field }) => (
+                <input
+                  id={o.name}
+                  type={inputType}
+                  {...field}
+                  className="form-control"
+                  placeholder={placeholder}
+                  onChange={(e) => {
+                    field.onChange(e);
+                    onFieldValueChange(
+                      o.name,
+                      inputType === "number"
+                        ? parseFloat(e.target.value)
+                        : e.target.value
+                    );
+                  }}
+                />
+              )}
+            />
+          )}
+          <div className={cx("form-text", "text-muted")}>{o.help}</div>
+        </div>
+      );
+    });
+
+  const advancedOptions = options && (
+    <>
+      <div className={cx("form-check", "form-switch", "mb-3", "d-flex")}>
+        <Input
+          className={cx("form-check-input", "rounded-pill", "my-auto", "me-2")}
+          checked={state.showAllOptions}
+          id="switch-storage-advanced-mode"
+          onChange={() => setState({ showAllOptions: !state.showAllOptions })}
+          role="switch"
+          type="checkbox"
+        />
+        <Label
+          className={cx("form-check-label", "my-auto")}
+          for="addCloudStorageAdvancedSwitch"
+        >
+          Show full options list{" "}
+        </Label>
+      </div>
+    </>
+  );
+
+  const onSourcePathChange = (value: string) => {
+    setValue("sourcePath", value);
+    setStorage({ sourcePath: value });
+  };
+
+  const sourcePathHelp = useMemo(() => {
+    return getSourcePathHint(storage.schema);
+  }, [storage.schema]);
+
+  const sourcePath = (
+    <div className="mb-3">
+      <Controller
+        name="sourcePath"
+        control={control}
+        defaultValue={storage.sourcePath || ""}
+        render={({ field }) => (
+          <input
+            id="sourcePath"
+            type="string"
+            {...field}
+            className="form-control"
+            onChange={(e) => {
+              field.onChange(e);
+              onSourcePathChange(e.target.value);
+            }}
+            placeholder={sourcePathHelp.placeholder}
+          />
+        )}
+      />
+      <Label className="form-label" for="add-storage-name">
+        Source path
+      </Label>
+      <div className={cx("form-text", "text-muted")}>{sourcePathHelp.help}</div>
+    </div>
+  );
+
+  return (
+    <form className="form-rk-green" data-cy="cloud-storage-edit-options">
+      <h5>Options</h5>
+      <p>
+        Please fill in all the options required to connect to your storage. Mind
+        that the specific fields required depend on your storage configuration.
+      </p>
+      {sourcePath}
+      {optionItems}
+      {advancedOptions}
+    </form>
+  );
+}
+
+// *** Add storage: page 3 of 3, with name and mount path *** //
+
+interface AddStorageMountForm {
+  name: string;
+  mountPoint: string;
+  readOnly: boolean;
+}
+type AddStorageMountFormFields = "name" | "mountPoint" | "readOnly";
+function AddStorageMount({ setStorage, storage }: AddStorageStepProps) {
+  const {
+    control,
+    formState: { errors, touchedFields },
+    setValue,
+    getValues,
+  } = useForm<AddStorageMountForm>({
+    mode: "onChange",
+    defaultValues: {
+      name: storage.name || "",
+      mountPoint:
+        storage.mountPoint ||
+        `external_storage/${storage.schema?.toLowerCase()}`,
+      readOnly: storage.readOnly ?? false,
+    },
+  });
+  const onFieldValueChange = (
+    field: AddStorageMountFormFields,
+    value: string | boolean
+  ) => {
+    setValue(field, value);
+    if (field === "name" && !touchedFields.mountPoint && !storage.storageId)
+      setValue("mountPoint", `external_storage/${value}`);
+    setStorage({ ...getValues() });
+  };
+
+  return (
+    <form className="form-rk-green" data-cy="cloud-storage-edit-mount">
+      <h5>Final details</h5>
+      <p>We need a few more details to mount your storage properly.</p>
+
+      <div className="mb-3">
+        <Label className="form-label" for="add-storage-name">
+          Name
+        </Label>
+
+        <Controller
+          name="name"
+          control={control}
+          render={({ field }) => (
+            <input
+              id="name"
+              type="string"
+              {...field}
+              className={cx("form-control", errors.name && "is-invalid")}
+              onChange={(e) => {
+                field.onChange(e);
+                onFieldValueChange("name", e.target.value);
+              }}
+            />
+          )}
+          rules={{
+            // TODO: check this won't create a duplicate
+            validate: (value) =>
+              !value
+                ? "Please provide a name"
+                : /^[a-zA-Z0-9_-]+$/.test(value) ||
+                  "Name can only contain letters, numbers, underscores (_), and dashes (-)",
+          }}
+        />
+        <div className="invalid-feedback">
+          {errors.name?.message?.toString()}
+        </div>
+        <div className={cx("form-text", "text-muted")}>
+          This name will help you identify the storage. It should be unique for
+          this project and it can only contains letter, numbers, $, _.
+        </div>
+      </div>
+
+      <div className="mb-3">
+        <Label className="form-label" for="add-storage-name">
+          Mount point
+        </Label>
+
+        <Controller
+          name="mountPoint"
+          control={control}
+          render={({ field }) => (
+            <input
+              id="mountPoint"
+              type="string"
+              {...field}
+              className={cx("form-control", errors.mountPoint && "is-invalid")}
+              onChange={(e) => {
+                field.onChange(e);
+                onFieldValueChange("mountPoint", e.target.value);
+              }}
+            />
+          )}
+          rules={{ required: true }}
+        />
+        <div className="invalid-feedback">Please provide a mount point.</div>
+        <div className={cx("form-text", "text-muted")}>
+          This is the name of the folder where you will find your external
+          storage in the sessions. You should pick something different from the
+          folders used in the projects repository, and from folder mounted by
+          other storage services.
+        </div>
+      </div>
+
+      <div>
+        <Label className="form-label" for="readOnly">
+          Read-only
+        </Label>
+
+        <Controller
+          name="readOnly"
+          control={control}
+          render={({ field }) => (
+            <input
+              id="readOnly"
+              type="checkbox"
+              {...field}
+              className={cx(
+                "form-check-input",
+                "ms-1",
+                errors.readOnly && "is-invalid"
+              )}
+              onChange={(e) => {
+                field.onChange(e);
+                onFieldValueChange("readOnly", e.target.checked);
+              }}
+              value=""
+              checked={storage.readOnly ?? false}
+            />
+          )}
+          rules={{ required: true }}
+        />
+        {!storage.readOnly && (
+          <div className="mt-1">
+            <WarnAlert dismissible={false}>
+              <p className="mb-0">
+                You are mounting this storage in read-write mode. If you have
+                read-only access, please check the box to prevent errors with
+                some storage types.
+              </p>
+            </WarnAlert>
+          </div>
+        )}
+        <div className={cx("form-text", "text-muted")}>
+          Check this box to mount the storage in read-only mode. You should
+          always check this if you do not have credentials to write. You can use
+          this in any case to prevent accidental data modifications.
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/client/src/features/project/components/cloudStorage/AddOrEditCloudStorageButton.tsx b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorageButton.tsx
new file mode 100644
index 0000000000..4dafa6a914
--- /dev/null
+++ b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorageButton.tsx
@@ -0,0 +1,94 @@
+/*!
+ * Copyright 2023 - 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 { PencilSquare, PlusLg } from "react-bootstrap-icons";
+import { Button, UncontrolledTooltip } from "reactstrap";
+
+import { CloudStorage } from "./projectCloudStorage.types";
+import AddCloudStorageModal from "./CloudStorageModal";
+
+interface AddOrEditCloudStorageButtonProps {
+  currentStorage?: CloudStorage | null;
+  devAccess: boolean;
+}
+export default function AddOrEditCloudStorageButton({
+  currentStorage,
+  devAccess,
+}: AddOrEditCloudStorageButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = useCallback(() => {
+    setIsOpen((open) => !open);
+  }, []);
+
+  const isEdit = !!currentStorage?.storage.storage_id;
+  const localId = isEdit
+    ? `edit-cloud-storage-${currentStorage.storage.storage_id}`
+    : "add-cloud-storage";
+  const buttonContent = isEdit ? (
+    <>
+      <PencilSquare className={cx("bi", "me-1")} />
+      Edit
+    </>
+  ) : (
+    <>
+      <PlusLg className={cx("bi", "me-1")} />
+      Add Cloud Storage
+    </>
+  );
+  const content = devAccess ? (
+    <>
+      <Button
+        id={`${localId}-button`}
+        className={cx("btn-outline-rk-green")}
+        onClick={toggle}
+      >
+        {buttonContent}
+      </Button>
+      <div id={`${localId}-modal`} key={`${localId}-key`}>
+        <AddCloudStorageModal
+          currentStorage={currentStorage}
+          isOpen={isOpen}
+          toggle={toggle}
+        />
+      </div>
+    </>
+  ) : (
+    <>
+      <div className="d-inline-block" tabIndex={0}>
+        <Button
+          id={`${localId}-button`}
+          color="outline-secondary"
+          disabled={true}
+        >
+          {buttonContent}
+        </Button>
+      </div>
+      <UncontrolledTooltip target={localId}>
+        Only developers and maintainers can edit cloud storage settings.
+      </UncontrolledTooltip>
+    </>
+  );
+
+  return (
+    <div className="d-inline-block" id={localId}>
+      {content}
+    </div>
+  );
+}
diff --git a/client/src/features/project/components/cloudStorage/CloudStorage.module.scss b/client/src/features/project/components/cloudStorage/CloudStorage.module.scss
new file mode 100644
index 0000000000..36ac650ac6
--- /dev/null
+++ b/client/src/features/project/components/cloudStorage/CloudStorage.module.scss
@@ -0,0 +1,13 @@
+@import "~/src/styles/bootstrap/_custom_bootstrap_variables.scss";
+
+.modal :global(.modal-content) {
+  height: unset !important;
+}
+
+.listGroupItemActive {
+  border: 1px solid $rk-green !important;
+  color: $rk-green;
+  &:hover {
+    color: $rk-green;
+  }
+}
diff --git a/client/src/features/project/components/cloudStorage/CloudStorageItem.tsx b/client/src/features/project/components/cloudStorage/CloudStorageItem.tsx
new file mode 100644
index 0000000000..86ef635fb5
--- /dev/null
+++ b/client/src/features/project/components/cloudStorage/CloudStorageItem.tsx
@@ -0,0 +1,417 @@
+/*!
+ * Copyright 2023 - 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, useEffect, useMemo, useRef, useState } from "react";
+import {
+  CheckLg,
+  InfoCircleFill,
+  KeyFill,
+  TrashFill,
+  XLg,
+} from "react-bootstrap-icons";
+import {
+  Button,
+  Card,
+  CardBody,
+  Col,
+  Collapse,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  PopoverBody,
+  UncontrolledPopover,
+  UncontrolledTooltip,
+} from "reactstrap";
+
+import { Loader } from "../../../../components/Loader";
+import ChevronFlippedIcon from "../../../../components/icons/ChevronFlippedIcon";
+import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown";
+import useLegacySelector from "../../../../utils/customHooks/useLegacySelector.hook";
+import { StateModelProject } from "../../Project";
+import { useDeleteCloudStorageMutation } from "./projectCloudStorage.api";
+import {
+  CloudStorage,
+  CloudStorageConfiguration,
+} from "./projectCloudStorage.types";
+import { getCredentialFieldDefinitions } from "../../utils/projectCloudStorage.utils";
+import AddOrEditCloudStorageButton from "./AddOrEditCloudStorageButton";
+
+interface CloudStorageItemProps {
+  children?: React.ReactNode;
+  devAccess: boolean;
+  disabled?: boolean;
+  noEdit?: boolean;
+  storageDefinition: CloudStorage;
+}
+
+export default function CloudStorageItem({
+  children,
+  devAccess,
+  disabled,
+  noEdit,
+  storageDefinition,
+}: CloudStorageItemProps) {
+  const { storage } = storageDefinition;
+  const { configuration, name, target_path } = storage;
+  const sensitiveFields = storageDefinition.sensitive_fields
+    ? storageDefinition.sensitive_fields?.map((f) => f.name)
+    : [];
+  const anySensitiveField = Object.keys(storage.configuration).some((key) =>
+    sensitiveFields.includes(key)
+  );
+
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = useCallback(() => {
+    setIsOpen((isOpen) => !isOpen);
+  }, []);
+
+  const storageType = configuration.provider
+    ? `${configuration.type}/${configuration.provider}`
+    : configuration.type;
+
+  const credentialId = `cloud-storage-${storage.storage_id}-credentials`;
+  const requiresCredentials = anySensitiveField && (
+    <>
+      <span id={credentialId} tabIndex={0}>
+        <KeyFill className={cx("bi", "me-1")} />
+      </span>
+      <UncontrolledTooltip target={credentialId}>
+        <PopoverBody>This cloud storage requires credentials.</PopoverBody>
+      </UncontrolledTooltip>
+    </>
+  );
+
+  const additionalElement = children && (
+    <CardBody className={cx("border-top", "py-2")}>{children}</CardBody>
+  );
+  return (
+    <Col>
+      <Card data-cy="cloud-storage-item">
+        <CardBody className="p-0">
+          <h3 className={cx("fs-6", "m-0")}>
+            <div
+              className={cx(
+                "d-flex",
+                "gap-3",
+                "align-items-center",
+                "w-100",
+                "p-3"
+              )}
+            >
+              <div
+                className={cx(
+                  "fw-bold",
+                  disabled && [
+                    "text-decoration-line-through",
+                    "text-rk-text-light",
+                  ]
+                )}
+              >
+                {requiresCredentials} {name}
+              </div>
+              <div className={cx("small", "d-none", "d-sm-block")}>
+                <span className="text-rk-text-light">Storage type: </span>
+                <span>{storageType}</span>
+              </div>
+              <div className={cx("small", "d-none", "d-sm-block")}>
+                <span className="text-rk-text-light">Mount point: </span>
+                {disabled ? (
+                  <span className="fst-italic">Not mounted</span>
+                ) : (
+                  <span>{target_path}</span>
+                )}
+              </div>
+            </div>
+          </h3>
+        </CardBody>
+
+        {additionalElement}
+
+        <CardBody className="p-0 border-top">
+          <button
+            className={cx(
+              "d-flex",
+              "w-100",
+              "px-3",
+              "py-2",
+              "bg-transparent",
+              "border-0"
+            )}
+            data-cy="cloud-storage-details-toggle"
+            onClick={toggle}
+            type="button"
+          >
+            <div>More details</div>
+            <div className="ms-auto">
+              <ChevronFlippedIcon flipped={isOpen} />
+            </div>
+          </button>
+        </CardBody>
+
+        <Collapse isOpen={isOpen}>
+          <CardBody className="pt-0">
+            <CloudStorageDetails
+              devAccess={devAccess}
+              noEdit={noEdit}
+              requiresCredentials={anySensitiveField}
+              storageDefinition={storageDefinition}
+            />
+          </CardBody>
+        </Collapse>
+      </Card>
+    </Col>
+  );
+}
+
+interface CloudStorageDetailsProps {
+  devAccess: boolean;
+  noEdit?: boolean;
+  requiresCredentials: boolean;
+  storageDefinition: CloudStorage;
+}
+
+function CloudStorageDetails({
+  devAccess,
+  noEdit,
+  requiresCredentials,
+  storageDefinition,
+}: CloudStorageDetailsProps) {
+  const { storage } = storageDefinition;
+  const { configuration, name, readonly, source_path, target_path } = storage;
+
+  const credentialFieldDefinitions = useMemo(
+    () => getCredentialFieldDefinitions(storageDefinition),
+    [storageDefinition]
+  );
+  const requiredCredentials = useMemo(
+    () =>
+      credentialFieldDefinitions?.filter(
+        ({ requiredCredential }) => requiredCredential
+      ),
+    [credentialFieldDefinitions]
+  );
+
+  return (
+    <>
+      <section data-cy="cloud-storage-details-section">
+        <div>
+          <div className="text-rk-text-light">
+            <small>Name</small>
+          </div>
+          <div>{name}</div>
+        </div>
+        <div className="mt-2">
+          <div className="text-rk-text-light">
+            <small>
+              Mount point {"("}this is where the storage will be mounted during
+              sessions{")"}
+            </small>
+          </div>
+          <div>{target_path}</div>
+        </div>
+        {Object.keys(configuration).map((key) => (
+          <div className="mt-2" key={key}>
+            <div className="text-rk-text-light">
+              <small className="text-capitalize">{key}</small>
+            </div>
+            <div>{configuration[key]}</div>
+          </div>
+        ))}
+        <div className="mt-2">
+          <div className="text-rk-text-light">
+            <small>Source path</small>
+          </div>
+          <div>{source_path}</div>
+        </div>
+        <div className="mt-2">
+          <div className="text-rk-text-light">
+            <small>Requires credentials</small>
+          </div>
+          <div>{requiresCredentials ? "Yes" : "No"}</div>
+        </div>
+        {requiresCredentials &&
+          requiredCredentials &&
+          requiredCredentials.length > 0 && (
+            <div className="mt-2">
+              <div className="text-rk-text-light">
+                <small>Required crendentials</small>
+              </div>
+              <ul className={cx("ps-4", "mb-0")}>
+                {requiredCredentials.map(({ name, help }, index) => (
+                  <li key={index}>
+                    {name}
+                    <CredentialMoreInfo help={help} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        <div className="mt-2">
+          <div className="text-rk-text-light">
+            <small>Access mode</small>
+          </div>
+          <div>
+            {readonly
+              ? "Force Read-only"
+              : "Allow Read-Write (requires adequate privileges on the storage)"}
+          </div>
+        </div>
+      </section>
+
+      {!noEdit && (
+        <section
+          data-cy="cloud-storage-details-buttons"
+          className={cx("d-flex", "justify-content-end", "mt-3")}
+        >
+          <AddOrEditCloudStorageButton
+            devAccess={devAccess}
+            currentStorage={storageDefinition}
+          />
+          <DeleteCloudStorageButton
+            devAccess={devAccess}
+            storageDefinition={storageDefinition}
+          />
+        </section>
+      )}
+    </>
+  );
+}
+
+function CredentialMoreInfo({ help }: { help: string }) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  return (
+    <>
+      <span ref={ref}>
+        <InfoCircleFill className={cx("bi", "ms-1")} tabIndex={0} />
+      </span>
+      <UncontrolledPopover target={ref} placement="right" trigger="hover focus">
+        <PopoverBody>
+          <LazyRenkuMarkdown markdownText={help} />
+        </PopoverBody>
+      </UncontrolledPopover>
+    </>
+  );
+}
+
+function DeleteCloudStorageButton({
+  devAccess,
+  storageDefinition,
+}: CloudStorageItemProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = useCallback(() => {
+    setIsOpen((open) => !open);
+  }, []);
+
+  return devAccess ? (
+    <>
+      <Button className="ms-2" color="outline-danger" onClick={toggle}>
+        <TrashFill className={cx("bi", "me-1")} />
+        Delete
+      </Button>
+      <DeleteCloudStorageModal
+        isOpen={isOpen}
+        storage={storageDefinition.storage}
+        toggle={toggle}
+      />
+    </>
+  ) : (
+    <div
+      className="d-inline-block"
+      id={`delete-storage-${storageDefinition.storage.storage_id}`}
+      tabIndex={0}
+      data-bs-toggle="tooltip"
+    >
+      <Button className="ms-2" color="outline-danger" disabled={true}>
+        <TrashFill className={cx("bi", "me-1")} />
+        Delete
+      </Button>
+      <UncontrolledTooltip
+        target={`delete-storage-${storageDefinition.storage.storage_id}`}
+      >
+        Only developers and maintainers can delete cloud storage.
+      </UncontrolledTooltip>
+    </div>
+  );
+}
+
+interface DeleteCloudStorageModalProps {
+  isOpen: boolean;
+  storage: CloudStorageConfiguration;
+  toggle: () => void;
+}
+
+function DeleteCloudStorageModal({
+  isOpen,
+  storage,
+  toggle,
+}: DeleteCloudStorageModalProps) {
+  const { name, storage_id } = storage;
+
+  const projectId = useLegacySelector<StateModelProject["metadata"]["id"]>(
+    (state) => state.stateModel.project.metadata.id
+  );
+
+  const [deleteCloudStorage, result] = useDeleteCloudStorageMutation();
+  const onDelete = useCallback(() => {
+    deleteCloudStorage({
+      project_id: `${projectId}`,
+      storage_id,
+    });
+  }, [deleteCloudStorage, projectId, storage_id]);
+
+  useEffect(() => {
+    if (result.isSuccess || result.isError) {
+      toggle();
+    }
+  }, [result.isError, result.isSuccess, toggle]);
+
+  return (
+    <Modal
+      className="modal-dialog-centered"
+      isOpen={isOpen}
+      size="lg"
+      toggle={toggle}
+    >
+      <ModalBody>
+        <h3 className={cx("fs-6", "lh-base", "text-danger", "fw-bold")}>
+          Are you sure?
+        </h3>
+        <p className="mb-0">
+          Please confirm that you want to delete the <strong>{name}</strong>{" "}
+          storage configuration.
+        </p>
+      </ModalBody>
+      <ModalFooter className="pt-0">
+        <Button className="ms-2" color="secondary" onClick={toggle}>
+          <XLg className={cx("bi", "me-1")} />
+          Cancel, keep configuration
+        </Button>
+        <Button className="ms-2" color="outline-danger" onClick={onDelete}>
+          {result.isLoading ? (
+            <Loader className="me-1" inline size={16} />
+          ) : (
+            <CheckLg className={cx("bi", "me-1")} />
+          )}
+          Yes, delete this configuration
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
diff --git a/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx b/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx
new file mode 100644
index 0000000000..55ca427fe8
--- /dev/null
+++ b/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx
@@ -0,0 +1,491 @@
+/*!
+ * Copyright 2023 - 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, useEffect, useMemo, useState } from "react";
+import {
+  ArrowCounterclockwise,
+  ChevronLeft,
+  ChevronRight,
+  CloudFill,
+  PencilSquare,
+  PlusLg,
+  XLg,
+} from "react-bootstrap-icons";
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  UncontrolledTooltip,
+} from "reactstrap";
+
+import { Loader } from "../../../../components/Loader";
+import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
+import { StateModelProject } from "../../Project";
+import {
+  useAddCloudStorageForProjectMutation,
+  useGetCloudStorageSchemaQuery,
+  useUpdateCloudStorageMutation,
+} from "./projectCloudStorage.api";
+import {
+  CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
+  CLOUD_STORAGE_TOTAL_STEPS,
+  EMPTY_CLOUD_STORAGE_DETAILS,
+  EMPTY_CLOUD_STORAGE_STATE,
+} from "./projectCloudStorage.constants";
+import {
+  AddCloudStorageForProjectParams,
+  AddCloudStorageState,
+  CloudStorage,
+  CloudStorageDetails,
+  CloudStorageDetailsOptions,
+  UpdateCloudStorageParams,
+} from "./projectCloudStorage.types";
+import {
+  findSensitive,
+  getCurrentStorageDetails,
+  getSchemaProviders,
+  hasProviderShortlist,
+} from "../../utils/projectCloudStorage.utils";
+import { SuccessAlert } from "../../../../components/Alert";
+
+import styles from "./CloudStorage.module.scss";
+import AddOrEditCloudStorage from "./AddOrEditCloudStorage";
+import useLegacySelector from "../../../../utils/customHooks/useLegacySelector.hook";
+import { isEqual } from "lodash";
+
+interface CloudStorageModalProps {
+  currentStorage?: CloudStorage | null;
+  isOpen: boolean;
+  toggle: () => void;
+}
+export default function CloudStorageModal({
+  currentStorage = null,
+  isOpen,
+  toggle: originalToggle,
+}: CloudStorageModalProps) {
+  const storageId = currentStorage?.storage.storage_id ?? null;
+  // Fetch available schema when users open the modal
+  const {
+    data: schema,
+    error: schemaError,
+    isFetching: schemaIsFetching,
+  } = useGetCloudStorageSchemaQuery(undefined, { skip: !isOpen });
+
+  // Reset state on props change
+  useEffect(() => {
+    const cloudStorageDetails: CloudStorageDetails =
+      currentStorage != null
+        ? getCurrentStorageDetails(currentStorage)
+        : EMPTY_CLOUD_STORAGE_DETAILS;
+    const cloudStorageState: AddCloudStorageState =
+      currentStorage != null
+        ? {
+            ...EMPTY_CLOUD_STORAGE_STATE,
+            step: 2,
+            completedSteps: CLOUD_STORAGE_TOTAL_STEPS,
+          }
+        : EMPTY_CLOUD_STORAGE_STATE;
+    setStorageDetails(cloudStorageDetails);
+    setState(cloudStorageState);
+  }, [currentStorage]);
+
+  const [success, setSuccess] = useState(false);
+  const [state, setState] = useState<AddCloudStorageState>(
+    EMPTY_CLOUD_STORAGE_STATE
+  );
+  const [storageDetails, setStorageDetails] = useState<CloudStorageDetails>(
+    EMPTY_CLOUD_STORAGE_DETAILS
+  );
+
+  // Enhanced setters
+  const setStateSafe = useCallback(
+    (newState: Partial<AddCloudStorageState>) => {
+      const fullNewState = {
+        ...state,
+        ...newState,
+      };
+      if (isEqual(fullNewState, state)) {
+        return;
+      }
+
+      // Handle advanced mode changes
+      if (
+        fullNewState.advancedMode !== state.advancedMode &&
+        fullNewState.step !== 3
+      ) {
+        if (fullNewState.advancedMode) {
+          fullNewState.step = 0;
+        } else {
+          if (
+            // schema and provider (where necessary) must also exist in the list
+            !storageDetails.schema ||
+            !schema?.find((s) => s.prefix === storageDetails.schema) ||
+            (hasProviderShortlist(storageDetails.schema) &&
+              (!storageDetails.provider ||
+                !getSchemaProviders(schema, false, storageDetails.schema)?.find(
+                  (p) => p.name === storageDetails.provider
+                )))
+          ) {
+            fullNewState.step = 1;
+          } else {
+            fullNewState.step = 2;
+          }
+        }
+      }
+      setState(fullNewState);
+    },
+    [state, storageDetails, schema]
+  );
+
+  const setStorageDetailsSafe = useCallback(
+    (newStorageDetails: Partial<CloudStorageDetails>) => {
+      const fullNewDetails = {
+        ...storageDetails,
+        ...newStorageDetails,
+      };
+      if (isEqual(fullNewDetails, storageDetails)) {
+        return;
+      }
+      // reset follow-up properties: schema > provider > options
+      if (fullNewDetails.schema !== storageDetails.schema) {
+        fullNewDetails.provider = undefined;
+        fullNewDetails.options = undefined;
+        fullNewDetails.sourcePath = undefined;
+      } else if (fullNewDetails.provider !== storageDetails.provider) {
+        fullNewDetails.options = undefined;
+        fullNewDetails.sourcePath = undefined;
+      }
+      setStorageDetails(fullNewDetails);
+    },
+    [storageDetails]
+  );
+
+  // Reset
+  const [redraw, setRedraw] = useState(false);
+  useEffect(() => {
+    if (redraw) setRedraw(false);
+  }, [redraw]);
+  const reset = useCallback(() => {
+    const resetStatus = getCurrentStorageDetails(currentStorage);
+    setState((prevState) =>
+      currentStorage != null
+        ? {
+            ...EMPTY_CLOUD_STORAGE_STATE,
+            step: prevState.step,
+            completedSteps: prevState.completedSteps,
+          }
+        : {
+            ...EMPTY_CLOUD_STORAGE_STATE,
+          }
+    );
+    setStorageDetails(resetStatus);
+    setSuccess(false);
+    setRedraw(true); // This forces re-loading the useForm fields
+  }, [currentStorage]);
+
+  // Mutations
+  const projectId = useLegacySelector<StateModelProject["metadata"]["id"]>(
+    (state) => state.stateModel.project.metadata.id
+  );
+  const [addCloudStorageForProject, addResult] =
+    useAddCloudStorageForProjectMutation();
+  const [modifyCloudStorageForProject, modifyResult] =
+    useUpdateCloudStorageMutation();
+
+  const addOrEditStorage = useCallback(() => {
+    storageDetails.options;
+
+    const storageParameters: AddCloudStorageForProjectParams = {
+      name: storageDetails.name as string,
+      private: false,
+      readonly: storageDetails.readOnly ?? true,
+      project_id: `${projectId}`,
+      source_path: storageDetails.sourcePath ?? "/",
+      target_path: storageDetails.mountPoint as string,
+      configuration: { type: storageDetails.schema },
+    };
+    // Add provider when required
+    if (storageDetails.provider) {
+      storageParameters.configuration = {
+        ...storageParameters.configuration,
+        provider: storageDetails.provider,
+      };
+    }
+    // Add options if any
+    if (
+      storageDetails.options &&
+      Object.keys(storageDetails.options).length > 0
+    ) {
+      const allOptions = storageDetails.options as CloudStorageDetailsOptions;
+      const sensitiveFields = schema
+        ? findSensitive(schema.find((s) => s.prefix === storageDetails.schema))
+        : currentStorage?.sensitive_fields
+        ? currentStorage.sensitive_fields.map((field) => field.name)
+        : [];
+      const validOptions = Object.keys(
+        storageDetails.options
+      ).reduce<CloudStorageDetailsOptions>((options, key) => {
+        const value = allOptions[key];
+        if (value != undefined && value !== "") {
+          options[key] = sensitiveFields.includes(key)
+            ? CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN
+            : value;
+        }
+        return options;
+      }, {});
+
+      storageParameters.configuration = {
+        ...storageParameters.configuration,
+        ...validOptions,
+      };
+    }
+
+    // We manually set success only when we get an ID back. That's just to sho a success message
+    if (storageId) {
+      const storageParametersWithId: UpdateCloudStorageParams = {
+        ...storageParameters,
+        storage_id: storageId as string,
+      };
+      modifyCloudStorageForProject(storageParametersWithId).then((result) => {
+        if ("data" in result && result.data.storage.storage_id) {
+          setSuccess(true);
+        }
+      });
+    } else {
+      addCloudStorageForProject(storageParameters).then((result) => {
+        if ("data" in result && result.data.storage.storage_id) {
+          setSuccess(true);
+        }
+      });
+    }
+  }, [
+    projectId,
+    storageDetails,
+    storageId,
+    schema,
+    currentStorage,
+    addCloudStorageForProject,
+    modifyCloudStorageForProject,
+  ]);
+
+  const toggle = useCallback(() => {
+    originalToggle();
+    if (success) {
+      setSuccess(false);
+      reset();
+    }
+  }, [originalToggle, reset, success]);
+
+  // Handle unmount
+  useEffect(() => {
+    const cleanup = () => {
+      reset();
+    };
+
+    return cleanup;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const schemaRequiresProvider = useMemo(
+    () => hasProviderShortlist(storageDetails.schema),
+    [storageDetails.schema]
+  );
+
+  // Visual elements
+  const disableContinueButton =
+    state.step === 1 &&
+    (!storageDetails.schema ||
+      (schemaRequiresProvider && !storageDetails.provider));
+  const continueButtonId = "add-cloud-storage-next";
+
+  const disableAddButton =
+    addResult.isLoading ||
+    modifyResult.isLoading ||
+    !storageDetails.name ||
+    !storageDetails.mountPoint ||
+    !storageDetails.schema ||
+    (hasProviderShortlist(storageDetails.schema) && !storageDetails.provider);
+  const addButtonDisableReason = addResult.isLoading
+    ? "Please wait, the storage is being added"
+    : modifyResult.isLoading
+    ? "Please wait, the storage is being modified"
+    : !storageDetails.name
+    ? "Please provide a name"
+    : !storageDetails.mountPoint
+    ? "Please provide a mount point"
+    : !storageDetails.schema
+    ? "Please go back and select a storage type"
+    : "Please go back and select a provider";
+  const addButtonId = "add-cloud-storage-continue";
+
+  const continueButton = success ? null : state.step === 3 &&
+    state.completedSteps >= 2 ? (
+    <div id={`${addButtonId}-div`} className="d-inline-block">
+      <Button
+        data-cy="cloud-storage-edit-update-button"
+        id={`${addButtonId}-button`}
+        disabled={disableAddButton}
+        onClick={() => addOrEditStorage()}
+      >
+        {addResult.isLoading || modifyResult.isLoading ? (
+          <Loader className="me-1" inline size={16} />
+        ) : storageId ? (
+          <PencilSquare className={cx("bi", "me-1")} />
+        ) : (
+          <PlusLg className={cx("bi", "me-1")} />
+        )}
+        {storageId ? "Update" : "Add"} storage
+      </Button>
+      {disableAddButton && (
+        <UncontrolledTooltip placement="top" target={`${addButtonId}-div`}>
+          {addButtonDisableReason}
+        </UncontrolledTooltip>
+      )}
+    </div>
+  ) : (
+    <div id={`${continueButtonId}-div`} className="d-inline-block">
+      <Button
+        id={`${continueButtonId}-button`}
+        data-cy="cloud-storage-edit-next-button"
+        disabled={disableContinueButton}
+        onClick={() => {
+          setStateSafe({
+            completedSteps:
+              state.step === 0
+                ? CLOUD_STORAGE_TOTAL_STEPS - 1
+                : state.step > state.completedSteps
+                ? state.step
+                : state.completedSteps,
+            step: state.step === 0 ? CLOUD_STORAGE_TOTAL_STEPS : state.step + 1,
+          });
+        }}
+      >
+        <ChevronRight className={cx("bi", "me-1")} />
+        Next
+      </Button>
+      {disableContinueButton && (
+        <UncontrolledTooltip placement="top" target={`${continueButtonId}-div`}>
+          {!storageDetails.schema
+            ? "Please select a storage type"
+            : "Please select a provider or change storage type"}
+        </UncontrolledTooltip>
+      )}
+    </div>
+  );
+
+  const backButton =
+    addResult.isLoading || modifyResult.isLoading ? null : state.step <= 1 ||
+      success ? (
+      <Button
+        className="btn-outline-rk-green"
+        data-cy="cloud-storage-edit-close-button"
+        onClick={() => toggle()}
+      >
+        <XLg className={cx("bi", "me-1")} />
+        {success ? "Close" : "Cancel"}
+      </Button>
+    ) : (
+      <Button
+        className="btn-outline-rk-green"
+        data-cy="cloud-storage-edit-back-button"
+        onClick={() => {
+          setStateSafe({
+            step: state.advancedMode ? 0 : state.step - 1,
+          });
+        }}
+      >
+        <ChevronLeft className={cx("bi", "me-1")} />
+        Back
+      </Button>
+    );
+
+  const resetButton = !addResult.isLoading &&
+    !modifyResult.isLoading &&
+    !success && (
+      <Button
+        color="outline-danger"
+        data-cy="cloud-storage-edit-rest-button"
+        onClick={reset}
+      >
+        <ArrowCounterclockwise className={cx("bi", "me-1")} />
+        Reset
+      </Button>
+    );
+
+  const errorMessage =
+    addResult.error || modifyResult.error ? (
+      <div className="w-100">
+        <RtkOrNotebooksError error={addResult.error || modifyResult.error} />
+      </div>
+    ) : null;
+
+  const bodyContent = redraw ? (
+    <Loader />
+  ) : success ? (
+    <SuccessAlert dismissible={false} timeout={0}>
+      <p className="p-0">
+        The storage {addResult?.data?.storage?.name} has been succesfully{" "}
+        {storageId ? "updated" : "added"}.
+      </p>
+    </SuccessAlert>
+  ) : schemaIsFetching || !schema ? (
+    <Loader />
+  ) : schemaError ? (
+    <RtkOrNotebooksError error={schemaError} />
+  ) : (
+    <AddOrEditCloudStorage
+      schema={schema}
+      setState={setStateSafe}
+      setStorage={setStorageDetailsSafe}
+      state={state}
+      storage={storageDetails}
+    />
+  );
+
+  return (
+    <Modal
+      backdrop="static"
+      centered
+      className={styles.modal}
+      data-cy="cloud-storage-edit-modal"
+      fullscreen="lg"
+      id={currentStorage?.storage.storage_id ?? "new-cloud-storage"}
+      isOpen={isOpen}
+      scrollable
+      size="lg"
+      unmountOnClose={false}
+      toggle={toggle}
+    >
+      <ModalHeader toggle={toggle} data-cy="cloud-storage-edit-header">
+        <CloudFill className={cx("bi", "me-2")} />
+        {storageId ? "Edit" : "Add"} Cloud Storage
+      </ModalHeader>
+
+      <ModalBody data-cy="cloud-storage-edit-body">{bodyContent}</ModalBody>
+
+      <ModalFooter data-cy="cloud-storage-edit-footer">
+        {errorMessage}
+        {resetButton}
+        {backButton}
+        {continueButton}
+      </ModalFooter>
+    </Modal>
+  );
+}
diff --git a/client/src/features/project/projectCloudStorage.api.ts b/client/src/features/project/components/cloudStorage/projectCloudStorage.api.ts
similarity index 93%
rename from client/src/features/project/projectCloudStorage.api.ts
rename to client/src/features/project/components/cloudStorage/projectCloudStorage.api.ts
index ef1cb79ea5..4c7f01be70 100644
--- a/client/src/features/project/projectCloudStorage.api.ts
+++ b/client/src/features/project/components/cloudStorage/projectCloudStorage.api.ts
@@ -21,6 +21,7 @@ import { sortBy } from "lodash";
 import {
   AddCloudStorageForProjectParams,
   CloudStorage,
+  CloudStorageSchema,
   DeleteCloudStorageParams,
   GetCloudStorageForProjectParams,
   UpdateCloudStorageParams,
@@ -107,6 +108,14 @@ const projectCloudStorageApi = createApi({
         };
       },
     }),
+    getCloudStorageSchema: builder.query<CloudStorageSchema[], void>({
+      query: () => {
+        return {
+          method: "GET",
+          url: "storage_schema",
+        };
+      },
+    }),
   }),
 });
 export default projectCloudStorageApi;
@@ -117,4 +126,5 @@ export const {
   useUpdateCloudStorageMutation,
   useDeleteCloudStorageMutation,
   useValidateCloudStorageConfigurationMutation,
+  useGetCloudStorageSchemaQuery,
 } = projectCloudStorageApi;
diff --git a/client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts b/client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts
new file mode 100644
index 0000000000..1a0b1af051
--- /dev/null
+++ b/client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts
@@ -0,0 +1,113 @@
+/*!
+ * Copyright 2023 - 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 {
+  AddCloudStorageState,
+  CloudStorageDetails,
+  CloudStorageOverride,
+  CloudStorageSchemaOptions,
+} from "./projectCloudStorage.types";
+
+export const CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN = "<sensitive>";
+
+export const CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER =
+  "[example]\ntype = s3\nprovider = AWS\nregion = us-east-1";
+
+export const CLOUD_STORAGE_OVERRIDE = {
+  storage: {
+    s3: {
+      description:
+        "Amazon S3 Compliant Storage Providers including AWS, CloudFlare, DigitalOcean and many others",
+      position: 1,
+      providers: {
+        AWS: {
+          position: 1,
+        },
+      },
+    },
+    drive: {
+      position: 2,
+    },
+    webdav: {
+      position: 3,
+    },
+    azureblob: {
+      position: 4,
+    },
+  } as Record<string, Partial<CloudStorageOverride>>,
+};
+
+export const CLOUD_OPTIONS_OVERRIDE = {
+  s3: {
+    env_auth: { hide: true }, // ? uses the ENV variables
+    location_constraint: { hide: true }, // ? only for creating buckets
+    acl: { advanced: true },
+    server_side_encryption: { advanced: true },
+    sse_kms_key_id: { advanced: true },
+    storage_class: { advanced: true },
+    access_key_id: { friendlyName: "Access Key ID" },
+    secret_access_key: { friendlyName: "Secret Access Key (password)" },
+    region: { friendlyName: "Region" },
+    endpoint: {
+      friendlyName: "Endpoint",
+      help: "Endpoint for S3 API. You should leave this blank if you entered the region already.",
+    },
+  },
+} as Record<string, Record<string, Partial<CloudStorageSchemaOptions>>>;
+
+export const CLOUD_STORAGE_MOUNT_PATH_HELP = {
+  s3: {
+    help:
+      "For S3, this is usually your remote bucket name as specified in the cloud service you are using. " +
+      "You can also mount a sub-folder by appending it to the bucket name with a slash, e.g. `my-bucket/sub-folder`.",
+    placeholder: "remote-bucket-name/optional-sub-folder(s)",
+  },
+  generic: {
+    help:
+      "You can leave this blank to mount the default root or specify a folder. Depending on the cloud storage " +
+      "provider, you should be able to specify stub-folder if you wish.",
+    placeholder: "'/' or 'optional-sub-folder(s)/'",
+  },
+} as Record<string, Record<"help" | "placeholder", string>>;
+
+export const CLOUD_STORAGE_SCHEMA_SHORTLIST = ["s3", "webdav", "azureblob"];
+
+export const CLOUD_STORAGE_PROVIDERS_SHORTLIST = {
+  s3: ["AWS", "GCS", "Switch"],
+} as Record<string, string[]>;
+
+export const CLOUD_STORAGE_TOTAL_STEPS = 3;
+
+export const EMPTY_CLOUD_STORAGE_STATE: AddCloudStorageState = {
+  step: 1,
+  completedSteps: 0,
+  advancedMode: false,
+  showAllSchema: false,
+  showAllProviders: false,
+  showAllOptions: false,
+};
+
+export const EMPTY_CLOUD_STORAGE_DETAILS: CloudStorageDetails = {
+  schema: undefined,
+  provider: undefined,
+  options: undefined,
+  name: undefined,
+  sourcePath: undefined,
+  mountPoint: undefined,
+  readOnly: undefined,
+};
diff --git a/client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts b/client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts
new file mode 100644
index 0000000000..95d07be07c
--- /dev/null
+++ b/client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts
@@ -0,0 +1,154 @@
+/*!
+ * Copyright 2023 - 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.
+ */
+
+export interface CloudStorage {
+  storage: CloudStorageConfiguration;
+  sensitive_fields?: CloudStorageSensitiveFieldDefinition[];
+}
+
+export interface CloudStorageConfiguration {
+  configuration: CloudStorageDetailsOptions;
+  name: string;
+  private: boolean;
+  project_id: string;
+  readonly: boolean;
+  source_path: string;
+  storage_id: string;
+  storage_type: string; // This is duplicated in configuration.type
+  target_path: string;
+}
+
+export interface CloudStorageSensitiveFieldDefinition {
+  help: string;
+  name: string;
+}
+
+export interface CloudStorageCredential
+  extends CloudStorageSensitiveFieldDefinition {
+  requiredCredential: boolean;
+}
+
+export interface GetCloudStorageForProjectParams {
+  project_id: string;
+}
+
+export interface AddCloudStorageForProjectParams {
+  configuration?: CloudStorageDetailsOptions;
+  name: string;
+  private: boolean;
+  project_id: string;
+  readonly: boolean;
+  source_path: string;
+  target_path: string;
+}
+
+export interface UpdateCloudStorageParams {
+  configuration?: CloudStorageDetailsOptions;
+  name?: string;
+  project_id: string;
+  readonly?: boolean;
+  storage_id: string;
+  source_path?: string;
+  target_path?: string;
+}
+
+export interface DeleteCloudStorageParams {
+  project_id: string;
+  storage_id: string;
+}
+
+export interface ValidateCloudStorageConfigurationParams {
+  configuration: Record<string, string | undefined>;
+}
+
+export type CloudStorageOptionTypes =
+  | "string"
+  | "boolean"
+  | "number"
+  | "secret";
+
+export interface CloudStorageSchemaOptions {
+  name: string;
+  help: string;
+  provider: string;
+  default: number | string | boolean;
+  default_str: string;
+  value: null | number | string | boolean;
+  examples: [
+    {
+      value: string; // ? Potential value for the option
+      help: string; // ? Help text for the _value_
+      provider: string; // ? empty for "all providers"
+    }
+  ];
+  required: boolean;
+  ispassword: boolean; // eslint-disable-line spellcheck/spell-checker
+  sensitive: boolean; // ? The service doesn't store it -- "more" sensitive? 😁
+  advanced: boolean; // ? Only shown when advanced options are enabled
+  exclusive: boolean; // ? Only one of the examples can be used when this is true
+  datatype: string;
+  type: string;
+  hide: boolean | number;
+  convertedType?: CloudStorageOptionTypes;
+  convertedDefault?: number | string | boolean;
+  convertedHide?: boolean;
+  friendlyName?: string;
+}
+
+export interface CloudStorageSchema {
+  name: string;
+  description: string;
+  prefix: string; // ? weird naming; it's the machine readable name
+  position?: number;
+  options: CloudStorageSchemaOptions[];
+}
+
+export interface CloudStorageOverride extends CloudStorageSchema {
+  providers: Record<string, Partial<CloudStorageProvider>>;
+}
+
+export interface CloudStorageProvider {
+  name: string;
+  description: string;
+  position?: number;
+}
+
+export type AddCloudStorageState = {
+  step: number;
+  completedSteps: number;
+  advancedMode: boolean;
+  showAllSchema: boolean;
+  showAllProviders: boolean;
+  showAllOptions: boolean;
+};
+
+export type CloudStorageDetailsOptions = Record<
+  string,
+  string | number | boolean | undefined
+>;
+
+export type CloudStorageDetails = {
+  storageId?: string;
+  schema?: string;
+  provider?: string;
+  options?: CloudStorageDetailsOptions;
+  name?: string;
+  sourcePath?: string;
+  mountPoint?: string;
+  readOnly?: boolean;
+};
diff --git a/client/src/features/project/projectCloudStorage.constants.ts b/client/src/features/project/projectCloudStorage.constants.ts
deleted file mode 100644
index 0a13958c25..0000000000
--- a/client/src/features/project/projectCloudStorage.constants.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * Copyright 2023 - 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.
- */
-
-export const CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN = "<sensitive>";
-
-export const CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER =
-  "[example]\ntype = s3\nprovider = AWS\nregion = us-east-1";
diff --git a/client/src/features/project/projectCloudStorage.types.ts b/client/src/features/project/projectCloudStorage.types.ts
deleted file mode 100644
index 5e0e52e986..0000000000
--- a/client/src/features/project/projectCloudStorage.types.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*!
- * Copyright 2023 - 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.
- */
-
-export interface CloudStorage {
-  storage: CloudStorageConfiguration;
-  sensitive_fields?: CloudStorageSensitiveFieldDefinition[];
-}
-
-export interface CloudStorageConfiguration {
-  configuration: Record<string, string | undefined>;
-  name: string;
-  private: boolean;
-  project_id: string;
-  readonly: boolean;
-  source_path: string;
-  storage_id: string;
-  storage_type: string;
-  target_path: string;
-}
-
-export interface CloudStorageSensitiveFieldDefinition {
-  help: string;
-  name: string;
-}
-
-export interface CloudStorageCredential
-  extends CloudStorageSensitiveFieldDefinition {
-  requiredCredential: boolean;
-}
-
-export interface GetCloudStorageForProjectParams {
-  project_id: string;
-}
-
-export type AddCloudStorageForProjectParams =
-  | AdvancedAddCloudStorageForProjectParams
-  | SimpleAddCloudStorageForProjectParams;
-
-export interface AdvancedAddCloudStorageForProjectParams {
-  configuration: Record<string, string | undefined>;
-  name: string;
-  private: boolean;
-  project_id: string;
-  readonly: boolean;
-  source_path: string;
-  target_path: string;
-}
-
-export interface SimpleAddCloudStorageForProjectParams {
-  name: string;
-  private: boolean;
-  project_id: string;
-  readonly: boolean;
-  storage_url: string;
-  target_path: string;
-}
-
-export interface UpdateCloudStorageParams {
-  configuration?: Record<string, string | null | undefined>;
-  name?: string;
-  private?: boolean;
-  project_id: string;
-  readonly?: boolean;
-  storage_id: string;
-  source_path?: string;
-  target_path?: string;
-}
-
-export interface DeleteCloudStorageParams {
-  project_id: string;
-  storage_id: string;
-}
-
-export interface ValidateCloudStorageConfigurationParams {
-  configuration: Record<string, string | undefined>;
-}
diff --git a/client/src/features/project/utils/projectCloudStorage.utils.ts b/client/src/features/project/utils/projectCloudStorage.utils.ts
index c558ead2cf..c38fcaa84a 100644
--- a/client/src/features/project/utils/projectCloudStorage.utils.ts
+++ b/client/src/features/project/utils/projectCloudStorage.utils.ts
@@ -16,12 +16,26 @@
  * limitations under the License.
  */
 
-import { CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN } from "../projectCloudStorage.constants";
+import {
+  CLOUD_OPTIONS_OVERRIDE,
+  CLOUD_STORAGE_MOUNT_PATH_HELP,
+  CLOUD_STORAGE_OVERRIDE,
+  CLOUD_STORAGE_PROVIDERS_SHORTLIST,
+  CLOUD_STORAGE_SCHEMA_SHORTLIST,
+  CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
+  EMPTY_CLOUD_STORAGE_DETAILS,
+} from "../components/cloudStorage/projectCloudStorage.constants";
 import {
   CloudStorage,
   CloudStorageConfiguration,
   CloudStorageCredential,
-} from "../projectCloudStorage.types";
+  CloudStorageDetails,
+  CloudStorageProvider,
+  CloudStorageSchema,
+  CloudStorageSchemaOptions,
+} from "../components/cloudStorage/projectCloudStorage.types";
+
+const LAST_POSITION = 1000;
 
 export function parseCloudStorageConfiguration(
   formattedConfiguration: string
@@ -49,18 +63,19 @@ export function parseCloudStorageConfiguration(
   );
 }
 
-export function formatCloudStorageConfiguration({
-  configuration,
-  name,
-}: {
-  configuration: Record<string, string | undefined>;
-  name: string;
-}): string {
-  const lines = Object.entries(configuration)
-    .filter(([, value]) => value != null)
-    .map(([key, value]) => `${key} = ${value}`)
-    .join("\n");
-  return `[${name}]\n${lines}\n`;
+export function convertFromAdvancedConfig(
+  storage: CloudStorageDetails
+): string {
+  const values: string[] = [];
+  storage.schema && values.push(`type = ${storage.schema}`);
+  storage.provider && values.push(`provider = ${storage.provider}`);
+  if (storage.options) {
+    Object.entries(storage.options).forEach(([key, value]) => {
+      if (value != undefined && value !== "") values.push(`${key} = ${value}`);
+    });
+  }
+  if (storage.name) values.unshift(`[${storage.name}]`);
+  return values.length ? values.join("\n") + "\n" : "";
 }
 
 export function getCredentialFieldDefinitions(
@@ -85,3 +100,279 @@ export function getProvidedSensitiveFields(
     .filter(([, value]) => value === CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN)
     .map(([key]) => key);
 }
+
+export function getSchemaStorage(
+  schema: CloudStorageSchema[],
+  shortList = false,
+  currentSchema?: string
+): CloudStorageSchema[] {
+  const finalStorage = schema.reduce<CloudStorageSchema[]>(
+    (current, element) => {
+      if (
+        shortList &&
+        !CLOUD_STORAGE_SCHEMA_SHORTLIST.includes(element.prefix) &&
+        element.prefix !== currentSchema
+      )
+        return current;
+      if (
+        Object.keys(CLOUD_STORAGE_OVERRIDE.storage).includes(element.prefix)
+      ) {
+        const override = CLOUD_STORAGE_OVERRIDE.storage[element.prefix];
+        current.push({
+          ...element,
+          name: override.name ?? element.name,
+          description: override.description ?? element.description,
+          position: override.position ?? element.position,
+        });
+      } else {
+        current.push(element);
+      }
+      return current;
+    },
+    []
+  );
+  return finalStorage.sort(
+    (a, b) => (a.position ?? LAST_POSITION) - (b.position ?? LAST_POSITION)
+  );
+}
+
+export function getSchemaProviders(
+  schema: CloudStorageSchema[],
+  shortList = false,
+  targetSchema?: string,
+  currentProvider?: string
+): CloudStorageProvider[] | undefined {
+  if (!targetSchema) return;
+  const storage = schema.find((s) => s.prefix === targetSchema);
+  if (!storage) return;
+  const providers = storage.options.find((o) => o.name === "provider");
+  if (!providers || !providers.examples || !providers.examples.length) return;
+
+  const providerOverrides = Object.keys(
+    CLOUD_STORAGE_OVERRIDE.storage
+  ).includes(targetSchema)
+    ? CLOUD_STORAGE_OVERRIDE.storage[targetSchema].providers
+    : undefined;
+
+  const finalProviders = providers.examples.reduce<
+    CloudStorageProvider[] | undefined
+  >((current, e) => {
+    if (
+      shortList &&
+      CLOUD_STORAGE_PROVIDERS_SHORTLIST[targetSchema] &&
+      !CLOUD_STORAGE_PROVIDERS_SHORTLIST[targetSchema].includes(e.value) &&
+      e.value !== currentProvider
+    )
+      return current;
+    if (providerOverrides && Object.keys(providerOverrides).includes(e.value)) {
+      const override = providerOverrides[e.value];
+      (current as CloudStorageProvider[]).push({
+        name: override.name ?? e.value,
+        description: override.description ?? e.help,
+        position: override.position ?? undefined,
+      });
+    } else {
+      (current as CloudStorageProvider[]).push({
+        name: e.value,
+        description: e.help,
+        position: undefined,
+      });
+    }
+    return current;
+  }, []);
+
+  if (!finalProviders) return;
+  return finalProviders.sort(
+    (a, b) => (a.position ?? LAST_POSITION) - (b.position ?? LAST_POSITION)
+  );
+}
+
+export function hasProviderShortlist(targetProvider?: string): boolean {
+  if (!targetProvider) return false;
+  if (CLOUD_STORAGE_PROVIDERS_SHORTLIST[targetProvider]) return true;
+  return false;
+}
+
+export function getSchemaOptions(
+  schema: CloudStorageSchema[],
+  shortList = false,
+  targetSchema?: string,
+  targetProvider?: string,
+  flags = { override: true, convertType: true, filterHidden: true }
+): CloudStorageSchemaOptions[] | undefined {
+  if (!targetSchema) return;
+  const storage = schema.find((s) => s.prefix === targetSchema);
+  if (!storage) return;
+
+  const optionsOverridden = flags.override
+    ? storage.options.map((option) => {
+        if (Object.keys(CLOUD_OPTIONS_OVERRIDE).includes(targetSchema)) {
+          const override = CLOUD_OPTIONS_OVERRIDE[targetSchema][option.name]
+            ? CLOUD_OPTIONS_OVERRIDE[targetSchema][option.name]
+            : undefined;
+          if (override) {
+            return {
+              ...option,
+              ...override,
+            };
+          }
+        }
+        return option;
+      })
+    : storage.options;
+
+  const optionsFiltered = optionsOverridden.filter((option) => {
+    if (flags.filterHidden) {
+      const shouldHide = !(
+        option.hide === 0 ||
+        option.hide === false ||
+        option.hide == undefined
+      )
+        ? true
+        : false;
+      if (shouldHide) return false;
+    }
+
+    if (!option.name || option.name === "provider") {
+      return false;
+    }
+    if (option.advanced && shortList) {
+      return false;
+    }
+    if (option.provider.startsWith("!")) {
+      if (!targetProvider) {
+        return true;
+      }
+      const providers = option.provider.slice(1).split(",");
+      return !providers.includes(targetProvider);
+    }
+    if (option.provider) {
+      if (!targetProvider) {
+        return false;
+      }
+      const providers = option.provider.split(",");
+      return providers.includes(targetProvider);
+    }
+    return true;
+  });
+
+  if (!optionsFiltered.length) return;
+
+  const convertedOptions = flags.convertType
+    ? optionsFiltered.map((option) => {
+        const convertedOption = { ...option };
+
+        // make "hide" a boolean
+        convertedOption.convertedHide = !(
+          option.hide === 0 ||
+          option.hide === false ||
+          option.hide == undefined
+        )
+          ? true
+          : false;
+
+        // try to infer the type
+        const optionType = option.type.toString().toLowerCase();
+        // eslint-disable-next-line spellcheck/spell-checker
+        if (option.ispassword || option.sensitive) {
+          convertedOption.convertedType = "secret";
+        } else if (optionType.startsWith("bool")) {
+          convertedOption.convertedType = "boolean";
+        } else if (
+          optionType.startsWith("float") ||
+          optionType.startsWith("int") ||
+          optionType.startsWith("number") ||
+          optionType === "duration" ||
+          optionType === "sizesuffix" || // eslint-disable-line spellcheck/spell-checker
+          optionType === "multiencoder" // eslint-disable-line spellcheck/spell-checker
+        ) {
+          convertedOption.convertedType = "number";
+        } else {
+          convertedOption.convertedType = "string";
+        }
+
+        // type conversion is scary; for the default and value, we _try_ to convert it
+        // TODO: we should consider using "example" as enum, but that might turn out to be a bad idea
+        try {
+          if (option.default != undefined && option.default !== "") {
+            if (convertedOption.convertedType === "number")
+              convertedOption.convertedDefault = parseFloat(
+                option.default.toString()
+              );
+            else if (convertedOption.convertedType === "boolean")
+              convertedOption.convertedDefault =
+                option.default.toString().toLowerCase() === "true";
+            else if (option.default.toString() !== "[object Object]")
+              convertedOption.convertedDefault = option.default.toString();
+          } else if (option.value != undefined && option.value !== "") {
+            if (convertedOption.convertedType === "number")
+              convertedOption.convertedDefault = parseFloat(
+                option.value.toString()
+              );
+            else if (convertedOption.convertedType === "boolean")
+              convertedOption.convertedDefault =
+                option.value.toString().toLowerCase() === "true";
+            else if (option.value.toString() !== "[object Object]")
+              convertedOption.convertedDefault = option.value.toString();
+          }
+        } catch (e) {
+          convertedOption.convertedDefault = undefined;
+        }
+
+        return convertedOption;
+      })
+    : optionsFiltered;
+
+  return convertedOptions;
+}
+
+export function getSourcePathHint(
+  targetSchema = ""
+): Record<"help" | "placeholder", string> {
+  const initialText = "Source path to mount. ";
+  const helpData =
+    CLOUD_STORAGE_MOUNT_PATH_HELP[targetSchema] ??
+    CLOUD_STORAGE_MOUNT_PATH_HELP["generic"];
+  const finalText = initialText + helpData.help;
+  return {
+    help: finalText,
+    placeholder: helpData.placeholder,
+  };
+}
+
+export function getCurrentStorageDetails(
+  existingCloudStorage?: CloudStorage | null
+): CloudStorageDetails {
+  if (!existingCloudStorage) {
+    return EMPTY_CLOUD_STORAGE_DETAILS;
+  }
+  const configurationOptions = existingCloudStorage.storage.configuration
+    ? existingCloudStorage.storage.configuration
+    : {};
+  const { type, provider, ...options } = configurationOptions; // eslint-disable-line @typescript-eslint/no-unused-vars
+  const storageDetails: CloudStorageDetails = {
+    storageId: existingCloudStorage.storage.storage_id,
+    schema: existingCloudStorage.storage.configuration.type as string,
+    name: existingCloudStorage.storage.name,
+    mountPoint: existingCloudStorage.storage.target_path,
+    sourcePath: existingCloudStorage.storage.source_path,
+    readOnly: existingCloudStorage.storage.readonly,
+    provider: existingCloudStorage.storage.configuration.provider
+      ? (existingCloudStorage.storage.configuration.provider as string)
+      : undefined,
+    options,
+  };
+
+  return storageDetails;
+}
+
+export function findSensitive(
+  schema: CloudStorageSchema | undefined
+): string[] {
+  if (!schema) return [];
+  return schema.options
+    ? schema.options
+        .filter((o) => o.ispassword || o.sensitive) // eslint-disable-line spellcheck/spell-checker
+        .map((o) => o.name)
+    : [];
+}
diff --git a/client/src/features/session/components/StartNewSession.tsx b/client/src/features/session/components/StartNewSession.tsx
index b2657b49ea..fdb0226555 100644
--- a/client/src/features/session/components/StartNewSession.tsx
+++ b/client/src/features/session/components/StartNewSession.tsx
@@ -763,7 +763,8 @@ function StartSessionButton() {
         <div className={cx("text-danger", "pb-2")}>
           <FontAwesomeIcon className="me-1" icon={faExclamationTriangle} />
           Please provide credentials for the following cloud storage
-          {missingCredentialsStorage.length > 1 && "s"}:{" "}
+          {missingCredentialsStorage.length > 1 && "s"} or disable{" "}
+          {missingCredentialsStorage.length > 1 ? "them" : "it"}:{" "}
           <strong>
             {missingCredentialsStorage.map(({ name }) => name).join(", ")}
           </strong>
diff --git a/client/src/features/session/components/options/AutostartSessionOptions.tsx b/client/src/features/session/components/options/AutostartSessionOptions.tsx
index 30d510d068..a25ffc7eca 100644
--- a/client/src/features/session/components/options/AutostartSessionOptions.tsx
+++ b/client/src/features/session/components/options/AutostartSessionOptions.tsx
@@ -23,7 +23,7 @@ import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../../../../utils/customHooks/useAppSelector.hook";
 import useLegacySelector from "../../../../utils/customHooks/useLegacySelector.hook";
 import { useGetResourcePoolsQuery } from "../../../dataServices/dataServices.api";
-import { useGetCloudStorageForProjectQuery } from "../../../project/projectCloudStorage.api";
+import { useGetCloudStorageForProjectQuery } from "../../../project/components/cloudStorage/projectCloudStorage.api";
 import {
   useGetAllRepositoryBranchesQuery,
   useGetRepositoryCommitsQuery,
@@ -170,10 +170,7 @@ function useAutostartSessionOptions(): void {
         skip:
           !gitLabProjectId ||
           !notebooksVersion ||
-          !(
-            notebooksVersion.cloudStorageEnabled.s3 ||
-            notebooksVersion.cloudStorageEnabled.azureBlob
-          ),
+          !notebooksVersion.cloudStorageEnabled,
       }
     );
 
diff --git a/client/src/features/session/components/options/SessionCloudStorageOption.tsx b/client/src/features/session/components/options/SessionCloudStorageOption.tsx
index 986cd7d4e3..9532287f43 100644
--- a/client/src/features/session/components/options/SessionCloudStorageOption.tsx
+++ b/client/src/features/session/components/options/SessionCloudStorageOption.tsx
@@ -17,43 +17,15 @@
  */
 
 import cx from "classnames";
-import {
-  ChangeEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {
-  CloudFill,
-  ExclamationTriangleFill,
-  EyeFill,
-  EyeSlashFill,
-  InfoCircleFill,
-  PencilSquare,
-  PlusLg,
-  TrashFill,
-  XLg,
-} from "react-bootstrap-icons";
-import { Controller, useForm } from "react-hook-form";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { EyeFill, EyeSlashFill, InfoCircleFill } from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
 import {
   Button,
-  Card,
-  CardBody,
-  Col,
-  Collapse,
   Container,
-  Form,
-  FormText,
   Input,
   InputGroup,
   Label,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
   PopoverBody,
   Row,
   UncontrolledPopover,
@@ -61,38 +33,23 @@ import {
 } from "reactstrap";
 
 import { ACCESS_LEVELS } from "../../../../api-client";
-import { ErrorAlert, InfoAlert } from "../../../../components/Alert";
-import { ExternalLink } from "../../../../components/ExternalLinks";
 import { Loader } from "../../../../components/Loader";
-import { RtkErrorAlert } from "../../../../components/errors/RtkErrorAlert";
-import ChevronFlippedIcon from "../../../../components/icons/ChevronFlippedIcon";
+import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
 import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown";
 import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../../../../utils/customHooks/useAppSelector.hook";
 import useLegacySelector from "../../../../utils/customHooks/useLegacySelector.hook";
 import { Url } from "../../../../utils/helpers/url";
 import { StateModelProject } from "../../../project/Project";
-import {
-  useGetCloudStorageForProjectQuery,
-  useValidateCloudStorageConfigurationMutation,
-} from "../../../project/projectCloudStorage.api";
-import {
-  CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER,
-  CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN,
-} from "../../../project/projectCloudStorage.constants";
-import {
-  formatCloudStorageConfiguration,
-  getProvidedSensitiveFields,
-  parseCloudStorageConfiguration,
-} from "../../../project/utils/projectCloudStorage.utils";
 import { useGetNotebooksVersionQuery } from "../../../versions/versions.api";
 import { SessionCloudStorage } from "../../startSessionOptions.types";
 import {
-  addCloudStorageItem,
-  removeCloudStorageItem,
   setCloudStorage,
   updateCloudStorageItem,
 } from "../../startSessionOptionsSlice";
+import CloudStorageItem from "../../../project/components/cloudStorage/CloudStorageItem";
+import { useGetCloudStorageForProjectQuery } from "../../../project/components/cloudStorage/projectCloudStorage.api";
+import { CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN } from "../../../project/components/cloudStorage/projectCloudStorage.constants";
 
 export default function SessionCloudStorageOption() {
   const { data: notebooksVersion, isLoading } = useGetNotebooksVersionQuery();
@@ -108,17 +65,16 @@ export default function SessionCloudStorageOption() {
     );
   }
 
-  return notebooksVersion?.cloudStorageEnabled.s3 ||
-    notebooksVersion?.cloudStorageEnabled.azureBlob ? (
+  return notebooksVersion?.cloudStorageEnabled ? (
     <SessionS3CloudStorageOption />
   ) : null;
 }
 
 function SessionS3CloudStorageOption() {
-  const { namespace, path } = useLegacySelector<StateModelProject["metadata"]>(
-    (state) => state.stateModel.project.metadata
-  );
-
+  const { accessLevel, namespace, path } = useLegacySelector<
+    StateModelProject["metadata"]
+  >((state) => state.stateModel.project.metadata);
+  const devAccess = accessLevel >= ACCESS_LEVELS.DEVELOPER;
   const settingsStorageUrl = Url.get(Url.pages.project.settings.storage, {
     namespace,
     path,
@@ -127,33 +83,29 @@ function SessionS3CloudStorageOption() {
   return (
     <div className="field-group">
       <div className="form-label">Cloud Storage</div>
-      <div className={cx("form-text", "mt-0", "mb-1")}>
-        Use data from <S3ExplanationLink /> sources like AWS S3, Google Cloud
-        Storage, etc.
-      </div>
-      <div className={cx("form-text", "mt-0", "mb-1")}>
-        It is recommended to configure cloud storage options from the{" "}
-        <Link to={settingsStorageUrl}>Project&apos;s settings</Link>.
-      </div>
-      <CloudStorageList />
+      {devAccess && (
+        <div className={cx("form-text", "my-1")}>
+          Cloud storage options can be adjusted from the{" "}
+          <Link to={settingsStorageUrl}>Project&apos;s settings</Link>.
+        </div>
+      )}
+      <CloudStorageSection devAccess={devAccess} />
     </div>
   );
 }
 
-function CloudStorageList() {
-  const { accessLevel, id: projectId } = useLegacySelector<
-    StateModelProject["metadata"]
-  >((state) => state.stateModel.project.metadata);
-
-  const devAccess = accessLevel >= ACCESS_LEVELS.DEVELOPER;
-
+interface CloudStorageListProps {
+  devAccess: boolean;
+}
+function CloudStorageSection({ devAccess }: CloudStorageListProps) {
+  const { id: projectId } = useLegacySelector<StateModelProject["metadata"]>(
+    (state) => state.stateModel.project.metadata
+  );
+  const dispatch = useAppDispatch();
   const cloudStorageList = useAppSelector(
     ({ startSessionOptions }) => startSessionOptions.cloudStorage
   );
 
-  const dispatch = useAppDispatch();
-
-  const { data: notebooksVersion } = useGetNotebooksVersionQuery();
   const {
     data: storageForProject,
     error,
@@ -165,11 +117,6 @@ function CloudStorageList() {
     { skip: !devAccess }
   );
 
-  const support = useMemo(
-    () => (notebooksVersion?.cloudStorageEnabled.s3 ? "s3" : "azure"),
-    [notebooksVersion?.cloudStorageEnabled]
-  );
-
   // Populate session cloud storage from project's settings
   useEffect(() => {
     if (storageForProject == null) {
@@ -177,12 +124,7 @@ function CloudStorageList() {
     }
     const initialCloudStorage: SessionCloudStorage[] = storageForProject.map(
       ({ storage, sensitive_fields }) => ({
-        active:
-          (storage.storage_type === "s3" && support === "s3") ||
-          (storage.storage_type === "azureblob" && support === "azure"),
-        supported:
-          (storage.storage_type === "s3" && support === "s3") ||
-          (storage.storage_type === "azureblob" && support === "azure"),
+        active: true,
         ...(sensitive_fields
           ? {
               sensitive_fields: sensitive_fields.map(({ name, ...rest }) => ({
@@ -196,263 +138,151 @@ function CloudStorageList() {
       })
     );
     dispatch(setCloudStorage(initialCloudStorage));
-  }, [dispatch, storageForProject, support]);
-
-  if (isLoading) {
-    return <Loader />;
-  }
-
-  return (
-    <>
-      {error && (
-        <ErrorAlert>
-          <p className="mb-0">
-            Error: could not load this project&apos;s cloud storage settings.
-          </p>
-        </ErrorAlert>
-      )}
-      {cloudStorageList.length > 0 && (
-        <Container className="p-0" fluid>
-          <Row className={cx("row-cols-1", "gy-2")}>
-            {cloudStorageList.map((storage, index) => (
-              <CloudStorageItem
-                index={index}
-                key={`${storage.name}-${index}`}
-                storage={storage}
-              />
-            ))}
-          </Row>
-        </Container>
-      )}
-      <div className="mt-2">
-        <AddTemporaryCloudStorageButton />
-      </div>
-    </>
-  );
-}
-
-interface CloudStorageItemProps {
-  index: number;
-  storage: SessionCloudStorage;
-}
+  }, [dispatch, storageForProject]);
 
-function CloudStorageItem({ index, storage }: CloudStorageItemProps) {
-  const {
-    active,
-    configuration,
-    name,
-    sensitive_fields,
-    supported,
-    target_path,
-  } = storage;
-
-  const providedSensitiveFields = useMemo(
-    () => getProvidedSensitiveFields(configuration),
-    [configuration]
-  );
-  const requiredSensitiveFields = useMemo(
-    () =>
-      sensitive_fields?.filter(({ name }) =>
-        providedSensitiveFields.includes(name)
-      ),
-    [providedSensitiveFields, sensitive_fields]
-  );
+  if (isLoading) return <Loader />;
 
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = useCallback(() => {
-    setIsOpen((isOpen) => !isOpen);
-  }, []);
+  if (error) {
+    return <RtkOrNotebooksError error={error} />;
+  }
 
-  const dispatch = useAppDispatch();
+  if (!cloudStorageList || cloudStorageList.length === 0) {
+    return (
+      <p className={cx("mb-1", "form-text")}>
+        No cloud storage configured for this project
+        {devAccess
+          ? ""
+          : ". Only developers can add a new one; you can fork the project if you wish to attach a storage"}
+        .
+      </p>
+    );
+  }
 
-  const onToggleActive = useCallback(() => {
-    dispatch(
-      updateCloudStorageItem({
-        index,
-        storage: { ...storage, active: !storage.active },
-      })
+  const storageList = cloudStorageList.map((storage, index) => {
+    const { active, sensitive_fields, ...unsafeStorageProps } = storage;
+    const { configuration, ...otherStorageProps } = unsafeStorageProps;
+
+    const safeConfiguration = Object.fromEntries(
+      Object.entries(configuration).map(([key, value]) => [
+        key,
+        sensitive_fields && sensitive_fields.find((f) => f.name === key)
+          ? CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN
+          : value,
+      ])
     );
-  }, [dispatch, index, storage]);
-  const onChangeCredential = useCallback(
-    (fieldIndex: number) => (event: ChangeEvent<HTMLInputElement>) => {
-      if (sensitive_fields == null) {
-        return;
-      }
 
-      const name = sensitive_fields[fieldIndex].name;
-      const value = event.target.value;
-      const newSensitiveFields = [...sensitive_fields];
-      newSensitiveFields.splice(fieldIndex, 1, {
-        ...sensitive_fields[fieldIndex],
-        name,
-        value,
-      });
+    const storageDefinition = {
+      storage: { configuration: safeConfiguration, ...otherStorageProps },
+      sensitive_fields: storage.sensitive_fields,
+    };
+    const localId = `cloud-storage-${storage.name}`;
+
+    const onToggleActive = () =>
       dispatch(
         updateCloudStorageItem({
           index,
-          storage: {
-            ...storage,
-            sensitive_fields: newSensitiveFields,
-          },
+          storage: { ...storage, active: !storage.active },
         })
       );
-    },
-    [dispatch, index, sensitive_fields, storage]
-  );
-  const onRemoveItem = useCallback(() => {
-    dispatch(removeCloudStorageItem({ index: index }));
-  }, [dispatch, index]);
 
-  return (
-    <Col>
-      <Card>
-        <CardBody className={cx("pb-2", "d-flex", "align-items-center")}>
-          <div>
-            <Input
-              className="form-check-input"
-              checked={active}
-              disabled={!supported}
-              id="cloudStorageItemActive"
-              onChange={onToggleActive}
-              type="checkbox"
-            />
-            <Label className="visually-hidden" for="cloudStorageItemActive">
-              Mount in this session
-            </Label>
-          </div>
-          <h3
-            className={cx(
-              "fs-6",
-              "fw-bold",
-              "m-0",
-              "ms-2",
-              !active && ["text-decoration-line-through", "text-rk-text-light"]
-            )}
-          >
-            {name}
-            {storage.storage_id == null && (
-              <>
-                {" "}
-                <span
-                  className={cx(
-                    "fst-italic",
-                    "fw-normal",
-                    "text-rk-text-light"
-                  )}
-                >
-                  (temporary)
-                </span>
-              </>
-            )}
-          </h3>
-          <div className={cx("small", "d-none", "d-sm-block", "ms-3")}>
-            <span className="text-rk-text-light">Mount point: </span>
-            {active ? (
-              <span>{target_path}</span>
-            ) : (
-              <span className="fst-italic">Not mounted</span>
-            )}
-          </div>
-          {storage.storage_id == null && (
-            <div className="ms-auto">
-              <Button
-                className={cx(
-                  "btn-sm",
-                  "bg-transparent",
-                  "border-0",
-                  "text-danger",
-                  "p-0"
-                )}
-                onClick={onRemoveItem}
-              >
-                <TrashFill />
-              </Button>
-            </div>
-          )}
-        </CardBody>
+    const changeCredential = (name: string, value: string) => {
+      if (sensitive_fields) {
+        const fieldIndex = sensitive_fields.findIndex((f) => f.name === name);
+        const newSensitiveFields = [...sensitive_fields];
+        newSensitiveFields.splice(fieldIndex, 1, {
+          ...sensitive_fields[fieldIndex],
+          name,
+          value,
+        });
+
+        dispatch(
+          updateCloudStorageItem({
+            index,
+            storage: {
+              ...storage,
+              configuration: {
+                ...storage.configuration,
+                [name]: value,
+              },
+              sensitive_fields: newSensitiveFields,
+            },
+          })
+        );
+      }
+    };
 
-        {!supported && (
-          <CardBody className="py-0">
-            <p className={cx("form-text", "text-danger", "mt-0", "mb-1")}>
-              <ExclamationTriangleFill className={cx("bi", "me-1")} />
-              This cloud storage configuration is currently not supported.
-            </p>
-          </CardBody>
-        )}
+    const sensitiveFields =
+      storage.sensitive_fields && storage.sensitive_fields.length
+        ? storage.sensitive_fields.filter((f) => {
+            if (Object.keys(storage.configuration).find((c) => c === f.name)) {
+              return true;
+            }
+          })
+        : null;
+
+    const requiredSensitiveFields =
+      sensitiveFields && sensitiveFields.length ? (
+        <div>
+          <p className={cx("form-text", "mt-2", "mb-1")}>
+            Please fill in the credentials required to use this cloud storage
+          </p>
+          {sensitiveFields.map((item, fieldIndex) => (
+            <CredentialField
+              key={`${item.name}-${fieldIndex}`}
+              active={active}
+              item={item}
+              changeCredential={changeCredential}
+            />
+          ))}
+        </div>
+      ) : null;
 
-        {supported &&
-          requiredSensitiveFields != null &&
-          requiredSensitiveFields.length > 0 && (
-            <CardBody className="py-0">
-              <h5 className={cx("fs-6", "m-0")}>Credentials</h5>
-              <p className={cx("form-text", "mt-0", "mb-1")}>
-                Please fill in the credentials required to use this cloud
-                storage
-              </p>
-              {requiredSensitiveFields.map((item, fieldIndex) => (
-                <CredentialField
-                  key={fieldIndex}
-                  active={active}
-                  fieldIndex={fieldIndex}
-                  index={index}
-                  item={item}
-                  onChangeCredential={onChangeCredential}
-                />
-              ))}
-            </CardBody>
-          )}
+    return (
+      <CloudStorageItem
+        devAccess={devAccess}
+        disabled={!active}
+        key={storage.name}
+        noEdit={true}
+        storageDefinition={storageDefinition}
+      >
+        <div>
+          <Input
+            className={cx("form-check-input", "me-2")}
+            checked={active}
+            id={`${localId}-active`}
+            onChange={onToggleActive}
+            type="checkbox"
+          />
+          <Label for={`${localId}-active`}>
+            Mount the storage in this session
+          </Label>
+        </div>
+        {requiredSensitiveFields}
+      </CloudStorageItem>
+    );
+  });
 
-        <CardBody className="p-0">
-          <button
-            className={cx(
-              "d-flex",
-              "align-items-center",
-              "w-100",
-              "p-3",
-              "py-2",
-              "bg-transparent",
-              "border-0",
-              "border-top"
-            )}
-            onClick={toggle}
-            type="button"
-          >
-            <div>More details</div>
-            <div className="ms-auto">
-              <ChevronFlippedIcon flipped={isOpen} />
-            </div>
-          </button>
-        </CardBody>
-        <Collapse isOpen={isOpen}>
-          <CardBody className="pt-0">
-            <CloudStorageDetails index={index} storage={storage} />
-          </CardBody>
-        </Collapse>
-      </Card>
-    </Col>
+  return (
+    <Container className={cx("p-0", "mt-2")} fluid>
+      <Row className={cx("row-cols-1", "gy-2")}>{storageList}</Row>
+    </Container>
   );
 }
 
 interface CredentialFieldProps {
   active: boolean;
-  fieldIndex: number;
-  index: number;
   item: {
     name: string;
     help: string;
     value: string;
   };
-  onChangeCredential: (
-    fieldIndex: number
-  ) => (event: ChangeEvent<HTMLInputElement>) => void;
+  changeCredential: (name: string, value: string) => void;
 }
 
 function CredentialField({
   active,
-  fieldIndex,
-  index,
   item,
-  onChangeCredential,
+  changeCredential,
 }: CredentialFieldProps) {
   const [showPassword, setShowPassword] = useState(false);
   const onToggleVisibility = useCallback(() => {
@@ -465,7 +295,7 @@ function CredentialField({
 
   return (
     <div className="mb-3">
-      <Label className="form-label" for={`credentials-${index}-${item.name}`}>
+      <Label className="form-label" for={`credentials-${item.name}`}>
         {item.name}
         <span className={cx("fw-bold", "text-danger")}>*</span>
         <CredentialMoreInfo help={item.help} />
@@ -478,10 +308,10 @@ function CredentialField({
             !item.value && active && "is-invalid"
           )}
           disabled={!active}
-          id={`credentials-${index}-${item.name}`}
+          id={`credentials-${item.name}`}
           type={showPassword ? "text" : "password"}
           value={item.value}
-          onChange={onChangeCredential(fieldIndex)}
+          onChange={(e) => changeCredential(item.name, e.target.value)}
         />
         <Button
           className="rounded-end"
@@ -519,513 +349,3 @@ function CredentialMoreInfo({ help }: { help: string }) {
     </>
   );
 }
-
-function CloudStorageDetails({ index, storage }: CloudStorageItemProps) {
-  const { namespace, path } = useLegacySelector<StateModelProject["metadata"]>(
-    (state) => state.stateModel.project.metadata
-  );
-
-  const settingsStorageUrl = Url.get(Url.pages.project.settings.storage, {
-    namespace,
-    path,
-  });
-
-  const { configuration, name, readonly, source_path, target_path } = storage;
-
-  const providedSensitiveFields = useMemo(
-    () => getProvidedSensitiveFields(configuration),
-    [configuration]
-  );
-  const requiredSensitiveFields = useMemo(
-    () =>
-      storage.sensitive_fields?.filter(({ name }) =>
-        providedSensitiveFields.includes(name)
-      ),
-    [providedSensitiveFields, storage.sensitive_fields]
-  );
-  const configCredentials = (requiredSensitiveFields ?? []).reduce(
-    (prev, { name, value }) => ({ ...prev, [name]: value }),
-    {} as Record<string, string>
-  );
-  const configWithCredentials = { ...configuration, ...configCredentials };
-  const configContent = formatCloudStorageConfiguration({
-    configuration: configWithCredentials,
-    name,
-  });
-
-  const dispatch = useAppDispatch();
-
-  const onChangeSourcePath = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
-      dispatch(
-        updateCloudStorageItem({
-          index,
-          storage: { ...storage, source_path: value },
-        })
-      );
-    },
-    [dispatch, index, storage]
-  );
-  const onChangeTargetPath = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
-      dispatch(
-        updateCloudStorageItem({
-          index,
-          storage: { ...storage, target_path: value },
-        })
-      );
-    },
-    [dispatch, index, storage]
-  );
-  const onChangeReadWriteMode = useCallback(() => {
-    dispatch(
-      updateCloudStorageItem({
-        index,
-        storage: { ...storage, readonly: !storage.readonly },
-      })
-    );
-  }, [dispatch, index, storage]);
-
-  const [tempConfigContent, setTempConfigContent] = useState(configContent);
-  const onChangeConfiguration = useCallback(
-    (event: ChangeEvent<HTMLTextAreaElement>) => {
-      setTempConfigContent(event.target.value);
-    },
-    []
-  );
-  const onUpdateConfiguration = useCallback(() => {
-    const parsedConfiguration =
-      parseCloudStorageConfiguration(tempConfigContent);
-
-    const sensitiveFieldKeys =
-      storage.sensitive_fields?.map(({ name }) => name) ?? [];
-
-    const updatedExistingConfiguration = Object.keys(configuration)
-      .flatMap((key) =>
-        sensitiveFieldKeys.includes(key)
-          ? [[key, CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN] as const]
-          : parsedConfiguration[key] != null
-          ? [[key, parsedConfiguration[key]] as const]
-          : []
-      )
-      .reduce(
-        (obj, [key, value]) => ({ ...obj, [key]: value }),
-        {} as Record<string, string>
-      );
-    const updatedNewConfiguration = Object.entries(parsedConfiguration)
-      .filter(([key]) => !Object.keys(updateCloudStorageItem).includes(key))
-      .map(([key, value]) =>
-        sensitiveFieldKeys.includes(key)
-          ? ([key, CLOUD_STORAGE_SENSITIVE_FIELD_TOKEN] as const)
-          : ([key, value] as const)
-      )
-      .reduce(
-        (obj, [key, value]) => ({ ...obj, [key]: value }),
-        {} as Record<string, string>
-      );
-
-    const updatedSensitiveFields = storage.sensitive_fields?.map(
-      ({ name, help }) =>
-        parsedConfiguration[name] != null
-          ? { name, help, value: parsedConfiguration[name] }
-          : { name, help, value: "" }
-    );
-
-    dispatch(
-      updateCloudStorageItem({
-        index,
-        storage: {
-          ...storage,
-          configuration: {
-            ...updatedExistingConfiguration,
-            ...updatedNewConfiguration,
-          },
-          sensitive_fields: updatedSensitiveFields,
-        },
-      })
-    );
-  }, [configuration, dispatch, index, storage, tempConfigContent]);
-
-  useEffect(() => {
-    setTempConfigContent(configContent);
-  }, [configContent]);
-
-  return (
-    <div className="form-rk-green">
-      <FormText>
-        Changes made here will apply only for this session. Use the{" "}
-        <Link to={settingsStorageUrl}>project&apos;s settings</Link> to
-        permanently change cloud storage settings.
-      </FormText>
-
-      <div className="mb-3">
-        <Label
-          className="form-label"
-          for={`updateCloudStorageSourcePath-${index}`}
-        >
-          Source Path
-        </Label>
-        <Input
-          className="form-control"
-          id={`updateCloudStorageSourcePath-${index}`}
-          placeholder="bucket/folder"
-          type="text"
-          value={source_path}
-          onChange={onChangeSourcePath}
-        />
-      </div>
-
-      <div className="mb-3">
-        <Label
-          className="form-label"
-          for={`updateCloudStorageTargetPath-${index}`}
-        >
-          Mount Point
-        </Label>
-        <Input
-          className="form-control"
-          id={`updateCloudStorageTargetPath-${index}`}
-          placeholder="folder"
-          type="text"
-          value={target_path}
-          onChange={onChangeTargetPath}
-        />
-      </div>
-
-      <div className="mb-3">
-        <Input
-          aria-describedby={`updateCloudStorageReadOnlyHelp-${index}`}
-          className="form-check-input"
-          id={`updateCloudStorageReadOnly-${index}`}
-          type="checkbox"
-          checked={!!readonly}
-          onChange={onChangeReadWriteMode}
-        />
-        <Label
-          className={cx("form-check-label", "ms-2")}
-          for={`updateCloudStorageReadOnly-${index}`}
-        >
-          Read-only
-        </Label>
-        <FormText id={`updateCloudStorageReadOnlyHelp-${index}`} tag="div">
-          Check this box to mount the storage in read-only mode. Use this
-          setting to prevent accidental data modifications.
-        </FormText>
-      </div>
-
-      <div>
-        <Label className="form-label" for={`updateCloudStorageConfig-${index}`}>
-          Configuration
-        </Label>
-        <FormText id={`updateCloudStorageConfigHelp-${index}`} tag="div">
-          You can paste here the output of{" "}
-          <code className="user-select-all">
-            rclone config show &lt;name&gt;
-          </code>
-          .
-        </FormText>
-        <textarea
-          aria-describedby={`updateCloudStorageConfigHelp-${index}`}
-          className="form-control"
-          id={`updateCloudStorageConfig-${index}`}
-          rows={Object.keys(storage.configuration).length + 2}
-          value={tempConfigContent}
-          onChange={onChangeConfiguration}
-        />
-        <div className={cx("d-flex", "justify-content-end", "mt-1")}>
-          <Button
-            className="btn-sm"
-            disabled={configContent === tempConfigContent}
-            type="button"
-            onClick={onUpdateConfiguration}
-          >
-            <PencilSquare className={cx("bi", "me-1")} />
-            Save changes
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function AddTemporaryCloudStorageButton() {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = useCallback(() => {
-    setIsOpen((open) => !open);
-  }, []);
-
-  return (
-    <>
-      <Button className={cx("btn-outline-rk-green")} onClick={toggle}>
-        <PlusLg className={cx("bi", "me-1")} />
-        Add Temporary Cloud Storage
-      </Button>
-      <AddTemporaryCloudStorageModal isOpen={isOpen} toggle={toggle} />
-    </>
-  );
-}
-
-interface AddTemporaryCloudStorageModalProps {
-  isOpen: boolean;
-  toggle: () => void;
-}
-
-function AddTemporaryCloudStorageModal({
-  isOpen,
-  toggle,
-}: AddTemporaryCloudStorageModalProps) {
-  const { namespace, path } = useLegacySelector<StateModelProject["metadata"]>(
-    (state) => state.stateModel.project.metadata
-  );
-
-  const settingsStorageUrl = Url.get(Url.pages.project.settings.storage, {
-    namespace,
-    path,
-  });
-
-  const dispatch = useAppDispatch();
-
-  const [validateCloudStorageConfiguration, result] =
-    useValidateCloudStorageConfigurationMutation();
-
-  const {
-    control,
-    formState: { errors },
-    getValues,
-    handleSubmit,
-    reset,
-  } = useForm<AddTemporaryCloudStorageForm>({
-    defaultValues: {
-      configuration: "",
-      name: "",
-      readonly: false,
-      source_path: "",
-    },
-  });
-  const onSubmit = useCallback(
-    (data: AddTemporaryCloudStorageForm) => {
-      const configuration = parseCloudStorageConfiguration(data.configuration);
-      validateCloudStorageConfiguration({ configuration });
-    },
-    [validateCloudStorageConfiguration]
-  );
-
-  useEffect(() => {
-    if (result.isSuccess) {
-      const data = getValues();
-      const configuration = parseCloudStorageConfiguration(data.configuration);
-      dispatch(
-        addCloudStorageItem({
-          active: true,
-          configuration,
-          name: data.name,
-          private: false,
-          readonly: data.readonly,
-          source_path: data.source_path,
-          storage_id: null,
-          storage_type: "",
-          supported: true,
-          target_path: data.name,
-        })
-      );
-      toggle();
-    }
-  }, [dispatch, getValues, result.isSuccess, toggle]);
-
-  // Reset state when closed
-  useEffect(() => {
-    if (!isOpen) {
-      reset();
-    }
-  }, [isOpen, reset]);
-
-  return (
-    <Modal centered fullscreen="lg" isOpen={isOpen} size="lg" toggle={toggle}>
-      <ModalHeader toggle={toggle}>
-        <CloudFill className={cx("bi", "me-2")} />
-        Add Temporary Cloud Storage
-      </ModalHeader>
-      <ModalBody>
-        <Form
-          className="form-rk-green"
-          noValidate
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          {result.error && <RtkErrorAlert error={result.error} />}
-
-          <InfoAlert timeout={0} dismissible={false}>
-            This cloud storage will be configured for this session only. To
-            configure cloud storage permanently for this project, go to{" "}
-            <Link to={settingsStorageUrl}>Project settings</Link>.
-          </InfoAlert>
-
-          <p className="mb-0">
-            Temporary cloud storage uses <code>rclone</code> configurations to
-            set up cloud storage.
-          </p>
-          <p className="mb-3">
-            Learn more at the{" "}
-            <ExternalLink
-              url="https://rclone.org/"
-              title="rclone documentation"
-              role="link"
-            />
-            .
-          </p>
-
-          <div className="mb-3">
-            <Label className="form-label" for="addCloudStorageName">
-              Name
-            </Label>
-            <FormText id="addCloudStorageNameHelp" tag="div">
-              The name also determines the mount location, though it is possible
-              to change it later.
-            </FormText>
-            <Controller
-              control={control}
-              name="name"
-              render={({ field }) => (
-                <Input
-                  aria-describedby="addCloudStorageNameHelp"
-                  className={cx("form-control", errors.name && "is-invalid")}
-                  id="addCloudStorageName"
-                  placeholder="storage"
-                  type="text"
-                  {...field}
-                />
-              )}
-              rules={{ required: true }}
-            />
-            <div className="invalid-feedback">Please provide a name</div>
-          </div>
-
-          <div className="mb-3">
-            <Controller
-              control={control}
-              name="readonly"
-              render={({ field }) => (
-                <Input
-                  aria-describedby="addCloudStorageReadOnlyHelp"
-                  className="form-check-input"
-                  id="addCloudStorageReadOnly"
-                  type="checkbox"
-                  checked={field.value}
-                  innerRef={field.ref}
-                  onBlur={field.onBlur}
-                  onChange={field.onChange}
-                />
-              )}
-            />
-            <Label
-              className={cx("form-check-label", "ms-2")}
-              for="addCloudStorageReadOnly"
-            >
-              Read-only
-            </Label>
-            <FormText id="addCloudStorageReadOnlyHelp" tag="div">
-              Check this box to mount the storage in read-only mode. Use this
-              setting to prevent accidental data modifications.
-            </FormText>
-          </div>
-
-          <div className="mb-3">
-            <Label className="form-label" for="addCloudStorageSourcePath">
-              Source Path
-            </Label>
-            <Controller
-              control={control}
-              name="source_path"
-              render={({ field }) => (
-                <Input
-                  className={cx(
-                    "form-control",
-                    errors.source_path && "is-invalid"
-                  )}
-                  id="addCloudStorageSourcePath"
-                  placeholder="bucket/folder"
-                  type="text"
-                  {...field}
-                />
-              )}
-              rules={{ required: true }}
-            />
-            <div className="invalid-feedback">
-              Please provide a valid source path
-            </div>
-          </div>
-
-          <div>
-            <Label className="form-label" for="addCloudStorageConfig">
-              Configuration
-            </Label>
-            <FormText id="addCloudStorageConfigHelp" tag="div">
-              You can paste here the output of{" "}
-              <code className="user-select-all">
-                rclone config show &lt;name&gt;
-              </code>
-              .
-            </FormText>
-            <Controller
-              control={control}
-              name="configuration"
-              render={({ field }) => (
-                <textarea
-                  aria-describedby="addCloudStorageConfigHelp"
-                  className={cx(
-                    "form-control",
-                    (errors.configuration || result.isError) && "is-invalid"
-                  )}
-                  id="addCloudStorageConfig"
-                  placeholder={CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER}
-                  rows={10}
-                  {...field}
-                />
-              )}
-              rules={{ required: true }}
-            />
-            <div className="invalid-feedback">
-              Please provide a valid <code>rclone</code> configuration
-            </div>
-          </div>
-        </Form>
-      </ModalBody>
-      <ModalFooter>
-        <Button className="btn-outline-rk-green" onClick={toggle}>
-          <XLg className={cx("bi", "me-1")} />
-          Close
-        </Button>
-        <Button
-          disabled={result.isLoading}
-          onClick={handleSubmit(onSubmit)}
-          type="submit"
-        >
-          {result.isLoading ? (
-            <Loader className="me-1" inline size={16} />
-          ) : (
-            <PlusLg className={cx("bi", "me-1")} />
-          )}
-          Add Temporary Cloud Storage
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
-
-interface AddTemporaryCloudStorageForm {
-  configuration: string;
-  name: string;
-  readonly: boolean;
-  source_path: string;
-}
-
-function S3ExplanationLink() {
-  return (
-    <ExternalLink
-      role="text"
-      title="S3-compatible storage"
-      url="https://en.wikipedia.org/wiki/Amazon_S3#S3_API_and_competing_services"
-    />
-  );
-}
diff --git a/client/src/features/session/hooks/options/useDefaultCloudStorageOption.hook.ts b/client/src/features/session/hooks/options/useDefaultCloudStorageOption.hook.ts
index 25c0143eac..65c1ff1d6a 100644
--- a/client/src/features/session/hooks/options/useDefaultCloudStorageOption.hook.ts
+++ b/client/src/features/session/hooks/options/useDefaultCloudStorageOption.hook.ts
@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook";
-import { CloudStorage } from "../../../project/projectCloudStorage.types";
 import { getProvidedSensitiveFields } from "../../../project/utils/projectCloudStorage.utils";
 import { NotebooksVersion } from "../../../versions/versions.types";
 import { setError } from "../../startSession.slice";
 import { SessionCloudStorage } from "../../startSessionOptions.types";
 import { setCloudStorage } from "../../startSessionOptionsSlice";
+import { CloudStorage } from "../../../project/components/cloudStorage/projectCloudStorage.types";
 
 interface UseDefaultCloudStorageOptionArgs {
   notebooksVersion: NotebooksVersion | undefined;
@@ -36,10 +36,7 @@ export default function useDefaultCloudStorageOption({
 }: UseDefaultCloudStorageOptionArgs): void {
   const dispatch = useAppDispatch();
 
-  const support = useMemo(
-    () => (notebooksVersion?.cloudStorageEnabled.s3 ? "s3" : "azure"),
-    [notebooksVersion?.cloudStorageEnabled]
-  );
+  const supported = !!notebooksVersion?.cloudStorageEnabled;
 
   // Populate session cloud storage from project's settings
   useEffect(() => {
@@ -48,7 +45,7 @@ export default function useDefaultCloudStorageOption({
     }
 
     const initialCloudStorage: SessionCloudStorage[] = storageForProject.map(
-      getInitialCloudStorageItem(support)
+      getInitialCloudStorageItem()
     );
 
     const missingCredentialsStorage = initialCloudStorage
@@ -67,19 +64,14 @@ export default function useDefaultCloudStorageOption({
     }
 
     dispatch(setCloudStorage(initialCloudStorage));
-  }, [dispatch, storageForProject, support]);
+  }, [dispatch, storageForProject, supported]);
 }
 
-function getInitialCloudStorageItem(
-  support: "s3" | "azure"
-): (storageDefinition: CloudStorage) => SessionCloudStorage {
+function getInitialCloudStorageItem(): (
+  storageDefinition: CloudStorage
+) => SessionCloudStorage {
   return ({ storage, sensitive_fields }) => ({
-    active:
-      (storage.storage_type === "s3" && support === "s3") ||
-      (storage.storage_type === "azureblob" && support === "azure"),
-    supported:
-      (storage.storage_type === "s3" && support === "s3") ||
-      (storage.storage_type === "azureblob" && support === "azure"),
+    active: true,
     ...(sensitive_fields
       ? {
           sensitive_fields: sensitive_fields.map(({ name, ...rest }) => ({
diff --git a/client/src/features/session/sessions.api.utils.ts b/client/src/features/session/sessions.api.utils.ts
index 9ee3f6f113..74499adddd 100644
--- a/client/src/features/session/sessions.api.utils.ts
+++ b/client/src/features/session/sessions.api.utils.ts
@@ -22,56 +22,15 @@ import { SessionCloudStorage } from "./startSessionOptions.types";
 export function convertCloudStorageForSessionApi(
   cloudStorage: SessionCloudStorage
 ): CloudStorageDefinitionForSessionApi | null {
-  const {
-    configuration,
+  const { configuration, readonly, source_path, storage_type, target_path } =
+    cloudStorage;
+
+  return {
+    configuration: configuration.type
+      ? configuration
+      : { ...configuration, type: storage_type },
     readonly,
-    sensitive_fields,
     source_path,
-    storage_type,
     target_path,
-  } = cloudStorage;
-
-  if (storage_type === "s3" || configuration["type"] === "s3") {
-    const endpoint =
-      configuration["endpoint"] && configuration["endpoint"].startsWith("http")
-        ? configuration["endpoint"]
-        : configuration["endpoint"]
-        ? `https://${configuration["endpoint"]}`
-        : configuration["region"]
-        ? `https://s3.${configuration["region"]}.amazonaws.com`
-        : "https://s3.amazonaws.com";
-
-    return {
-      configuration: {
-        type: "s3",
-        endpoint,
-        access_key_id: sensitive_fields?.find(
-          ({ name }) => name === "access_key_id"
-        )?.value,
-        secret_access_key: sensitive_fields?.find(
-          ({ name }) => name === "secret_access_key"
-        )?.value,
-      },
-      readonly,
-      source_path,
-      target_path,
-    };
-  }
-
-  if (storage_type === "azureblob" || configuration["type"] === "azureblob") {
-    return {
-      configuration: {
-        type: "azureblob",
-        endpoint: configuration["account"] ?? "",
-        secret_access_key:
-          sensitive_fields?.find(({ name }) => name === "secret_access_key")
-            ?.value ?? "",
-      },
-      readonly,
-      source_path,
-      target_path,
-    };
-  }
-
-  return null;
+  };
 }
diff --git a/client/src/features/session/sessions.types.ts b/client/src/features/session/sessions.types.ts
index 0b3f257f66..facffa9046 100644
--- a/client/src/features/session/sessions.types.ts
+++ b/client/src/features/session/sessions.types.ts
@@ -110,19 +110,17 @@ export interface PatchSessionParams {
 }
 
 export interface CloudStorageDefinitionForSessionApi {
-  configuration:
-    | {
-        type: "s3";
-        endpoint: string;
-        access_key_id?: string;
-        secret_access_key?: string;
-      }
-    | {
-        type: "azureblob";
-        endpoint: string;
-        secret_access_key: string;
-      };
+  configuration: Record<string, boolean | number | string | undefined>;
   readonly: boolean;
   source_path: string;
   target_path: string;
 }
+
+export interface NotebooksErrorContent {
+  code: number;
+  message: string;
+}
+
+export interface NotebooksErrorResponse {
+  error: NotebooksErrorContent;
+}
diff --git a/client/src/features/session/startSessionOptions.types.ts b/client/src/features/session/startSessionOptions.types.ts
index 82408aeb58..dfe0c45b06 100644
--- a/client/src/features/session/startSessionOptions.types.ts
+++ b/client/src/features/session/startSessionOptions.types.ts
@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { CloudStorageConfiguration } from "../project/components/cloudStorage/projectCloudStorage.types";
+
 export interface StartSessionOptions {
   branch: string;
   cloudStorage: SessionCloudStorage[];
@@ -30,18 +32,9 @@ export interface StartSessionOptions {
   storage: number;
 }
 
-export interface SessionCloudStorage {
+export interface SessionCloudStorage extends CloudStorageConfiguration {
   active: boolean;
-  configuration: Record<string, string | undefined>;
-  name: string;
-  private: boolean;
-  readonly: boolean;
-  source_path: string;
   sensitive_fields?: { name: string; help: string; value: string }[];
-  storage_id: string | null;
-  storage_type: string;
-  supported: boolean;
-  target_path: string;
 }
 
 // ? See: ./components/options/SessionProjectDockerImage.md
diff --git a/client/src/features/versions/versions.api.ts b/client/src/features/versions/versions.api.ts
index 18ad012f8b..e5c2f73b6a 100644
--- a/client/src/features/versions/versions.api.ts
+++ b/client/src/features/versions/versions.api.ts
@@ -113,17 +113,15 @@ export const versionsApi = createApi({
         if (response.versions?.length < 1)
           throw new Error("Unexpected response");
         const singleVersion = response.versions[0];
+
         return {
           name: response.name,
           version: singleVersion?.version ?? "unavailable",
           anonymousSessionsEnabled:
             singleVersion?.data?.anonymousSessionsEnabled ?? false,
           sshEnabled: singleVersion?.data?.sshEnabled ?? false,
-          cloudStorageEnabled: {
-            s3: singleVersion?.data?.cloudstorageEnabled?.s3 ?? false,
-            azureBlob:
-              singleVersion?.data?.cloudstorageEnabled?.azure_blob ?? false,
-          },
+          cloudStorageEnabled:
+            singleVersion?.data?.cloudstorageEnabled ?? false,
         };
       },
       transformErrorResponse: () => {
@@ -132,10 +130,7 @@ export const versionsApi = createApi({
           version: "unavailable",
           anonymousSessionsEnabled: false,
           sshEnabled: false,
-          cloudStorageEnabled: {
-            s3: false,
-            azureBlob: false,
-          },
+          cloudStorageEnabled: false,
         } as NotebooksVersion;
       },
       providesTags: (result) =>
diff --git a/client/src/features/versions/versions.types.ts b/client/src/features/versions/versions.types.ts
index bb6a18b8fc..1a2bdd11dc 100644
--- a/client/src/features/versions/versions.types.ts
+++ b/client/src/features/versions/versions.types.ts
@@ -59,10 +59,7 @@ export interface KgVersion {
 interface NotebookComponent extends BaseVersion {
   data: {
     anonymousSessionsEnabled: boolean;
-    cloudstorageEnabled: {
-      s3: boolean;
-      azure_blob: boolean;
-    };
+    cloudstorageEnabled: boolean;
     sshEnabled: boolean;
   };
 }
@@ -73,12 +70,9 @@ export interface NotebooksVersionResponse extends BaseVersionResponse {
 }
 
 export interface NotebooksVersion {
-  name: string;
-  version: string;
   anonymousSessionsEnabled: boolean;
+  cloudStorageEnabled: boolean;
+  name: string;
   sshEnabled: boolean;
-  cloudStorageEnabled: {
-    s3: boolean;
-    azureBlob: boolean;
-  };
+  version: string;
 }
diff --git a/client/src/styles/bootstrap/_custom_bootstrap_variables.scss b/client/src/styles/bootstrap/_custom_bootstrap_variables.scss
index d28388de7e..769fbbd4a4 100644
--- a/client/src/styles/bootstrap/_custom_bootstrap_variables.scss
+++ b/client/src/styles/bootstrap/_custom_bootstrap_variables.scss
@@ -106,3 +106,6 @@ $popover-bg: $rk-white;
 
 // List styles
 $list-group-bg: $transparent;
+
+// Breadcumb styles
+$breadcrumb-divider: quote(">");
diff --git a/client/src/utils/helpers/EnhancedState.ts b/client/src/utils/helpers/EnhancedState.ts
index 012395f2a5..71b74e9e4d 100644
--- a/client/src/utils/helpers/EnhancedState.ts
+++ b/client/src/utils/helpers/EnhancedState.ts
@@ -38,7 +38,7 @@ import { inactiveKgProjectsApi } from "../../features/inactiveKgProjects/Inactiv
 import { kgInactiveProjectsSlice } from "../../features/inactiveKgProjects/inactiveKgProjectsSlice";
 import { kgSearchApi } from "../../features/kgSearch";
 import { datasetFormSlice } from "../../features/project/dataset";
-import projectCloudStorageApi from "../../features/project/projectCloudStorage.api";
+import projectCloudStorageApi from "../../features/project/components/cloudStorage/projectCloudStorage.api";
 import { projectCoreApi } from "../../features/project/projectCoreApi";
 import projectGitLabApi from "../../features/project/projectGitLab.api";
 import { projectKgApi } from "../../features/project/projectKg.api";
diff --git a/tests/cypress/e2e/newSession.spec.ts b/tests/cypress/e2e/newSession.spec.ts
index cf8fca771b..c6ee7d36cd 100644
--- a/tests/cypress/e2e/newSession.spec.ts
+++ b/tests/cypress/e2e/newSession.spec.ts
@@ -172,39 +172,25 @@ describe("launch sessions", () => {
     cy.visit("/projects/e2e/local-test-project/sessions/new");
     cy.wait("@getSessionImage", { timeout: 10000 });
     cy.get(".form-label").contains("Cloud Storage").should("be.visible");
-    cy.get("button")
-      .contains("Add Temporary Cloud Storage")
-      .should("be.visible")
-      .and("not.be.disabled");
 
-    cy.get(".card").contains("Example storage").should("be.visible");
-    cy.get(".card")
-      .contains("Mount point")
-      .should("be.visible")
-      .siblings()
+    cy.getDataCy("cloud-storage-item")
+      .contains("example-storage")
+      .should("be.visible");
+    cy.getDataCy("cloud-storage-item")
       .contains("mount/path")
       .should("be.visible");
-
-    cy.get(".card")
-      .find("button")
-      .contains("More details")
-      .should("be.visible")
-      .click();
-
-    cy.get("label")
-      .contains("Source Path")
-      .should("be.visible")
-      .siblings("input")
-      .should("have.value", "bucket/source")
+    cy.getDataCy("cloud-storage-item")
+      .contains("s3/Other")
+      .should("be.visible");
+    cy.getDataCy("cloud-storage-item")
+      .contains("mount/path")
       .should("be.visible");
 
-    cy.get("label")
-      .contains("Mount Point")
-      .should("be.visible")
-      .siblings("input")
-      .should("have.value", "mount/path")
+    cy.getDataCy("cloud-storage-details-toggle").should("be.visible").click();
+    cy.getDataCy("cloud-storage-details-section")
+      .contains("https://s3.example.com")
       .should("be.visible");
 
-    cy.contains("Read-only").siblings("input").should("be.checked");
+    cy.get("#cloud-storage-example-storage-active").should("be.checked");
   });
 });
diff --git a/tests/cypress/e2e/projectSettings.spec.ts b/tests/cypress/e2e/projectSettings.spec.ts
index 5af6b91c69..5354013a72 100644
--- a/tests/cypress/e2e/projectSettings.spec.ts
+++ b/tests/cypress/e2e/projectSettings.spec.ts
@@ -275,81 +275,75 @@ describe("Cloud storage settings page", () => {
     cy.wait("@getNotebooksVersions");
     cy.wait("@getCloudStorage");
 
-    cy.getDataCy("settings-container")
+    cy.getDataCy("cloud-storage-section")
       .find(".card")
-      .contains("Example storage")
+      .contains("example-storage")
       .should("be.visible");
-    cy.getDataCy("settings-container")
-      .find(".card")
-      .contains("bucket/source")
+    cy.getDataCy("cloud-storage-item")
+      .contains("s3/Other")
       .should("be.visible");
-    cy.getDataCy("settings-container")
-      .find(".card")
+    cy.getDataCy("cloud-storage-item")
       .contains("mount/path")
       .should("be.visible");
   });
 
   it("can update an existing storage", () => {
-    fixtures.versions().cloudStorage();
+    fixtures.versions().cloudStorageStar();
     fixtures.patchCloudStorage();
     cy.visit("/projects/e2e/local-test-project/settings/storage");
     cy.wait("@getNotebooksVersions");
     cy.wait("@getCloudStorage");
 
-    cy.getDataCy("settings-container")
+    cy.getDataCy("cloud-storage-section")
       .find(".card")
-      .contains("Example storage")
+      .contains("example-storage")
       .should("be.visible")
       .click();
-    cy.getDataCy("settings-container")
-      .find(".card")
+    cy.getDataCy("cloud-storage-details-toggle").should("be.visible").click();
+    cy.getDataCy("cloud-storage-details-buttons")
       .find("button")
       .contains("Edit")
-      .should("be.visible")
       .click();
 
-    cy.get("label").contains("Name").click();
-    cy.get(":focused").type("{selectAll}My special storage");
-
-    cy.get("label").contains("Source path").click();
-    cy.get(":focused").type("/subfolder");
-
-    cy.get("label").contains("Mount point").click();
-    cy.get(":focused").type("{selectAll}/mnt/special");
+    cy.getDataCy("cloud-storage-edit-header")
+      .contains("Edit Cloud Storage")
+      .should("be.visible");
+    cy.get("#sourcePath")
+      .should("have.value", "bucket/source")
+      .type("{selectAll}bucket/new-target");
+    cy.getDataCy("cloud-storage-edit-next-button")
+      .should("be.visible")
+      .contains("Next")
+      .click();
 
-    cy.get("label")
-      .contains("Requires credentials")
-      .click()
-      .siblings("input")
-      .should("not.be.checked");
+    cy.get("#name")
+      .should("have.value", "example-storage")
+      .type("{selectAll}another-storage");
+    cy.get("#mountPoint")
+      .should("have.value", "mount/path")
+      .type("{selectAll}another/path");
 
-    cy.get("label")
-      .contains("Read-only")
-      .click()
-      .siblings("input")
-      .should("not.be.checked");
+    cy.getDataCy("cloud-storage-edit-update-button")
+      .should("be.visible")
+      .contains("Update");
+    cy.getDataCy("cloud-storage-edit-back-button")
+      .should("be.visible")
+      .contains("Back")
+      .click();
 
-    cy.get("button[type='submit']")
-      .contains("Save changes")
+    cy.get("#sourcePath").should("have.value", "bucket/new-target");
+    cy.getDataCy("cloud-storage-edit-rest-button").should("be.visible").click();
+    cy.get("#sourcePath").should("have.value", "bucket/source");
+    cy.getDataCy("cloud-storage-edit-next-button")
       .should("be.visible")
+      .contains("Next")
       .click();
+    cy.get("#mountPoint").should("have.value", "mount/path");
 
-    cy.wait("@patchCloudStorage").then(({ request }) => {
-      const { body } = request;
-      const {
-        name,
-        private: isPrivate,
-        readonly,
-        source_path,
-        target_path,
-      } = body;
-
-      expect(name).to.equal("My special storage");
-      expect(isPrivate).to.be.false;
-      expect(readonly).to.be.false;
-      expect(source_path).to.equal("bucket/source/subfolder");
-      expect(target_path).to.equal("/mnt/special");
-    });
+    cy.getDataCy("cloud-storage-edit-update-button")
+      .should("be.visible")
+      .contains("Update")
+      .click();
   });
 
   it("can remove an existing storage", () => {
@@ -359,17 +353,15 @@ describe("Cloud storage settings page", () => {
     cy.wait("@getNotebooksVersions");
     cy.wait("@getCloudStorage");
 
-    cy.getDataCy("settings-container")
+    cy.getDataCy("cloud-storage-section")
       .find(".card")
-      .contains("Example storage")
+      .contains("example-storage")
       .should("be.visible")
       .click();
-
-    cy.getDataCy("settings-container")
-      .find(".card")
+    cy.getDataCy("cloud-storage-details-toggle").should("be.visible").click();
+    cy.getDataCy("cloud-storage-details-buttons")
       .find("button")
       .contains("Delete")
-      .should("be.visible")
       .click();
 
     cy.get(".modal").contains("Are you sure?").should("be.visible");
@@ -383,6 +375,7 @@ describe("Cloud storage settings page", () => {
   });
 
   it("can add new storage (simple)", () => {
+    fixtures.getStorageSchema();
     fixtures
       .versions({
         notebooks: { fixture: "version-notebooks-s3.json" },
@@ -393,73 +386,47 @@ describe("Cloud storage settings page", () => {
     cy.wait("@getNotebooksVersions");
     cy.wait("@getCloudStorage");
 
-    cy.getDataCy("settings-container")
+    cy.getDataCy("cloud-storage-section")
       .find("button")
       .contains("Add Cloud Storage")
       .should("be.visible")
       .click();
 
-    cy.get(".modal").contains("Add Cloud Storage").should("be.visible");
-
-    cy.get("label").contains("Name").click();
-    cy.get(":focused").type("My new storage");
-
-    cy.get(".modal")
-      .contains("For AWS S3 buckets, supported URLs are of the form")
+    cy.getDataCy("cloud-storage-edit-header")
+      .contains("Add Cloud Storage")
       .should("be.visible");
-    cy.get("label").contains("Endpoint URL").click();
-    cy.get(":focused").type("s3://data.s3.eu-central-2.amazonaws.com/folder");
 
-    cy.get("label")
-      .contains("Requires credentials")
-      .siblings("input")
-      .should("be.checked");
+    cy.getDataCy("cloud-storage-edit-schema")
+      .contains("webdav")
+      .should("be.visible")
+      .click();
+    cy.getDataCy("cloud-storage-edit-next-button").should("be.visible").click();
+
+    cy.get("#sourcePath").should("have.value", "").type("bucket/my-source");
+    cy.getDataCy("cloud-storage-edit-next-button").should("be.visible").click();
 
-    cy.get("label")
-      .contains("Read-only")
-      .siblings("input")
-      .should("not.be.checked");
+    cy.get("#name").should("have.value", "").type("fake-storage");
+    cy.get("#mountPoint").should("have.value", "external_storage/fake-storage");
 
-    cy.get("button[type='submit']")
-      .contains("Add Storage")
+    cy.getDataCy("cloud-storage-edit-update-button")
       .should("be.visible")
+      .contains("Add")
       .click();
 
     cy.wait("@postCloudStorage").then(({ request }) => {
       const { body } = request;
-      const { name, private: isPrivate, readonly, target_path } = body;
+      const { name, readonly, target_path } = body;
 
-      expect(name).to.equal("My new storage");
-      expect(isPrivate).to.be.true;
+      expect(name).to.equal("fake-storage");
       expect(readonly).to.be.false;
-      expect(target_path).to.equal("My new storage");
+      expect(target_path).to.equal("external_storage/fake-storage");
     });
 
-    cy.get(".modal").contains("Please select which credentials are required");
-
-    cy.get("label")
-      .contains("first")
-      .click()
-      .siblings("input")
-      .should("be.checked");
-
-    cy.get("label")
-      .contains("second")
-      .siblings("input")
-      .should("not.be.checked");
-
-    cy.get("button[type='submit']")
-      .contains("Finish cloud storage setup")
+    cy.getDataCy("cloud-storage-edit-body").contains(
+      "storage fake-storage has been succesfully added"
+    );
+    cy.getDataCy("cloud-storage-edit-close-button")
       .should("be.visible")
       .click();
-
-    cy.wait("@patchCloudStorage").then(({ request }) => {
-      const { body } = request;
-      const { configuration } = body;
-
-      expect(configuration).to.haveOwnProperty("first");
-      expect(configuration["first"]).to.equal("<sensitive>");
-      expect(configuration).not.to.haveOwnProperty("second");
-    });
   });
 });
diff --git a/tests/cypress/fixtures/cloudStorage/cloud-storage.json b/tests/cypress/fixtures/cloudStorage/cloud-storage.json
index 9f842c725a..7403455ff3 100644
--- a/tests/cypress/fixtures/cloudStorage/cloud-storage.json
+++ b/tests/cypress/fixtures/cloudStorage/cloud-storage.json
@@ -2,10 +2,11 @@
   {
     "storage": {
       "configuration": {
+        "type": "s3",
         "provider": "Other",
         "endpoint": "https://s3.example.com"
       },
-      "name": "Example storage",
+      "name": "example-storage",
       "private": true,
       "project_id": 1,
       "readonly": true,
diff --git a/tests/cypress/fixtures/cloudStorage/new-cloud-storage.json b/tests/cypress/fixtures/cloudStorage/new-cloud-storage.json
index f22f3fb31f..298cc5227d 100644
--- a/tests/cypress/fixtures/cloudStorage/new-cloud-storage.json
+++ b/tests/cypress/fixtures/cloudStorage/new-cloud-storage.json
@@ -4,14 +4,14 @@
       "provider": "AWS",
       "region": "eu-central-2"
     },
-    "name": "My new storage",
+    "name": "fake-storage",
     "private": true,
     "project_id": 1,
     "readonly": false,
-    "source_path": "data/folder",
+    "source_path": "bucket/my-source",
     "storage_id": 2,
     "storage_type": "s3",
-    "target_path": "My new storage"
+    "target_path": "external_storage/webdav"
   },
   "sensitive_fields": [
     { "help": "First credential", "name": "first" },
diff --git a/tests/cypress/fixtures/cloudStorage/storage-schema.json b/tests/cypress/fixtures/cloudStorage/storage-schema.json
new file mode 100644
index 0000000000..f80ccc8755
--- /dev/null
+++ b/tests/cypress/fixtures/cloudStorage/storage-schema.json
@@ -0,0 +1,234 @@
+[
+  {
+    "name": "webdav",
+    "description": "WebDAV",
+    "prefix": "webdav",
+    "options": [
+      {
+        "name": "url",
+        "help": "URL of http host to connect to.\n\nE.g. https://example.com.",
+        "provider": "",
+        "default": "",
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": true,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": false,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "",
+        "value_str": "",
+        "type": "string"
+      },
+      {
+        "name": "vendor",
+        "help": "Name of the WebDAV site/service/software you are using.",
+        "provider": "",
+        "default": "",
+        "value": null,
+        "examples": [
+          {
+            "value": "fastmail",
+            "help": "Fastmail Files",
+            "provider": ""
+          },
+          {
+            "value": "nextcloud",
+            "help": "Nextcloud",
+            "provider": ""
+          },
+          {
+            "value": "owncloud",
+            "help": "Owncloud",
+            "provider": ""
+          },
+          {
+            "value": "sharepoint",
+            "help": "Sharepoint Online, authenticated by Microsoft account",
+            "provider": ""
+          },
+          {
+            "value": "sharepoint-ntlm",
+            "help": "Sharepoint with NTLM authentication, usually self-hosted or on-premises",
+            "provider": ""
+          },
+          {
+            "value": "other",
+            "help": "Other site/service or software",
+            "provider": ""
+          }
+        ],
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": false,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "",
+        "value_str": "",
+        "type": "string"
+      },
+      {
+        "name": "user",
+        "help": "User name.\n\nIn case NTLM authentication is used, the username should be in the format 'Domain\\User'.",
+        "provider": "",
+        "default": "",
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": false,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "",
+        "value_str": "",
+        "type": "string"
+      },
+      {
+        "name": "pass",
+        "help": "Password.",
+        "provider": "",
+        "default": "",
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": true,
+        "no_prefix": false,
+        "advanced": false,
+        "exclusive": false,
+        "sensitive": true,
+        "default_str": "",
+        "value_str": "",
+        "type": "string"
+      },
+      {
+        "name": "bearer_token",
+        "help": "Bearer token instead of user/pass (e.g. a Macaroon).",
+        "provider": "",
+        "default": "",
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": false,
+        "exclusive": false,
+        "sensitive": true,
+        "default_str": "",
+        "value_str": "",
+        "type": "string"
+      },
+      {
+        "name": "bearer_token_command",
+        "help": "Command to run to get a bearer token.",
+        "provider": "",
+        "default": "",
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": true,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "",
+        "value_str": "",
+        "type": "string"
+      },
+      {
+        "name": "encoding",
+        "help": "The encoding for the backend.\n\nSee the [encoding section in the overview](/overview/#encoding) for more info.\n\nDefault encoding is Slash,LtGt,DoubleQuote,Colon,Question,Asterisk,Pipe,Hash,Percent,BackSlash,Del,Ctl,LeftSpace,LeftTilde,RightSpace,RightPeriod,InvalidUtf8 for sharepoint-ntlm or identity otherwise.",
+        "provider": "",
+        "default": "",
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": true,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "",
+        "value_str": "",
+        "type": "string"
+      },
+      {
+        "name": "headers",
+        "help": "Set HTTP headers for all transactions.\n\nUse this to set additional HTTP headers for all transactions\n\nThe input format is comma separated list of key,value pairs.  Standard\n[CSV encoding](https://godoc.org/encoding/csv) may be used.\n\nFor example, to set a Cookie use 'Cookie,name=value', or '\"Cookie\",\"name=value\"'.\n\nYou can set multiple headers, e.g. '\"Cookie\",\"name=value\",\"Authorization\",\"xxx\"'.\n",
+        "provider": "",
+        "default": [],
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": true,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "",
+        "value_str": "",
+        "type": "CommaSepList"
+      },
+      {
+        "name": "pacer_min_sleep",
+        "help": "Minimum time to sleep between API calls.",
+        "provider": "",
+        "default": 10000000,
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": true,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "10ms",
+        "value_str": "10ms",
+        "type": "Duration"
+      },
+      {
+        "name": "nextcloud_chunk_size",
+        "help": "Nextcloud upload chunk size.\n\nWe recommend configuring your NextCloud instance to increase the max chunk size to 1 GB for better upload performances.\nSee https://docs.nextcloud.com/server/latest/admin_manual/configuration_files/big_file_upload_configuration.html#adjust-chunk-size-on-nextcloud-side\n\nSet to 0 to disable chunked uploading.\n",
+        "provider": "",
+        "default": 10485760,
+        "value": null,
+        "examples": null,
+        "short_opt": "",
+        "hide": 0,
+        "required": false,
+        "is_password": false,
+        "no_prefix": false,
+        "advanced": true,
+        "exclusive": false,
+        "sensitive": false,
+        "default_str": "10Mi",
+        "value_str": "10Mi",
+        "type": "SizeSuffix"
+      }
+    ],
+    "command_help": null,
+    "aliases": null,
+    "hide": false,
+    "metadata_info": null
+  }
+]
diff --git a/tests/cypress/support/renkulab-fixtures/cloudStorage.ts b/tests/cypress/support/renkulab-fixtures/cloudStorage.ts
index 4f9b0d344d..f2a02fca9f 100644
--- a/tests/cypress/support/renkulab-fixtures/cloudStorage.ts
+++ b/tests/cypress/support/renkulab-fixtures/cloudStorage.ts
@@ -26,6 +26,20 @@ import { NameOnlyFixture, SimpleFixture } from "./fixtures.types";
 export function CloudStorage<T extends FixturesConstructor>(Parent: T) {
   return class CloudStorageFixtures extends Parent {
     cloudStorage(args?: SimpleFixture) {
+      const {
+        fixture = "cloudStorage/cloud-storage.json",
+        name = "getCloudStorage",
+      } = args ?? {};
+      const response = { fixture };
+      cy.intercept(
+        "GET",
+        "/ui-server/api/data/storage?project_id=*",
+        response
+      ).as(name);
+      return this;
+    }
+
+    cloudStorageStar(args?: SimpleFixture) {
       const {
         fixture = "cloudStorage/cloud-storage.json",
         name = "getCloudStorage",
@@ -35,6 +49,16 @@ export function CloudStorage<T extends FixturesConstructor>(Parent: T) {
       return this;
     }
 
+    cloudStorageSPecific(args?: SimpleFixture) {
+      const {
+        fixture = "cloudStorage/cloud-storage.json",
+        name = "getCloudStorage",
+      } = args ?? {};
+      const response = { fixture };
+      cy.intercept("GET", "/ui-server/api/data/storage", response).as(name);
+      return this;
+    }
+
     postCloudStorage(args?: SimpleFixture) {
       const {
         fixture = "cloudStorage/new-cloud-storage.json",
@@ -52,6 +76,18 @@ export function CloudStorage<T extends FixturesConstructor>(Parent: T) {
       return this;
     }
 
+    getStorageSchema(args?: NameOnlyFixture) {
+      const { name = "getStorageSchema" } = args ?? {};
+      const response = {
+        fixture: "cloudStorage/storage-schema.json",
+        statusCode: 200,
+      };
+      cy.intercept("GET", "/ui-server/api/data/storage_schema", response).as(
+        name
+      );
+      return this;
+    }
+
     deleteCloudStorage(args?: NameOnlyFixture) {
       const { name = "deleteCloudStorage" } = args ?? {};
       const response = { statusCode: 204 };

From 8b2ae444109858ed801445545c591a1afbeddeeb Mon Sep 17 00:00:00 2001
From: Lorenzo <lorenzo.cavazzi.tech@gmail.com>
Date: Wed, 10 Jan 2024 13:47:06 +0100
Subject: [PATCH 3/5] build: prevent memory heap error when building locally

---
 client/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/package.json b/client/package.json
index 452b08fb8d..91a6ee5425 100644
--- a/client/package.json
+++ b/client/package.json
@@ -5,8 +5,8 @@
   "scripts": {
     "start": "vite --port 3000",
     "start:strict-port": "vite --port 3000 --strictPort",
-    "build": "tsc && vite build",
-    "build:analyze": "vite-bundle-visualizer",
+    "build": "tsc && NODE_OPTIONS=--max-old-space-size=4096 vite build",
+    "build:analyze": "NODE_OPTIONS=--max-old-space-size=4096 vite-bundle-visualizer",
     "preview": "vite preview --port 3000 --strictPort",
     "optimize": "vite optimize",
     "test": "vitest",

From f6bb1f852bf1eb3c5e2b565b8527bd78e2465e0d Mon Sep 17 00:00:00 2001
From: Lorenzo <lorenzo.cavazzi.tech@gmail.com>
Date: Wed, 10 Jan 2024 13:51:58 +0100
Subject: [PATCH 4/5] chore: prevent build error

---
 .../project/components/cloudStorage/CloudStorage.module.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/features/project/components/cloudStorage/CloudStorage.module.scss b/client/src/features/project/components/cloudStorage/CloudStorage.module.scss
index 36ac650ac6..a70616b0c0 100644
--- a/client/src/features/project/components/cloudStorage/CloudStorage.module.scss
+++ b/client/src/features/project/components/cloudStorage/CloudStorage.module.scss
@@ -1,4 +1,4 @@
-@import "~/src/styles/bootstrap/_custom_bootstrap_variables.scss";
+@import "/src/styles/bootstrap/_custom_bootstrap_variables.scss";
 
 .modal :global(.modal-content) {
   height: unset !important;

From d97c2b8bb5b1f1c2d2e2186154d6dba255219b67 Mon Sep 17 00:00:00 2001
From: Lorenzo Cavazzi <43481553+lorenzo-cavazzi@users.noreply.github.com>
Date: Mon, 15 Jan 2024 11:21:19 +0100
Subject: [PATCH 5/5] feat(client): improve UX when adding/editing storage
 (#2962)

---
 .github/workflows/acceptance-tests.yml        |  10 +-
 .../cloudStorage/AddOrEditCloudStorage.tsx    | 489 ++++++++++--------
 .../cloudStorage/CloudStorageItem.tsx         |   2 +-
 .../cloudStorage/projectCloudStorage.api.ts   |   2 +-
 .../projectCloudStorage.constants.ts          |  51 +-
 .../cloudStorage/projectCloudStorage.types.ts |  18 +-
 .../utils/projectCloudStorage.utils.ts        |  39 +-
 7 files changed, 376 insertions(+), 235 deletions(-)

diff --git a/.github/workflows/acceptance-tests.yml b/.github/workflows/acceptance-tests.yml
index 366d9423e9..46252ad1c9 100644
--- a/.github/workflows/acceptance-tests.yml
+++ b/.github/workflows/acceptance-tests.yml
@@ -36,7 +36,7 @@ jobs:
       extra-values: ${{ steps.deploy-comment.outputs.extra-values}}
     steps:
       - id: deploy-comment
-        uses: SwissDataScienceCenter/renku-actions/check-pr-description@amalthea-deploy
+        uses: SwissDataScienceCenter/renku-actions/check-pr-description@v1.9.0
         with:
           string: /deploy
           pr_ref: ${{ github.event.number }}
@@ -66,7 +66,7 @@ jobs:
           body: |
             You can access the deployment of this PR at https://renku-ci-ui-${{ github.event.number }}.dev.renku.ch
       - name: Build and deploy
-        uses: SwissDataScienceCenter/renku-actions/deploy-renku@amalthea-deploy
+        uses: SwissDataScienceCenter/renku-actions/deploy-renku@v1.9.0
         env:
           RANCHER_PROJECT_ID: ${{ secrets.CI_RANCHER_PROJECT }}
           DOCKER_PASSWORD: ${{ secrets.RENKU_DOCKER_PASSWORD }}
@@ -97,7 +97,7 @@ jobs:
     if: github.event.action != 'closed' && needs.check-deploy.outputs.pr-contains-string == 'true' && needs.check-deploy.outputs.test-enabled == 'true'
     runs-on: ubuntu-22.04
     steps:
-      - uses: SwissDataScienceCenter/renku-actions/test-renku@amalthea-deploy
+      - uses: SwissDataScienceCenter/renku-actions/test-renku@v1.9.0
         with:
           kubeconfig: ${{ secrets.RENKUBOT_DEV_KUBECONFIG }}
           renku-release: renku-ci-ui-${{ github.event.number }}
@@ -126,7 +126,7 @@ jobs:
     steps:
       - name: Extract Renku repository reference
         run: echo "RENKU_REFERENCE=`echo '${{ needs.check-deploy.outputs.renku }}' | cut -d'@' -f2`" >> $GITHUB_ENV
-      - uses: SwissDataScienceCenter/renku-actions/test-renku-cypress@amalthea-deploy
+      - uses: SwissDataScienceCenter/renku-actions/test-renku-cypress@v1.9.0
         with:
           e2e-target: ${{ matrix.tests }}
           renku-reference: ${{ env.RENKU_REFERENCE }}
@@ -154,7 +154,7 @@ jobs:
           body: |
             Tearing down the temporary RenkuLab deplyoment for this PR.
       - name: renku teardown
-        uses: SwissDataScienceCenter/renku-actions/cleanup-renku-ci-deployments@amalthea-deploy
+        uses: SwissDataScienceCenter/renku-actions/cleanup-renku-ci-deployments@v1.9.0
         env:
           HELM_RELEASE_REGEX: "^renku-ci-ui-${{ github.event.number }}$"
           GITLAB_TOKEN: ${{ secrets.DEV_GITLAB_TOKEN }}
diff --git a/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx
index 3cfca7df12..6697fa8dc1 100644
--- a/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx
+++ b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx
@@ -17,7 +17,14 @@
  */
 
 import cx from "classnames";
-import { RefObject, useCallback, useMemo, useRef, useState } from "react";
+import {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   ExclamationTriangleFill,
   EyeFill,
@@ -25,7 +32,7 @@ import {
   KeyFill,
   QuestionCircle,
 } from "react-bootstrap-icons";
-import { Controller, useForm } from "react-hook-form";
+import { Control, Controller, FieldValues, useForm } from "react-hook-form";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -35,9 +42,6 @@ import {
   Label,
   ListGroup,
   ListGroupItem,
-  PopoverBody,
-  PopoverHeader,
-  UncontrolledPopover,
   UncontrolledTooltip,
 } from "reactstrap";
 
@@ -203,8 +207,8 @@ function AddStorageAdvancedToggle({
     </>
   );
 }
-// *** Add storage: helpers *** //
 
+// *** Add storage: helpers *** //
 interface AddStorageStepProps {
   schema: CloudStorageSchema[];
   setStorage: (newDetails: Partial<CloudStorageDetails>) => void;
@@ -286,7 +290,7 @@ function AddStorageAdvanced({ storage, setStorage }: AddStorageStepProps) {
             />
           )}
         />
-        <Label className="form-label" for="add-storage-name">
+        <Label className="form-label" for="sourcePath">
           Source path
         </Label>
         <div className={cx("form-text", "text-muted")}>
@@ -343,6 +347,245 @@ function AddStorageAdvanced({ storage, setStorage }: AddStorageStepProps) {
   );
 }
 
+// *** Options helpers *** //
+
+interface OptionTruncatedTextProps {
+  collapsedLines?: number;
+  linesTolerance?: number;
+  text: string;
+}
+function OptionTruncatedText({
+  collapsedLines = 2,
+  linesTolerance = 1,
+  text,
+}: OptionTruncatedTextProps) {
+  const [isTruncated, setIsTruncated] = useState(true);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const toggleTruncate = useCallback(() => {
+    setIsTruncated((isTruncated) => !isTruncated);
+  }, []);
+
+  useEffect(() => {
+    // Check if the content overflows its container
+    if (contentRef.current) {
+      const containerHeight = contentRef.current.clientHeight;
+      const contentHeight = contentRef.current.scrollHeight;
+
+      const lineHeight = containerHeight / collapsedLines;
+      const tolerance = lineHeight * (linesTolerance + 0.5);
+
+      setIsTruncated(contentHeight > containerHeight + tolerance);
+    }
+  }, [collapsedLines, linesTolerance, text]);
+
+  const textStyle = {
+    maxHeight: isTruncated ? `${collapsedLines * 1.5}em` : "none",
+  };
+
+  return (
+    <div>
+      <div className="overflow-hidden" ref={contentRef} style={textStyle}>
+        {text}
+      </div>
+      {isTruncated && (
+        <>
+          <span> [...]</span>{" "}
+          <Button
+            className={cx("p-0", "align-baseline")}
+            color="link"
+            onClick={toggleTruncate}
+            size="sm"
+          >
+            Show all
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}
+
+interface CheckboxOptionItemProps {
+  control: Control<FieldValues, void>;
+  defaultValue: boolean | undefined;
+  onFieldValueChange: (option: string, value: boolean) => void;
+  option: CloudStorageSchemaOptions;
+}
+function CheckboxOptionItem({
+  control,
+  defaultValue,
+  onFieldValueChange,
+  option,
+}: CheckboxOptionItemProps) {
+  return (
+    <>
+      <Controller
+        name={option.name}
+        control={control}
+        defaultValue={defaultValue}
+        render={({ field }) => (
+          <input
+            {...field}
+            id={option.name}
+            type="checkbox"
+            className={cx("form-check-input", "me-1")}
+            onChange={(e) => {
+              field.onChange(e);
+              onFieldValueChange(option.name, e.target.checked);
+            }}
+          />
+        )}
+      />
+      <label htmlFor={option.name}>{option.friendlyName ?? option.name}</label>
+    </>
+  );
+}
+
+interface PasswordOptionItemProps {
+  control: Control<FieldValues, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  defaultValue: string | undefined;
+  onFieldValueChange: (option: string, value: string) => void;
+  option: CloudStorageSchemaOptions;
+}
+function PasswordOptionItem({
+  control,
+  defaultValue,
+  onFieldValueChange,
+  option,
+}: PasswordOptionItemProps) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = useCallback(() => {
+    setShowPassword((showPassword) => !showPassword);
+  }, []);
+
+  const tooltipContainerId = `option-is-secret-${option.name}`;
+  return (
+    <>
+      <label htmlFor={option.name}>
+        {option.friendlyName ?? option.name}{" "}
+        <div id={tooltipContainerId} className="d-inline">
+          <KeyFill className={cx("bi", "ms-1")} />
+          <ExclamationTriangleFill
+            className={cx("bi", "ms-1", "text-warning")}
+          />
+        </div>
+        <UncontrolledTooltip placement="top" target={tooltipContainerId}>
+          This field contains sensitive data (E.G. password, access token, ...).
+          RenkuLab does not store passwords, so you will be asked this value
+          again when starting a session.
+        </UncontrolledTooltip>
+      </label>
+
+      <InputGroup>
+        <Controller
+          name={option.name}
+          control={control}
+          defaultValue={defaultValue}
+          render={({ field }) => (
+            <input
+              {...field}
+              id={option.name}
+              type={showPassword ? "text" : "password"}
+              className={cx("form-control", "rounded-0", "rounded-start")}
+              placeholder={option.convertedDefault?.toString() ?? ""}
+              onChange={(e) => {
+                field.onChange(e);
+                onFieldValueChange(option.name, e.target.value);
+              }}
+            />
+          )}
+        />
+        <Button
+          className="rounded-end"
+          id={`show-password-${option.name}`}
+          onClick={() => toggleShowPassword()}
+        >
+          {showPassword ? (
+            <EyeFill className="bi" />
+          ) : (
+            <EyeSlashFill className="bi" />
+          )}
+          <UncontrolledTooltip
+            placement="top"
+            target={`show-password-${option.name}`}
+          >
+            Hide/show sensistive data
+          </UncontrolledTooltip>
+        </Button>
+      </InputGroup>
+    </>
+  );
+}
+
+interface InputOptionItemProps {
+  control: Control<FieldValues, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  defaultValue: string | number | undefined;
+  inputType: "dropdown" | "number" | "text";
+  onFieldValueChange: (option: string, value: string | number) => void;
+  option: CloudStorageSchemaOptions;
+}
+function InputOptionItem({
+  control,
+  defaultValue,
+  inputType,
+  onFieldValueChange,
+  option,
+}: InputOptionItemProps) {
+  const additionalProps: Record<string, string> = {
+    ...(inputType === "dropdown" ? { list: `${option.name}__list` } : {}),
+  };
+  return (
+    <>
+      <label htmlFor={option.name}>{option.friendlyName ?? option.name}</label>
+
+      <Controller
+        name={option.name}
+        control={control}
+        defaultValue={defaultValue}
+        render={({ field }) => {
+          return (
+            <>
+              <input
+                {...field}
+                id={option.name}
+                type={inputType}
+                className="form-control"
+                placeholder={
+                  option.convertedDefault
+                    ? option.convertedDefault?.toString()
+                    : inputType === "dropdown"
+                    ? option.filteredExamples[0].value
+                    : ""
+                }
+                onChange={(e) => {
+                  field.onChange(e);
+                  onFieldValueChange(
+                    option.name,
+                    inputType === "number"
+                      ? parseFloat(e.target.value)
+                      : e.target.value
+                  );
+                }}
+                {...additionalProps}
+              />
+              {inputType === "dropdown" && option.filteredExamples.length && (
+                <datalist id={`${option.name}__list`}>
+                  {option.filteredExamples?.map((e) => (
+                    <option
+                      key={`${option.name}__list__${e.value}`}
+                      value={e.value}
+                    />
+                  ))}
+                </datalist>
+              )}
+            </>
+          );
+        }}
+      />
+    </>
+  );
+}
+
 // *** Add storage: page 1 of 3, with storage type and provider *** //
 
 function AddStorageType({
@@ -537,78 +780,6 @@ function AddStorageType({
 }
 
 // *** Add storage: page 2 of 3, with storage options *** //
-
-interface AddStorageOptionsExamplesProps {
-  examples: CloudStorageSchemaOptions["examples"];
-  name: string;
-  provider?: string;
-}
-function AddStorageOptionsExamples({
-  examples,
-  name,
-  provider,
-}: AddStorageOptionsExamplesProps) {
-  // TODO: We should use examples as enum, or items in an autocomplete. But sometimes we get just "None" 🥴
-  if (!examples?.length) return null;
-  const filterExamples = provider
-    ? examples.filter((e) => !e.provider || e.provider === provider)
-    : examples;
-  if (!filterExamples?.length) return null;
-
-  const popoverId = `popover-${name}`;
-  const exampleItems = filterExamples.map((e) => {
-    return (
-      <li className="mb-1" key={e.value}>
-        <code>{e.value}</code>
-        <br />
-        <small>{e.help}</small>
-      </li>
-    );
-  });
-
-  return (
-    <>
-      <QuestionCircle id={popoverId} className={cx("bi", "ms-1")} />
-      <UncontrolledPopover
-        target={popoverId}
-        placement="right"
-        style={{ maxHeight: "98vh", overflow: "auto" }} // eslint-disable-line spellcheck/spell-checker
-        trigger="hover focus"
-      >
-        <PopoverHeader>Examples</PopoverHeader>
-        <PopoverBody>
-          <ul>{exampleItems}</ul>
-        </PopoverBody>
-      </UncontrolledPopover>
-    </>
-  );
-}
-
-interface SecretOptionWarningProps {
-  isSecret?: boolean;
-  name: string;
-}
-function SecretOptionWarning({
-  isSecret = true,
-  name,
-}: SecretOptionWarningProps) {
-  if (!isSecret) return null;
-  const id = `option-is-secret-${name}`;
-  return (
-    <>
-      <div id={id} className="d-inline">
-        <KeyFill className={cx("bi", "ms-1")} />
-        <ExclamationTriangleFill className={cx("bi", "ms-1", "text-warning")} />
-      </div>
-      <UncontrolledTooltip placement="top" target={id}>
-        This field contains sensitive data (E.G. password, access token, ...).
-        We currently cannot store it safely, so you might be asked this value
-        again when starting a session.
-      </UncontrolledTooltip>
-    </>
-  );
-}
-
 function AddStorageOptions({
   schema,
   setState,
@@ -622,20 +793,6 @@ function AddStorageOptions({
     storage.schema,
     storage.provider
   );
-
-  const [showPassword, setShowPassword] = useState<string[]>([]);
-  const getPasswordType = (name: string) => {
-    return showPassword.includes(name) ? "text" : "password";
-  };
-  const swapShowPassword = (name: string) => {
-    setShowPassword((prev) => {
-      if (prev.includes(name)) {
-        return prev.filter((n) => n !== name);
-      }
-      return [...prev, name];
-    });
-  };
-
   const { control, setValue, getValues } = useForm();
 
   const onFieldValueChange = (
@@ -659,127 +816,50 @@ function AddStorageOptions({
         ? "checkbox"
         : o.convertedType === "number"
         ? "number"
+        : o.filteredExamples?.length
+        ? "dropdown"
         : "text";
 
-      const placeholder = o.examples?.length
-        ? o.examples[0].value
-          ? o.examples[0].value
-          : undefined
-        : undefined;
-
-      const examples = (
-        <AddStorageOptionsExamples
-          examples={o.examples}
-          name={o.name}
-          provider={storage.provider}
-        />
-      );
-
-      const warning =
-        o.convertedType === "secret" ? (
-          <SecretOptionWarning name={o.name} />
-        ) : null;
-
       return (
         <div className="mb-3" key={o.name}>
-          <label htmlFor={o.name}>
-            {o.friendlyName ?? o.name} {examples} {warning}
-          </label>
-
           {inputType === "checkbox" ? (
-            <Controller
-              name={o.name}
+            <CheckboxOptionItem
               control={control}
               defaultValue={
                 storage.options && storage.options[o.name]
-                  ? storage.options[o.name]
-                  : o.convertedDefault ?? false
+                  ? (storage.options[o.name] as boolean)
+                  : (o.convertedDefault as boolean) ?? undefined
               }
-              render={({ field }) => (
-                <input
-                  id={o.name}
-                  type={inputType}
-                  {...field}
-                  className={cx("form-check-input", "ms-1")}
-                  onChange={(e) => {
-                    field.onChange(e);
-                    onFieldValueChange(o.name, e.target.checked);
-                  }}
-                />
-              )}
+              onFieldValueChange={onFieldValueChange}
+              option={o}
             />
           ) : inputType === "password" ? (
-            <InputGroup>
-              <Controller
-                name={o.name}
-                control={control}
-                defaultValue={
-                  storage.options && storage.options[o.name]
-                    ? storage.options[o.name]
-                    : o.convertedDefault ?? ""
-                }
-                render={({ field }) => (
-                  <input
-                    id={o.name}
-                    type={getPasswordType(o.name)}
-                    {...field}
-                    className={cx("form-control", "rounded-0", "rounded-start")}
-                    placeholder={placeholder}
-                    onChange={(e) => {
-                      field.onChange(e);
-                      onFieldValueChange(o.name, e.target.value);
-                    }}
-                  />
-                )}
-              />
-              <Button
-                className="rounded-end"
-                id={`show-password-${o.name}`}
-                onClick={() => swapShowPassword(o.name)}
-              >
-                {getPasswordType(o.name) === "password" ? (
-                  <EyeSlashFill className="bi" />
-                ) : (
-                  <EyeFill className="bi" />
-                )}
-                <UncontrolledTooltip
-                  placement="top"
-                  target={`show-password-${o.name}`}
-                >
-                  Hide/show sensistive data
-                </UncontrolledTooltip>
-              </Button>
-            </InputGroup>
+            <PasswordOptionItem
+              control={control}
+              defaultValue={
+                storage.options && storage.options[o.name]
+                  ? (storage.options[o.name] as string)
+                  : ""
+              }
+              onFieldValueChange={onFieldValueChange}
+              option={o}
+            />
           ) : (
-            <Controller
-              name={o.name}
+            <InputOptionItem
               control={control}
               defaultValue={
                 storage.options && storage.options[o.name]
-                  ? storage.options[o.name]
-                  : o.convertedDefault ?? ""
+                  ? (storage.options[o.name] as string | number | undefined)
+                  : ""
               }
-              render={({ field }) => (
-                <input
-                  id={o.name}
-                  type={inputType}
-                  {...field}
-                  className="form-control"
-                  placeholder={placeholder}
-                  onChange={(e) => {
-                    field.onChange(e);
-                    onFieldValueChange(
-                      o.name,
-                      inputType === "number"
-                        ? parseFloat(e.target.value)
-                        : e.target.value
-                    );
-                  }}
-                />
-              )}
+              inputType={inputType}
+              onFieldValueChange={onFieldValueChange}
+              option={o}
             />
           )}
-          <div className={cx("form-text", "text-muted")}>{o.help}</div>
+          <div className={cx("form-text", "text-muted")}>
+            <OptionTruncatedText text={o.help} />
+          </div>
         </div>
       );
     });
@@ -816,6 +896,10 @@ function AddStorageOptions({
 
   const sourcePath = (
     <div className="mb-3">
+      <Label className="form-label" for="sourcePath">
+        Source path
+      </Label>
+
       <Controller
         name="sourcePath"
         control={control}
@@ -834,9 +918,6 @@ function AddStorageOptions({
           />
         )}
       />
-      <Label className="form-label" for="add-storage-name">
-        Source path
-      </Label>
       <div className={cx("form-text", "text-muted")}>{sourcePathHelp.help}</div>
     </div>
   );
@@ -895,7 +976,7 @@ function AddStorageMount({ setStorage, storage }: AddStorageStepProps) {
       <p>We need a few more details to mount your storage properly.</p>
 
       <div className="mb-3">
-        <Label className="form-label" for="add-storage-name">
+        <Label className="form-label" for="name">
           Name
         </Label>
 
@@ -928,12 +1009,12 @@ function AddStorageMount({ setStorage, storage }: AddStorageStepProps) {
         </div>
         <div className={cx("form-text", "text-muted")}>
           This name will help you identify the storage. It should be unique for
-          this project and it can only contains letter, numbers, $, _.
+          this project and can only contain letters, numbers, _, -.
         </div>
       </div>
 
       <div className="mb-3">
-        <Label className="form-label" for="add-storage-name">
+        <Label className="form-label" for="mountPoint">
           Mount point
         </Label>
 
@@ -957,8 +1038,8 @@ function AddStorageMount({ setStorage, storage }: AddStorageStepProps) {
         <div className="invalid-feedback">Please provide a mount point.</div>
         <div className={cx("form-text", "text-muted")}>
           This is the name of the folder where you will find your external
-          storage in the sessions. You should pick something different from the
-          folders used in the projects repository, and from folder mounted by
+          storage in sessions. You should pick something different from the
+          folders used in the projects repository, and from folders mounted by
           other storage services.
         </div>
       </div>
diff --git a/client/src/features/project/components/cloudStorage/CloudStorageItem.tsx b/client/src/features/project/components/cloudStorage/CloudStorageItem.tsx
index 86ef635fb5..e47baaeb3c 100644
--- a/client/src/features/project/components/cloudStorage/CloudStorageItem.tsx
+++ b/client/src/features/project/components/cloudStorage/CloudStorageItem.tsx
@@ -230,7 +230,7 @@ function CloudStorageDetails({
             <div className="text-rk-text-light">
               <small className="text-capitalize">{key}</small>
             </div>
-            <div>{configuration[key]}</div>
+            <div>{configuration[key]?.toString()}</div>
           </div>
         ))}
         <div className="mt-2">
diff --git a/client/src/features/project/components/cloudStorage/projectCloudStorage.api.ts b/client/src/features/project/components/cloudStorage/projectCloudStorage.api.ts
index 4c7f01be70..c0d8bc0a34 100644
--- a/client/src/features/project/components/cloudStorage/projectCloudStorage.api.ts
+++ b/client/src/features/project/components/cloudStorage/projectCloudStorage.api.ts
@@ -77,7 +77,7 @@ const projectCloudStorageApi = createApi({
     >({
       query: ({ storage_id, ...params }) => {
         return {
-          method: "PATCH",
+          method: "PUT",
           url: `storage/${storage_id}`,
           body: { ...params },
         };
diff --git a/client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts b/client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts
index 1a0b1af051..af9f11a3cb 100644
--- a/client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts
+++ b/client/src/features/project/components/cloudStorage/projectCloudStorage.constants.ts
@@ -30,6 +30,23 @@ export const CLOUD_STORAGE_CONFIGURATION_PLACEHOLDER =
 
 export const CLOUD_STORAGE_OVERRIDE = {
   storage: {
+    azureblob: {
+      position: 3,
+    },
+    drive: {
+      hide: true,
+    },
+    gcs: {
+      hide: true,
+    },
+    // eslint-disable-next-line spellcheck/spell-checker
+    dropbox: {
+      hide: true,
+    },
+    // eslint-disable-next-line spellcheck/spell-checker
+    onedrive: {
+      hide: true,
+    },
     s3: {
       description:
         "Amazon S3 Compliant Storage Providers including AWS, CloudFlare, DigitalOcean and many others",
@@ -40,19 +57,29 @@ export const CLOUD_STORAGE_OVERRIDE = {
         },
       },
     },
-    drive: {
-      position: 2,
-    },
     webdav: {
-      position: 3,
-    },
-    azureblob: {
-      position: 4,
+      description:
+        "WebDAV compatible services, including PolyBox and SwitchDrive",
+      position: 2,
     },
   } as Record<string, Partial<CloudStorageOverride>>,
 };
 
 export const CLOUD_OPTIONS_OVERRIDE = {
+  azureblob: {
+    account: {
+      friendlyName: "Account Name",
+      help: "Set this to the Azure Storage Account Name in use. Leave blank to use SAS URL or Emulator, otherwise it needs to be set.",
+    },
+    client_certificate_path: { advanced: true },
+    client_certificate_password: { advanced: true },
+    env_auth: { hide: true },
+    key: { friendlyName: "Shared Key" },
+    sas_url: { advanced: true },
+    tenant: { friendlyName: "Tenant ID", advanced: true },
+    client_id: { friendlyName: "Client ID", advanced: true },
+    client_secret: { friendlyName: "Client Secret", advanced: true },
+  },
   s3: {
     env_auth: { hide: true }, // ? uses the ENV variables
     location_constraint: { hide: true }, // ? only for creating buckets
@@ -68,6 +95,16 @@ export const CLOUD_OPTIONS_OVERRIDE = {
       help: "Endpoint for S3 API. You should leave this blank if you entered the region already.",
     },
   },
+  webdav: {
+    pass: {
+      friendlyName: "Token (or password)",
+      help: "This is the token to access the WebDAV service. Mind that providing the user's password directly here won't usually work.",
+    },
+    bearer_token: { friendlyName: "Bearer Token" },
+    url: { friendlyName: "URL" },
+    user: { friendlyName: "Username" },
+    vendor: { advanced: true },
+  },
 } as Record<string, Record<string, Partial<CloudStorageSchemaOptions>>>;
 
 export const CLOUD_STORAGE_MOUNT_PATH_HELP = {
diff --git a/client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts b/client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts
index 95d07be07c..072683d1fc 100644
--- a/client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts
+++ b/client/src/features/project/components/cloudStorage/projectCloudStorage.types.ts
@@ -82,6 +82,12 @@ export type CloudStorageOptionTypes =
   | "number"
   | "secret";
 
+export type CloudStorageSchemaOptionExample = {
+  value: string; // ? Potential value for the option
+  help: string; // ? Help text for the _value_
+  provider: string; // ? empty for "all providers"
+};
+
 export interface CloudStorageSchemaOptions {
   name: string;
   help: string;
@@ -89,16 +95,10 @@ export interface CloudStorageSchemaOptions {
   default: number | string | boolean;
   default_str: string;
   value: null | number | string | boolean;
-  examples: [
-    {
-      value: string; // ? Potential value for the option
-      help: string; // ? Help text for the _value_
-      provider: string; // ? empty for "all providers"
-    }
-  ];
+  examples: CloudStorageSchemaOptionExample[];
   required: boolean;
   ispassword: boolean; // eslint-disable-line spellcheck/spell-checker
-  sensitive: boolean; // ? The service doesn't store it -- "more" sensitive? 😁
+  sensitive: boolean;
   advanced: boolean; // ? Only shown when advanced options are enabled
   exclusive: boolean; // ? Only one of the examples can be used when this is true
   datatype: string;
@@ -107,12 +107,14 @@ export interface CloudStorageSchemaOptions {
   convertedType?: CloudStorageOptionTypes;
   convertedDefault?: number | string | boolean;
   convertedHide?: boolean;
+  filteredExamples: CloudStorageSchemaOptionExample[];
   friendlyName?: string;
 }
 
 export interface CloudStorageSchema {
   name: string;
   description: string;
+  hide?: boolean;
   prefix: string; // ? weird naming; it's the machine readable name
   position?: number;
   options: CloudStorageSchemaOptions[];
diff --git a/client/src/features/project/utils/projectCloudStorage.utils.ts b/client/src/features/project/utils/projectCloudStorage.utils.ts
index c38fcaa84a..ffa087b6c9 100644
--- a/client/src/features/project/utils/projectCloudStorage.utils.ts
+++ b/client/src/features/project/utils/projectCloudStorage.utils.ts
@@ -118,12 +118,14 @@ export function getSchemaStorage(
         Object.keys(CLOUD_STORAGE_OVERRIDE.storage).includes(element.prefix)
       ) {
         const override = CLOUD_STORAGE_OVERRIDE.storage[element.prefix];
-        current.push({
-          ...element,
-          name: override.name ?? element.name,
-          description: override.description ?? element.description,
-          position: override.position ?? element.position,
-        });
+        if (!override.hide) {
+          current.push({
+            ...element,
+            name: override.name ?? element.name,
+            description: override.description ?? element.description,
+            position: override.position ?? element.position,
+          });
+        }
       } else {
         current.push(element);
       }
@@ -292,7 +294,6 @@ export function getSchemaOptions(
         }
 
         // type conversion is scary; for the default and value, we _try_ to convert it
-        // TODO: we should consider using "example" as enum, but that might turn out to be a bad idea
         try {
           if (option.default != undefined && option.default !== "") {
             if (convertedOption.convertedType === "number")
@@ -301,7 +302,9 @@ export function getSchemaOptions(
               );
             else if (convertedOption.convertedType === "boolean")
               convertedOption.convertedDefault =
-                option.default.toString().toLowerCase() === "true";
+                option.default.toString().toLowerCase() === "true"
+                  ? true
+                  : undefined;
             else if (option.default.toString() !== "[object Object]")
               convertedOption.convertedDefault = option.default.toString();
           } else if (option.value != undefined && option.value !== "") {
@@ -311,7 +314,9 @@ export function getSchemaOptions(
               );
             else if (convertedOption.convertedType === "boolean")
               convertedOption.convertedDefault =
-                option.value.toString().toLowerCase() === "true";
+                option.value.toString().toLowerCase() === "true"
+                  ? true
+                  : undefined;
             else if (option.value.toString() !== "[object Object]")
               convertedOption.convertedDefault = option.value.toString();
           }
@@ -319,6 +324,22 @@ export function getSchemaOptions(
           convertedOption.convertedDefault = undefined;
         }
 
+        // examples should be filtered by the provider
+        if (option.examples) {
+          const filteredExamples = option.examples.filter((e) => {
+            if (!targetProvider || !e.provider) return true;
+            if (e.provider.startsWith("!")) {
+              const providers = e.provider.slice(1).split(",");
+              return !providers.includes(targetProvider);
+            }
+            const providers = e.provider.split(",");
+            return providers.includes(targetProvider);
+          });
+          if (filteredExamples.length) {
+            convertedOption.filteredExamples = filteredExamples;
+          }
+        }
+
         return convertedOption;
       })
     : optionsFiltered;