Update to Ember 3.16/Data 3.12 (#8319)

This updates to Ember 3.16 but leaves Ember Data at 3.12 so we don’t need
to use the model fragments beta. It can be reviewed on a commit-by-commit
basis: blueprint updates, fixes for test failures, and the removal of
now-deprecated partials.

It’s not a true update to Octane as that would involve turning on template-only
components by default, which breaks various things. We can accomplish that
separately and then add the edition setting to package.json.

ui/.editorconfig

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

ui/.eslintrc.js

@@ -1,3 +1,5 @@
+'use strict';
+
 module.exports = {
   root: true,
   globals: {
@@ -35,6 +37,7 @@ module.exports = {
     ],
     'ember/classic-decorator-hooks': 'error',
     'ember/classic-decorator-no-classic-methods': 'error',
+    'ember/no-jquery': 'error',
   },
   overrides: [
     // node files

ui/app/app.js

@@ -1,16 +1,12 @@
 import Application from '@ember/application';
-import Resolver from './resolver';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-let App;
-
-App = class AppApplication extends Application {
+export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
   Resolver = Resolver;
-};
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

ui/app/components/forbidden-message.js

@@ -1,5 +1,8 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { inject as service } from '@ember/service';
 
 @tagName('')
-export default class ForbiddenMessage extends Component {}
+export default class ForbiddenMessage extends Component {
+  @service token;
+}

ui/app/components/hamburger-menu.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class HamburgerMenu extends Component {
+}

ui/app/components/job-subnav.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class JobSubnav extends Component {
+}

ui/app/components/list-table.js

@@ -13,7 +13,7 @@ export default class ListTable extends Component {
   // Plan for a future with metadata (e.g., isSelected)
   @computed('source.[]')
   get decoratedSource() {
-    return this.source.map(row => ({
+    return (this.source || []).map(row => ({
       model: row,
     }));
   }

ui/app/components/loading-spinner.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class LoadingSpinner extends Component {
+}

ui/app/components/reschedule-event-row.js

@@ -14,7 +14,11 @@ export default class RescheduleEventRow extends Component {
 
   // An allocation can also be provided directly
   @overridable('allocationId', function() {
-    return this.store.findRecord('allocation', this.allocationId);
+    if (this.allocationId) {
+      return this.store.findRecord('allocation', this.allocationId);
+    }
+
+    return null;
   })
   allocation;
 

ui/app/components/stats-time-series.js

@@ -5,11 +5,14 @@ import d3Format from 'd3-format';
 import d3Scale from 'd3-scale';
 import d3Array from 'd3-array';
 import LineChart from 'nomad-ui/components/line-chart';
+import layout from '../templates/components/line-chart';
 import formatDuration from 'nomad-ui/utils/format-duration';
 import classic from 'ember-classic-decorator';
 
 @classic
 export default class StatsTimeSeries extends LineChart {
+  layout = layout;
+
   xProp = 'timestamp';
   yProp = 'percent';
   timeseries = true;

ui/app/components/svg-patterns.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class SvgPatterns extends Component {
+}

ui/app/router.js

@@ -1,7 +1,7 @@
 import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 
-class Router extends EmberRouter {
+export default class Router extends EmberRouter {
   location = config.locationType;
   rootURL = config.rootURL;
 }
@@ -68,5 +68,3 @@ Router.map(function() {
 
   this.route('not-found', { path: '/*' });
 });
-
-export default Router;

ui/app/templates/application.hbs

@@ -1,6 +1,6 @@
 <HeadLayout />
 {{title (if system.shouldShowRegions (concat system.activeRegion " - ")) "Nomad" separator=" - "}}
-{{partial "svg-patterns"}}
+<SvgPatterns />
 {{#unless error}}
   {{outlet}}
 {{else}}

ui/app/templates/clients/index.hbs

@@ -1,7 +1,7 @@
 {{title "Clients"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

ui/app/templates/clients/loading.hbs

@@ -1 +1 @@
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<section class="section has-text-centered"><LoadingSpinner /></section>

ui/app/templates/components/global-header.hbs

@@ -1,10 +1,10 @@
 <nav class="navbar is-primary">
   <div class="navbar-brand">
     <span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
-      {{partial "partials/hamburger-menu"}}
+      <HamburgerMenu />
     </span>
     <LinkTo @route="jobs" class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </LinkTo>
   </div>
   {{#unless (media "isMobile")}}

ui/app/templates/components/gutter-menu.hbs

@@ -2,10 +2,10 @@
   <div class="gutter {{if isOpen "is-open"}}">
     <header class="collapsed-menu {{if isOpen "is-open"}}">
       <span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
-        {{partial "partials/hamburger-menu"}}
+        <HamburgerMenu />
       </span>
       <span class="logo-container">
-        {{partial "partials/nomad-logo"}}
+        <NomadLogo />
       </span>
     </header>
     <aside class="menu">

ui/app/templates/components/job-page/parts/body.hbs

@@ -1,4 +1,4 @@
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{@job}} />
 <section class="section">
   {{yield}}
 </section>

ui/app/templates/jobs/job/subnav.hbs → ui/app/templates/components/job-subnav.hbs

@@ -1,12 +1,12 @@
 <div data-test-subnav="job" class="tabs is-subnav">
   <ul>
-    <li data-test-tab="overview"><LinkTo @route="jobs.job.index" @model={{job}} @activeClass="is-active">Overview</LinkTo></li>
-    <li data-test-tab="definition"><LinkTo @route="jobs.job.definition" @model={{job}} @activeClass="is-active">Definition</LinkTo></li>
-    <li data-test-tab="versions"><LinkTo @route="jobs.job.versions" @model={{job}} @activeClass="is-active">Versions</LinkTo></li>
+    <li data-test-tab="overview"><LinkTo @route="jobs.job.index" @model={{@job}} @activeClass="is-active">Overview</LinkTo></li>
+    <li data-test-tab="definition"><LinkTo @route="jobs.job.definition" @model={{@job}} @activeClass="is-active">Definition</LinkTo></li>
+    <li data-test-tab="versions"><LinkTo @route="jobs.job.versions" @model={{@job}} @activeClass="is-active">Versions</LinkTo></li>
     {{#if job.supportsDeployments}}
-      <li data-test-tab="deployments"><LinkTo @route="jobs.job.deployments" @model={{job}} @activeClass="is-active">Deployments</LinkTo></li>
+      <li data-test-tab="deployments"><LinkTo @route="jobs.job.deployments" @model={{@job}} @activeClass="is-active">Deployments</LinkTo></li>
     {{/if}}
-    <li data-test-tab="allocations"><LinkTo @route="jobs.job.allocations" @model={{job}} @activeClass="is-active">Allocations</LinkTo></li>
-    <li data-test-tab="evaluations"><LinkTo @route="jobs.job.evaluations" @model={{job}} @activeClass="is-active">Evaluations</LinkTo></li>
+    <li data-test-tab="allocations"><LinkTo @route="jobs.job.allocations" @model={{@job}} @activeClass="is-active">Allocations</LinkTo></li>
+    <li data-test-tab="evaluations"><LinkTo @route="jobs.job.evaluations" @model={{@job}} @activeClass="is-active">Evaluations</LinkTo></li>
   </ul>
 </div>

ui/app/templates/csi/plugins/index.hbs

@@ -7,7 +7,7 @@
 </div>
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

ui/app/templates/csi/volumes/index.hbs

@@ -7,7 +7,7 @@
 </div>
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

ui/app/templates/exec-loading.hbs

@@ -2,7 +2,7 @@
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </div>
   </div>
 
@@ -13,5 +13,5 @@
 </nav>
 
 <div class="exec-window loading">
-  {{partial "partials/loading-spinner"}}
+  <LoadingSpinner />
 </div>

ui/app/templates/exec.hbs

@@ -2,7 +2,7 @@
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </div>
   </div>
     {{#if system.shouldShowRegions}}

ui/app/templates/jobs/index.hbs

@@ -1,7 +1,7 @@
 {{title "Jobs"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

ui/app/templates/jobs/job/allocations.hbs

@@ -1,5 +1,5 @@
 {{title "Job " job.name " allocations"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#if allocations.length}}
     <div class="content">

ui/app/templates/jobs/job/definition.hbs

@@ -1,5 +1,5 @@
 {{title "Job " job.name " definition"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#unless isEditing}}
     <div class="boxed-section">

ui/app/templates/jobs/job/deployments.hbs

@@ -1,5 +1,5 @@
 {{title "Job " job.name " deployments"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   <JobDeploymentsStream @deployments={{model.deployments}} />
 </section>

ui/app/templates/jobs/job/evaluations.hbs

@@ -1,5 +1,5 @@
 {{title "Job " job.name " evaluations"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#if sortedEvaluations.length}}
     <ListTable

ui/app/templates/jobs/job/loading.hbs

@@ -1,2 +1,2 @@
-{{partial "jobs/job/subnav"}}
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<JobSubnav @job={{job}} />
+<section class="section has-text-centered"><LoadingSpinner /></section>

ui/app/templates/jobs/job/versions.hbs

@@ -1,5 +1,5 @@
 {{title "Job " job.name " versions"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   <JobVersionsStream @versions={{model.versions}} @verbose={{true}} />
 </section>

ui/app/templates/jobs/loading.hbs

@@ -1 +1 @@
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<section class="section has-text-centered"><LoadingSpinner /></section>

ui/app/templates/loading.hbs

@@ -1,3 +1,3 @@
 <PageLayout>
-  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+  <section class="section has-text-centered"><LoadingSpinner /></section>
 </PageLayout>

ui/app/templates/servers/index.hbs

@@ -1,7 +1,7 @@
 {{title "Servers"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <ListPagination
       @source={{sortedAgents}}

ui/app/templates/servers/loading.hbs

@@ -1 +1 @@
-  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+  <section class="section has-text-centered"><LoadingSpinner /></section>

ui/config/deprecation-workflow.js

@@ -7,5 +7,6 @@ self.deprecationWorkflow.config = {
     { handler: 'throw', matchId: 'ember-console.deprecate-logger' },
     { handler: 'throw', matchId: 'ember-test-helpers.rendering-context.jquery-element' },
     { handler: 'throw', matchId: 'ember-cli-page-object.is-property' },
+    { handler: 'throw', matchId: 'ember-views.partial' },
   ],
 };

ui/config/optional-features.json

@@ -1,3 +1,6 @@
 {
-  "jquery-integration": false
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": false
 }