IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tatiana Lopaeva 2021-10-02 18:22:59 +03:00
parent ea2a7ab590
commit db9ab26bd2
5 changed files with 168 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyStorageModule.js
View File

@ -131,17 +131,20 @@ class ThirdPartyStorageModule extends React.PureComponent {
};
isInvalidForm = (formSettings) => {
let errors = {};
let firstError = false;
for (let key in formSettings) {
const elem = formSettings[key];
errors[key] = !elem.trim();
if (!elem.trim()) {
return true;
if (!elem.trim() && !firstError) {
firstError = true;
}
}
return false;
return [firstError, errors];
};
render() {
const { t, helpUrlCreatingBackup, isLoadingData, maxProgress } = this.props;
const {

153
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/storages/AmazonStorage.js
View File

@ -1,23 +1,26 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import AmazonSettings from "../../consumer-storage-settings/AmazonSettings";
class AmazonStorage extends React.Component {
constructor(props) {
super(props);
const { t, availableStorage, selectedId } = this.props;
this.state = {
bucket: "",
forcePathStyle: "",
region: "",
serviceUrl: "",
sse: "",
useHttp: "",
isError: false,
formSettings: {
bucket: "",
forcePathStyle: "",
region: "",
serviceUrl: "",
sse: "",
useHttp: "",
},
formErrors: {},
isChangedInput: false,
};
this.namesArray = AmazonSettings.formNames();
this.isDisabled =
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
@ -40,125 +43,57 @@ 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 });
this.setState({ formSettings: { ...formSettings, [name]: value } });
};
onMakeCopy = () => {
const {
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
isError,
} = this.state;
const { formSettings } = this.state;
const { bucket, region } = formSettings;
const { onMakeCopyIntoStorage, isInvalidForm } = this.props;
if (isInvalidForm([bucket, region])) {
this.setState({
isError: true,
});
const isInvalid = isInvalidForm({
bucket,
region,
});
const hasError = isInvalid[0];
const errors = isInvalid[1];
if (hasError) {
this.setState({ formErrors: errors });
return;
}
isError &&
this.setState({
isError: false,
});
const valuesArray = [
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
];
onMakeCopyIntoStorage(valuesArray);
onMakeCopyIntoStorage(this.namesArray);
this.setState({ formErrors: {} });
};
render() {
const { formSettings, formErrors } = this.state;
const {
isError,
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
} = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
t,
isLoadingData,
isLoading,
maxProgress,
availableStorage,
selectedId,
} = this.props;
return (
<>
<TextInput
name="bucket"
className="backup_text-input"
scale={true}
value={bucket}
hasError={isError}
<AmazonSettings
formSettings={formSettings}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.defaultBucketPlaceholder || ""}
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.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}
isLoading={isLoading}
isLoadingData={isLoadingData}
isError={formErrors}
availableStorage={availableStorage}
selectedId={selectedId}
t={t}
/>
<div className="manual-backup_buttons">

72
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/storages/GoogleCloudStorage.js
View File

@ -1,8 +1,7 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import GoogleCloudSettings from "../../consumer-storage-settings/GoogleCloudSettings";
class GoogleCloudStorage extends React.Component {
constructor(props) {
@ -10,9 +9,12 @@ class GoogleCloudStorage extends React.Component {
const { availableStorage, selectedId } = this.props;
this.state = {
bucket: "",
formSettings: {
bucket: "",
},
isError: false,
isChangedInput: false,
formErrors: {},
};
this.isDisabled =
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
@ -24,59 +26,55 @@ 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 });
};
isInvalidForm = () => {
const { bucket } = this.state;
if (bucket) return false;
this.setState({
isError: true,
});
return true;
this.setState({ formSettings: { ...formSettings, [name]: value } });
};
onMakeCopy = () => {
const { bucket, isError } = this.state;
const { formSettings } = this.state;
const { bucket } = formSettings;
const { onMakeCopyIntoStorage, isInvalidForm } = this.props;
const valuesArray = [bucket];
const isInvalid = isInvalidForm({
bucket,
});
if (isInvalidForm(valuesArray)) {
this.setState({
isError: true,
});
const hasError = isInvalid[0];
const errors = isInvalid[1];
if (hasError) {
this.setState({ formErrors: errors });
return;
}
isError &&
this.setState({
isError: false,
});
onMakeCopyIntoStorage(valuesArray);
onMakeCopyIntoStorage([bucket]);
this.setState({ formErrors: {} });
};
render() {
const { bucket, isError } = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
const { formSettings, formErrors } = this.state;
const {
t,
isLoadingData,
isLoading,
maxProgress,
availableStorage,
selectedId,
} = this.props;
return (
<>
<TextInput
name="bucket"
className="backup_text-input"
scale={true}
value={bucket}
hasError={isError}
<GoogleCloudSettings
formSettings={formSettings}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.placeholder}
tabIndex={1}
isLoading={isLoading}
isError={formErrors}
availableStorage={availableStorage}
selectedId={selectedId}
isLoadingData={isLoadingData}
/>
<div className="manual-backup_buttons">

93
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/storages/RackspaceStorage.js
View File

@ -1,18 +1,22 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import RackspaceSettings from "../../consumer-storage-settings/RackspaceSettings";
class RackspaceStorage extends React.Component {
constructor(props) {
super(props);
const { availableStorage, selectedId } = this.props;
this.namesArray = RackspaceSettings.formNames();
this.state = {
private_container: "",
public_container: "",
region: "",
isError: false,
formSettings: {
private_container: "",
public_container: "",
region: "",
},
formErrors: {},
};
this.isDisabled =
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
@ -33,71 +37,58 @@ 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 });
this.setState({ formSettings: { ...formSettings, [name]: value } });
};
onMakeCopy = () => {
const { private_container, public_container, region, isError } = this.state;
const { formSettings } = this.state;
const { private_container, public_container, region } = formSettings;
const { onMakeCopyIntoStorage, isInvalidForm } = this.props;
const valuesArray = [private_container, public_container, region];
const isInvalid = isInvalidForm({
private_container,
public_container,
region,
});
if (isInvalidForm(valuesArray)) {
this.setState({
isError: true,
});
const hasError = isInvalid[0];
const errors = isInvalid[1];
if (hasError) {
this.setState({ formErrors: errors });
return;
}
isError &&
this.setState({
isError: false,
});
onMakeCopyIntoStorage(valuesArray);
onMakeCopyIntoStorage(this.namesArray);
this.setState({ formErrors: {} });
};
render() {
const { private_container, public_container, region, isError } = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
const { formSettings, formErrors } = this.state;
const {
t,
isLoadingData,
isLoading,
maxProgress,
selectedId,
availableStorage,
} = this.props;
return (
<>
<TextInput
name="private_container"
className="backup_text-input"
scale={true}
value={private_container}
hasError={isError}
<RackspaceSettings
formSettings={formSettings}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.privatePlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="public_container"
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}
isLoading={isLoading}
isLoadingData={isLoadingData}
isError={formErrors}
availableStorage={availableStorage}
selectedId={selectedId}
t={t}
/>
<div className="manual-backup_buttons">

79
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/storages/SelectelStorage.js
View File

@ -1,17 +1,21 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import SelectelSettings from "../../consumer-storage-settings/SelectelSettings";
class SelectelStorage extends React.Component {
constructor(props) {
super(props);
const { availableStorage, selectedId } = this.props;
this.namesArray = SelectelSettings.formNames();
this.state = {
private_container: "",
public_container: "",
isError: false,
formSettings: {
private_container: "",
public_container: "",
},
formErrors: {},
};
this.isDisabled =
@ -27,61 +31,58 @@ 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 });
this.setState({ formSettings: { ...formSettings, [name]: value } });
};
onMakeCopy = () => {
const { private_container, public_container, isError } = this.state;
const { formSettings } = this.state;
const { private_container, public_container } = formSettings;
const { onMakeCopyIntoStorage, isInvalidForm } = this.props;
const valuesArray = [private_container, public_container];
const isInvalid = isInvalidForm({
private_container,
public_container,
});
if (isInvalidForm(valuesArray)) {
this.setState({
isError: true,
});
const hasError = isInvalid[0];
const errors = isInvalid[1];
if (hasError) {
this.setState({ formErrors: errors });
return;
}
isError &&
this.setState({
isError: false,
});
onMakeCopyIntoStorage(valuesArray);
onMakeCopyIntoStorage(this.namesArray);
this.setState({ formErrors: {} });
};
render() {
const { private_container, public_container, isError } = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
const { formSettings, formErrors } = this.state;
const {
t,
isLoadingData,
isLoading,
maxProgress,
selectedId,
availableStorage,
} = this.props;
return (
<>
<TextInput
name="private_container"
className="backup_text-input"
scale={true}
value={private_container}
hasError={isError}
<SelectelSettings
formSettings={formSettings}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.privatePlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="public_container"
className="backup_text-input"
scale={true}
value={public_container}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.publicPlaceholder || ""}
tabIndex={1}
isLoading={isLoading}
isLoadingData={isLoadingData}
isError={formErrors}
availableStorage={availableStorage}
selectedId={selectedId}
t={t}
/>
<div className="manual-backup_buttons">