Modernize javascript toolchain

.prettierignore

@@ -0,0 +1,14 @@
+node_modules
+.yarn
+public/packs
+public/packs-test
+public/assets
+vendor
+tmp
+log
+storage
+upload
+*_out
+reports
+db/*.sqlite3
+app/javascript/mda_viewer/components/riek

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "semi": true
+}

app/javascript/api_doc_viewer/index.jsx

@@ -5,13 +5,7 @@ import 'swagger-ui-react/swagger-ui.css';
 
 function MySwaggerUI(props) {
   const { url, preAuthorize } = props;
-  return (
-    <SwaggerUI
-      url={url}
-      onComplete={preAuthorize}
-      docExpansion="list"
-    />
-  );
+  return <SwaggerUI url={url} onComplete={preAuthorize} docExpansion="list" />;
 }
 
 MySwaggerUI.propTypes = {
@@ -26,12 +20,7 @@ function SwaggerApiDoc({ api }) {
     }
   }
 
-  return (
-    <MySwaggerUI
-      url={api.docUrl()}
-      preAuthorize={(sui) => preAuthorize(sui)}
-    />
-  );
+  return <MySwaggerUI url={api.docUrl()} preAuthorize={(sui) => preAuthorize(sui)} />;
 }
 
 SwaggerApiDoc.propTypes = {

app/javascript/application_views/analyses_index.js

@@ -37,7 +37,9 @@
         },
         success() {
           $.getScript(this.href, () => {
-            if (timeout) { clearTimeout(timeout); }
+            if (timeout) {
+              clearTimeout(timeout);
+            }
             $('.spinner').hide();
 
             // UX test: code below reset the search string
@@ -68,16 +70,13 @@
 
     $('input[data-analyses-query]').on('click', setAnalysesListSettings);
     $('input[data-analyses-order]').on('click', setAnalysesListSettings);
-    $('#analyses-filter').on(
-      'keypress',
-      (event) => {
-        if (event.key === 'Enter') {
-          setAnalysesListSettings();
-          // Cancel the default action, if needed
-          event.preventDefault();
-        }
-      },
-    );
+    $('#analyses-filter').on('keypress', (event) => {
+      if (event.key === 'Enter') {
+        setAnalysesListSettings();
+        // Cancel the default action, if needed
+        event.preventDefault();
+      }
+    });
     $('#btn_user_settings_analyses_filter').on('click', setAnalysesListSettings);
 
     let current_design_project_id = '<%= current_user.analyses_scope_design_project_id %>';
@@ -99,7 +98,9 @@
           },
           success() {
             $.getScript(this.href, () => {
-              if (timeout) { clearTimeout(timeout); }
+              if (timeout) {
+                clearTimeout(timeout);
+              }
               $('.spinner').hide();
             });
           },

app/javascript/application_views/operations_index.js

@@ -20,33 +20,30 @@
       $input.on('focus');
     });
 
-    $('button[data-save="true"]').on(
-      'click',
-      () => {
-        const newName = $input.val();
-        $.ajax({
-          type: 'PATCH',
-          xhrFields: { withCredentials: true },
-          headers: { Authorization: `Token ${opeEdit.apiKey}` },
-          url: `${relativeUrlRoot}/api/v1/operations/${opeEdit.id}`,
-          data: { operation: { name: newName } },
-          success() {
-            $(`a[id=${opeEdit.id}]`).text(newName);
-            opeEdit.invoker.data('ope-name', newName);
-            $modal.modal('hide');
-          },
-          error(xhr) {
-            console.log(xhr.responseJSON.message);
-            $('#errorPlaceHolder').html(
-              `<div class="alert bg-warning" role="alert"><a href="#" data-dismiss="alert" class="close">×</a>${
-                xhr.responseJSON.message
-              }</div>`,
-            );
-            $modal.modal('hide');
-          },
-        });
-      },
-    );
+    $('button[data-save="true"]').on('click', () => {
+      const newName = $input.val();
+      $.ajax({
+        type: 'PATCH',
+        xhrFields: { withCredentials: true },
+        headers: { Authorization: `Token ${opeEdit.apiKey}` },
+        url: `${relativeUrlRoot}/api/v1/operations/${opeEdit.id}`,
+        data: { operation: { name: newName } },
+        success() {
+          $(`a[id=${opeEdit.id}]`).text(newName);
+          opeEdit.invoker.data('ope-name', newName);
+          $modal.modal('hide');
+        },
+        error(xhr) {
+          console.log(xhr.responseJSON.message);
+          $('#errorPlaceHolder').html(
+            `<div class="alert bg-warning" role="alert"><a href="#" data-dismiss="alert" class="close">×</a>${
+              xhr.responseJSON.message
+            }</div>`
+          );
+          $modal.modal('hide');
+        },
+      });
+    });
   }
 }
 

app/javascript/mda_viewer/components/AnalysisBreadCrumbs.jsx

@@ -12,25 +12,29 @@ class AnalysisBreadCrumbs extends React.PureComponent {
         klass += ' active';
         name = anc.name;
       }
-      return (<li key={anc.id} className={klass}>{name}</li>);
+      return (
+        <li key={anc.id} className={klass}>
+          {name}
+        </li>
+      );
     });
 
     return (
       <nav aria-label="breadcrumb">
-        <ol className="breadcrumb">
-          {crumbs}
-        </ol>
+        <ol className="breadcrumb">{crumbs}</ol>
       </nav>
     );
   }
 }
 
 AnalysisBreadCrumbs.propTypes = {
   api: PropTypes.object.isRequired,
-  path: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.number,
-  })).isRequired,
+  path: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      id: PropTypes.number,
+    })
+  ).isRequired,
 };
 
 export default AnalysisBreadCrumbs;

app/javascript/mda_viewer/components/AnalysisEditor.jsx

@@ -7,21 +7,26 @@
 
 class UserList extends React.PureComponent {
   render() {
-    const {
-      users, userRole, onUserDelete, editEnabled,
-    } = this.props;
+    const { users, userRole, onUserDelete, editEnabled } = this.props;
     const logins = users.map((user) => user.login);
 
     const userItems = logins.map((login, i) => (
       <span key={users[i].id} className="btn-group m-1" role="group">
-        <button type="button" className="btn">{login}</button>
-        <button type="button" className="btn text-danger" disabled={!editEnabled} onClick={() => onUserDelete(users[i], userRole)}>
+        <button type="button" className="btn">
+          {login}
+        </button>
+        <button
+          type="button"
+          className="btn text-danger"
+          disabled={!editEnabled}
+          onClick={() => onUserDelete(users[i], userRole)}
+        >
           <i className="fa fa-times" />
         </button>
       </span>
     ));
 
-    return (<span className="mb-3">{userItems}</span>);
+    return <span className="mb-3">{userItems}</span>;
   }
 }
 
@@ -34,9 +39,7 @@
 
 class TeamSelector extends React.PureComponent {
   render() {
-    const {
-      users, userRole, onUserSearch, onUserSelected, onUserDelete, editEnabled,
-    } = this.props;
+    const { users, userRole, onUserSearch, onUserSelected, onUserDelete, editEnabled } = this.props;
     let title = 'Users';
     if (userRole === 'member') {
       title = 'Members';
@@ -59,10 +62,8 @@
         <div className="editor-section">
           <span className="d-flex flex-row align-items-center flex-wrap">
             <div>
-              { title }
-              <span className="ms-1 me-3 badge bg-info">
-                {users.length}
-              </span>
+              {title}
+              <span className="ms-1 me-3 badge bg-info">{users.length}</span>
             </div>
             {userSelector}
           </span>
@@ -93,11 +94,23 @@
   render() {
     let teamMembers = null;
     const {
-      analysisPublic, analysisMembers, analysisCoOwners,
-      analysisPermissionsEditable, onAnalysisUserSearch, onAnalysisUserSelected,
-      onAnalysisUserDelete, onAnalysisUpdate, newAnalysisName,
-      onAnalysisNameChange, onAnalysisNoteChange, onAnalysisPublicChange,
-      mdaId, note, onProjectSearch, onProjectSelected, mdaProject,
+      analysisPublic,
+      analysisMembers,
+      analysisCoOwners,
+      analysisPermissionsEditable,
+      onAnalysisUserSearch,
+      onAnalysisUserSelected,
+      onAnalysisUserDelete,
+      onAnalysisUpdate,
+      newAnalysisName,
+      onAnalysisNameChange,
+      onAnalysisNoteChange,
+      onAnalysisPublicChange,
+      mdaId,
+      note,
+      onProjectSearch,
+      onProjectSelected,
+      mdaProject,
     } = this.props;
     if (!analysisPublic) {
       teamMembers = (
@@ -127,15 +140,12 @@
       <div className="container-fluid">
         <div className="editor-section">
           <div className="editor-section-label">
-            <i className="fas fa-info-circle" title="Analysis general informations" />
-            {' '}
-            General Information
+            <i className="fas fa-info-circle" title="Analysis general informations" /> General
+            Information
           </div>
           <form onSubmit={onAnalysisUpdate}>
             <div className="mb-3 col-4">
-              <div className="editor-section-label">
-                Name
-              </div>
+              <div className="editor-section-label">Name</div>
               <input
                 type="text"
                 value={newAnalysisName}
@@ -145,19 +155,15 @@
               />
             </div>
             <div className="mb-3 col-4">
-              <div className="editor-section-label">
-                Design Project
-              </div>
+              <div className="editor-section-label">Design Project</div>
               <ProjectSelector
                 selected={mdaProject}
                 onProjectSearch={onProjectSearch}
                 onProjectSelected={onProjectSelected}
               />
             </div>
             <div className="mb-3">
-              <div className="editor-section-label">
-                Notes
-              </div>
+              <div className="editor-section-label">Notes</div>
               <div className="editor-section-label col-9">
                 <AnalysisNoteEditor
                   mdaId={mdaId}
@@ -166,27 +172,23 @@
                 />
               </div>
             </div>
-            <button type="submit" className="btn btn-primary ms-3">Save</button>
+            <button type="submit" className="btn btn-primary ms-3">
+              Save
+            </button>
           </form>
         </div>
         <hr />
         <div className="editor-section">
           <div className="editor-section-label">
-            <i className="fas fa-users-cog" title="Analysis has co-owners" />
-            {' '}
-            Collaboration
-            {' '}
+            <i className="fas fa-users-cog" title="Analysis has co-owners" /> Collaboration{' '}
             <small>(allow edit access to the users listed below)</small>
           </div>
         </div>
         {coOwners}
         <hr />
         <div className="editor-section">
           <div className="editor-section-label">
-            <i className="fas fa-user-secret" title="Analysis with restricted access" />
-            {' '}
-            Privacy
-            {' '}
+            <i className="fas fa-user-secret" title="Analysis with restricted access" /> Privacy{' '}
             <small>(when restricted, allow read only access to the users listed below)</small>
           </div>
           <form className="form" onSubmit={onAnalysisUpdate}>