cors: ui improvements
- display loading lines at the bottom
- use a button for enabling / disabling
PR: #587
PR-URL: https://github.com/apache/couchdb-fauxton/pull/587
Reviewed-By: Benjamin Keen <ben.keen@gmail.com>
diff --git a/app/addons/cors/assets/less/cors.less b/app/addons/cors/assets/less/cors.less
index d77ba47..756894b 100644
--- a/app/addons/cors/assets/less/cors.less
+++ b/app/addons/cors/assets/less/cors.less
@@ -14,6 +14,18 @@
@import "../../../../../assets/less/variables.less";
@import "../../../../../assets/less/bootstrap/mixins.less";
+.cors-page {
+ .loading-lines {
+ margin-top: 20px;
+ }
+ .enable-disable.btn {
+ margin-top: 10px;
+ }
+
+}
+
+
+
#cors-header {
margin: 18px 30px 0 30px;
}
diff --git a/app/addons/cors/components.react.jsx b/app/addons/cors/components.react.jsx
index 6f6bf9f..c91a859 100644
--- a/app/addons/cors/components.react.jsx
+++ b/app/addons/cors/components.react.jsx
@@ -178,8 +178,8 @@
}
return (
- <div id= "origin-domains-container">
- <div className= "origin-domains">
+ <div id="origin-domains-container">
+ <div className="origin-domains">
<div className="input-append">
<input type="text" name="new_origin_domain" onChange={this.onInputChange} onKeyUp={this.onKeyUp} value={this.state.origin} placeholder="e.g., https://site.com"/>
<button onClick={this.addOrigin} className="btn btn-primary add-domain"> Add </button>
@@ -261,7 +261,7 @@
this.setState(this.getStoreState());
},
- enableCorsChange: function (event) {
+ enableCorsChange: function () {
if (this.state.corsEnabled && !_.isEmpty(this.state.origins) ) {
var result = window.confirm(app.i18n.en_US['cors-disable-cors-prompt']);
if (!result) { return; }
@@ -305,10 +305,17 @@
render: function () {
var isVisible = _.all([this.state.corsEnabled, !this.state.isAllOrigins]);
- var className = this.state.corsEnabled ? 'collapsing-container' : '';
+
+ var originSettings = (
+ <div id={this.state.corsEnabled ? 'collapsing-container' : ''}>
+ <Origins corsEnabled={this.state.corsEnabled} originChange={this.originChange} isAllOrigins={this.state.isAllOrigins}/>
+ <OriginTable updateOrigin={this.updateOrigin} deleteOrigin={this.deleteOrigin} isVisible={isVisible} origins={this.state.origins} />
+ <OriginInput addOrigin={this.addOrigin} isVisible={isVisible} />
+ </div>
+ );
if (this.state.isLoading) {
- return (<ReactComponents.LoadLines />);
+ originSettings = (<ReactComponents.LoadLines />);
}
return (
@@ -319,20 +326,18 @@
<form id="corsForm" onSubmit={this.save}>
<div className="cors-enable">
- <label className="checkbox">
- <input
- type="checkbox"
- checked={this.state.corsEnabled}
- onChange={this.enableCorsChange} />
- Enable CORS
- </label>
+ {this.state.corsEnabled ? 'Cors is currently enabled.' : 'Cors is currently disabled.'}
+ <br />
+ <button
+ type="button"
+ className="enable-disable btn btn-small btn-success"
+ onClick={this.enableCorsChange}
+ disabled={this.state.isLoading ? 'disabled' : null}
+ >
+ {this.state.corsEnabled ? 'Disable CORS' : 'Enable CORS'}
+ </button>
</div>
- <div id={className}>
- <Origins corsEnabled={this.state.corsEnabled} originChange={this.originChange} isAllOrigins={this.state.isAllOrigins}/>
- <OriginTable updateOrigin={this.updateOrigin} deleteOrigin={this.deleteOrigin} isVisible={isVisible} origins={this.state.origins} />
- <OriginInput addOrigin={this.addOrigin} isVisible={isVisible} />
- </div>
-
+ {originSettings}
</form>
</div>
);
diff --git a/app/addons/cors/tests/componentsSpec.react.jsx b/app/addons/cors/tests/componentsSpec.react.jsx
index 68dd301..7bd5762 100644
--- a/app/addons/cors/tests/componentsSpec.react.jsx
+++ b/app/addons/cors/tests/componentsSpec.react.jsx
@@ -92,13 +92,13 @@
it('shows loading bars', function () {
Actions.toggleLoadingBarsToEnabled(true);
- assert.ok($(corsEl.getDOMNode()).hasClass('loading-lines'));
+ assert.equal($(corsEl.getDOMNode()).find('.loading-lines').length, 1);
});
it('hides loading bars', function () {
Actions.toggleLoadingBarsToEnabled(false);
- assert.notOk($(corsEl.getDOMNode()).hasClass('loading-lines'));
+ assert.equal($(corsEl.getDOMNode()).find('.loading-lines').length, 0);
});
});
