small fixes
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/98e7363b Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/98e7363b Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/98e7363b Branch: refs/heads/new-replication Commit: 98e7363bb7cef20da19be57382f807807a5e9f49 Parents: 22f623c Author: Garren Smith <garren.sm...@gmail.com> Authored: Thu Aug 18 17:17:42 2016 +0200 Committer: Garren Smith <garren.sm...@gmail.com> Committed: Wed Sep 14 17:22:30 2016 +0200 ---------------------------------------------------------------------- app/addons/replication/components/controller.js | 202 ------------------- app/addons/replication/components/target.js | 202 +++++++++++++++++++ app/addons/replication/route.js | 1 + 3 files changed, 203 insertions(+), 202 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98e7363b/app/addons/replication/components/controller.js ---------------------------------------------------------------------- diff --git a/app/addons/replication/components/controller.js b/app/addons/replication/components/controller.js deleted file mode 100644 index 86ed5fd..0000000 --- a/app/addons/replication/components/controller.js +++ /dev/null @@ -1,202 +0,0 @@ -// Licensed under the Apache License, Version 2.0 (the "License"); you may not -// use this file except in compliance with the License. You may obtain a copy of -// the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT -// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the -// License for the specific language governing permissions and limitations under -// the License. -import React from 'react'; -import Constants from '../constants'; -import Components from '../../components/react-components.react'; -import ReactSelect from 'react-select'; - -const { StyledSelect } = Components; - -const replicationTargetSourceOptions = () => { - return [ - { value: '', label: 'Select target' }, - { value: Constants.REPLICATION_TARGET.EXISTING_LOCAL_DATABASE, label: 'Existing local database' }, - { value: Constants.REPLICATION_TARGET.EXISTING_REMOTE_DATABASE, label: 'Existing remote database' }, - { value: Constants.REPLICATION_TARGET.NEW_LOCAL_DATABASE, label: 'New local database' }, - { value: Constants.REPLICATION_TARGET.NEW_REMOTE_DATABASE, label: 'New remote database' } - ].map((option) => { - return ( - <option value={option.value} key={option.value}>{option.label}</option> - ); - }); -}; - -const ReplicationTargetSelect = ({value, onChange}) => { - return ( - <div className="replication-section"> - <div className="replication-input-label"> - Replication Target: - </div> - <div className="replication-input-select"> - <StyledSelect - selectContent={replicationTargetSourceOptions()} - selectChange={(e) => onChange(e.target.value)} - selectId="replication-target" - selectValue={value} /> - </div> - </div> - ); -}; - -ReplicationTargetSelect.propTypes = { - value: React.PropTypes.string.isRequired, - onChange: React.PropTypes.func.isRequired -}; - -const RemoteTargetReplicationRow = ({onChange, value}) => { - return ( - <div> - <input type="text" className="replication-remote-connection-url" placeholder="https://"; value={value} - onChange={(e) => onChange(e.target.value)} /> - <div className="replication-remote-connection-url-text">e.g. https://$REMOTE_USERNAME:$REMOTE_PASSWORD@$REMOTE_SERVER/$DATABASE</div> - </div> - ); -}; - -RemoteTargetReplicationRow.propTypes = { - value: React.PropTypes.string.isRequired, - onChange: React.PropTypes.func.isRequired -}; - -const ExistingLocalTargetReplicationRow = ({onChange, value, databases}) => { - const options = databases.map(db => ({value: db, label: db})); - return ( - <div className="replication-input-react-select"> - <ReactSelect - value={value} - options={options} - placeholder="Database name" - clearable={false} - onChange={({value}) => onChange(value)} - /> - </div> - ); -}; - -ExistingLocalTargetReplicationRow.propTypes = { - value: React.PropTypes.string.isRequired, - databases: React.PropTypes.array.isRequired, - onChange: React.PropTypes.func.isRequired -}; - -const NewLocalTargetReplicationRow = ({onChange, value}) => - <input - type="text" - className="replication-new-input" - placeholder="Database name" - value={value} - onChange={(e) => onChange(e.target.value)} - />; - -NewLocalTargetReplicationRow.propTypes = { - value: React.PropTypes.string.isRequired, - onChange: React.PropTypes.func.isRequired -}; - -const ReplicationTargetRow = ({ - replicationTarget, - onLocalTargetChange, - onRemoteTargetChange, - localTarget, - remoteTarget, - databases -}) => { - if (!replicationTarget) { - return null; - } - let input; - - if (replicationTarget === Constants.REPLICATION_TARGET.NEW_LOCAL_DATABASE) { - targetLabel = 'New Database:'; - input = <NewLocalTargetReplicationRow - value={localTarget} - onChange={onLocalTargetChange} - />; - } else if (replicationTarget === Constants.REPLICATION_TARGET.EXISTING_LOCAL_DATABASE) { - input = <ExistingLocalTargetReplicationRow - onChange={onLocalTargetChange} - databases={databases} - value={localTarget} - />; - } else { - input = <RemoteTargetReplicationRow - onChange={onRemoteTargetChange} - value={remoteTarget} - />; - } - - let targetLabel = 'Target Name:'; - - if (replicationTarget === Constants.REPLICATION_TARGET.NEW_REMOTE_DATABASE || - replicationTarget === Constants.REPLICATION_TARGET.NEW_LOCAL_DATABASE) { - targetLabel = 'New Database:'; - } - - return ( - <div className="replication-section"> - <div className="replication-input-label">{targetLabel}</div> - <div> - {input} - </div> - </div> - ); -}; - -ReplicationTargetRow.propTypes = { - databases: React.PropTypes.array.isRequired, - onLocalTargetChange: React.PropTypes.func.isRequired, - onRemoteTargetChange: React.PropTypes.func.isRequired, - remoteTarget: React.PropTypes.string.isRequired, - localTarget: React.PropTypes.string.isRequired, - replicationTarget: React.PropTypes.string.isRequired -}; - -export class ReplicationTarget extends React.Component { - - render () { - const { - replicationTarget, - onLocalTargetChange, - onTargetChange, - databases, - localTarget, - onRemoteTargetChange, - remoteTarget - } = this.props; - return ( - <div> - <ReplicationTargetSelect - value={replicationTarget} - onChange={onTargetChange} - /> - <ReplicationTargetRow - remoteTarget={remoteTarget} - replicationTarget={replicationTarget} - databases={databases} - localTarget={localTarget} - onRemoteTargetChange={onRemoteTargetChange} - onLocalTargetChange={onLocalTargetChange} - /> - </div> - ); - } -} - -ReplicationTarget.propTypes = { - databases: React.PropTypes.array.isRequired, - onTargetChange: React.PropTypes.func.isRequired, - onLocalTargetChange: React.PropTypes.func.isRequired, - onRemoteTargetChange: React.PropTypes.func.isRequired, - remoteTarget: React.PropTypes.string.isRequired, - localTarget: React.PropTypes.string.isRequired, - replicationTarget: React.PropTypes.string.isRequired -}; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98e7363b/app/addons/replication/components/target.js ---------------------------------------------------------------------- diff --git a/app/addons/replication/components/target.js b/app/addons/replication/components/target.js new file mode 100644 index 0000000..86ed5fd --- /dev/null +++ b/app/addons/replication/components/target.js @@ -0,0 +1,202 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import React from 'react'; +import Constants from '../constants'; +import Components from '../../components/react-components.react'; +import ReactSelect from 'react-select'; + +const { StyledSelect } = Components; + +const replicationTargetSourceOptions = () => { + return [ + { value: '', label: 'Select target' }, + { value: Constants.REPLICATION_TARGET.EXISTING_LOCAL_DATABASE, label: 'Existing local database' }, + { value: Constants.REPLICATION_TARGET.EXISTING_REMOTE_DATABASE, label: 'Existing remote database' }, + { value: Constants.REPLICATION_TARGET.NEW_LOCAL_DATABASE, label: 'New local database' }, + { value: Constants.REPLICATION_TARGET.NEW_REMOTE_DATABASE, label: 'New remote database' } + ].map((option) => { + return ( + <option value={option.value} key={option.value}>{option.label}</option> + ); + }); +}; + +const ReplicationTargetSelect = ({value, onChange}) => { + return ( + <div className="replication-section"> + <div className="replication-input-label"> + Replication Target: + </div> + <div className="replication-input-select"> + <StyledSelect + selectContent={replicationTargetSourceOptions()} + selectChange={(e) => onChange(e.target.value)} + selectId="replication-target" + selectValue={value} /> + </div> + </div> + ); +}; + +ReplicationTargetSelect.propTypes = { + value: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func.isRequired +}; + +const RemoteTargetReplicationRow = ({onChange, value}) => { + return ( + <div> + <input type="text" className="replication-remote-connection-url" placeholder="https://"; value={value} + onChange={(e) => onChange(e.target.value)} /> + <div className="replication-remote-connection-url-text">e.g. https://$REMOTE_USERNAME:$REMOTE_PASSWORD@$REMOTE_SERVER/$DATABASE</div> + </div> + ); +}; + +RemoteTargetReplicationRow.propTypes = { + value: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func.isRequired +}; + +const ExistingLocalTargetReplicationRow = ({onChange, value, databases}) => { + const options = databases.map(db => ({value: db, label: db})); + return ( + <div className="replication-input-react-select"> + <ReactSelect + value={value} + options={options} + placeholder="Database name" + clearable={false} + onChange={({value}) => onChange(value)} + /> + </div> + ); +}; + +ExistingLocalTargetReplicationRow.propTypes = { + value: React.PropTypes.string.isRequired, + databases: React.PropTypes.array.isRequired, + onChange: React.PropTypes.func.isRequired +}; + +const NewLocalTargetReplicationRow = ({onChange, value}) => + <input + type="text" + className="replication-new-input" + placeholder="Database name" + value={value} + onChange={(e) => onChange(e.target.value)} + />; + +NewLocalTargetReplicationRow.propTypes = { + value: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func.isRequired +}; + +const ReplicationTargetRow = ({ + replicationTarget, + onLocalTargetChange, + onRemoteTargetChange, + localTarget, + remoteTarget, + databases +}) => { + if (!replicationTarget) { + return null; + } + let input; + + if (replicationTarget === Constants.REPLICATION_TARGET.NEW_LOCAL_DATABASE) { + targetLabel = 'New Database:'; + input = <NewLocalTargetReplicationRow + value={localTarget} + onChange={onLocalTargetChange} + />; + } else if (replicationTarget === Constants.REPLICATION_TARGET.EXISTING_LOCAL_DATABASE) { + input = <ExistingLocalTargetReplicationRow + onChange={onLocalTargetChange} + databases={databases} + value={localTarget} + />; + } else { + input = <RemoteTargetReplicationRow + onChange={onRemoteTargetChange} + value={remoteTarget} + />; + } + + let targetLabel = 'Target Name:'; + + if (replicationTarget === Constants.REPLICATION_TARGET.NEW_REMOTE_DATABASE || + replicationTarget === Constants.REPLICATION_TARGET.NEW_LOCAL_DATABASE) { + targetLabel = 'New Database:'; + } + + return ( + <div className="replication-section"> + <div className="replication-input-label">{targetLabel}</div> + <div> + {input} + </div> + </div> + ); +}; + +ReplicationTargetRow.propTypes = { + databases: React.PropTypes.array.isRequired, + onLocalTargetChange: React.PropTypes.func.isRequired, + onRemoteTargetChange: React.PropTypes.func.isRequired, + remoteTarget: React.PropTypes.string.isRequired, + localTarget: React.PropTypes.string.isRequired, + replicationTarget: React.PropTypes.string.isRequired +}; + +export class ReplicationTarget extends React.Component { + + render () { + const { + replicationTarget, + onLocalTargetChange, + onTargetChange, + databases, + localTarget, + onRemoteTargetChange, + remoteTarget + } = this.props; + return ( + <div> + <ReplicationTargetSelect + value={replicationTarget} + onChange={onTargetChange} + /> + <ReplicationTargetRow + remoteTarget={remoteTarget} + replicationTarget={replicationTarget} + databases={databases} + localTarget={localTarget} + onRemoteTargetChange={onRemoteTargetChange} + onLocalTargetChange={onLocalTargetChange} + /> + </div> + ); + } +} + +ReplicationTarget.propTypes = { + databases: React.PropTypes.array.isRequired, + onTargetChange: React.PropTypes.func.isRequired, + onLocalTargetChange: React.PropTypes.func.isRequired, + onRemoteTargetChange: React.PropTypes.func.isRequired, + remoteTarget: React.PropTypes.string.isRequired, + localTarget: React.PropTypes.string.isRequired, + replicationTarget: React.PropTypes.string.isRequired +}; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98e7363b/app/addons/replication/route.js ---------------------------------------------------------------------- diff --git a/app/addons/replication/route.js b/app/addons/replication/route.js index b25782f..5709b0a 100644 --- a/app/addons/replication/route.js +++ b/app/addons/replication/route.js @@ -20,6 +20,7 @@ const ReplicationRouteObject = FauxtonAPI.RouteObject.extend({ 'replication/:dbname': 'defaultView' }, selectedHeader: 'Replication', + disableLoader: true, apiUrl: function () { return [FauxtonAPI.urls('replication', 'api'), FauxtonAPI.constants.DOC_URLS.REPLICATION]; },
