Merged with latest master - 1205

Author: Aaron Tobias

.babelrc

@@ -1,8 +1,8 @@
 {
   "presets": [
-    "react",
-    "es2015"
+    "@babel/react",
+    "@babel/env"
   ],
-  "plugins": ["transform-object-assign", "transform-object-rest-spread",
-    "transform-class-properties", "array-includes","transform-async-to-generator"]
+  "plugins": ["@babel/plugin-transform-object-assign", "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties", "babel-plugin-array-includes","@babel/plugin-transform-async-to-generator"]
 }

.eslintrc

@@ -78,5 +78,11 @@
     "expect": true,
     "prettyPrint": true,
     "jest": true
+  },
+
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

CONTRIBUTING.md

@@ -12,72 +12,23 @@ Contributions to CouchDB are governed by our [Code of Conduct][6] and a set of
 [Project Bylaws][7]. Apache CouchDB itself also has a [CONTRIBUTING.md][9] if
 you want to help with the larger project. Come join us!
 
-
 ## Contributor quick start
 
 If you never created a pull request before, welcome :tada: :smile: [Here is a great tutorial](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
 on how to send one :)
 
-The [Readme file](https://github.com/apache/couchdb-fauxton/blob/master/readme.md) has information about how to get the project running.
-
-Instructions to get a dev environment up and running as fast as possible:
-
-First, ensure that you have Node and npm installed. You should also have either CouchDB 2.0+ or PouchDB Server. The easiest to install is PouchDB Server:
-
-```
-npm install -g pouchdb-server
-pouchdb-server --port 5984
-```
-
-Now that we have a CouchDB (or PouchDB Server) up and running, check out the code:
-
-```
-git clone https://github.com/apache/couchdb-fauxton
-cd couchdb-fauxton
-npm install
-```
-
-Next, copy `settings.json.default.json` to `settings.json`. This will be our local settings file.
-
-In the `settings.json`, under `"development"` -> `"app"`, change the `"host"` to point to your local CouchDB or PouchDB Server, e.g.:
-
-```js
-"development": {
-  /* ... */
-  "app": {
-    /* ... */
-    "host": "http://localhost:5984"
-  }
-}
-```
-
-Now run:
-
-    npm run dev
-
-And your Fauxton dev server will be up and running at `localhost:8000`.
-
+The [Readme file](https://github.com/apache/couchdb-fauxton/blob/master/readme.md) has information about how to get the project set up for development.
 
 ## Guide to Contributions
 
-We follow our coding-styleguide to make it easier for everyone to write, read and review code: 
+We follow our coding-styleguide to make it easier for everyone to write, read and review code:
 [https://github.com/apache/couchdb-fauxton/blob/master/styleguide.md](https://github.com/apache/couchdb-fauxton/blob/master/styleguide.md)
 
 To start working on a specific ticket, create a branch with the GitHub Issue # followed by a traincase description of the issue.
 
-> e.g.   1234-Added-support-for-list-functions
-
-If there is no GH Issue for the issue you have, you don't have to create one.
+> e.g. 1234-Added-support-for-list-functions
 
-Please describe the issue, how it happens and how you fixed it in the commit message. Before you submit the Pull 
-Request, please run our testsuite and make sure that it passes:
-
-```
-grunt test
-```
-
-You can also open `couchdb-fauxton/test/runner.html` in a browser. Click on the headlines of the testcases to just run 
-a specific test that fails - it should be faster than running the whole testsuite every time.
+If there is no GH Issue for the issue you have, you don't have to create one. Please describe the issue, how it happens and how you fixed it in the commit message.
 
 Commit messages should follow the following style:
 
@@ -92,20 +43,21 @@ Fixes #XXX (if there is a GH Issue)
 Fixes apache/couchdb#XXX (if there is a CouchDB project GH Issue)
 ```
 
-When you're ready for a review, submit a Pull Request. We regularly check the PR list for Fauxton and should get back 
-to you with a code review.  If no one has responded to you yet, you can find us on [Freenode IRC in #couchdb-dev][8].
+Before you submit the Pull Request, please [run our test suite](#tests.md) and make sure that it passes.
+
+We regularly check the PR list for Fauxton and should get back
+to you with a code review. If no one has responded to you yet, you can find us on [Freenode IRC in #couchdb-dev][8].
 Ping **garren**, **robertkowalski** or **michellep** though anyone in the room should be able to help you.
 
 ## Get in Touch
 
-We appreciate constructive feedback from people who use CouchDB, so don't be shy. We know there are bugs and we know 
+We appreciate constructive feedback from people who use CouchDB, so don't be shy. We know there are bugs and we know
 there is room for improvement.
 
 ʕ´•ᴥ•`ʔ Thanks!
 
 -- Fauxton team
 
-
 [6]: http://couchdb.apache.org/conduct.html
 [7]: http://couchdb.apache.org/bylaws.html
 [8]: http://webchat.freenode.net?channels=%23couchdb-dev

app/addons/activetasks/container.js

@@ -10,23 +10,16 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
 import Controller from './layout';
-import {
-  init,
-  changePollingInterval,
-  setSearchTerm,
-  sortByColumnHeader,
-  switchTab,
-  runPollingUpdate
-} from './actions';
+import {init, setSearchTerm, sortByColumnHeader, switchTab, runPollingUpdate} from './actions';
 import {
   getTasks,
   getHeaderIsAscending,
   getSelectedRadio,
   getSortByHeader,
   getSearchTerm,
-  getIsLoading
+  getIsLoading,
 } from './reducers';
 
 const mapStateToProps = ({activetasks}) => {
@@ -36,18 +29,17 @@ const mapStateToProps = ({activetasks}) => {
     selectedRadio: getSelectedRadio(activetasks),
     sortByHeader: getSortByHeader(activetasks),
     searchTerm: getSearchTerm(activetasks),
-    isLoading: getIsLoading(activetasks)
+    isLoading: getIsLoading(activetasks),
   };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
     init: () => dispatch(init()),
-    changePollingInterval: (interval) => dispatch(changePollingInterval(interval)),
-    setSearchTerm: (term) => dispatch(setSearchTerm(term)),
-    sortByColumnHeader: (column) => dispatch(sortByColumnHeader(column)),
-    switchTab: (tab) => dispatch(switchTab(tab)),
-    runPollingUpdate: () => dispatch(runPollingUpdate())
+    setSearchTerm: term => dispatch(setSearchTerm(term)),
+    sortByColumnHeader: column => dispatch(sortByColumnHeader(column)),
+    switchTab: tab => dispatch(switchTab(tab)),
+    runPollingUpdate: () => dispatch(runPollingUpdate()),
   };
 };
 

app/addons/components/__tests__/accordion.test.js

@@ -0,0 +1,46 @@
+// 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 {Accordion, AccordionItem} from '../components/accordion';
+import {mount} from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+describe('Accordion', () => {
+  it('Shows and hides content after clicking on header', () => {
+    const el = mount(
+      <Accordion>
+        <AccordionItem title={'Click to open'}>
+          <p id="test_content">Have a great day</p>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    expect(el.find('.faux--accordion__item-content').hasClass('in')).toBe(false);
+    el.find('.faux--accordion__item-header').simulate('click');
+    expect(el.find('.faux--accordion__item-content').hasClass('in')).toBe(true);
+  });
+
+  it('Calls onClick event', () => {
+    const spy = sinon.spy();
+    const el = mount(
+      <Accordion>
+        <AccordionItem title={'Click to open'} onClick={spy}>
+          <p id="test_content">Have a great day</p>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    el.find('.faux--accordion__item-header').simulate('click');
+    sinon.assert.called(spy);
+  });
+});

app/addons/components/assets/less/accordion.less

@@ -0,0 +1,27 @@
+.faux--accordion {
+  list-style: none;
+  margin: 0px;
+  width: 100%;
+}
+
+.faux--accordion__item {
+  background-color: transparent;
+  transition: all 0.5s linear;
+}
+
+.faux--accordion__item-header {
+  border: 0;
+  background-color: transparent;
+  color: inherit;
+  font-size: inherit;
+  padding-left: 0px;
+  span {
+    padding-left: 0.5rem;
+  }
+}
+
+.faux--accordion__item-content {
+  padding-left: 1.35rem;
+  padding-top: 0.75rem;
+  font-size: inherit;
+}

app/addons/components/assets/less/components.less

@@ -12,6 +12,7 @@
 
 @import "../../../../../assets/less/variables.less";
 
+@import "accordion.less";
 @import "header-togglebutton.less";
 @import "styled-select.less";
 @import "docs.less";

app/addons/components/assets/less/jsonlink.less

@@ -16,6 +16,8 @@
   padding: 16px 12px 12px 12px !important;
   height: 64px;
   background-color: rgba(0, 0, 0, 0);
+  text-align: center;
+  min-width: 55px;
 }
 
 .faux__jsonlink-link {
@@ -38,15 +40,6 @@
   font-weight: 500;
 }
 
-@media screen and (max-width: 1200px) {
-  .faux__jsonlink-link {
-    font-size: 10px;
-  }
-  .faux__jsonlink-link-brackets {
-    font-size: 12px;
-  }
-}
-
 .faux__doclink {
   text-align: center;
   width: 55px;
@@ -69,3 +62,19 @@
   text-decoration: none;
   color: #666;
 }
+
+@media (max-width: 1090px) {
+  #main:not(.closeMenu) {
+    .faux__jsonlink-link-label{
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 1120px) {
+  #main.closeMenu {
+    .faux__jsonlink-link-label{
+      display: none;
+    }
+  }
+}

app/addons/components/components/accordion.js

@@ -0,0 +1,64 @@
+// 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 PropTypes from 'prop-types';
+import React from 'react';
+import {Collapse} from 'react-bootstrap';
+import classnames from 'classnames';
+
+export const Accordion = props => {
+  const {children, className, style} = props;
+  const classNames = classnames('faux--accordion', className);
+  return (
+    <ul className={classNames} style={style}>
+      {children}
+    </ul>
+  );
+};
+
+export class AccordionItem extends React.Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+  };
+
+  static defaultProps = {
+    onClick: () => {},
+  };
+
+  state = {
+    open: false,
+  };
+
+  handleClick = event => {
+    const newOpen = !this.state.open;
+    this.setState({open: newOpen});
+    this.props.onClick({isOpen: newOpen, event});
+  };
+
+  render() {
+    const {children, title} = this.props;
+    const icon = this.state.open ? 'fonticon-down-open' : 'fonticon-right-open';
+    const contentClassNames = classnames('faux--accordion__item-content', 'collapse', {in: this.state.open});
+
+    return (
+      <li className="faux--accordion__item" onClick={this.handleClick}>
+        <button type="button" className={`faux--accordion__item-header`} onClick={this.handleClick}>
+          <i className={icon}></i>
+          <span>{title}</span>
+        </button>
+        <Collapse in={this.state.open}>
+          <div className={contentClassNames}>{children}</div>
+        </Collapse>
+      </li>
+    );
+  }
+}

app/addons/components/components/apibar.js

@@ -10,8 +10,8 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-import React from "react";
-import ReactDOM from "react-dom";
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 export const JSONLink = ({endpoint}) => {
   if (!endpoint) {
@@ -22,7 +22,7 @@ export const JSONLink = ({endpoint}) => {
     <div className="faux__jsonlink">
       <a data-bypass={true} className="faux__jsonlink-link" href={endpoint} target="_blank" rel="noopener noreferrer">
         <span className="faux__jsonlink-link-brackets">{'{\u00a0}'}</span>
-        <span>JSON</span>
+        <span className="faux__jsonlink-link-label">JSON</span>
       </a>
     </div>
   );