Tonkpils/ember upgrades v3

.github/workflows/frontend.yml

@@ -10,9 +10,6 @@ on:
       - main
       - master
 
-env:
-  NODE_VERSION: 12.22.6
-
 jobs:
   changes:
     runs-on: ubuntu-latest
@@ -33,21 +30,51 @@ jobs:
               - 'frontend/**'
               - '.github/workflows/**'
 
-  test-app:
+  npm-test:
+    strategy:
+      matrix:
+        node_version: ['12.22.6', '14.21']
+    needs: changes
+    if: ${{ needs.changes.outputs.frontend == 'true' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 7
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - run: npm install -g npm@7.0.0
+      - run: npm install
+        working-directory: ./frontend
+      - run: npm run test
+        working-directory: ./frontend
+
+  node-next-test:
+    strategy:
+      matrix:
+        node_version: ['16', '18', '20']
     needs: changes
     if: ${{ needs.changes.outputs.frontend == 'true' }}
-    name: Test app
     runs-on: ubuntu-latest
     timeout-minutes: 7
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: ${{ matrix.node_version }}
           cache: npm
           cache-dependency-path: frontend/package-lock.json
       - run: npm install -g npm@7.0.0
       - run: npm install
         working-directory: ./frontend
       - run: npm run test
         working-directory: ./frontend
+
+  test-app:
+    name: Test app
+    needs: [ npm-test ]
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "done"

docker-compose.yml

@@ -47,9 +47,10 @@ services:
       - backend
     ports:
       - 4300:4300
+      - 65535:65535
     volumes:
       - ./frontend:/app
-    command: sh -c "cd /app && rm -rfd ./dist && ./node_modules/.bin/ember serve --port 4300 --proxy http://localhost:3000"
+    command: sh -c "cd /app && rm -rfd ./dist && ./node_modules/.bin/ember serve --port 4300 --proxy http://backend:3000 --live-reload-host frontend --live-reload-port 65535"
     profiles:
       - dev
   app-setup:

frontend/.eslintignore

@@ -0,0 +1,18 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+
+# misc
+/coverage/
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

frontend/.eslintrc.js

@@ -4,15 +4,47 @@ module.exports = {
     ecmaVersion: 2017,
     sourceType: 'module'
   },
-  extends: 'eslint:recommended',
+  plugins: [
+    'ember'
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended'
+  ],
   env: {
     browser: true
   },
   rules: {
+    'ember/new-module-imports': 'off',
+    'ember/avoid-leaking-state-in-ember-objects': 'off',
+    'ember/no-on-calls-in-components': 'off',
+    'ember/closure-actions': 'off',
+    'ember/no-side-effects': 'off',
   },
   globals: {
     d3: true,
     moment: true,
     'Pusher': true
-  }
+  },
+  overrides: [
+    // node files
+    {
+      files: [
+        '.template-lintrc.js',
+        'ember-cli-build.js',
+        'testem.js',
+        'blueprints/*/index.js',
+        'config/**/*.js',
+        'lib/*/index.js'
+      ],
+      parserOptions: {
+        sourceType: 'script',
+        ecmaVersion: 2015
+      },
+      env: {
+        browser: false,
+        node: true
+      }
+    }
+  ]
 };

frontend/.gitignore

@@ -1,17 +1,23 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
-/tmp
+/dist/
+/tmp/
 
 # dependencies
-/node_modules
-/bower_components
+/bower_components/
+/node_modules/
 
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage/
 /libpeerconnection.log
-npm-debug.log
-testem.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

frontend/.template-lintrc.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  extends: 'recommended',
+  rules: {
+    // 'no-bare-strings': true,
+    'img-alt-attributes': false,
+    'no-invalid-interactive': false,
+  }
+};

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=linux/amd64 node:12.22.6
+FROM --platform=linux/amd64 node:14.21
 
 # Force npm version 7
 RUN npm i -g npm@7
@@ -9,6 +9,9 @@ COPY package*.json bower.json .bowerrc .npmrc ./
 
 RUN npm install
 
+# May no be needed in future version of node
+ENV OPENSSL_CONF=/dev/null
+
 COPY . .
 
 CMD ["npm", "start"]

frontend/README.md

