feat!: add a convenient way to add an openBIS data connector

Author: olloz26

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

@@ -23,7 +23,7 @@ import { Controller, useForm } from "react-hook-form";
 import { ButtonGroup, FormText, Input, Label } from "reactstrap";
 
 import { Loader } from "../../../../components/Loader";
-import { WarnAlert } from "../../../../components/Alert";
+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";
@@ -117,24 +117,16 @@ function AddOrEditDataConnector({
       : null;
   if (CloudStorageContentByStep)
     return (
-      <>
-        <div className={cx("d-flex", "justify-content-end")}>
-          <AddStorageAdvancedToggle
-            state={cloudStorageState}
-            setState={setState}
-          />
-        </div>
-        <CloudStorageContentByStep
-          schema={schemata}
-          state={cloudStorageState}
-          storage={flatDataConnector}
-          setState={setState}
-          setStorage={setFlatDataConnector}
-          storageSecrets={storageSecrets}
-          validationSucceeded={validationResult?.isSuccess ?? false}
-          isV2={true}
-        />
-      </>
+      <CloudStorageContentByStep
+        schema={schemata}
+        state={cloudStorageState}
+        storage={flatDataConnector}
+        setState={setState}
+        setStorage={setFlatDataConnector}
+        storageSecrets={storageSecrets}
+        validationSucceeded={validationResult?.isSuccess ?? false}
+        isV2={true}
+      />
     );
   const DataConnectorContentByStep =
     cloudStorageState.step >= 0 &&
@@ -507,21 +499,35 @@ export function DataConnectorMount() {
               }}
               value=""
               checked={flatDataConnector.readOnly ?? false}
+              disabled={
+                (flatDataConnector.convenientMode &&
+                  flatDataConnector.readOnly) ??
+                false
+              }
             />
           )}
           rules={{ required: true }}
         />
-        {!flatDataConnector.readOnly && (
+        {(flatDataConnector.convenientMode && flatDataConnector.readOnly && (
           <div className="mt-1">
-            <WarnAlert dismissible={false}>
+            <InfoAlert 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.
+                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 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

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

@@ -287,9 +287,19 @@ export default function DataConnectorModalFooter({
 
   // Visual elements
   const disableContinueButton =
-    cloudStorageState.step === 1 &&
-    (!flatDataConnector.schema ||
-      (schemaRequiresProvider && !flatDataConnector.provider));
+    (cloudStorageState.step === 1 &&
+      (!flatDataConnector.schema ||
+        (schemaRequiresProvider && !flatDataConnector.provider))) ||
+    (cloudStorageState.step === 2 &&
+      flatDataConnector.convenientMode &&
+      !(
+        flatDataConnector.sourcePath &&
+        flatDataConnector.options &&
+        Object.values(flatDataConnector.options).every((v) => v)
+      )) ||
+    false;
+
+  console.log("disableContinueButton", disableContinueButton);
 
   const isAddResultLoading = createResult.isLoading;
   const isModifyResultLoading = updateResult.isLoading;
@@ -350,15 +360,17 @@ export default function DataConnectorModalFooter({
         <DataConnectorModalBackButton success={success} toggle={toggle} />
       )}
       {!success && (
-        <DataConnectorModalContinueButton
-          addButtonDisableReason={addButtonDisableReason}
-          addOrEditStorage={addOrEditStorage}
-          disableAddButton={disableAddButton}
-          disableContinueButton={disableContinueButton}
-          hasStoredCredentialsInConfig={hasStoredCredentialsInConfig}
-          isResultLoading={isResultLoading}
-          dataConnectorId={dataConnectorId}
-        />
+        <>
+          <DataConnectorModalContinueButton
+            addButtonDisableReason={addButtonDisableReason}
+            addOrEditStorage={addOrEditStorage}
+            disableAddButton={disableAddButton}
+            disableContinueButton={disableContinueButton}
+            hasStoredCredentialsInConfig={hasStoredCredentialsInConfig}
+            isResultLoading={isResultLoading}
+            dataConnectorId={dataConnectorId}
+          />
+        </>
       )}
     </>
   );

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

@@ -168,6 +168,7 @@ export function DataConnectorModalContinueButton({
           continueId="add-data-connector-continue"
           step={cloudStorageState.step}
           testId="test-data-connector"
+          disableContinueButton={disableContinueButton}
         />
         {disableContinueButton && (
           <UncontrolledTooltip
@@ -248,11 +249,13 @@ interface TestConnectionAndContinueButtonsProps
   continueId: string;
   step: number;
   testId: string;
+  disableContinueButton: boolean;
 }
 function TestConnectionAndContinueButtons({
   continueId,
   step,
   testId,
+  disableContinueButton,
 }: TestConnectionAndContinueButtonsProps) {
   const dispatch = useAppDispatch();
   const { flatDataConnector, isActionOngoing, validationResultIsCurrent } =
@@ -341,7 +344,7 @@ function TestConnectionAndContinueButtons({
         color={testConnectionColor}
         id={buttonTestId}
         data-cy={buttonTestId}
-        disabled={validationResult.isLoading}
+        disabled={disableContinueButton || validationResult.isLoading}
         onClick={() => validateConnection()}
       >
         {testConnectionContent}

client/src/features/dataConnectorsV2/components/dataConnector.utils.ts

@@ -49,6 +49,7 @@ export type DataConnectorFlat = {
   readOnly?: boolean;
   schema?: string;
   sourcePath?: string;
+  convenientMode?: boolean;
 };
 
 type DataConnectorOptions = Record<