Upgrade javascript frontend (whatsopt#210)

* Lint js

* Use shakapacker server in dev (faster dev config)

* Update javascript deps

* Minor update of bundled gems

* Update dev server in swagger

* Fix pre authentication in API doc

* Cleanup some logs

Gemfile.lock

@@ -1,29 +1,29 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.2.0)
-      actionpack (= 7.2.0)
-      activesupport (= 7.2.0)
+    actioncable (7.2.1)
+      actionpack (= 7.2.1)
+      activesupport (= 7.2.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.2.0)
-      actionpack (= 7.2.0)
-      activejob (= 7.2.0)
-      activerecord (= 7.2.0)
-      activestorage (= 7.2.0)
-      activesupport (= 7.2.0)
+    actionmailbox (7.2.1)
+      actionpack (= 7.2.1)
+      activejob (= 7.2.1)
+      activerecord (= 7.2.1)
+      activestorage (= 7.2.1)
+      activesupport (= 7.2.1)
       mail (>= 2.8.0)
-    actionmailer (7.2.0)
-      actionpack (= 7.2.0)
-      actionview (= 7.2.0)
-      activejob (= 7.2.0)
-      activesupport (= 7.2.0)
+    actionmailer (7.2.1)
+      actionpack (= 7.2.1)
+      actionview (= 7.2.1)
+      activejob (= 7.2.1)
+      activesupport (= 7.2.1)
       mail (>= 2.8.0)
       rails-dom-testing (~> 2.2)
-    actionpack (7.2.0)
-      actionview (= 7.2.0)
-      activesupport (= 7.2.0)
+    actionpack (7.2.1)
+      actionview (= 7.2.1)
+      activesupport (= 7.2.1)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4, < 3.2)
@@ -32,15 +32,15 @@ GEM
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
       useragent (~> 0.16)
-    actiontext (7.2.0)
-      actionpack (= 7.2.0)
-      activerecord (= 7.2.0)
-      activestorage (= 7.2.0)
-      activesupport (= 7.2.0)
+    actiontext (7.2.1)
+      actionpack (= 7.2.1)
+      activerecord (= 7.2.1)
+      activestorage (= 7.2.1)
+      activesupport (= 7.2.1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.2.0)
-      activesupport (= 7.2.0)
+    actionview (7.2.1)
+      activesupport (= 7.2.1)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
@@ -50,22 +50,22 @@ GEM
       activemodel (>= 4.1)
       case_transform (>= 0.2)
       jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
-    activejob (7.2.0)
-      activesupport (= 7.2.0)
+    activejob (7.2.1)
+      activesupport (= 7.2.1)
       globalid (>= 0.3.6)
-    activemodel (7.2.0)
-      activesupport (= 7.2.0)
-    activerecord (7.2.0)
-      activemodel (= 7.2.0)
-      activesupport (= 7.2.0)
+    activemodel (7.2.1)
+      activesupport (= 7.2.1)
+    activerecord (7.2.1)
+      activemodel (= 7.2.1)
+      activesupport (= 7.2.1)
       timeout (>= 0.4.0)
-    activestorage (7.2.0)
-      actionpack (= 7.2.0)
-      activejob (= 7.2.0)
-      activerecord (= 7.2.0)
-      activesupport (= 7.2.0)
+    activestorage (7.2.1)
+      actionpack (= 7.2.1)
+      activejob (= 7.2.1)
+      activerecord (= 7.2.1)
+      activesupport (= 7.2.1)
       marcel (~> 1.0)
-    activesupport (7.2.0)
+    activesupport (7.2.1)
       base64
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
@@ -218,7 +218,7 @@ GEM
     nenv (0.3.0)
     net-http (0.4.1)
       uri
-    net-imap (0.4.14)
+    net-imap (0.4.15)
       date
       net-protocol
     net-ldap (0.19.0)
@@ -244,7 +244,7 @@ GEM
       sawyer (~> 0.9)
     orm_adapter (0.5.0)
     package_json (0.1.0)
-    pagy (9.0.5)
+    pagy (9.0.7)
     parallel (1.26.3)
     parser (3.3.4.2)
       ast (~> 2.4.1)
@@ -269,7 +269,7 @@ GEM
     public_suffix (6.0.1)
     puma (6.4.2)
       nio4r (~> 2.0)
-    pundit (2.3.2)
+    pundit (2.4.0)
       activesupport (>= 3.0.0)
     racc (1.8.1)
     rack (3.1.7)
