Web: AutoBackup: Added common components for the storage module, refactoring.

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/amazonStorage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { withTranslation } from "react-i18next";
-import TextInput from "@appserver/components/text-input";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
+import AmazonSettings from "../consumer-storage-settings/AmazonSettings";
 
 class AmazonStorage extends React.Component {
   constructor(props) {
@@ -36,13 +36,15 @@ class AmazonStorage extends React.Component {
         : "";
 
     this.state = {
+      formSettings: {
         bucket: this.defaultBucketValue,
         forcePathStyle: this.defaultForcePathStyleValue,
         region: this.defaultRegionValue,
         serviceUrl: this.defaultServiceUrlValue,
         sse: this.defaultSSEValue,
         useHttp: this.defaultUseHttpValue,
-      isError: false,
+      },
+      formErrors: {},
       isChangedInput: false,
     };
     this.isDisabled =
@@ -74,25 +76,20 @@ class AmazonStorage extends React.Component {
   }
 
   onChange = (event) => {
+    const { formSettings } = this.state;
     const { target } = event;
     const value = target.value;
     const name = target.name;
 
-    this.setState({ [name]: value, isChangedInput: true });
-  };
-
-  isInvalidForm = () => {
-    const { bucket, region } = this.state;
-
-    if (bucket || region) return false;
-
     this.setState({
-      isError: true,
+      isChangedInput: true,
+      formSettings: { ...formSettings, [name]: value },
     });
-    return true;
   };
+
   onSaveSettings = () => {
-    const { fillInputValueArray } = this.props;
+    const { fillInputValueArray, isInvalidForm } = this.props;
+    const { formSettings } = this.state;
     const {
       bucket,
       forcePathStyle,
@@ -100,9 +97,24 @@ class AmazonStorage extends React.Component {
       serviceUrl,
       sse,
       useHttp,
-    } = this.state;
+    } = formSettings;
 
-    if (this.isInvalidForm()) return;
+    const isInvalid = isInvalidForm({
+      bucket,
+      region,
+      forcePathStyle,
+      serviceUrl,
+      sse,
+      useHttp,
+    });
+
+    const hasError = isInvalid[0];
+    const errors = isInvalid[1];
+
+    if (hasError) {
+      this.setState({ formErrors: errors });
+      return;
+    }
 
     const valuesArray = [
       bucket,
@@ -148,87 +160,28 @@ class AmazonStorage extends React.Component {
   };
 
   render() {
-    const {
+    const { isChangedInput, formSettings, formErrors } = this.state;
-      isChangedInput,
-      isError,
-      bucket,
-      forcePathStyle,
-      region,
-      serviceUrl,
-      sse,
-      useHttp,
-    } = this.state;
     const {
       t,
       isLoadingData,
       isLoading,
       isCopyingToLocal,
       isChanged,
+      selectedId,
+      availableStorage,
     } = this.props;
 
     return (
       <>
-        <TextInput
+        <AmazonSettings
-          name="bucket"
+          formSettings={formSettings}
-          className="backup_text-input"
-          scale={true}
-          value={bucket}
-          hasError={isError}
           onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
+          isLoading={isLoading}
-          placeholder={this.defaultBucketPlaceholder || ""}
+          isLoadingData={isLoadingData}
-          tabIndex={1}
+          isError={formErrors}
-        />
+          availableStorage={availableStorage}
-        <TextInput
+          selectedId={selectedId}
-          name="region"
+          t={t}
-          className="backup_text-input"
-          scale={true}
-          value={region}
-          hasError={isError}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.defaultRegionPlaceholder || ""}
-          tabIndex={1}
-        />
-        <TextInput
-          name="serviceUrl"
-          className="backup_text-input"
-          scale={true}
-          value={serviceUrl}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.defaultServiceUrlPlaceholder || ""}
-          tabIndex={1}
-        />
-        <TextInput
-          name="forcePathStyle"
-          className="backup_text-input"
-          scale={true}
-          value={forcePathStyle}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.defaultForcePathStylePlaceholder || ""}
-          tabIndex={1}
-        />
-        <TextInput
-          name="useHttp"
-          className="backup_text-input"
-          scale={true}
-          value={useHttp}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.defaultUseHttpPlaceholder || ""}
-          tabIndex={1}
-        />
-        <TextInput
-          name="sse"
-          className="backup_text-input"
-          scale={true}
-          value={sse}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.defaultSSEPlaceholder || ""}
-          tabIndex={1}
         />
 
         {(isChanged || isChangedInput) && (

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/googleCloudStorage.js

@@ -3,6 +3,7 @@ import { withTranslation } from "react-i18next";
 
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
 import TextInput from "@appserver/components/text-input";
+import GoogleCloudSettings from "../consumer-storage-settings/GoogleCloudSettings";
 
 class GoogleCloudStorage extends React.Component {
   constructor(props) {
@@ -15,7 +16,10 @@ class GoogleCloudStorage extends React.Component {
         : "";
 
     this.state = {
+      formSettings: {
         bucket: this.defaultBucketValue,
+      },
+      formErrors: {},
       isError: false,
       isChangedInput: false,
     };
@@ -36,27 +40,32 @@ class GoogleCloudStorage extends React.Component {
   }
 
   onChange = (event) => {
+    const { formSettings } = this.state;
     const { target } = event;
     const value = target.value;
     const name = target.name;
 
-    this.setState({ [name]: value, isChangedInput: true });
-  };
-
-  isInvalidForm = () => {
-    const { bucket } = this.state;
-    if (bucket) return false;
-
     this.setState({
-      isError: true,
+      isChangedInput: true,
+      formSettings: { ...formSettings, [name]: value },
     });
-    return true;
   };
-  onSaveSettings = () => {
-    const { fillInputValueArray } = this.props;
-    const { bucket } = this.state;
 
-    if (this.isInvalidForm()) return;
+  onSaveSettings = () => {
+    const { fillInputValueArray, isInvalidForm } = this.props;
+    const { formSettings } = this.state;
+    const { bucket } = formSettings;
+    const isInvalid = isInvalidForm({
+      bucket,
+    });
+
+    const hasError = isInvalid[0];
+    const errors = isInvalid[1];
+
+    if (hasError) {
+      this.setState({ formErrors: errors });
+      return;
+    }
 
     const inputNumber = 1;
     const valuesArray = [bucket];
@@ -82,27 +91,26 @@ class GoogleCloudStorage extends React.Component {
   };
 
   render() {
-    const { bucket, isChangedInput, isError } = this.state;
+    const { bucket, isChangedInput, formErrors, formSettings } = this.state;
     const {
       t,
       isLoadingData,
       isLoading,
       isCopyingToLocal,
       isChanged,
+      availableStorage,
+      selectedId,
     } = this.props;
 
     return (
       <>
-        <TextInput
+        <GoogleCloudSettings
-          name="bucket"
+          formSettings={formSettings}
-          className="backup_text-input"
-          scale={true}
-          value={bucket}
-          hasError={isError}
           onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
+          isLoading={isLoading}
-          placeholder={this.placeholder}
+          isError={formErrors}
-          tabIndex={1}
+          availableStorage={availableStorage}
+          selectedId={selectedId}
         />
 
         {(isChanged || isChangedInput) && (

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/rackspaceStorage.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { withTranslation } from "react-i18next";
-
-import TextInput from "@appserver/components/text-input";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
+import RackspaceSettings from "../consumer-storage-settings/RackspaceSettings";
 
 class RackspaceStorage extends React.Component {
   constructor(props) {
@@ -24,9 +23,12 @@ class RackspaceStorage extends React.Component {
         : "";
 
     this.state = {
+      formSettings: {
         private_container: this.defaultPrivateValue,
         public_container: this.defaultPublicValue,
         region: this.defaultRegion,
+      },
+      formErrors: {},
       isError: false,
       isChangedInput: false,
     };
@@ -56,27 +58,35 @@ class RackspaceStorage extends React.Component {
   }
 
   onChange = (event) => {
+    const { formSettings } = this.state;
     const { target } = event;
     const value = target.value;
     const name = target.name;
 
-    this.setState({ [name]: value, isChangedInput: true });
-  };
-
-  isInvalidForm = () => {
-    const { private_container, public_container, region } = this.state;
-    if (private_container || public_container || region) return false;
-
     this.setState({
-      isError: true,
+      isChangedInput: true,
+      formSettings: { ...formSettings, [name]: value },
     });
-    return true;
   };
-  onSaveSettings = () => {
-    const { fillInputValueArray } = this.props;
-    const { private_container, public_container, region } = this.state;
 
-    if (this.isInvalidForm()) return;
+  onSaveSettings = () => {
+    const { fillInputValueArray, isInvalidForm } = this.props;
+    const { formSettings } = this.state;
+    const { private_container, public_container, region } = formSettings;
+
+    const isInvalid = isInvalidForm({
+      private_container,
+      region,
+      public_container,
+    });
+
+    const hasError = isInvalid[0];
+    const errors = isInvalid[1];
+
+    if (hasError) {
+      this.setState({ formErrors: errors });
+      return;
+    }
 
     const valuesArray = [private_container, public_container, region];
 
@@ -107,55 +117,28 @@ class RackspaceStorage extends React.Component {
   };
 
   render() {
-    const {
+    const { isChangedInput, formSettings, formErrors } = this.state;
-      private_container,
-      public_container,
-      region,
-      isChangedInput,
-      isError,
-    } = this.state;
     const {
       t,
       isLoadingData,
       isLoading,
       isCopyingToLocal,
       isChanged,
+      availableStorage,
+      selectedId,
     } = this.props;
 
     return (
       <>
-        <TextInput
+        <RackspaceSettings
-          name="private_container"
+          formSettings={formSettings}
-          className="backup_text-input"
-          scale={true}
-          value={private_container}
-          hasError={isError}
           onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
+          isLoading={isLoading}
-          placeholder={this.privatePlaceholder || ""}
+          isLoadingData={isLoadingData}
-          tabIndex={1}
+          isError={formErrors}
-        />
+          availableStorage={availableStorage}
-        <TextInput
+          selectedId={selectedId}
-          name="public_container"
+          t={t}
-          className="backup_text-input"
-          scale={true}
-          value={public_container}
-          hasError={isError}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.publicPlaceholder || ""}
-          tabIndex={1}
-        />
-        <TextInput
-          name="region"
-          className="backup_text-input"
-          scale={true}
-          value={region}
-          hasError={isError}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.regionPlaceholder || ""}
-          tabIndex={1}
         />
 
         {(isChanged || isChangedInput) && (

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/selectelStorage.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { withTranslation } from "react-i18next";
-
-import TextInput from "@appserver/components/text-input";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
+import SelectelSettings from "../consumer-storage-settings/SelectelSettings";
 
 class SelectelStorage extends React.Component {
   constructor(props) {
@@ -19,8 +18,11 @@ class SelectelStorage extends React.Component {
         : "";
 
     this.state = {
+      formSettings: {
         private_container: this.defaultPrivateValue,
         public_container: this.defaultPublicValue,
+      },
+      formErrors: {},
       isError: false,
       isChangedInput: false,
     };
@@ -46,27 +48,34 @@ class SelectelStorage extends React.Component {
   }
 
   onChange = (event) => {
+    const { formSettings } = this.state;
     const { target } = event;
     const value = target.value;
     const name = target.name;
 
-    this.setState({ [name]: value, isChangedInput: true });
-  };
-
-  isInvalidForm = () => {
-    const { private_container, public_container } = this.state;
-    if (private_container || public_container) return false;
-
     this.setState({
-      isError: true,
+      isChangedInput: true,
+      formSettings: { ...formSettings, [name]: value },
     });
-    return true;
   };
-  onSaveSettings = () => {
-    const { fillInputValueArray } = this.props;
-    const { private_container, public_container } = this.state;
 
-    if (this.isInvalidForm()) return;
+  onSaveSettings = () => {
+    const { fillInputValueArray, isInvalidForm } = this.props;
+    const { formSettings } = this.state;
+    const { private_container, public_container } = formSettings;
+
+    const isInvalid = isInvalidForm({
+      private_container,
+      public_container,
+    });
+
+    const hasError = isInvalid[0];
+    const errors = isInvalid[1];
+
+    if (hasError) {
+      this.setState({ formErrors: errors });
+      return;
+    }
 
     const valuesArray = [private_container, public_container];
 
@@ -95,12 +104,7 @@ class SelectelStorage extends React.Component {
   };
 
   render() {
-    const {
+    const { isChangedInput, formSettings, formErrors } = this.state;
-      private_container,
-      public_container,
-      isChangedInput,
-      isError,
-    } = this.state;
     const {
       t,
       isLoadingData,
@@ -108,31 +112,21 @@ class SelectelStorage extends React.Component {
 
       isCopyingToLocal,
       isChanged,
+      availableStorage,
+      selectedId,
     } = this.props;
 
     return (
       <>
-        <TextInput
+        <SelectelSettings
-          name="private_container"
+          formSettings={formSettings}
-          className="backup_text-input"
-          scale={true}
-          value={private_container}
-          hasError={isError}
           onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
+          isLoading={isLoading}
-          placeholder={this.privatePlaceholder || ""}
+          isLoadingData={isLoadingData}
-          tabIndex={1}
+          isError={formErrors}
-        />
+          availableStorage={availableStorage}
-        <TextInput
+          selectedId={selectedId}
-          name="public_container"
+          t={t}
-          className="backup_text-input"
-          scale={true}
-          value={public_container}
-          hasError={isError}
-          onChange={this.onChange}
-          isDisabled={isLoadingData || isLoading || this.isDisabled}
-          placeholder={this.publicPlaceholder || ""}
-          tabIndex={1}
         />
 
         {(isChanged || isChangedInput) && (

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyStorageModule.js

@@ -696,6 +696,23 @@ class ThirdPartyStorageModule extends React.PureComponent {
     startBackup("5", storageParams);
     setInterval();
   };
+
+  isInvalidForm = (formSettings) => {
+    let errors = {};
+    let firstError = false;
+
+    for (let key in formSettings) {
+      const elem = formSettings[key];
+      errors[key] = !elem.trim();
+
+      if (!elem.trim() && !firstError) {
+        firstError = true;
+      }
+    }
+
+    return [firstError, errors];
+  };
+
   render() {
     const {
       t,
@@ -765,6 +782,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
             currentStorageId={
               this.isSetDefaultIdStorage ? defaultSelectedId : ""
             }
+            isInvalidForm={this.isInvalidForm}
           />
         )}
 
@@ -783,6 +801,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
             currentStorageId={
               this.isSetDefaultIdStorage ? defaultSelectedId : ""
             }
+            isInvalidForm={this.isInvalidForm}
           />
         )}
 
@@ -801,6 +820,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
             currentStorageId={
               this.isSetDefaultIdStorage ? defaultSelectedId : ""
             }
+            isInvalidForm={this.isInvalidForm}
           />
         )}
 
@@ -819,6 +839,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
             currentStorageId={
               this.isSetDefaultIdStorage ? defaultSelectedId : ""
             }
+            isInvalidForm={this.isInvalidForm}
           />
         )}