@@ -12,6 +12,7 @@ You will need the following things properly installed on your computer.
 * [Bower](http://bower.io/)
 * [Ember CLI](http://ember-cli.com/)
 * [PhantomJS](http://phantomjs.org/)
+* [Google Chrome](https://google.com/chrome/)
 
 ## Installation
 
@@ -23,7 +24,9 @@ You will need the following things properly installed on your computer.
 ## Running / Development
 
 * `ember serve`
+
 * Visit your app at [http://localhost:4300](http://localhost:4300).
+* Visit your tests at [http://localhost:4300/tests](http://localhost:4300/tests).
 
 ## Running / Development via Fastboot server
 
@@ -38,6 +41,12 @@ Make use of the many generators for code, try `ember help generate` for more det
 * `ember test`
 * `ember test --server`
 
+### Linting
+
+* `npm run lint:hbs`
+* `npm run lint:js`
+* `npm run lint:js -- --fix`
+
 ### Building
 
 * `ember build` (development)
@@ -49,8 +58,9 @@ Specify what it takes to deploy your app.
 
 ## Further Reading / Useful Links
 
-* [ember.js](http://emberjs.com/)
-* [ember-cli](http://ember-cli.com/)
+* [ember.js](https://emberjs.com/)
+* [ember-cli](https://ember-cli.com/)
+
 * Development Browser Extensions
   * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
   * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

frontend/app/app.js

@@ -1,11 +1,9 @@
-import Ember from 'ember';
+import Application from '@ember/application';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-let App;
-
-App = Ember.Application.extend({
+const App = Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver

frontend/app/components/checkin/trackables-step.js

@@ -33,7 +33,7 @@ export default Component.extend(TrackablesFromType, {
     return moment(this.get('checkin.date')).isSame(new Date(), 'day');
   }),
 
-  sortedTrackeds: computed('trackeds.[]', 'trackeds.@each.position', function() {
+  sortedTrackeds: computed('trackeds.{[],@each.position}', function() {
     return this.get('trackeds').toArray().sortBy('position');
   }),
 

frontend/app/components/data-export-initiator.js

@@ -7,7 +7,7 @@ export default Component.extend({
   tagName: '',
   apiHost: ENV.apiHost,
 
-  authHeader: computed('session.data.authenticated.token', 'session.currentUser.email', function() {
+  authHeader: computed('session.{data.authenticated.token,currentUser.email}', function() {
     return `Token token="${get(this, 'session.data.authenticated.token')}", ` +
       `email="${get(this, 'session.currentUser.email')}"`;
   }),

frontend/app/components/form-field.js

@@ -7,24 +7,24 @@ export default Ember.Component.extend({
 
   model: Ember.computed.alias('parentView.for'),
 
-  shouldAlwaysBeWithinAFormForComponent: function() {
+  didInsertElement() {
     Ember.run.scheduleOnce('afterRender', () => {
       var parentView = this.get('parentView');
       var elementId = this.get('elementId');
       Ember.assert("FormFieldComponent (element ID: " + elementId + ") must have a parent view in order to yield.", parentView);
       Ember.assert("FormFieldComponent (element ID: " + elementId + ") should be inside a FormForComponent.", FormForComponent.detectInstance(parentView));
     });
-  }.on('didInsertElement'),
+  },
 
 
-  hasError: function() {
+  hasError: Ember.computed('model.errors.[]', function() {
     var ref;
     if ((ref = this.get('model.errors')) != null) {
       return ref.has(this.get('for'));
     } else {
       return false;
     }
-  }.property('model.errors.[]'),
+  }),
 
   errorClass: Ember.computed('hasError', function() {
     if (this.get('hasError')) {
@@ -34,9 +34,9 @@ export default Ember.Component.extend({
     }
   }),
 
-  errors: function() {
+  errors: Ember.computed('model.errors.[]', function() {
     var errors = this.get('model.errors');
     return errors.errorsFor(this.get('for')).mapBy('message').join(', ');
-  }.property('model.errors.[]')
+  })
 
 });

frontend/app/components/posts/activity-notification.js

@@ -31,7 +31,7 @@ export default Component.extend({
     return get(this, 'notification.kind') === 'comment' ? 'responded' : 'reacted';
   }),
 
-  fullResponse: computed('people', 'notification.kind', 'notification.notifier_username', function() {
+  fullResponse: computed('people', 'notification.{kind,notifier_username}', function() {
     if(get(this, 'notification.kind') === 'mention') {
 
       return (`<b>${get(this, 'notification.notifier_username')}</b> mentioned you in a comment` ).htmlSafe();

frontend/app/controllers/posts/new.js

@@ -10,7 +10,7 @@ const {
 } = Ember;
 
 export default Controller.extend(BackNavigateable, SearchableDropdown, {
-  disabled: computed('model.body', 'model.title', 'model.topics.[]', function() {
+  disabled: computed('model.{body,title,topics.[]}', function() {
     const { body, title, topics } = getProperties(get(this, 'model'), 'body', 'title', 'topics');
 
     return !(body && title && topics.length);

frontend/app/index.html

@@ -9,8 +9,8 @@
 
     {{content-for "head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/flaredown.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/flaredown.css">
 
     {{content-for "head-footer"}}
   </head>

frontend/app/router.js

@@ -1,8 +1,8 @@
-import Ember from 'ember';
+import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 import RouterScroll from 'ember-router-scroll';
 
-const Router = Ember.Router.extend(RouterScroll, {
+const Router = EmberRouter.extend(RouterScroll, {
   location: config.locationType,
   rootURL: config.rootURL
 });

frontend/app/services/steps.js

@@ -28,7 +28,7 @@ export default Service.extend({
     'completed',
   ],
 
-  steps: computed('exclusions.harvey_bradshaw', 'exclusions.promotion_rate', function() {
+  steps: computed('exclusions.{harvey_bradshaw,promotion_rate}', function() {
     const { checkinSeed, onboardingSeed } = getProperties(this, 'checkinSeed', 'onboardingSeed');
 
     return Object.assign(
@@ -38,7 +38,7 @@ export default Service.extend({
     );
   }),
 
-  exclusions: computed('checkin.shouldShowHbiStep', 'checkin.shouldShowPrStep', function() {
+  exclusions: computed('checkin.{shouldShowHbiStep,shouldShowPrStep}', function() {
     let schedulePage = {};
 
     get(this, 'checkin.shouldShowHbiStep') ? {} : schedulePage.harvey_bradshaw = true;

frontend/app/styles/components/signup-form.scss

@@ -8,5 +8,16 @@
 
   .checkbox {
     flex-direction: row;
+    margin: 0.5em 0 1em;
+
+    .error-message {
+      margin-top: 0;
+      font-weight: bold;
+      font-size: 0.9em;
+    }
+  }
+
+  .birthdayForm .error-message {
+    margin-top: 0;
   }
 }