@@ -286,30 +286,30 @@ GEM
     rackup (2.1.0)
       rack (>= 3)
       webrick (~> 1.8)
-    rails (7.2.0)
-      actioncable (= 7.2.0)
-      actionmailbox (= 7.2.0)
-      actionmailer (= 7.2.0)
-      actionpack (= 7.2.0)
-      actiontext (= 7.2.0)
-      actionview (= 7.2.0)
-      activejob (= 7.2.0)
-      activemodel (= 7.2.0)
-      activerecord (= 7.2.0)
-      activestorage (= 7.2.0)
-      activesupport (= 7.2.0)
+    rails (7.2.1)
+      actioncable (= 7.2.1)
+      actionmailbox (= 7.2.1)
+      actionmailer (= 7.2.1)
+      actionpack (= 7.2.1)
+      actiontext (= 7.2.1)
+      actionview (= 7.2.1)
+      activejob (= 7.2.1)
+      activemodel (= 7.2.1)
+      activerecord (= 7.2.1)
+      activestorage (= 7.2.1)
+      activesupport (= 7.2.1)
       bundler (>= 1.15.0)
-      railties (= 7.2.0)
+      railties (= 7.2.1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    railties (7.2.0)
-      actionpack (= 7.2.0)
-      activesupport (= 7.2.0)
+    railties (7.2.1)
+      actionpack (= 7.2.1)
+      activesupport (= 7.2.1)
       irb (~> 1.13)
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -418,7 +418,7 @@ GEM
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
     semantic_range (3.0.0)
-    shakapacker (8.0.1)
+    shakapacker (8.0.2)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -453,7 +453,7 @@ GEM
       concurrent-ruby (~> 1.0)
     terser (1.2.3)
       execjs (>= 0.3.0, < 3)
-    thor (1.3.1)
+    thor (1.3.2)
     thrift (0.20.0)
     tilt (2.4.0)
     timeout (0.4.1)

app/javascript/api_doc_viewer/index.jsx

@@ -3,32 +3,35 @@ import PropTypes from 'prop-types';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
 
-class SwaggerApiDoc extends React.Component {
-  constructor(props) {
-    super(props);
+function MySwaggerUI(props) {
+  const { url, preAuthorize } = props;
+  return (
+    <SwaggerUI
+      url={url}
+      onComplete={preAuthorize}
+      docExpansion="list"
+    />
+  );
+}
 
-    this.preAuthorize = this.preAuthorize.bind(this);
-    this.ref = React.createRef();
-  }
+MySwaggerUI.propTypes = {
+  url: PropTypes.string.isRequired,
+  preAuthorize: PropTypes.func.isRequired,
+};
 
-  preAuthorize() {
-    const { api } = this.props;
+function SwaggerApiDoc({ api }) {
+  function preAuthorize(sui) {
     if (api.apiKey) {
-      this.ref.current.system.preauthorizeApiKey('Token', `Token ${api.apiKey}`);
+      sui.getSystem().preauthorizeApiKey('Token', `Token ${api.apiKey}`);
     }
   }
 
-  render() {
-    const { api } = this.props;
-    return (
-      <SwaggerUI
-        ref={this.ref}
-        url={api.docUrl()}
-        onComplete={this.preAuthorize}
-        docExpansion="list"
-      />
-    );
-  }
+  return (
+    <MySwaggerUI
+      url={api.docUrl()}
+      preAuthorize={(sui) => preAuthorize(sui)}
+    />
+  );
 }
 
 SwaggerApiDoc.propTypes = {

app/javascript/application_views/analyses_index.js

@@ -66,13 +66,11 @@ class AnalysesIndex {
       });
     }
 
-    console.log('ATTACH EVENT');
     $('input[data-analyses-query]').on('click', setAnalysesListSettings);
     $('input[data-analyses-order]').on('click', setAnalysesListSettings);
     $('#analyses-filter').on(
       'keypress',
       (event) => {
-        console.log('Keypress');
         if (event.key === 'Enter') {
           setAnalysesListSettings();
           // Cancel the default action, if needed
@@ -101,7 +99,7 @@ class AnalysesIndex {
           },
           success() {
             $.getScript(this.href, () => {
-              if (timeout) { clearTimeout(timeout); console.log('CLEAR'); }
+              if (timeout) { clearTimeout(timeout); }
               $('.spinner').hide();
             });
           },

app/javascript/application_views/optimizations_index.js

@@ -44,7 +44,6 @@ class OptimizationsIndex {
       const status = $('#status-select').val();
 
       $('.checkbox_child').each(function toggle_status() {
-        console.log(this);
         if ($(this).attr('class').indexOf(status) > 0) {
           $(this).prop('checked', checked);
         }

app/javascript/mda_viewer/components/DisciplinesEditor.jsx

@@ -149,7 +149,6 @@ class Discipline extends React.Component {
   }
 
   handleSubAnalysisSelected(selected) {
-    console.log(`Select ${JSON.stringify(selected)}`);
     // Extract name from analysis label #\d+ name
     const [, discName] = selected[0].label.match(/#\d+\s(.*)/);
     this.setState({ selected, discName });

app/javascript/mda_viewer/components/DistributionModals.jsx

@@ -184,21 +184,6 @@ class DistributionModal extends React.Component {
     return this.visible;
   }
 
-  getFormData() {
-    const { selected } = this.state;
-    const taken = selected < 0 ? 0 : selected;
-    const { dists: { [taken]: { kind, options_attributes } } } = this.state;
-    const formData = { kind };
-    if (options_attributes) {
-      formData[`${kind.toLowerCase()}_options`] = {};
-    }
-    for (let i = 0; i < options_attributes.length; i += 1) {
-      const opt = options_attributes[i];
-      formData[`${kind.toLowerCase()}_options`][opt.name] = opt.value;
-    }
-    return formData;
-  }
-
   handleChange(data) {
     const { selected } = this.state;
 
@@ -208,9 +193,6 @@ class DistributionModal extends React.Component {
     const { formData } = data;
     const { kind } = formData;
 
-    const { conn: { name } } = this.props;
-    console.log(`${name}[${selected}]`);
-
     const newState = update(this.state, {
       dists: {
         [selected]: {
@@ -223,7 +205,6 @@ class DistributionModal extends React.Component {
       if (k.startsWith(kind.toLowerCase())) {
         for (const optname in formData[k]) {
           if (formData[k][optname] !== undefined) { // Form bug: filter undefined data
-            // console.log('PUSH ', { name: optname, value: formData[k][optname] });
             newState.dists[selected].options_attributes.push(
               { name: optname, value: formData[k][optname] },
             );
@@ -258,6 +239,21 @@ class DistributionModal extends React.Component {
     $(`#distributionModal-${name}`).modal('hide');
   }
 
+  getFormData() {
+    const { selected } = this.state;
+    const taken = selected < 0 ? 0 : selected;
+    const { dists: { [taken]: { kind, options_attributes } } } = this.state;
+    const formData = { kind };
+    if (options_attributes) {
+      formData[`${kind.toLowerCase()}_options`] = {};
+    }
+    for (let i = 0; i < options_attributes.length; i += 1) {
+      const opt = options_attributes[i];
+      formData[`${kind.toLowerCase()}_options`][opt.name] = opt.value;
+    }
+    return formData;
+  }
+
   /* eslint-disable jsx-a11y/control-has-associated-label */
   /* eslint-disable react/no-array-index-key */
   render() {

app/javascript/mda_viewer/components/VariableSearchPanel.jsx

@@ -91,7 +91,6 @@ class VariableSearchPanel extends React.Component {
     const { selected, vars, varinfo } = this.state;
     const { api } = this.props;
 
-    console.log(selected);
     let varDisplay = null;
     if (selected.length !== 0) {
       varDisplay = (<VariableDisplay api={api} varinfo={varinfo} />);

app/javascript/mda_viewer/index.jsx

@@ -297,7 +297,6 @@ class MdaViewer extends React.Component {
         },
       });
       if (selected.length) {
-        console.log(`Project: ${JSON.stringify(selected[0])}`);
         newState = update(this.state, {
           mda: { project: { $set: selected[0] } },
         });

config/shakapacker.yml

@@ -57,7 +57,7 @@ default: &default
 
 development:
   <<: *default
-  compile: true
+  compile: false
   compiler_strategy: mtime
 
   # Reference: https://webpack.js.org/configuration/dev-server/

config/webpack/webpack.config.js

@@ -1,6 +1,6 @@
 const { generateWebpackConfig, merge } = require('shakapacker');
 
-const webpackConfig = generateWebpackConfig()
+const webpackConfig = generateWebpackConfig();
 
 const webpack = require('webpack');