feat!: add a convenient way to add an openBIS cloud storage (#3238)

BREAKING CHANGE: requires renku-data-services >= v0.60.0

---------

Co-authored-by: Lorenzo Cavazzi <[email protected]>

Author: olloz26

client/.eslintrc.json

@@ -212,6 +212,7 @@
           "onloadend",
           "onopen",
           "openapi",
+          "openbis",
           "papermill",
           "pathname",
           "pdfjs",

client/src/features/dataConnectorsV2/components/DataConnectorModal/DataConnectorModalBody.tsx

@@ -32,8 +32,8 @@ import {
 import KeywordBadge from "~/components/keywords/KeywordBadge";
 import KeywordContainer from "~/components/keywords/KeywordContainer";
 import ChevronFlippedIcon from "../../../../components/icons/ChevronFlippedIcon";
-import { WarnAlert } from "../../../../components/Alert";
 import { Loader } from "../../../../components/Loader";
+import { InfoAlert, WarnAlert } from "../../../../components/Alert";
 import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../../../../utils/customHooks/useAppSelector.hook";
 import { slugFromTitle } from "../../../../utils/helpers/HelperFunctions";
@@ -49,7 +49,10 @@ import type {
   AddCloudStorageState,
   CloudStorageDetails,
 } from "../../../project/components/cloudStorage/projectCloudStorage.types";
-import { getSchemaOptions } from "../../../project/utils/projectCloudStorage.utils";
+import {
+  getSchema,
+  getSchemaOptions,
+} from "../../../project/utils/projectCloudStorage.utils";
 import type { Project } from "../../../projectsV2/api/projectV2.api";
 import { ProjectNamespaceControl } from "../../../projectsV2/fields/ProjectNamespaceFormField";
 import SlugPreviewFormField from "../../../projectsV2/fields/SlugPreviewFormField";
@@ -294,16 +297,19 @@ export function DataConnectorMount({
   const { validationResult } = useAppSelector(
     (state) => state.dataConnectorFormSlice
   );
-  const options = getSchemaOptions(
+  const schema = getSchema(schemata, flatDataConnector.schema);
+  const schemaOptions = getSchemaOptions(
     schemata,
     true,
     flatDataConnector.schema,
     flatDataConnector.provider
   );
   const secretFields =
-    options == null
+    schemaOptions == null
       ? []
-      : Object.values(options).filter((o) => o && o.convertedType === "secret");
+      : Object.values(schemaOptions).filter(
+          (o) => o && o.convertedType === "secret"
+        );
   const hasPasswordFieldWithInput = secretFields.some(
     (o) => flatDataConnector.options && flatDataConnector.options[o.name]
   );
@@ -514,6 +520,7 @@ export function DataConnectorMount({
                       field.onChange(e);
                       onFieldValueChange("readOnly", !!e.target.value);
                     }}
+                    disabled={schema?.forceReadOnly ?? false}
                   />
                   <Label
                     for="data-connector-readonly-true"
@@ -535,6 +542,7 @@ export function DataConnectorMount({
                       field.onChange(e);
                       onFieldValueChange("readOnly", false);
                     }}
+                    disabled={schema?.forceReadOnly ?? false}
                   />
                   <Label
                     for="data-connector-readonly-false"
@@ -548,16 +556,26 @@ export function DataConnectorMount({
             )}
             rules={{ required: true }}
           />
-          {!flatDataConnector.readOnly && (
+          {schema?.forceReadOnly ? (
             <div className="mt-1">
-              <WarnAlert dismissible={false}>
+              <InfoAlert dismissible={false} timeout={0}>
                 <p className="mb-0">
-                  You are mounting this storage in read-write mode. If you have
-                  read-only access, please select &quot;Read Only&quot; to
-                  prevent errors with some storage types.
+                  This cloud storage only supports read-only access.
                 </p>
-              </WarnAlert>
+              </InfoAlert>
             </div>
+          ) : (
+            !flatDataConnector.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 select &quot;Read Only&quot;
+                    to prevent errors with some storage types.
+                  </p>
+                </WarnAlert>
+              </div>
+            )
           )}
           <div className={cx("form-text", "text-muted")}>
             Select &quot;Read Only&quot; to mount the storage without write

client/src/features/dataConnectorsV2/components/DataConnectorModal/DataConnectorModalFooter.tsx

@@ -34,6 +34,7 @@ import {
 
 import {
   findSensitive,
+  getSchemaOptions,
   hasProviderShortlist,
 } from "../../../project/utils/projectCloudStorage.utils";
 
@@ -307,10 +308,32 @@ function DataConnectorCreateFooter({
   ]);
 
   // Visual elements
-  const disableContinueButton =
-    cloudStorageState.step === 1 &&
-    (!flatDataConnector.schema ||
-      (schemaRequiresProvider && !flatDataConnector.provider));
+  const disableContinueButton = useMemo(() => {
+    return (
+      (cloudStorageState.step === 1 &&
+        (!flatDataConnector.schema ||
+          (schemaRequiresProvider && !flatDataConnector.provider))) ||
+      (cloudStorageState.step === 2 &&
+        !getSchemaOptions(
+          schemata,
+          true,
+          flatDataConnector.schema,
+          flatDataConnector.provider
+        )?.every((o) => {
+          return (
+            !o.required ||
+            (flatDataConnector.options && flatDataConnector.options[o.name])
+          );
+        }))
+    );
+  }, [
+    cloudStorageState.step,
+    flatDataConnector.schema,
+    schemaRequiresProvider,
+    flatDataConnector.provider,
+    schemata,
+    flatDataConnector.options,
+  ]);
 
   const isAddResultLoading = createResult.isLoading;
   const actionError = createResult.error;
@@ -490,10 +513,32 @@ function DataConnectorEditFooter({
   }, [dispatch, updateResult]);
 
   // Visual elements
-  const disableContinueButton =
-    cloudStorageState.step === 1 &&
-    (!flatDataConnector.schema ||
-      (schemaRequiresProvider && !flatDataConnector.provider));
+  const disableContinueButton = useMemo(() => {
+    return (
+      (cloudStorageState.step === 1 &&
+        (!flatDataConnector.schema ||
+          (schemaRequiresProvider && !flatDataConnector.provider))) ||
+      (cloudStorageState.step === 2 &&
+        !getSchemaOptions(
+          schemata,
+          true,
+          flatDataConnector.schema,
+          flatDataConnector.provider
+        )?.every((o) => {
+          return (
+            !o.required ||
+            (flatDataConnector.options && flatDataConnector.options[o.name])
+          );
+        }))
+    );
+  }, [
+    cloudStorageState.step,
+    flatDataConnector.schema,
+    schemaRequiresProvider,
+    flatDataConnector.provider,
+    schemata,
+    flatDataConnector.options,
+  ]);
 
   const isModifyResultLoading = updateResult.isLoading;
   const actionError = updateResult.error;

client/src/features/dataConnectorsV2/components/DataConnectorModal/dataConnectorModalButtons.tsx

@@ -176,18 +176,15 @@ export function DataConnectorModalContinueButton({
           continueId="add-data-connector-continue"
           step={cloudStorageState.step}
           testId="test-data-connector"
+          disableContinueButton={disableContinueButton}
           editDataConnector={addOrEditStorage}
         />
         {disableContinueButton && (
           <UncontrolledTooltip
             placement="top"
             target={`${continueButtonId}-div`}
           >
-            {!flatDataConnector.schema
-              ? "Please select a storage type"
-              : selectedSchemaHasAccessMode
-              ? "Please select a mode or change storage type"
-              : "Please select a provider or change storage type"}
+            Please fill out all fields labeled as required
           </UncontrolledTooltip>
         )}
       </div>
@@ -211,10 +208,19 @@ export function DataConnectorModalContinueButton({
             id="add-data-connector-continue-button"
             data-cy="add-data-connector-continue-button"
             className={cx("btn-primary")}
+            disabled={disableContinueButton}
             onClick={addOrEditStorage}
           >
             <PencilSquare className={cx("bi", "me-1")} /> Update connector
           </Button>
+          {disableContinueButton && (
+            <UncontrolledTooltip
+              placement="top"
+              target="add-data-connector-continue-div"
+            >
+              Please fill out all fields labeled as required
+            </UncontrolledTooltip>
+          )}
         </div>
       </div>
     );
@@ -294,12 +300,14 @@ interface TestConnectionAndContinueButtonsProps
   continueId: string;
   step: number;
   testId: string;
+  disableContinueButton: boolean;
   editDataConnector?: () => void;
 }
 function TestConnectionAndContinueButtons({
   continueId,
   step,
   testId,
+  disableContinueButton,
   editDataConnector,
 }: TestConnectionAndContinueButtonsProps) {
   const dispatch = useAppDispatch();
@@ -395,7 +403,7 @@ function TestConnectionAndContinueButtons({
         color={testConnectionColor}
         id={buttonTestId}
         data-cy={buttonTestId}
-        disabled={validationResult.isLoading}
+        disabled={disableContinueButton || validationResult.isLoading}
         onClick={() => validateConnection()}
       >
         {testConnectionContent}