Merge b5ba4dd into 8bcd64e

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "airbnb"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "no-underscore-dangle": "off",
+        "no-console": "off",
+        "global-require": "off",
+        "react/forbid-prop-types": "off",
+        "no-restricted-syntax": "off",
+        "linebreak-style": "off",
+        "max-classes-per-file": "off",
+        "import/no-unresolved": "off"
+    }
+}

app/controllers/analyses_controller.rb

@@ -30,11 +30,12 @@ def create
     else
       if params[:mda_id]
         @orig_mda = Analysis.find(params[:mda_id])
+        authorize @orig_mda
         @mda = Analysis.build_copy(@orig_mda)
       else
         @mda = Analysis.new(mda_params)
+        authorize @mda
       end
-      authorize @mda
       if @mda.save(validate: !params[:mda_id])
         current_user.add_role(:owner, @mda)
         current_user.save

app/javascript/api_doc_viewer/index.jsx

@@ -1,33 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import SwaggerUI from 'swagger-ui-react'
+import SwaggerUI from 'swagger-ui-react';
 
 class SwaggerApiDoc extends React.Component {
-
   constructor(props) {
-    super(props)
+    super(props);
 
     this.preAuthorize = this.preAuthorize.bind(this);
     this.ref = React.createRef();
   }
 
   preAuthorize() {
     if (this.props.api.apiKey) {
-      this.ref.current.system.preauthorizeApiKey('Token', 'Token ' + this.props.api.apiKey);
+      this.ref.current.system.preauthorizeApiKey('Token', `Token ${this.props.api.apiKey}`);
     }
   }
 
   render() {
-    return (<SwaggerUI ref={this.ref}
-      url={this.props.api.apiUrl("/api_doc")}
-      onComplete={this.preAuthorize}
-    />);
+    return (
+      <SwaggerUI
+        ref={this.ref}
+        url={this.props.api.apiUrl('/api_doc')}
+        onComplete={this.preAuthorize}
+      />
+    );
   }
-
 }
 
 SwaggerApiDoc.propTypes = {
   api: PropTypes.object.isRequired,
 };
 
-export default SwaggerApiDoc;
+export default SwaggerApiDoc;

app/javascript/mda_viewer/components/AnalysisBreadCrumbs.jsx

