From 618f5467f2bec282650b91652569677b2c3188c7 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sun, 10 Feb 2019 17:45:00 +0000
Subject: [PATCH] RepoConfigTestPanel...

---
 borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx   |   21 +++--
 borgbutler-webapp/src/components/views/repos/RepoConfigTestPanel.jsx |   99 ++++++++++++++++++++++++
 borgbutler-webapp/src/components/views/repos/RepoConfigPanel.jsx     |   81 +------------------
 3 files changed, 118 insertions(+), 83 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx b/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx
index ee7f8d6..e76fd6c 100644
--- a/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx
+++ b/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx
@@ -112,15 +112,18 @@
                                          repoConfig={repoConfig}
                                          handleRepoConfigChange={this.handleRepoConfigChange}
                                          setRepoValue={this.setRepoValue}/>
-                <FormField length={12}>
-                    <Link to={'/repos'} className={'btn btn-outline-primary'}><I18n name={'common.cancel'}/>
-                    </Link>
-                    <FormButton onClick={this.onSave} bsStyle="primary"
-                                disabled={repoConfig.repo && repoConfig.repo.length > 0
-                                && repoConfig.displayName && repoConfig.displayName.length > 0 ? false : true}
-                                hintKey="configuration.save.hint"><I18n name={'common.save'}/>
-                    </FormButton>
-                </FormField>
+                <FormGroup row={true}>
+                    <FormLabel length={2}/>
+                    <FormField length={10}>
+                        <Link to={'/repos'} className={'btn btn-outline-primary'}><I18n name={'common.cancel'}/>
+                        </Link>
+                        <FormButton onClick={this.onSave} bsStyle="primary"
+                                    disabled={repoConfig.repo && repoConfig.repo.length > 0
+                                    && repoConfig.displayName && repoConfig.displayName.length > 0 ? false : true}
+                                    hintKey="configuration.save.hint"><I18n name={'common.save'}/>
+                        </FormButton>
+                    </FormField>
+                </FormGroup>
             </form>
             <code>
                 <h2>Todo:</h2>
diff --git a/borgbutler-webapp/src/components/views/repos/RepoConfigPanel.jsx b/borgbutler-webapp/src/components/views/repos/RepoConfigPanel.jsx
index 4d4a3f6..d97d0d0 100644
--- a/borgbutler-webapp/src/components/views/repos/RepoConfigPanel.jsx
+++ b/borgbutler-webapp/src/components/views/repos/RepoConfigPanel.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import {Alert, FormGroup} from 'reactstrap';
-import {FormButton, FormField, FormLabel} from '../../general/forms/FormComponents';
+import {FormButton, FormField, FormGroup, FormLabel} from '../../general/forms/FormComponents';
 import {getRestServiceUrl} from '../../../utilities/global';
 import I18n from "../../general/translation/I18n";
 import LoadingOverlay from '../../general/loading/LoadingOverlay';
@@ -8,6 +7,7 @@
 import ErrorAlert from "../../general/ErrorAlert";
 import RepoConfigBasePanel from './RepoConfigBasePanel';
 import RepoConfigPasswordPanel from './RepoConfigPasswordPanel';
+import RepoConfigTestPanel from './RepoConfigTestPanel';
 
 class RepoConfigPanel extends React.Component {
 
@@ -15,16 +15,13 @@
         super(props);
         this.state = {
             loading: false,
-            repoConfig: undefined,
-            testStatus: undefined,
-            testResult: undefined
+            repoConfig: undefined
         };
 
         this.fetch = this.fetch.bind(this);
         this.setRepoValue = this.setRepoValue.bind(this);
         this.onSave = this.onSave.bind(this);
         this.onCancel = this.onCancel.bind(this);
-        this.onTest = this.onTest.bind(this);
     }
 
     componentDidMount = () => this.fetch();
@@ -68,8 +65,6 @@
         //console.log(variable + "=" + value);
         this.setState({
             repoConfig: {...this.state.repoConfig, [variable]: value},
-            // reset testStatus only, if test status is OK (config values are changed, new test required):
-            testStatus: this.state.testStatus === 'OK' ? undefined : this.state.testStatus
         })
     }
 
@@ -87,34 +82,6 @@
         }
     }
 
-    onTest(event) {
-        this.setState({
-            testStatus: 'fetching',
-            testResult: undefined
-        });
-        fetch(getRestServiceUrl("repoConfig/check"), {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(this.state.repoConfig)
-        })
-            .then(response => response.text())
-            .then(result => {
-                //console.log("test-result: " + result);
-                this.setState({
-                    testStatus: result === 'OK' ? 'OK' : 'error',
-                    testResult: result
-                })
-            })
-            .catch((error) => {
-                console.log("error", error);
-                this.setState({
-                    testStatus: 'exception'
-                });
-            });
-    }
-
     async onCancel() {
         const response = this.fetch();
         if (response) await response;
@@ -132,37 +99,6 @@
                 description={'Repo not available or mis-configured (please refer the log files for more details).'}
             />
         }
