You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@couchdb.apache.org by samk1 <gi...@git.apache.org> on 2016/07/24 12:44:49 UTC
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
GitHub user samk1 opened a pull request:
https://github.com/apache/couchdb-fauxton/pull/750
Config section reactjs rewrite
This PR replicates all of the original functionality of the config section, with a few minor differences to the look and feel:
- only one option is editable at a time.
- option editing starts with a single click on the value cell.
- the entire cell is clickable.
- the option names are no longer editable. (this seems to have been a bug in the old code)
- hover styling added to table, to highlight which row is currently 'active'
- delete confirmation modal has been changed to the fauxton modal confirmation react component.
- notifications are fired when an option is created, saved or deleted (and when any of those actions fails).
- no suggestions are provided when entering a new section name - I intend to add this, I only noticed I didn't have this feature while I was creating this pull request.
Also, the route functions for both cors and config have been changed so that when cors is rendered it doesn't clobber the template where config is going to be rendered. This fixes COUCHDB-3007.
Full commit history is on my github under the 'my-config-reactjs-rewrite' branch.
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/samk1/couchdb-fauxton config-reactjs-rewrite
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/couchdb-fauxton/pull/750.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #750
----
commit c912f9bf7935f7e24279974add046d043ca5c11d
Author: samk <sa...@gmail.com>
Date: 2016-07-24T11:55:11Z
simplify resources
commit 39e0b48f3ae11d336d4a4e6734ba19cf3dc29f79
Author: samk <sa...@gmail.com>
Date: 2016-07-24T11:58:33Z
react.js functionality
commit 34b1b179e49d704e1ebacffc038de2c9ff761d05
Author: samk <sa...@gmail.com>
Date: 2016-07-24T11:59:22Z
style changes
commit b354d70794d4014bdae9f2a73ab95aa39bc739a9
Author: samk <sa...@gmail.com>
Date: 2016-07-24T12:00:10Z
new tests
commit 790c300dc5931bb6838b3639301a7882f73d8ec4
Author: samk <sa...@gmail.com>
Date: 2016-07-24T12:10:51Z
render new react components in route object
commit 17a3a919f738fc92b3e79ce289f83b6ade02e7a1
Author: samk <sa...@gmail.com>
Date: 2016-07-24T12:16:21Z
remove dead views and templates
commit fefa87dd7543afe2ba74631c88f533cf8c013642
Author: samk <sa...@gmail.com>
Date: 2016-07-24T12:18:30Z
license check
----
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72045362
--- Diff: app/addons/config/components.react.jsx ---
@@ -0,0 +1,410 @@
+// 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 ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import {Overlay, Button, Popover} from "react-bootstrap";
+import Components from "../components/react-components.react";
+import FauxtonComponents from "../fauxton/components.react";
+
+var configStore = Stores.configStore;
+
+var ConfigTableController = React.createClass({
+ getStoreState: function () {
+ return {
+ options: configStore.getOptions(),
+ loading: configStore.isLoading()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ componentDidMount: function () {
+ configStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function () {
+ configStore.off('change', this.onChange, this);
+ },
+
+ onChange: function () {
+ if (this.isMounted()) {
+ this.setState(this.getStoreState());
+ }
+ },
+
+ saveOption: function (option) {
+ Actions.saveOption(this.props.node, option);
+ },
+
+ deleteOption: function (option) {
+ Actions.deleteOption(this.props.node, option);
+ },
+
+ editOption: function (option) {
+ Actions.editOption(option);
+ },
+
+ cancelEdit: function () {
+ Actions.cancelEdit();
+ },
+
+ render: function () {
+ if (this.state.loading) {
+ return (
+ <div className="view">
+ <Components.LoadLines />
+ </div>
+ );
+ } else {
+ return (
+ <ConfigTable
+ onDeleteOption={this.deleteOption}
+ onSaveOption={this.saveOption}
+ onEditOption={this.editOption}
+ onCancelEdit={this.cancelEdit}
+ options={this.state.options}/>
+ );
+ }
+ }
+});
+
+var ConfigTable = React.createClass({
+ onSaveOption: function (option) {
+ this.props.onSaveOption(option);
+ },
+
+ onEditOption: function (option) {
+ this.props.onEditOption(option);
+ },
+
+ onDeleteOption: function (option) {
+ this.props.onDeleteOption(option);
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
+ },
+
+ createOptions: function () {
+ return _.map(this.props.options, function (option) {
--- End diff --
You can do `this.props.options.map`
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
very good work! thank you!
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72045443
--- Diff: app/addons/config/components.react.jsx ---
@@ -0,0 +1,410 @@
+// 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 ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import {Overlay, Button, Popover} from "react-bootstrap";
+import Components from "../components/react-components.react";
+import FauxtonComponents from "../fauxton/components.react";
+
+var configStore = Stores.configStore;
+
+var ConfigTableController = React.createClass({
+ getStoreState: function () {
+ return {
+ options: configStore.getOptions(),
+ loading: configStore.isLoading()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ componentDidMount: function () {
+ configStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function () {
+ configStore.off('change', this.onChange, this);
+ },
+
+ onChange: function () {
+ if (this.isMounted()) {
+ this.setState(this.getStoreState());
+ }
+ },
+
+ saveOption: function (option) {
+ Actions.saveOption(this.props.node, option);
+ },
+
+ deleteOption: function (option) {
+ Actions.deleteOption(this.props.node, option);
+ },
+
+ editOption: function (option) {
+ Actions.editOption(option);
+ },
+
+ cancelEdit: function () {
+ Actions.cancelEdit();
+ },
+
+ render: function () {
+ if (this.state.loading) {
+ return (
+ <div className="view">
+ <Components.LoadLines />
+ </div>
+ );
+ } else {
+ return (
+ <ConfigTable
+ onDeleteOption={this.deleteOption}
+ onSaveOption={this.saveOption}
+ onEditOption={this.editOption}
+ onCancelEdit={this.cancelEdit}
+ options={this.state.options}/>
+ );
+ }
+ }
+});
+
+var ConfigTable = React.createClass({
+ onSaveOption: function (option) {
+ this.props.onSaveOption(option);
+ },
+
+ onEditOption: function (option) {
+ this.props.onEditOption(option);
+ },
+
+ onDeleteOption: function (option) {
+ this.props.onDeleteOption(option);
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
--- End diff --
Since you just calling the function attached to the props, to simplify just pass the props down to the `ConfigOption` component then you don't need these functions.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72046500
--- Diff: app/addons/config/stores.js ---
@@ -0,0 +1,156 @@
+// 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 FauxtonAPI from '../../core/api';
+import ActionTypes from './actiontypes';
+
+function unset(object, sectionName, optionName) {
--- End diff --
I can't find where you use this function?
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72046585
--- Diff: tasks/helper.js ---
@@ -14,7 +14,7 @@ var fs = require('fs'),
path = require('path');
exports.devServerPort = 8000;
-exports.couch = 'http://localhost:5984/';
+exports.couch = 'http://couch:5984/';
--- End diff --
I don't think you meant to add that.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by samk1 <gi...@git.apache.org>.
Github user samk1 commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
Hi
Thanks for merging my PR. That counts as my first merge! I have been
inactive lately due to some life issues but will get started on couchdb
soon.
Thanks
On 13 September 2016 at 22:31, Robert Kowalski <no...@github.com>
wrote:
> merged as ee1a92b
> <https://github.com/apache/couchdb-fauxton/commit/ee1a92b02e68d92dd86e5979d5d8f2d100fb24e7>
> - thank you for your contribution - you rock! <3
>
> \u2014
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/apache/couchdb-fauxton/pull/750#issuecomment-246666100>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AIkOmGLH9BqsQvEYLcKyzUJalE89RA73ks5qppemgaJpZM4JTkZA>
> .
>
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72045097
--- Diff: app/addons/config/actions.js ---
@@ -0,0 +1,140 @@
+// 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 ActionTypes from './actiontypes';
+import FauxtonAPI from '../../core/api';
+import Resources from './resources';
+
+export default {
+ fetchAndEditConfig: function (node) {
--- End diff --
Could you use the short hand for fucntions for all of these:
```
fetchAndEditConfig () {
},
```
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72046068
--- Diff: app/addons/config/components.react.jsx ---
@@ -0,0 +1,410 @@
+// 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 ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import {Overlay, Button, Popover} from "react-bootstrap";
+import Components from "../components/react-components.react";
+import FauxtonComponents from "../fauxton/components.react";
+
+var configStore = Stores.configStore;
+
+var ConfigTableController = React.createClass({
+ getStoreState: function () {
+ return {
+ options: configStore.getOptions(),
+ loading: configStore.isLoading()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ componentDidMount: function () {
+ configStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function () {
+ configStore.off('change', this.onChange, this);
+ },
+
+ onChange: function () {
+ if (this.isMounted()) {
+ this.setState(this.getStoreState());
+ }
+ },
+
+ saveOption: function (option) {
+ Actions.saveOption(this.props.node, option);
+ },
+
+ deleteOption: function (option) {
+ Actions.deleteOption(this.props.node, option);
+ },
+
+ editOption: function (option) {
+ Actions.editOption(option);
+ },
+
+ cancelEdit: function () {
+ Actions.cancelEdit();
+ },
+
+ render: function () {
+ if (this.state.loading) {
+ return (
+ <div className="view">
+ <Components.LoadLines />
+ </div>
+ );
+ } else {
+ return (
+ <ConfigTable
+ onDeleteOption={this.deleteOption}
+ onSaveOption={this.saveOption}
+ onEditOption={this.editOption}
+ onCancelEdit={this.cancelEdit}
+ options={this.state.options}/>
+ );
+ }
+ }
+});
+
+var ConfigTable = React.createClass({
+ onSaveOption: function (option) {
+ this.props.onSaveOption(option);
+ },
+
+ onEditOption: function (option) {
+ this.props.onEditOption(option);
+ },
+
+ onDeleteOption: function (option) {
+ this.props.onDeleteOption(option);
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
+ },
+
+ createOptions: function () {
+ return _.map(this.props.options, function (option) {
+ return <ConfigOption
+ option={option}
+ onDelete={this.onDeleteOption}
+ onSave={this.onSaveOption}
+ onEdit={this.onEditOption}
+ onCancelEdit={this.onCancelEdit}
+ key={`${option.sectionName}/${option.optionName}`}
+ />;
+ }.bind(this));
+ },
+
+ render: function () {
+ var options = this.createOptions();
+
+ return (
+ <table className="config table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th id="config-section" width="22%">Section</th>
+ <th id="config-option" width="22%">Option</th>
+ <th id="config-value">Value</th>
+ <th id="config-trash"></th>
+ </tr>
+ </thead>
+ <tbody>
+ {options}
+ </tbody>
+ </table>
+ );
+ }
+});
+
+var ConfigOption = React.createClass({
+ onSave: function (value) {
+ var option = this.props.option;
+ option.value = value;
+ this.props.onSave(option);
+ },
+
+ onDelete: function () {
+ this.props.onDelete(this.props.option);
+ },
+
+ onEdit: function () {
+ this.props.onEdit(this.props.option);
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
+ },
+
+ render: function () {
+ return (
+ <tr className="config-item">
+ <th>{this.props.option.header && this.props.option.sectionName}</th>
+ <td>{this.props.option.optionName}</td>
+ <ConfigOptionValue
+ value={this.props.option.value}
+ editing={this.props.option.editing}
+ onSave={this.onSave}
+ onEdit={this.onEdit}
+ onCancelEdit={this.onCancelEdit}
+ />
+ <ConfigOptionTrash
+ optionName={this.props.option.optionName}
+ sectionName={this.props.option.sectionName}
+ onDelete={this.onDelete}/>
+ </tr>
+ );
+ }
+});
+
+var ConfigOptionValue = React.createClass({
+ getInitialState: function () {
+ return {
+ value: this.props.value,
+ editing: this.props.editing,
+ saving: this.props.saving
+ };
+ },
+
+ getDefaultProps: function () {
+ return {
+ value: '',
+ editing: false,
+ saving: false,
+ onSave: () => null,
+ onEdit: () => null,
+ onCancelEdit: () => null
+ };
+ },
+
+ componentWillReceiveProps: function (nextProps) {
+ if (this.props.value !== nextProps.value) {
+ this.setState({ saving: false });
+ }
+ },
+
+ onChange: function (value) {
+ this.setState({ value });
+ },
+
+ onSave: function (value) {
+ if (value !== this.props.value) {
+ this.setState({ saving: true });
+ this.props.onSave(value);
+ } else {
+ this.onCancelEdit();
+ }
+ },
+
+ onEdit: function () {
+ this.props.onEdit();
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
+ },
+
+ getButtons: function () {
+ if (this.state.saving) {
+ return null;
+ } else {
+ return (
+ <span>
+ <button
+ className="btn btn-success fonticon-ok-circled btn-small btn-config-save"
+ onClick={() => this.onSave(this.state.value)}
+ />
+ <button
+ className="btn fonticon-cancel-circled btn-small btn-config-cancel"
+ onClick={this.onCancelEdit}
+ />
+ </span>
+ );
+ }
+ },
+
+ render: function () {
+ if (this.props.editing) {
+ return (
+ <td>
+ <div className="config-value-form">
+ <input
+ onChange={(e) => this.onChange(e.target.value)}
+ defaultValue={this.props.value}
+ disabled={this.state.saving}
+ autoFocus type="text" className="config-value-input"
+ />
+ {this.getButtons()}
+ </div>
+ </td>
+ );
+ } else {
+ return (
+ <td className="config-show-value" onClick={this.onEdit}>
+ {this.props.value}
+ </td>
+ );
+ }
+ }
+});
+
+var ConfigOptionTrash = React.createClass({
+ getInitialState: function () {
+ return {
+ showModal: false
+ };
+ },
+
+ onDelete: function () {
+ this.props.onDelete();
+ },
+
+ render: function () {
+ return (
+ <td className="text-center config-item-trash config-delete-value"
+ onClick={() => this.setState({showModal: true})}>
--- End diff --
I think we need a bit more consistency on how you handle the react events. Sometimes, like here, you do a state change in line. Then other times you call a method, other times you do some inline and then pass a value to a function. I don't mind what you do, but consistency is key
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
@samk1 this is a good start but I'm struggling to test this. If I try on port `15984` or `15986` it fails on the `_membership` request.
I've left some code comments. You code is looking good, most the comments are just small improvements and coding consistencies.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
ping @samk1
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r74571039
--- Diff: app/addons/config/assets/less/config.less ---
@@ -9,31 +9,55 @@
// 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 "../../../../../assets/less/variables.less";
@import "../../../../../assets/less/bootstrap/mixins.less";
-
-
.config-item {
height: 65px;
- .js-value-input {
+ .config-value-form {
+ button {
+ margin-left: 8px;
+ }
+ }
+
+ .config-value-input {
width: 80%;
margin: 0;
}
- .js-show-value,
- .js-delete-value {
+
+ .config-show-value,
+ .config-delete-value {
cursor: pointer;
}
- .js-hidden {
- display: none;
- }
+
.text-center {
text-align: center;
}
button { width: 7%;}
+
+ transition: background-color 100ms;
+}
+
+.config-item:hover {
+ background-color: #e0e0e0;
+}
+
+.table-striped tbody > tr.config-item:nth-child(odd) > td,
+.table-striped tbody > tr.config-item:nth-child(odd) > th {
+ transition: background-color 100ms;
+}
+
+.table-striped tbody > tr.config-item:nth-child(odd):hover > td,
+.table-striped tbody > tr.config-item:nth-child(odd):hover > th {
+ background-color: #e7e7e7;
+}
--- End diff --
this changes the color for all striped tables in fauxton - is that the intention?
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
�Thanks for your help and congrats.�
On Wed, Sep 14, 2016 at 5:08 AM +0200, "samk1" <no...@github.com> wrote:
Hi
Thanks for merging my PR. That counts as my first merge! I have been
inactive lately due to some life issues but will get started on couchdb
soon.
Thanks
On 13 September 2016 at 22:31, Robert Kowalski <no...@github.com>
wrote:
> merged as ee1a92b
> <https://github.com/apache/couchdb-fauxton/commit/ee1a92b02e68d92dd86e5979d5d8f2d100fb24e7>
> - thank you for your contribution - you rock! <3
>
> \u2014
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/apache/couchdb-fauxton/pull/750#issuecomment-246666100>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AIkOmGLH9BqsQvEYLcKyzUJalE89RA73ks5qppemgaJpZM4JTkZA>
> .
>
\u2014
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72045274
--- Diff: app/addons/config/components.react.jsx ---
@@ -0,0 +1,410 @@
+// 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 ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import {Overlay, Button, Popover} from "react-bootstrap";
+import Components from "../components/react-components.react";
+import FauxtonComponents from "../fauxton/components.react";
+
+var configStore = Stores.configStore;
+
+var ConfigTableController = React.createClass({
--- End diff --
Could you use the new react class definition for React components that need to keep state. And then the functional style for components that don't need to keep state.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72045217
--- Diff: app/addons/config/components.react.jsx ---
@@ -0,0 +1,410 @@
+// 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 ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import {Overlay, Button, Popover} from "react-bootstrap";
+import Components from "../components/react-components.react";
+import FauxtonComponents from "../fauxton/components.react";
+
+var configStore = Stores.configStore;
--- End diff --
Could you use `const` instead of var. Or `let` if it will change.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
@samk1 could you close this PR. We can't close it from our side. And the work is now all merged.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r74571247
--- Diff: app/addons/config/assets/less/config.less ---
@@ -112,6 +140,61 @@ table.config {
}
}
+#add-option-popover {
+ background-color: #333;
+ color: white;
+ padding: 20px;
+ border-radius: 0;
+ width: 300px;
+ max-width: none;
+ display: block;
+
+ .popover-content {
+ padding: 0;
+ }
+
+ .popover-title {
+ font-size: 16px;
+ padding: 0;
+ margin: 10px 0;
+ border: none;
+ display: block;
+ text-align: left;
+ color: #fff;
+ text-shadow: none;
+ height: auto;
+ line-height: 1em;
+ background-color: #333;
+ }
+
+ input {
+ width: 100%;
+ }
+
+ a.btn {
+ color: white;
+ background-color: @linkColor;
+ line-height: 1.5em;
+ border: 0;
+ padding: 10px 10px 9px;
+ font-size: 14px;
+ .border-radius(5px);
+
+ &:hover {
+ background-color: #cbcbcb;
+ color: white;
+ }
+ }
+}
+
+.popover.bottom .arrow, .popover.bottom .arrow::after {
+ border-bottom-color: #333 !important;
--- End diff --
1) do you want to change all popovers in fauxton?
2) by making a more specific css selector you can avoid the `!important`.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72046313
--- Diff: app/addons/config/components.react.jsx ---
@@ -0,0 +1,410 @@
+// 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 ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import {Overlay, Button, Popover} from "react-bootstrap";
+import Components from "../components/react-components.react";
+import FauxtonComponents from "../fauxton/components.react";
+
+var configStore = Stores.configStore;
+
+var ConfigTableController = React.createClass({
+ getStoreState: function () {
+ return {
+ options: configStore.getOptions(),
+ loading: configStore.isLoading()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ componentDidMount: function () {
+ configStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function () {
+ configStore.off('change', this.onChange, this);
+ },
+
+ onChange: function () {
+ if (this.isMounted()) {
+ this.setState(this.getStoreState());
+ }
+ },
+
+ saveOption: function (option) {
+ Actions.saveOption(this.props.node, option);
+ },
+
+ deleteOption: function (option) {
+ Actions.deleteOption(this.props.node, option);
+ },
+
+ editOption: function (option) {
+ Actions.editOption(option);
+ },
+
+ cancelEdit: function () {
+ Actions.cancelEdit();
+ },
+
+ render: function () {
+ if (this.state.loading) {
+ return (
+ <div className="view">
+ <Components.LoadLines />
+ </div>
+ );
+ } else {
+ return (
+ <ConfigTable
+ onDeleteOption={this.deleteOption}
+ onSaveOption={this.saveOption}
+ onEditOption={this.editOption}
+ onCancelEdit={this.cancelEdit}
+ options={this.state.options}/>
+ );
+ }
+ }
+});
+
+var ConfigTable = React.createClass({
+ onSaveOption: function (option) {
+ this.props.onSaveOption(option);
+ },
+
+ onEditOption: function (option) {
+ this.props.onEditOption(option);
+ },
+
+ onDeleteOption: function (option) {
+ this.props.onDeleteOption(option);
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
+ },
+
+ createOptions: function () {
+ return _.map(this.props.options, function (option) {
+ return <ConfigOption
+ option={option}
+ onDelete={this.onDeleteOption}
+ onSave={this.onSaveOption}
+ onEdit={this.onEditOption}
+ onCancelEdit={this.onCancelEdit}
+ key={`${option.sectionName}/${option.optionName}`}
+ />;
+ }.bind(this));
+ },
+
+ render: function () {
+ var options = this.createOptions();
+
+ return (
+ <table className="config table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th id="config-section" width="22%">Section</th>
+ <th id="config-option" width="22%">Option</th>
+ <th id="config-value">Value</th>
+ <th id="config-trash"></th>
+ </tr>
+ </thead>
+ <tbody>
+ {options}
+ </tbody>
+ </table>
+ );
+ }
+});
+
+var ConfigOption = React.createClass({
+ onSave: function (value) {
+ var option = this.props.option;
+ option.value = value;
+ this.props.onSave(option);
+ },
+
+ onDelete: function () {
+ this.props.onDelete(this.props.option);
+ },
+
+ onEdit: function () {
+ this.props.onEdit(this.props.option);
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
+ },
+
+ render: function () {
+ return (
+ <tr className="config-item">
+ <th>{this.props.option.header && this.props.option.sectionName}</th>
+ <td>{this.props.option.optionName}</td>
+ <ConfigOptionValue
+ value={this.props.option.value}
+ editing={this.props.option.editing}
+ onSave={this.onSave}
+ onEdit={this.onEdit}
+ onCancelEdit={this.onCancelEdit}
+ />
+ <ConfigOptionTrash
+ optionName={this.props.option.optionName}
+ sectionName={this.props.option.sectionName}
+ onDelete={this.onDelete}/>
+ </tr>
+ );
+ }
+});
+
+var ConfigOptionValue = React.createClass({
+ getInitialState: function () {
+ return {
+ value: this.props.value,
+ editing: this.props.editing,
+ saving: this.props.saving
+ };
+ },
+
+ getDefaultProps: function () {
+ return {
+ value: '',
+ editing: false,
+ saving: false,
+ onSave: () => null,
+ onEdit: () => null,
+ onCancelEdit: () => null
+ };
+ },
+
+ componentWillReceiveProps: function (nextProps) {
+ if (this.props.value !== nextProps.value) {
+ this.setState({ saving: false });
+ }
+ },
+
+ onChange: function (value) {
+ this.setState({ value });
+ },
+
+ onSave: function (value) {
+ if (value !== this.props.value) {
+ this.setState({ saving: true });
+ this.props.onSave(value);
+ } else {
+ this.onCancelEdit();
+ }
+ },
+
+ onEdit: function () {
+ this.props.onEdit();
+ },
+
+ onCancelEdit: function () {
+ this.props.onCancelEdit();
+ },
+
+ getButtons: function () {
+ if (this.state.saving) {
+ return null;
+ } else {
+ return (
+ <span>
+ <button
+ className="btn btn-success fonticon-ok-circled btn-small btn-config-save"
+ onClick={() => this.onSave(this.state.value)}
+ />
+ <button
+ className="btn fonticon-cancel-circled btn-small btn-config-cancel"
+ onClick={this.onCancelEdit}
+ />
+ </span>
+ );
+ }
+ },
+
+ render: function () {
+ if (this.props.editing) {
+ return (
+ <td>
+ <div className="config-value-form">
+ <input
+ onChange={(e) => this.onChange(e.target.value)}
+ defaultValue={this.props.value}
+ disabled={this.state.saving}
+ autoFocus type="text" className="config-value-input"
+ />
+ {this.getButtons()}
+ </div>
+ </td>
+ );
+ } else {
+ return (
+ <td className="config-show-value" onClick={this.onEdit}>
+ {this.props.value}
+ </td>
+ );
+ }
+ }
+});
+
+var ConfigOptionTrash = React.createClass({
+ getInitialState: function () {
+ return {
+ showModal: false
+ };
+ },
+
+ onDelete: function () {
+ this.props.onDelete();
+ },
+
+ render: function () {
+ return (
+ <td className="text-center config-item-trash config-delete-value"
+ onClick={() => this.setState({showModal: true})}>
+ <i className="icon icon-trash"></i>
+ <FauxtonComponents.ConfirmationModal
+ text={`Are you sure you want to delete ${this.props.sectionName}/${this.props.optionName}?`}
+ onClose={() => this.setState({showModal: false})}
+ onSubmit={this.onDelete}
+ visible={this.state.showModal}/>
+ </td>
+ );
+ }
+});
+
+var AddOptionController = React.createClass({
+ addOption: function (option) {
+ Actions.addOption(this.props.node, option);
+ },
+
+ render: function () {
+ return (
+ <AddOptionButton onAdd={this.addOption}/>
+ );
+ }
+});
+
+var AddOptionButton = React.createClass({
+ getInitialState: function () {
+ return {
+ sectionName: '',
+ optionName: '',
+ value: '',
+ show: false
+ };
+ },
+
+ isInputValid: function () {
+ if (this.state.sectionName !== ''
+ && this.state.optionName !== ''
+ && this.state.value !== '') {
+ return true;
+ }
+
+ return false;
+ },
+
+ updateSectionName: function (sectionName) {
+ this.setState({ sectionName });
+ },
+
+ updateOptionName: function (optionName) {
+ this.setState({ optionName });
+ },
+
+ updateValue: function (value) {
+ this.setState({ value });
+ },
+
+ reset: function () {
+ this.setState(this.getInitialState());
+ },
+
+ onAdd: function () {
+ if (this.isInputValid()) {
+ var option = {
+ sectionName: this.state.sectionName,
+ optionName: this.state.optionName,
+ value: this.state.value
+ };
+
+ this.setState({ show: false });
+ this.props.onAdd(option);
+ }
+ },
+
+ getPopover: function () {
+ return (
+ <Popover className="tray" id="add-option-popover" title="Add Option">
+ <input
+ className="input-section-name"
+ onChange={e => this.updateSectionName(e.target.value)}
+ type="text" name="section" placeholder="Section" autocomplete="off" autoFocus/>
+ <input
+ className="input-option-name"
+ onChange={e => this.updateOptionName(e.target.value)}
+ type="text" name="name" placeholder="Name"/>
+ <input
+ className="input-value"
+ onChange={e => this.updateValue(e.target.value)}
+ type="text" name="value" placeholder="Value"/>
+ <a
+ className="btn btn-create"
+ onClick={this.onAdd}>
+ Create
+ </a>
+ </Popover>
+ );
+ },
+
+ render: function () {
+ return (
+ <div id="add-option-panel">
+ <Button
+ id="add-option-button"
+ onClick={() => this.setState({ show: !this.state.show })}
+ ref="target">
+ <i className="icon icon-plus header-icon"></i>
+ Add Option
+ </Button>
+
+ <Overlay
+ show={this.state.show}
+ onHide={() => this.setState({ show: false })}
+ placement="bottom"
+ rootClose={true}
+ target={() => ReactDOM.findDOMNode(this.refs.target)}>
--- End diff --
I don't quite follow what you are trying to do here?
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72046421
--- Diff: app/addons/config/stores.js ---
@@ -0,0 +1,156 @@
+// 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 FauxtonAPI from '../../core/api';
+import ActionTypes from './actiontypes';
+
+function unset(object, sectionName, optionName) {
+ if (object[sectionName]) {
+ delete object[sectionName][optionName];
+ }
+}
+
+var ConfigStore = FauxtonAPI.Store.extend({
+ initialize: function () {
+ this.reset();
+ },
+
+ reset: function () {
+ this._sections = {};
+ this._loading = true;
+ this._editSectionName = null;
+ this._editOptionName = null;
+ },
+
+ editConfig: function (sections) {
+ this._sections = sections;
+ this._loading = false;
+ this._editSectionName = null;
+ this._editOptionName = null;
+ },
+
+ getOptions: function () {
+ var sections = _.sortBy(
+ _.map(this._sections, function (section, sectionName) {
--- End diff --
Rather use a `() =>` then no bind is needed
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72044866
--- Diff: app/addons/config/actions.js ---
@@ -0,0 +1,140 @@
+// 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 ActionTypes from './actiontypes';
+import FauxtonAPI from '../../core/api';
+import Resources from './resources';
+
+export default {
+ fetchAndEditConfig: function (node) {
+ FauxtonAPI.dispatch({ type: ActionTypes.LOADING_CONFIG });
+
+ var configModel = new Resources.ConfigModel({ node });
+
+ FauxtonAPI.when(configModel.fetch())
+ .then(function () {
+ this.editSections({ sections: configModel.get('sections'), node });
+ }.bind(this));
+ },
+
+ editSections: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.EDIT_CONFIG, options });
+ },
+
+ editOption: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.EDIT_OPTION, options });
+ },
+
+ cancelEdit: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.CANCEL_EDIT, options });
+ },
+
+ saveOption: function (node, options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.SAVING_OPTION, options });
+
+ var modelAttrs = options;
+ modelAttrs.node = node;
+ var optionModel = new Resources.OptionModel(modelAttrs);
+
+ FauxtonAPI.when(optionModel.save())
+ .done(function () {
+ this.optionSaveSuccess(options);
+ }.bind(this))
+ .fail(function (xhr) {
+ var error = JSON.parse(xhr.responseText).reason;
+ this.optionSaveFailure(options, error);
+ }.bind(this)
+ );
+ },
+
+ optionSaveSuccess: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.OPTION_SAVE_SUCCESS, options });
+ FauxtonAPI.addNotification({
+ msg: `Option ${options.optionName} saved`,
+ type: 'success'
+ });
+ },
+
+ optionSaveFailure: function (options, error) {
+ FauxtonAPI.dispatch({ type: ActionTypes.OPTION_SAVE_FAILURE, options });
+ FauxtonAPI.addNotification({
+ msg: `Option save failed: ${error}`,
+ type: 'error'
+ });
+ },
+
+ addOption: function (node, options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.ADDING_OPTION });
+
+ var modelAttrs = options;
+ modelAttrs.node = node;
+ var optionModel = new Resources.OptionModel(modelAttrs);
+
+ FauxtonAPI.when(optionModel.save())
+ .done(function () {
--- End diff --
Can you use `then` instead of `done`. Also if you use `() =>` as your function then you don't need to use `bind(this)`
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
merged as ee1a92b02e68d92dd86e5979d5d8f2d100fb24e7 - thank you for your contribution - you rock! <3
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by samk1 <gi...@git.apache.org>.
Github user samk1 closed the pull request at:
https://github.com/apache/couchdb-fauxton/pull/750
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by samk1 <gi...@git.apache.org>.
Github user samk1 commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
Done thankyou.
On 3 October 2016 at 19:05, garren smith <no...@github.com> wrote:
> @samk1 <https://github.com/samk1> could you close this PR. We can't close
> it from our side. And the work is now all merged.
>
> \u2014
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/apache/couchdb-fauxton/pull/750#issuecomment-251048418>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AIkOmAY1--lCzAouqSL46B7zgWo6wdtsks5qwLdQgaJpZM4JTkZA>
> .
>
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r74572031
--- Diff: devserver.js ---
@@ -18,7 +18,7 @@ var loadSettings = function () {
port: process.env.FAUXTON_PORT || 8000,
contentSecurityPolicy: true,
proxy: {
- target: 'http://127.0.0.1:5984',
+ target: 'http://couch:5984',
--- End diff --
pls fix back to http://127.0.0.1:5984
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r72045006
--- Diff: app/addons/config/actions.js ---
@@ -0,0 +1,140 @@
+// 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 ActionTypes from './actiontypes';
+import FauxtonAPI from '../../core/api';
+import Resources from './resources';
+
+export default {
+ fetchAndEditConfig: function (node) {
+ FauxtonAPI.dispatch({ type: ActionTypes.LOADING_CONFIG });
+
+ var configModel = new Resources.ConfigModel({ node });
+
+ FauxtonAPI.when(configModel.fetch())
+ .then(function () {
+ this.editSections({ sections: configModel.get('sections'), node });
+ }.bind(this));
+ },
+
+ editSections: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.EDIT_CONFIG, options });
+ },
+
+ editOption: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.EDIT_OPTION, options });
+ },
+
+ cancelEdit: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.CANCEL_EDIT, options });
+ },
+
+ saveOption: function (node, options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.SAVING_OPTION, options });
+
+ var modelAttrs = options;
+ modelAttrs.node = node;
+ var optionModel = new Resources.OptionModel(modelAttrs);
+
+ FauxtonAPI.when(optionModel.save())
+ .done(function () {
+ this.optionSaveSuccess(options);
+ }.bind(this))
+ .fail(function (xhr) {
+ var error = JSON.parse(xhr.responseText).reason;
+ this.optionSaveFailure(options, error);
+ }.bind(this)
+ );
+ },
+
+ optionSaveSuccess: function (options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.OPTION_SAVE_SUCCESS, options });
+ FauxtonAPI.addNotification({
+ msg: `Option ${options.optionName} saved`,
+ type: 'success'
+ });
+ },
+
+ optionSaveFailure: function (options, error) {
+ FauxtonAPI.dispatch({ type: ActionTypes.OPTION_SAVE_FAILURE, options });
+ FauxtonAPI.addNotification({
+ msg: `Option save failed: ${error}`,
+ type: 'error'
+ });
+ },
+
+ addOption: function (node, options) {
+ FauxtonAPI.dispatch({ type: ActionTypes.ADDING_OPTION });
+
+ var modelAttrs = options;
+ modelAttrs.node = node;
+ var optionModel = new Resources.OptionModel(modelAttrs);
+
+ FauxtonAPI.when(optionModel.save())
+ .done(function () {
--- End diff --
Also you don't need to use `FauxtonAPI.when` here since `optionModel.save()` will return a promise. `.when` is used when you need to wait for multiple promises to resolve before doing something.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #750: Config section reactjs rewrite
Posted by samk1 <gi...@git.apache.org>.
Github user samk1 commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/750
Thanks for the review. I have made the suggested changes.
I hadn't tried installing fauxton to mochiweb - I have done so now though, but I can't replicate the problem with the failure on _membership request. I am running my couch on a VM which I connect to from windows, so I'm not sure if that might be having an effect.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r74571961
--- Diff: devserver.js ---
@@ -1,4 +1,4 @@
-var spawn = require('child_process').spawn;
+var spawn = require('cross-spawn').spawn;
--- End diff --
no need for cross-spawn, i think the minimum version of node to run fauxton is 4
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r74572056
--- Diff: tasks/helper.js ---
@@ -14,7 +14,7 @@ var fs = require('fs'),
path = require('path');
exports.devServerPort = 8000;
-exports.couch = 'http://localhost:5984/';
+exports.couch = 'http://couch:5984/';
--- End diff --
pls fix to http://127.0.0.1:5984
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #750: Config section reactjs rewrite
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/750#discussion_r74571323
--- Diff: app/addons/config/components.react.jsx ---
@@ -0,0 +1,398 @@
+// 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 ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import {Overlay, Button, Popover} from "react-bootstrap";
+import Components from "../components/react-components.react";
+import FauxtonComponents from "../fauxton/components.react";
+
+const configStore = Stores.configStore;
+
+var ConfigTableController = React.createClass({
+ getStoreState () {
+ return {
+ options: configStore.getOptions(),
+ loading: configStore.isLoading()
+ };
+ },
+
+ getInitialState () {
+ return this.getStoreState();
+ },
+
+ componentDidMount () {
+ configStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount () {
+ configStore.off('change', this.onChange, this);
--- End diff --
no binding needed for unregistering:
```
configStore.off('change', this.onChange);
```
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---