Web: Settings: Manual/Auto: Splitted third-party storage module into components and separated of logic for repositories.
This commit is contained in:
parent
d9bac1abdf
commit
1c3a37508d
@ -142,7 +142,6 @@ class AutomaticBackup extends React.PureComponent {
|
||||
|
||||
.then((selectedSchedule) => {
|
||||
if (selectedSchedule) {
|
||||
// debugger;
|
||||
const folderId = selectedSchedule.storageParams.folderId;
|
||||
this.setState({
|
||||
defaultSelectedFolder: folderId,
|
||||
@ -819,15 +818,40 @@ class AutomaticBackup extends React.PureComponent {
|
||||
{isShowThirdPartyStorage && (
|
||||
<>
|
||||
<ThirdPartyStorageModule
|
||||
fillStorageFields={this.fillStorageFields}
|
||||
onCancelModuleSettings={this.onCancelModuleSettings}
|
||||
isCopyingToLocal={isCopyingToLocal}
|
||||
isLoadingData={isLoadingData}
|
||||
isDisableOptions={isDisableOptions}
|
||||
isChanged={isChanged}
|
||||
onSetDisableOptions={this.onSetDisableOptions}
|
||||
weeklySchedule={weeklySchedule}
|
||||
monthlySchedule={monthlySchedule}
|
||||
weekOptions={weekOptions}
|
||||
selectedWeekdayOption={selectedWeekdayOption}
|
||||
weekdaysOptions={this.weekdaysOptions}
|
||||
periodOptions={this.periodOptions}
|
||||
lng={this.lng}
|
||||
monthNumberOptionsArray={this.monthNumberOptionsArray}
|
||||
timeOptionsArray={this.timeOptionsArray}
|
||||
maxNumberCopiesArray={this.maxNumberCopiesArray}
|
||||
defaultStorageType={defaultStorageType}
|
||||
defaultSelectedFolder={defaultSelectedFolder}
|
||||
defaultSelectedOption={defaultSelectedOption}
|
||||
defaultHour={defaultHour}
|
||||
defaultMaxCopies={defaultMaxCopies}
|
||||
defaultPeriod={defaultPeriod}
|
||||
defaultDay={defaultDay}
|
||||
defaultSelectedWeekdayOption={defaultSelectedWeekdayOption}
|
||||
defaultWeekly={defaultWeekly}
|
||||
defaultDaily={defaultDaily}
|
||||
defaultMonthly={defaultMonthly}
|
||||
monthlySchedule={monthlySchedule}
|
||||
dailySchedule={dailySchedule}
|
||||
weeklySchedule={weeklySchedule}
|
||||
isCopyingToLocal={isCopyingToLocal}
|
||||
onCancelModuleSettings={this.onCancelModuleSettings}
|
||||
changedDefaultOptions={this.changedDefaultOptions}
|
||||
onSetDefaultOptions={this.onSetDefaultOptions}
|
||||
onSetLoadingData={this.onSetLoadingData}
|
||||
/>
|
||||
<ScheduleComponent
|
||||
{/* <ScheduleComponent
|
||||
weeklySchedule={weeklySchedule}
|
||||
monthlySchedule={monthlySchedule}
|
||||
weekOptions={weekOptions}
|
||||
@ -849,7 +873,7 @@ class AutomaticBackup extends React.PureComponent {
|
||||
}
|
||||
onSelectWeedDay={this.onSelectWeedDay}
|
||||
onSelectPeriod={this.onSelectPeriod}
|
||||
/>
|
||||
/> */}
|
||||
</>
|
||||
)}
|
||||
</StyledModules>
|
||||
|
@ -310,7 +310,7 @@ class ManualBackup extends React.Component {
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const { t, commonThirdPartyList } = this.props;
|
||||
const { t } = this.props;
|
||||
const {
|
||||
downloadingProgress,
|
||||
link,
|
||||
@ -467,6 +467,7 @@ class ManualBackup extends React.Component {
|
||||
{isCheckedThirdPartyStorage && (
|
||||
<ThirdPartyStorageModule
|
||||
maxProgress={maxProgress}
|
||||
isLoadingData={isLoadingData}
|
||||
isManualBackup
|
||||
setInterval={this.setInterval}
|
||||
/>
|
||||
|
@ -0,0 +1,323 @@
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import Button from "@appserver/components/button";
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||
|
||||
class AmazonStorage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { t, availableStorage, selectedId, currentStorageId } = this.props;
|
||||
|
||||
this.defaultBucketValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[0].value
|
||||
: "";
|
||||
|
||||
this.defaultForcePathStyleValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[1].value
|
||||
: "";
|
||||
this.defaultRegionValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[2].value
|
||||
: "";
|
||||
this.defaultServiceUrlValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[3].value
|
||||
: "";
|
||||
this.defaultSSEValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[4].value
|
||||
: "";
|
||||
|
||||
this.defaultUseHttpValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[5].value
|
||||
: "";
|
||||
|
||||
this.state = {
|
||||
bucket: this.defaultBucketValue,
|
||||
forcePathStyle: this.defaultForcePathStyleValue,
|
||||
region: this.defaultRegionValue,
|
||||
serviceUrl: this.defaultServiceUrlValue,
|
||||
sse: this.defaultSSEValue,
|
||||
useHttp: this.defaultUseHttpValue,
|
||||
isError: false,
|
||||
isChangedInput: false,
|
||||
};
|
||||
this.isDisabled =
|
||||
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
|
||||
|
||||
this.defaultBucketPlaceholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[0].title;
|
||||
|
||||
this.defaultForcePathStylePlaceholder = t("ForcePathStyle");
|
||||
|
||||
this.defaultRegionPlaceholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[2].title;
|
||||
|
||||
this.defaultServiceUrlPlaceholder = t("ServiceUrl");
|
||||
|
||||
this.defaultSSEPlaceholder = t("SSE");
|
||||
|
||||
this.defaultUseHttpPlaceholder = t("UseHttp");
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
onChange = (event) => {
|
||||
const { target } = event;
|
||||
const value = target.value;
|
||||
const name = target.name;
|
||||
|
||||
this.setState({ [name]: value, isChangedInput: true });
|
||||
};
|
||||
|
||||
isInvalidForm = () => {
|
||||
const {
|
||||
bucket,
|
||||
forcePathStyle,
|
||||
region,
|
||||
serviceUrl,
|
||||
sse,
|
||||
useHttp,
|
||||
} = this.state;
|
||||
|
||||
if (bucket || forcePathStyle || region || serviceUrl || sse || useHttp)
|
||||
return false;
|
||||
|
||||
this.setState({
|
||||
isError: true,
|
||||
});
|
||||
return true;
|
||||
};
|
||||
onSaveSettings = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const {
|
||||
bucket,
|
||||
forcePathStyle,
|
||||
region,
|
||||
serviceUrl,
|
||||
sse,
|
||||
useHttp,
|
||||
} = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const valuesArray = [
|
||||
bucket,
|
||||
forcePathStyle,
|
||||
region,
|
||||
serviceUrl,
|
||||
sse,
|
||||
useHttp,
|
||||
];
|
||||
|
||||
const inputNumber = valuesArray.length;
|
||||
|
||||
this.defaultBucketValue = bucket;
|
||||
|
||||
this.defaultForcePathStyleValue = forcePathStyle;
|
||||
this.defaultRegionValue = region;
|
||||
this.defaultServiceUrlValue = serviceUrl;
|
||||
this.defaultSSEValue = sse;
|
||||
|
||||
this.defaultUseHttpValue = useHttp;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
|
||||
onCancelSettings = () => {
|
||||
const { onCancelSettings } = this.props;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
bucket: this.defaultBucketValue,
|
||||
forcePathStyle: this.defaultForcePathStyleValue,
|
||||
region: this.defaultRegionValue,
|
||||
serviceUrl: this.defaultServiceUrlValue,
|
||||
sse: this.defaultSSEValue,
|
||||
useHttp: this.defaultUseHttpValue,
|
||||
});
|
||||
onCancelSettings();
|
||||
};
|
||||
|
||||
onMakeCopy = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const {
|
||||
bucket,
|
||||
forcePathStyle,
|
||||
region,
|
||||
serviceUrl,
|
||||
sse,
|
||||
useHttp,
|
||||
} = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const valuesArray = [
|
||||
bucket,
|
||||
forcePathStyle,
|
||||
region,
|
||||
serviceUrl,
|
||||
sse,
|
||||
useHttp,
|
||||
];
|
||||
|
||||
const inputNumber = valuesArray.length;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
render() {
|
||||
const {
|
||||
isChangedInput,
|
||||
isError,
|
||||
bucket,
|
||||
forcePathStyle,
|
||||
region,
|
||||
serviceUrl,
|
||||
sse,
|
||||
useHttp,
|
||||
} = this.state;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isLoading,
|
||||
isManualBackup,
|
||||
maxProgress,
|
||||
isCopyingToLocal,
|
||||
isChanged,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
name="bucket"
|
||||
className="backup_text-input"
|
||||
scale={true}
|
||||
value={bucket}
|
||||
hasError={isError}
|
||||
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}
|
||||
hasError={isError}
|
||||
onChange={this.onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.defaultServiceUrlPlaceholder || ""}
|
||||
tabIndex={1}
|
||||
/>
|
||||
<TextInput
|
||||
name="forcePathStyle"
|
||||
className="backup_text-input"
|
||||
scale={true}
|
||||
value={forcePathStyle}
|
||||
hasError={isError}
|
||||
onChange={this.onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.defaultForcePathStylePlaceholder || ""}
|
||||
tabIndex={1}
|
||||
/>
|
||||
<TextInput
|
||||
name="useHttp"
|
||||
className="backup_text-input"
|
||||
scale={true}
|
||||
value={useHttp}
|
||||
hasError={isError}
|
||||
onChange={this.onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.defaultUseHttpPlaceholder || ""}
|
||||
tabIndex={1}
|
||||
/>
|
||||
<TextInput
|
||||
name="sse"
|
||||
className="backup_text-input"
|
||||
scale={true}
|
||||
value={sse}
|
||||
hasError={isError}
|
||||
onChange={this.onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.defaultSSEPlaceholder || ""}
|
||||
tabIndex={1}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
onCancelClick={this.onCancelSettings}
|
||||
showReminder={false}
|
||||
reminderTest={t("YouHaveUnsavedChanges")}
|
||||
saveButtonLabel={t("SaveButton")}
|
||||
cancelButtonLabel={t("CancelButton")}
|
||||
isDisabled={
|
||||
isCopyingToLocal ||
|
||||
isLoadingData ||
|
||||
isLoading ||
|
||||
this.isDisabled
|
||||
}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="manual-backup_buttons">
|
||||
<Button
|
||||
label={t("MakeCopy")}
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!maxProgress || this.isDisabled}
|
||||
size="medium"
|
||||
tabIndex={10}
|
||||
/>
|
||||
{!maxProgress && (
|
||||
<Button
|
||||
label={t("Copying")}
|
||||
onClick={() => console.log("click")}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
style={{ marginLeft: "8px" }}
|
||||
tabIndex={11}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default withTranslation("Settings")(AmazonStorage);
|
@ -0,0 +1,174 @@
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
import Button from "@appserver/components/button";
|
||||
|
||||
import { startBackup } from "@appserver/common/api/portal";
|
||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||
import ScheduleComponent from "../sub-components-automatic-backup/scheduleComponent";
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import {
|
||||
createBackupSchedule,
|
||||
getBackupSchedule,
|
||||
} from "@appserver/common/api/portal";
|
||||
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import { saveToSessionStorage, getFromSessionStorage } from "../.././../utils";
|
||||
|
||||
class GoogleCloudStorage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { availableStorage, selectedId, currentStorageId } = this.props;
|
||||
|
||||
this.defaultBucketValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[0].value
|
||||
: "";
|
||||
|
||||
this.state = {
|
||||
bucket: this.defaultBucketValue,
|
||||
isError: false,
|
||||
isChangedInput: false,
|
||||
};
|
||||
this.isDisabled =
|
||||
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
|
||||
|
||||
this.placeholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[0].title;
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
onChange = (event) => {
|
||||
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,
|
||||
});
|
||||
return true;
|
||||
};
|
||||
onSaveSettings = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const { bucket } = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const inputNumber = 1;
|
||||
const valuesArray = [bucket];
|
||||
|
||||
this.defaultBucketValue = bucket;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
|
||||
onCancelSettings = () => {
|
||||
const { onCancelSettings } = this.props;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
bucket: this.defaultBucketValue,
|
||||
});
|
||||
onCancelSettings();
|
||||
};
|
||||
onMakeCopy = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const { bucket } = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const inputNumber = 1;
|
||||
const valuesArray = [bucket];
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
render() {
|
||||
const { bucket, isChangedInput, isError } = this.state;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isLoading,
|
||||
isManualBackup,
|
||||
maxProgress,
|
||||
isCopyingToLocal,
|
||||
isChanged,
|
||||
} = this.props;
|
||||
console.log("isLoadingData", isLoadingData);
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
name="bucket"
|
||||
className="backup_text-input"
|
||||
scale={true}
|
||||
value={bucket}
|
||||
hasError={isError}
|
||||
onChange={this.onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.placeholder}
|
||||
tabIndex={1}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
onCancelClick={this.onCancelSettings}
|
||||
showReminder={false}
|
||||
reminderTest={t("YouHaveUnsavedChanges")}
|
||||
saveButtonLabel={t("SaveButton")}
|
||||
cancelButtonLabel={t("CancelButton")}
|
||||
isDisabled={isCopyingToLocal || isLoadingData || isLoading}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="manual-backup_buttons">
|
||||
<Button
|
||||
label={t("MakeCopy")}
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!maxProgress}
|
||||
size="medium"
|
||||
tabIndex={10}
|
||||
/>
|
||||
{!maxProgress && (
|
||||
<Button
|
||||
label={t("Copying")}
|
||||
onClick={() => console.log("click")}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
style={{ marginLeft: "8px" }}
|
||||
tabIndex={11}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default withTranslation("Settings")(GoogleCloudStorage);
|
@ -0,0 +1,222 @@
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import Button from "@appserver/components/button";
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||
|
||||
class RackspaceStorage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { availableStorage, selectedId, currentStorageId } = this.props;
|
||||
|
||||
this.defaultPrivateValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[0].value
|
||||
: "";
|
||||
|
||||
this.defaultPublicValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[1].value
|
||||
: "";
|
||||
this.defaultRegion =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[2].value
|
||||
: "";
|
||||
|
||||
this.state = {
|
||||
private_container: this.defaultPrivateValue,
|
||||
public_container: this.defaultPublicValue,
|
||||
region: this.defaultRegion,
|
||||
isError: false,
|
||||
isChangedInput: false,
|
||||
};
|
||||
this.isDisabled =
|
||||
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
|
||||
|
||||
this.privatePlaceholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[0].title;
|
||||
|
||||
this.publicPlaceholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[1].title;
|
||||
|
||||
this.regionPlaceholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[2].title;
|
||||
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
onChange = (event) => {
|
||||
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,
|
||||
});
|
||||
return true;
|
||||
};
|
||||
onSaveSettings = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const { private_container, public_container, region } = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const valuesArray = [private_container, public_container, region];
|
||||
|
||||
const inputNumber = valuesArray.length;
|
||||
|
||||
this.defaultPrivateValue = private_container;
|
||||
this.defaultPublicValue = public_container;
|
||||
this.defaultRegion = region;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
|
||||
onCancelSettings = () => {
|
||||
const { onCancelSettings } = this.props;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
private_container: this.defaultPrivateValue,
|
||||
public_container: this.defaultPublicValue,
|
||||
region: this.defaultRegion,
|
||||
});
|
||||
onCancelSettings();
|
||||
};
|
||||
onMakeCopy = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const { private_container, public_container, region } = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const valuesArray = [private_container, public_container, region];
|
||||
|
||||
const inputNumber = valuesArray.length;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
render() {
|
||||
const {
|
||||
private_container,
|
||||
public_container,
|
||||
region,
|
||||
isChangedInput,
|
||||
isError,
|
||||
} = this.state;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isLoading,
|
||||
isManualBackup,
|
||||
maxProgress,
|
||||
isCopyingToLocal,
|
||||
isChanged,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
name="private_container"
|
||||
className="backup_text-input"
|
||||
scale={true}
|
||||
value={private_container}
|
||||
hasError={isError}
|
||||
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}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
onCancelClick={this.onCancelSettings}
|
||||
showReminder={false}
|
||||
reminderTest={t("YouHaveUnsavedChanges")}
|
||||
saveButtonLabel={t("SaveButton")}
|
||||
cancelButtonLabel={t("CancelButton")}
|
||||
isDisabled={
|
||||
isCopyingToLocal ||
|
||||
isLoadingData ||
|
||||
isLoading ||
|
||||
this.isDisabled
|
||||
}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="manual-backup_buttons">
|
||||
<Button
|
||||
label={t("MakeCopy")}
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!maxProgress || this.isDisabled}
|
||||
size="medium"
|
||||
tabIndex={10}
|
||||
/>
|
||||
{!maxProgress && (
|
||||
<Button
|
||||
label={t("Copying")}
|
||||
onClick={() => console.log("click")}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
style={{ marginLeft: "8px" }}
|
||||
tabIndex={11}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default withTranslation("Settings")(RackspaceStorage);
|
@ -0,0 +1,199 @@
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import Button from "@appserver/components/button";
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||
|
||||
class SelectelStorage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { availableStorage, selectedId, currentStorageId } = this.props;
|
||||
|
||||
this.defaultPrivateValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[0].value
|
||||
: "";
|
||||
this.defaultPublicValue =
|
||||
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||
? availableStorage[currentStorageId].properties[1].value
|
||||
: "";
|
||||
|
||||
this.state = {
|
||||
private_container: this.defaultPrivateValue,
|
||||
public_container: this.defaultPublicValue,
|
||||
isError: false,
|
||||
isChangedInput: false,
|
||||
};
|
||||
this.isDisabled =
|
||||
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
|
||||
|
||||
this.privatePlaceholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[0].title;
|
||||
|
||||
this.publicPlaceholder =
|
||||
availableStorage[selectedId] &&
|
||||
availableStorage[selectedId].properties[1].title;
|
||||
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
onChange = (event) => {
|
||||
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,
|
||||
});
|
||||
return true;
|
||||
};
|
||||
onSaveSettings = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const { private_container, public_container } = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const valuesArray = [private_container, public_container];
|
||||
|
||||
const inputNumber = valuesArray.length;
|
||||
|
||||
this.defaultPrivateValue = private_container;
|
||||
this.defaultPublicValue = public_container;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
|
||||
onCancelSettings = () => {
|
||||
const { onCancelSettings } = this.props;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
private_container: this.defaultPrivateValue,
|
||||
public_container: this.defaultPublicValue,
|
||||
});
|
||||
onCancelSettings();
|
||||
};
|
||||
|
||||
onMakeCopy = () => {
|
||||
const { fillInputValueArray } = this.props;
|
||||
const { private_container, public_container } = this.state;
|
||||
|
||||
if (this.isInvalidForm()) return;
|
||||
|
||||
const valuesArray = [private_container, public_container];
|
||||
|
||||
const inputNumber = valuesArray.length;
|
||||
|
||||
this.setState({
|
||||
isChangedInput: false,
|
||||
isError: false,
|
||||
});
|
||||
fillInputValueArray(inputNumber, valuesArray);
|
||||
};
|
||||
render() {
|
||||
const {
|
||||
private_container,
|
||||
public_container,
|
||||
isChangedInput,
|
||||
isError,
|
||||
} = this.state;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isLoading,
|
||||
isManualBackup,
|
||||
maxProgress,
|
||||
isCopyingToLocal,
|
||||
isChanged,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
name="private_container"
|
||||
className="backup_text-input"
|
||||
scale={true}
|
||||
value={private_container}
|
||||
hasError={isError}
|
||||
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}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
onCancelClick={this.onCancelSettings}
|
||||
showReminder={false}
|
||||
reminderTest={t("YouHaveUnsavedChanges")}
|
||||
saveButtonLabel={t("SaveButton")}
|
||||
cancelButtonLabel={t("CancelButton")}
|
||||
isDisabled={
|
||||
isCopyingToLocal ||
|
||||
isLoadingData ||
|
||||
isLoading ||
|
||||
this.isDisabled
|
||||
}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="manual-backup_buttons">
|
||||
<Button
|
||||
label={t("MakeCopy")}
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!maxProgress || this.isDisabled}
|
||||
size="medium"
|
||||
tabIndex={10}
|
||||
/>
|
||||
{!maxProgress && (
|
||||
<Button
|
||||
label={t("Copying")}
|
||||
onClick={() => console.log("click")}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
style={{ marginLeft: "8px" }}
|
||||
tabIndex={11}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default withTranslation("Settings")(SelectelStorage);
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user