-        let testResult = undefined;
-        let testButtonColor = this.props.repoError ? 'danger' : 'info';
-        if (!this.state.testStatus) {
-            // No test available.
-        } else if (this.state.testStatus === 'exception') {
-            testResult = <ErrorAlert title={'Unknown error'} description={'Internal error while calling Rest API.'}/>;
-        } else if (this.state.testStatus === 'OK') {
-            testResult = <Alert color={'success'}>
-                OK
-            </Alert>;
-            testButtonColor = 'success';
-        } else if (this.state.testStatus === 'fetching') {
-            testResult = <Alert color={'warning'}>
-                Testing...
-            </Alert>;
-        } else {
-            testResult = <ErrorAlert
-                title={'Error while testing repo configuration'}
-                description={this.state.testResult}
-            />
-            testButtonColor = 'danger';
-        }
-        let testResultGroup = '';
-        if (testResult) {
-            testResultGroup = <FormGroup row={true}>
-                <FormLabel length={2}>{'Test result'}</FormLabel>
-                <FormField length={10}>
-                    {testResult}
-                </FormField>
-            </FormGroup>;
-        }
         if (this.state.isFetching) {
             content = <React.Fragment>Loading...</React.Fragment>;
         } else if (this.state.failed) {
@@ -187,22 +123,19 @@
                                          repoConfig={repoConfig}
                                          handleRepoConfigChange={this.handleRepoConfigChange}
                                          setRepoValue={this.setRepoValue}/>
-                <FormGroup row={true}>
-                    <FormLabel length={2} />
+                <FormGroup>
+                    <FormLabel length={2}/>
                     <FormField length={10}>
                         <FormButton onClick={this.onCancel}
                                     hintKey="configuration.cancel.hint"><I18n name={'common.cancel'}/>
                         </FormButton>
-                        <FormButton onClick={this.onTest} disabled={this.state.testStatus === 'fetching'}
-                                    bsStyle={testButtonColor}
-                                    hint={'Tries to connect to the repo and to get info from.'}>Test
-                        </FormButton>
                         <FormButton onClick={this.onSave} bsStyle="primary"
                                     hintKey="configuration.save.hint"><I18n name={'common.save'}/>
                         </FormButton>
                     </FormField>
                 </FormGroup>
-                {testResultGroup}
+                <RepoConfigTestPanel repoConfig={this.state.repoConfig}
+                                     repoError={this.props.repoError}/>
                 <LoadingOverlay active={this.state.loading}/>
             </React.Fragment>;
         }
diff --git a/borgbutler-webapp/src/components/views/repos/RepoConfigTestPanel.jsx b/borgbutler-webapp/src/components/views/repos/RepoConfigTestPanel.jsx
new file mode 100644
index 0000000..89bd40b
--- /dev/null
+++ b/borgbutler-webapp/src/components/views/repos/RepoConfigTestPanel.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import {Alert} from 'reactstrap';
+import {FormButton, FormField, FormGroup, FormLabel} from '../../general/forms/FormComponents';
+import PropTypes from "prop-types";
+import {getRestServiceUrl} from "../../../utilities/global";
+import ErrorAlert from "../../general/ErrorAlert";
+
+class RepoConfigTestPanel extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            testStatus: undefined,
+            testResult: undefined
+        };
+        this.onTest = this.onTest.bind(this);
+    }
+
+    onTest(event) {
+        this.setState({
+            testStatus: 'fetching',
+            testResult: undefined
+        });
+        fetch(getRestServiceUrl("repoConfig/check"), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(this.props.repoConfig)
+        })
+            .then(response => response.text())
+            .then(result => {
+                //console.log("test-result: " + result);
+                this.setState({
+                    testStatus: result === 'OK' ? 'OK' : 'error',
+                    testResult: result
+                });
+            })
+            .catch((error) => {
+                console.log("error", error);
+                this.setState({
+                    testStatus: 'exception',
+                    testResult: undefined
+                });
+            });
+    }
+
+    render() {
+        let testButtonColor = 'outline-info';
+        if (this.state.testStatus === 'OK') {
+            testButtonColor = 'outline-success';
+        } else if (this.state.testStatus === 'error' || this.state.testStatus === 'exception' || this.props.repoError) {
+            testButtonColor = 'outline-danger';
+        } else {
+            testButtonColor = 'outline-info';
+        }
+        let testResult = undefined;
+        if (!this.state.testStatus) {
+            // No test available.
+        } else if (this.state.testStatus === 'exception') {
+            testResult = <ErrorAlert title={'Unknown error'} description={'Internal error while calling Rest API.'}/>;
+        } else if (this.state.testStatus === 'OK') {
+            testResult = <Alert color={'success'}>
+                OK
+            </Alert>;
+        } else if (this.state.testStatus === 'fetching') {
+            testResult = <Alert color={'warning'}>
+                Testing...
+            </Alert>;
+        } else {
+            testResult = <ErrorAlert
+                title={'Error while testing repo configuration'}
+                description={this.state.testResult}
+            />
+        }
+        return <FormGroup>
+            <FormLabel length={2}>
+            </FormLabel>
+            <FormField length={10}>
+                <FormButton onClick={this.onTest} disabled={this.state.testStatus === 'fetching'}
+                            bsStyle={testButtonColor}
+                            hint={'Tries to connect to the repo and to get info from.'}>Test
+                </FormButton>
+                {testResult}
+            </FormField>
+        </FormGroup>;
+    }
+}
+
+RepoConfigTestPanel.propTypes = {
+    repoConfig: PropTypes.object.isRequired,
+    repoError: PropTypes.bool
+};
+
+RepoConfigTestPanel.defaultProps = {
+    repoError: false
+};
+
+export default RepoConfigTestPanel;

--
Gitblit v1.10.0