@@ -1,21 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-class AnalysisBreadCrumbs extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
+class AnalysisBreadCrumbs extends React.PureComponent {
   render() {
-    const crumbs = this.props.path.map((anc, i) => {
-      const href = this.props.api.url(`/analyses/${anc.id}`);
-      let klass = "breadcrumb-item";
+    const { path, api } = this.props;
+    const crumbs = path.map((anc, i) => {
+      const href = api.url(`/analyses/${anc.id}`);
+      let klass = 'breadcrumb-item';
       let name = <a href={href}>{anc.name}</a>;
-      if (this.props.path.length-1===i) {
-        klass += " active";
+      if (path.length - 1 === i) {
+        klass += ' active';
         name = anc.name;
       }
-      return ( <li key={anc.id} className={klass}>{name}</li>);
+      return (<li key={anc.id} className={klass}>{name}</li>);
     });
 
     return (
@@ -33,7 +30,7 @@ AnalysisBreadCrumbs.propTypes = {
   path: PropTypes.arrayOf({
     name: PropTypes.string,
     id: PropTypes.number,
-  }),
+  }).isRequired,
 };
 
 export default AnalysisBreadCrumbs;

app/javascript/mda_viewer/components/AnalysisEditor.jsx

@@ -1,22 +1,23 @@
-import React, {Fragment} from 'react';
+/* eslint-disable max-classes-per-file */
+import React from 'react';
 import PropTypes from 'prop-types';
 import UserSelector from './UserSelector';
 import AnalysisNoteEditor from './AnalysisNoteEditor';
 
-class MemberList extends React.Component {
+class MemberList extends React.PureComponent {
   render() {
-    const logins = this.props.members.map((member) => member.login);
-    const mbrs = this.props.members;
-    const members = logins.map((login, i) => {
-      return (<span key={mbrs[i].id} className="btn-group m-1" role="group">
-        <button className="btn">{login}</button>
-        <button className="btn text-danger" onClick={(e) => this.props.onAnalysisMemberDelete(mbrs[i])}>
+    const { members, onAnalysisMemberDelete } = this.props;
+    const logins = members.map((member) => member.login);
+    const memberItems = logins.map((login, i) => (
+      <span key={members[i].id} className="btn-group m-1" role="group">
+        <button type="button" className="btn">{login}</button>
+        <button type="button" className="btn text-danger" onClick={() => onAnalysisMemberDelete(members[i])}>
           <i className="fa fa-times" />
         </button>
-      </span>);
-    });
+      </span>
+    ));
 
-    return (<span className="mb-3">{members}</span> );
+    return (<span className="mb-3">{memberItems}</span>);
   }
 }
 
@@ -25,63 +26,91 @@ MemberList.propTypes = {
   onAnalysisMemberDelete: PropTypes.func.isRequired,
 };
 
-class AnalysisEditor extends React.Component {
+class AnalysisEditor extends React.PureComponent {
   render() {
     let teamMembers = null;
-    if (!this.props.analysisPublic) {
+    const {
+      analysisPublic, analysisMembers,
+      onAnalysisMemberSearch, onAnalysisMemberSelected, onAnalysisMemberDelete, onAnalysisUpdate,
+      newAnalysisName, onAnalysisNameChange, onAnalysisNoteChange, onAnalysisPublicChange,
+      mdaId, note,
+    } = this.props;
+    if (!analysisPublic) {
       teamMembers = (
-        <Fragment>
+        <>
           <div className="editor-section">
             <span className="form-inline">
-              <label>Team Members
+              <div>
+                Team Members
                 <span className="ml-1 mr-3 badge badge-info">
-                  {this.props.analysisMembers.length}
+                  {analysisMembers.length}
                 </span>
-              </label>
+              </div>
               <UserSelector
-                onMemberSearch={this.props.onAnalysisMemberSearch}
-                onMemberSelected={this.props.onAnalysisMemberSelected}
+                onMemberSearch={onAnalysisMemberSearch}
+                onMemberSelected={onAnalysisMemberSelected}
               />
             </span>
           </div>
           <div className="editor-section">
-            <MemberList members={this.props.analysisMembers}
-              onAnalysisMemberDelete={this.props.onAnalysisMemberDelete} />
+            <MemberList
+              members={analysisMembers}
+              onAnalysisMemberDelete={onAnalysisMemberDelete}
+            />
           </div>
-        </Fragment>);
+        </>
+      );
     }
 
-    return (<div className="container-fluid">
-      <div className="editor-section">
-        <label htmlFor="name">Information</label>
-        <form className="col-6" onSubmit={this.props.onAnalysisUpdate}>
-          <div className="form-group">
-            <label htmlFor="name">Name</label>
-            <input type="text" value={this.props.newAnalysisName} className="form-control"
-              id="name" onChange={this.props.onAnalysisNameChange}/>
-          </div>
-          <div className="form-group">
-            <AnalysisNoteEditor mdaId={this.props.mdaId} note={this.props.note}
-                                onAnalysisNoteChange={this.props.onAnalysisNoteChange}/>
-          </div>
-          <button type="submit" className="btn btn-primary ml-3">Save</button>
-        </form>
-      </div>
-      <div className="editor-section">
-        <label htmlFor="name">Privacy</label>
-        <form className="form" onSubmit={this.props.onAnalysisUpdate}>
-          <div className="form-group form-check">
-            <input type="checkbox" className="form-check-input" defaultChecked={!this.props.analysisPublic}
-              id="public" onChange={this.props.onAnalysisPublicChange}/>
-            <label htmlFor="public" className="form-check-label">Restricted Access</label>
-          </div>
-        </form>
+    return (
+      <div className="container-fluid">
+        <div className="editor-section">
+          <div>Information</div>
+          <form className="col-6" onSubmit={onAnalysisUpdate}>
+            <div className="form-group">
+              <label htmlFor="name">
+                Name
+                <input
+                  type="text"
+                  value={newAnalysisName}
+                  className="form-control"
+                  id="name"
+                  onChange={onAnalysisNameChange}
+                />
+              </label>
+            </div>
+            <div className="form-group">
+              <AnalysisNoteEditor
+                mdaId={mdaId}
+                note={note}
+                onAnalysisNoteChange={onAnalysisNoteChange}
+              />
+            </div>
+            <button type="submit" className="btn btn-primary ml-3">Save</button>
+          </form>
+        </div>
+        <div className="editor-section">
+          <div>Privacy</div>
+          <form className="form" onSubmit={onAnalysisUpdate}>
+            <div className="form-group form-check">
+              <label htmlFor="public" className="form-check-label">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  defaultChecked={!analysisPublic}
+                  id="public"
+                  onChange={onAnalysisPublicChange}
+                />
+                Restricted Access
+              </label>
+            </div>
+          </form>
+        </div>
+        {teamMembers}
       </div>
-      {teamMembers}
-    </div>
     );
   }
-};
+}
 
 AnalysisEditor.propTypes = {
   note: PropTypes.string.isRequired,