Task/12835 upgrade node ember versions

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 16.x
       - name: install dependencies
         run: yarn install --frozen-lockfile --non-interactive
         working-directory: client

client/.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

client/.eslintignore

@@ -13,6 +13,8 @@
 # misc
 /coverage/
 !.*
+.*/
+.eslintcache
 
 # ember-try
 /.node_modules.ember-try/

client/.eslintrc.js

@@ -1,15 +1,20 @@
+'use strict';
+
 module.exports = {
   globals: {
     server: true,
     $: true,
     d3: true,
   },
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true,
+    },
   },
-  parser: 'babel-eslint',
   plugins: [
     'ember',
   ],
@@ -57,13 +62,12 @@ module.exports = {
         node: true,
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-
+      extends: ['plugin:node/recommended'],
+      rules: {
         // this can be removed once the following is fixed
         // https://github.com/mysticatea/eslint-plugin-node/issues/77
         'node/no-unpublished-require': 'off',
-      }),
+      },
     },
   ],
 };

client/.gitignore

@@ -12,6 +12,7 @@
 /.env*
 /.pnp*
 /.sass-cache
+/.eslintcache
 /connect.lock
 /coverage/*
 /libpeerconnection.log

client/.nvmrc

@@ -1 +1 @@
-v14.19.1
+v16.*

client/.prettierignore

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

client/.prettierrc.js

@@ -0,0 +1,5 @@
+
+
+module.exports = {
+  singleQuote: true,
+};

client/.travis.yml

@@ -0,0 +1,28 @@
+---
+language: node_js
+node_js:
+  - "12"
+
+dist: xenial
+
+addons:
+  chrome: stable
+
+cache:
+  yarn: true
+
+env:
+  global:
+    # See https://git.io/vdao3 for details.
+    - JOBS=1
+
+branches:
+  only:
+    - master
+
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH=$HOME/.yarn/bin:$PATH
+
+script:
+  - yarn test

client/app/app.js

@@ -1,26 +1,14 @@
 import Application from '@ember/application';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import DS from 'ember-data';
-import Resolver from './resolver';
 import config from './config/environment';
 
-const { Model } = DS;
-const ALLOWED_MISSING_MODEL_KEYS = ['nodeType', 'size', 'length', 'setUnknownProperty', 'didCommit', 'then', 'willMergeMixin', 'concatenatedProperties', 'mergedProperties', 'isQueryParams'];
+export default class App extends Application {
+  modulePrefix = config.modulePrefix
 
-Model.reopen({
-  unknownProperty(key) {
-    if (ALLOWED_MISSING_MODEL_KEYS.includes(key)) return;
+  podModulePrefix = config.podModulePrefix;
 
-    throw new Error(`Unexpected access of ${key} on ${this}`);
-  },
-});
-
-const App = Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver,
-});
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

client/app/router.js

@@ -13,17 +13,19 @@ const Router = EmberRouter.extend(RouterScroll, {
   },
 
   _trackPage() {
-    scheduleOnce('afterRender', this, () => {
-      const page = this.url;
-      const title = this.getWithDefault('currentRouteName', 'unknown');
-      this.metrics.trackPage({ page, title });
-    });
+    scheduleOnce('afterRender', this, scheduler);
   },
 
   location: config.locationType,
   rootURL: config.rootURL,
 });
 
+function scheduler () {
+  const page = this.url;
+  const title = (this.currentRouteName === undefined ? 'unknown' : this.currentRouteName);
+  this.metrics.trackPage({ page, title });
+}
+
 Router.map(function() { // eslint-disable-line
   this.route('show-project', { path: '/projects/:id' });
   this.route('show-geography', { path: '/projects' });

client/app/templates/application.hbs

@@ -6,7 +6,7 @@
 }}
   {{#banner.pre}}
     <ul class="pre-nav">
-      <li>{{link-to 'Disclaimer' 'disclaimer'}}</li>
+      <li><LinkTo @route="disclaimer">Disclaimer</LinkTo></li>
       <li>
         {{#tool-tipster
           content='
@@ -19,33 +19,33 @@
           tagName='a'
           side='bottom'
         }}
-          {{fa-icon icon='envelope'}} Feedback
+          <FaIcon @icon="envelope" /> Feedback
         {{/tool-tipster}}
       </li>
     </ul>
   {{/banner.pre}}
   {{#banner.title}}
-    {{#link-to 'show-geography' classNames='site-title'}}Zoning Application Portal{{/link-to}}
+    <LinkTo @route="show-geography" class="site-title">Zoning Application Portal</LinkTo>
   {{/banner.title}}
   {{#banner.nav}}
     <ul class="menu vertical large-horizontal">
-      <li>{{link-to 'Find Projects' 'show-geography'}}</li>
+      <li><LinkTo @route="show-geography">Find Projects</LinkTo></li>
       {{#if this.ENV.LUPP_ENABLED}}
-        {{sign-in}}
+        <SignIn />
       {{/if}}
     </ul>
   {{/banner.nav}}
 {{/labs-ui/site-header}}
 
-<div class="site-main grid-x grid-padding-x route-{{currentRouteName}}">
+<div class="site-main grid-x grid-padding-x route-{{this.currentRouteName}}">
   {{#if
     (and
       (user-agent "browser.isIE")
       (lte (user-agent "browser.info.major") 10)
     )
   }}
     <div class="cell large-6 large-offset-3 text-center" style="padding:2rem 0;">
-      {{fa-icon icon='exclamation-triangle' size='2x' class='yellow-muted'}}
+      <FaIcon @icon="exclamation-triangle" @size="2x" @class="yellow-muted" />
       <p>It looks like you're using Internet Explorer.  This site works best in a modern browser. Please try a current version of Edge, Chrome, or Firefox.</p>
     </div>
   {{else}}
@@ -56,7 +56,7 @@
 <div id="reveal-modal-container">
 </div>
 
-{{#if (string-includes currentRouteName "my-projects")}}
+{{#if (string-includes this.currentRouteName "my-projects")}}
   <script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script><script type="text/javascript">window.Beacon('init', '9a027170-0976-46ac-afba-8d1322ef19d6')</script>
 {{else}}
   <script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script><script type="text/javascript">window.Beacon('init', '5782616e-c1ec-4db4-8365-1c83eb3e66a3')</script>

client/app/templates/components/address-search.hbs

@@ -1,17 +1,17 @@
-{{#labs-search
-  searchPlaceholder='Zoom to Address...'
-  onSelect=(action 'selectSearchResult')
-  onClear=(action 'clearSearchResult') as |search|}}
+<LabsSearch
+  @searchPlaceholder='Zoom to Address...'
+  @onSelect={{this.selectSearchResult}}
+  @onClear={{this.clearSearchResult}} as |search|>
 
   <small class="dark-gray">{{search.result.label}}</small>
 
   {{#if search.result}}
-    {{#if geocodedGeometry}}
-      {{#map.source options=(hash type='geojson' data=geocodedGeometry) as |source|}}
-        {{source.layer layer=geocodedLayer}}
+    {{#if this.geocodedGeometry}}
+      {{#map.source options=(hash type='geojson' data=this.geocodedGeometry) as |source|}}
+        {{source.layer layer=this.geocodedLayer}}
       {{/map.source}}
 
-      {{map.call 'flyTo' (hash center=geocodedGeometry.coordinates zoom=16)}}
+      {{map.call 'flyTo' (hash center=this.geocodedGeometry.coordinates zoom=16)}}
     {{/if}}
   {{/if}}
-{{/labs-search}}
+</LabsSearch>

client/app/templates/components/applied-filters-list.hbs

@@ -1,7 +1,7 @@
 <div class="no-results-message text-center dark-gray">
-  <p class="medium-gray">{{fa-icon icon='search' size='4x'}}</p>
+  <p class="medium-gray"><FaIcon icon='search' size='4x' /></p>
   <h4>No Results. Please adjust your filters:</h4>
-  {{#each currentFiltersNames as |name|}}
+  {{#each this.currentFiltersNames as |name|}}
     <p>{{name}}</p>
   {{/each}}
 </div>

client/app/templates/components/archive-project-card.hbs

@@ -5,7 +5,7 @@
   <div class="grid-x grid-x-small-gutters">
     <div class="cell large-4 xlarge-5">
       <h3 class="tiny-margin-bottom">
-        {{#link-to 'show-project' this.assignment.project.id}}{{this.assignment.project.dcpProjectname}}{{/link-to}}
+        <LinkTo @route='show-project' @model={{this.assignment.project.id}}>{{this.assignment.project.dcpProjectname}}</LinkTo>
         <small class="dark-gray">{{this.assignment.project.dcpUlurpNonulurp}}</small>
       </h3>
       <h5 class="applicant">{{this.assignment.project.applicants}}</h5>
@@ -30,7 +30,7 @@
     </div>
     <div class="cell medium-auto">
       <ul class="no-bullet no-margin">
-        {{#each assignment.tabSpecificMilestones as |milestone|}}
+        {{#each this.assignment.tabSpecificMilestones as |milestone|}}
           <ArchiveProjectMilestoneListItem
             data-test-milestone-id="{{milestone.id}}"
             @project={{this.assignment.project}}

client/app/templates/components/archive-project-milestone-list-item.hbs

@@ -3,14 +3,14 @@
 >
   <div class="cell shrink small-margin-right">
     {{#if (eq this.milestone.statuscode "Completed")}}
-      {{fa-icon icon='check' class='blue' fixedWidth=true}}
+      <FaIcon icon="check" class="blue" fixedWidth={{true}} />
     {{else if (eq this.milestone.statuscode "Overridden")}}
-      {{fa-icon icon='stop' class='red-dark' fixedWidth=true}}
+      <FaIcon icon="stop" class="red-dark" fixedWidth={{true}} />
     {{else if (eq this.milestone.statuscode "In Progress")}}
-      {{fa-icon icon='hourglass-half' class='blue' fixedWidth=true}}
+      <FaIcon icon="hourglass-half" class="blue" fixedWidth={{true}} />
     {{else if (eq this.milestone.statuscode "Not Started")}}
       <span data-test={{if (string-includes this.milestone.displayName "Review") "upcoming-indicator"}}>
-        {{fa-icon icon='calendar' class='light-gray' fixedWidth=true}}
+        <FaIcon icon="calendar" class="light-gray" fixedWidth={{true}} />
       </span>
     {{/if}}
   </div>
@@ -42,7 +42,7 @@
     {{/if}}
     {{#if this.milestone.dcpActualenddate}}
       <br>
-      <small class="display-block" data-test-actual-end-date="{{milestone.id}}">
+      <small class="display-block" data-test-actual-end-date="{{this.milestone.id}}">
         <DateDisplay
           @date={{this.milestone.dcpActualenddate}}
         />

client/app/templates/components/auth/do-logout.hbs

@@ -1,6 +1,6 @@
 {{!-- Implicit logout — this renders the logout domain --}}
 <iframe
-  onload={{action this.didLogoutNycId}}
+  onload={{this.didLogoutNycId}}
   src="{{this.nycIDHost}}/idpLogout.htm?x-frames-allow-from={{this.origin}}"
   style="display: none;">
 </iframe>
@@ -10,6 +10,6 @@ shows that else block when the iframe is still loading. When it is finished
 loading, it yields the main block. --}}
 {{#if this.iFrameDidLoad}}
   {{yield}}
-{{else if (hasBlock 'inverse')}}
+{{else if (has-block 'inverse')}}
   {{yield to="inverse"}}
 {{/if}}

client/app/templates/components/auth/login-dialog.hbs

@@ -37,5 +37,5 @@
   disabled={{this.isMaintenancePeriod}}
 >
   Sign in with NYC.ID
-  <sup>{{fa-icon icon='external-link-alt'}}</sup>
+  <sup><FaIcon @icon='external-link-alt' /></sup>
 </a>

client/app/templates/components/borough-pres-deduped-votes-list.hbs

@@ -1 +1 @@
-{{yield dedupedVotes}}
+{{yield this.dedupedVotes}}

client/app/templates/components/confirmation-modal.hbs

@@ -1,6 +1,6 @@
-{{#if open}}
+{{#if this.open}}
   <div class="reveal-overlay" style="display:block;">
-    <div class="reveal-overlay-target" {{action closeModal}}></div>
+    <div class="reveal-overlay-target" {{on 'click' this.closeModal}}></div>
     <div
       class="reveal"
       role="dialog"
@@ -10,7 +10,7 @@
       data-test-confirmation-modal
     >
       {{yield}}
-      <button {{action closeModal}} class="close-button" aria-label="Close modal" type="button">
+      <button {{on 'click' this.closeModal}} class="close-button" aria-label="Close modal" type="button">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>

client/app/templates/components/consolidated-cds.hbs

@@ -1,13 +1,13 @@
-{{#each consolodatedCDs as |boro|}}
+{{#each this.consolodatedCDs as |boro|}}
   <span class="label light-gray">
     <strong class="dark-gray">{{boro.boroName}}</strong>
     <span class="medium-gray">|</span>
     <span class="dark-gray">
       CD
       {{#each boro.cds as |cd i|}}
         {{~if i ","}}
-        {{#if cdlink}}
-          <a href="{{build-url "CommProfiles" boro.boroName cd}}" target="_blank"><strong>{{cd ~}}</strong></a>
+        {{#if this.cdlink}}
+          <a href="{{build-url "CommProfiles" boro.boroName cd}}" target="_blank" rel="noopener noreferrer"><strong>{{cd ~}}</strong></a>
         {{~else~}}
           {{cd~}}
         {{/if~}}