Update Ember to 3.28

.circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   build:
     working_directory: ~/emberobserver/client
     docker:
-      - image: circleci/node:12-browsers
+      - image: circleci/node:14-browsers
     steps:
       - checkout
       - restore_cache:

.eslintignore

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

.eslintrc.js

@@ -41,15 +41,15 @@ module.exports = {
     // node files
     {
       files: [
-        '.eslintrc.js',
-        '.prettierrc.js',
-        '.template-lintrc.js',
-        'ember-cli-build.js',
-        'testem.js',
-        'blueprints/*/index.js',
-        'config/**/*.js',
-        'lib/*/index.js',
-        'server/**/*.js',
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './lib/*/index.js',
+        './server/**/*.js',
       ],
       parserOptions: {
         sourceType: 'script',
@@ -66,5 +66,10 @@ module.exports = {
         'node/no-unpublished-require': 'off',
       },
     },
+    {
+      // Test files:
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+    },
   ],
 };

.template-lintrc.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   pending: [],
-  extends: 'octane',
+  extends: 'recommended',
   rules: {
     'eol-last': 'always',
     'inline-link-to': true,
@@ -14,6 +14,7 @@ module.exports = {
     'no-outlet-outside-routes': true,
     'no-trailing-spaces': true,
     'no-partial': true,
+    'require-input-label': false,
     quotes: false,
     'table-groups': false,
   },

README.md

@@ -37,9 +37,8 @@ Make use of the many generators for code, try `ember help generate` for more det
 
 ### Linting
 
-* `npm run lint:hbs`
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+* `yarn lint`
+* `yarn lint:fix`
 
 ### Building
 

app/components/admin-addon.hbs

@@ -71,12 +71,12 @@
 
 <section class="with-default-styling">
   <label>Override Repo URL</label>
-  <Input @value={{this.addon.overrideRepositoryUrl}} class="test-override-repo-url-input" @autocomplete="off" />
+  <Input @value={{this.addon.overrideRepositoryUrl}} class="test-override-repo-url-input" autocomplete="off" />
 </section>
 
 <section class="with-default-styling">
   <label>Note</label>
-  <Textarea @value={{this.addon.note}} @rows="3" class="note-input test-note-input" @autocomplete="off" /></section>
+  <Textarea @value={{this.addon.note}} rows="3" class="note-input test-note-input" autocomplete="off" /></section>
 
 <section>
   <CategoryChooser @categories={{this.categories}} @addon={{this.addon}} @onchange={{fn (mut this.addon.categories)}} />

app/components/code-search.hbs

@@ -2,13 +2,13 @@
 <div class="search-wrapper with-default-styling">
   <form {{on "submit" (prevent-default (perform this.search))}}>
     <div class="search-wrapper-inner">
-      <Input @type="search" placeholder="Search for addons containing code" @autocomplete="off" @id="code-search-input" @spellcheck="false" @value={{this.searchInput}} />
+      <Input @type="search" placeholder="Search for addons containing code" autocomplete="off" id="code-search-input" spellcheck="false" @value={{this.searchInput}} />
       {{#if this.codeQuery}}
         <button type="button" class="close-button test-clear-search" {{on "click" this.clearSearch}}>{{svg-icon "close"}}</button>
       {{/if}}
     </div>
     <div class="search-actions">
-      <Input @type="checkbox" @id="regex-toggle" class="test-regex-search" @checked={{this.regex}} />
+      <Input @type="checkbox" id="regex-toggle" class="test-regex-search" @checked={{this.regex}} />
       <label for="regex-toggle">Regex search</label>
       {{#if this.regex}}
         <a href="https://github.com/google/re2/wiki/Syntax" class="regex-help test-regex-help" rel="noopener noreferrer" target="_blank">(re2 syntax)</a>

app/components/human-url.js

@@ -22,9 +22,8 @@ export default class HumanUrl extends Component {
 
   @computed('parsed.host')
   get domain() {
-    return (this.get('parsed.host') === undefined
-      ? ''
-      : this.get('parsed.host')
+    return (
+      this.get('parsed.host') === undefined ? '' : this.get('parsed.host')
     ).replace(/^(www.)?/, '');
   }
 

app/components/large-search.hbs

@@ -15,7 +15,7 @@
       {{/if}}
     </div>
     <div class="readme-toggle">
-      <Input @type="checkbox" class="test-search-readmes" @id="search-readmes" @checked={{this.searchReadmes}} @change={{perform this.toggleReadmeSearch}} />
+      <Input @type="checkbox" class="test-search-readmes" id="search-readmes" @checked={{this.searchReadmes}} {{on "change" (perform this.toggleReadmeSearch)}} />
       <label for="search-readmes">Search readmes</label>
     </div>
     <h6 class="no-results {{if this.hasSearchedAndNoResults 'showing'}}">No results found for "{{this.query}}"</h6>

app/components/login-form.hbs

@@ -1,7 +1,7 @@
 <form {{on "submit" (prevent-default this.login)}}>
   <label for="email">Email</label>
-  <Input @value={{this.email}} @name="email" class="test-email" />
+  <Input @value={{this.email}} name="email" class="test-email" />
   <label for="password">Password</label>
-  <Input @type="password" @value={{this.password}} @name="password" class="test-password" />
+  <Input @type="password" @value={{this.password}} name="password" class="test-password" />
   <Input @type="submit" @value="Log in" class="button test-log-in" />
 </form>

app/templates/admin/categories/edit.hbs

@@ -1,23 +1,25 @@
+{{! template-lint-disable no-duplicate-landmark-elements }}
+
 <div class="admin-categories-edit with-default-styling">
   <form {{on "submit" (prevent-default this.updateCategory)}}>
     <fieldset>
       <label for="name">
         Name:
       </label>
-      <Input @type="text" @id="name" @value={{this.categoryName}} />
+      <Input @type="text" id="name" @value={{this.categoryName}} />
       <br>
       <label for="description">
         Description:
       </label>
-      <Input @type="text" @id="description" @value={{this.categoryDescription}} />
+      <Input @type="text" id="description" @value={{this.categoryDescription}} />
       {{#if this.hasSiblingCategories}}
         <br>
         <label for="position">
           Position:
         </label>
         <CategoryPositionDropdown @name="position" @position={{this.categoryPosition}} @updatePosition={{fn (mut this.categoryPosition)}} @categories={{this.sortedSiblingCategories}} />
       {{else}}
-        <Input @type="hidden" @id="position" @value={{this.categoryPosition}} />
+        <Input @type="hidden" id="position" @value={{this.categoryPosition}} />
       {{/if}}
       <br>
       <label for="parent">
@@ -51,12 +53,12 @@
         <label for="subcategoryName">
           Name:
         </label>
-        <Input @type="text" @id="subcategoryName" @value={{this.newCategoryName}} />
+        <Input @type="text" id="subcategoryName" @value={{this.newCategoryName}} />
         <br>
         <label for="subcategoryDescription">
           Description:
         </label>
-        <Input @type="text" @id="subcategoryDescription" @value={{this.newCategoryDescription}} />
+        <Input @type="text" id="subcategoryDescription" @value={{this.newCategoryDescription}} />
         <br>
         <label for="subcategoryPosition">
           Position:

app/templates/admin/categories/new.hbs

@@ -3,12 +3,12 @@
     <label for="name">
       Name:
     </label>
-    <Input @type="text" @id="name" @value={{this.newCategoryName}} />
+    <Input @type="text" id="name" @value={{this.newCategoryName}} />
     <br>
     <label for="description">
       Description:
     </label>
-    <Input @type="text" @id="description" @value={{this.newCategoryDescription}} />
+    <Input @type="text" id="description" @value={{this.newCategoryDescription}} />
     <br>
     <label for="position">
       Position:

app/templates/admin/size-calculation-results/index.hbs

@@ -1,12 +1,12 @@
 <DateNav @date={{this.date}} as |nav|>
-  <LinkTo @route="admin.size-calculation-results.index" @query={{hash date=nav.formattedPreviousDate}} @class="previous-day">
+  <LinkTo @route="admin.size-calculation-results.index" @query={{hash date=nav.formattedPreviousDate}} class="previous-day">
     &laquo; previous day
   </LinkTo>
 
   Size calculation results for {{nav.formattedDisplayDate}}
 
   {{#if nav.showFollowingDayLink}}
-    <LinkTo @route="admin.size-calculation-results.index" @query={{hash date=nav.formattedFollowingDate}} @class='next-day'>
+    <LinkTo @route="admin.size-calculation-results.index" @query={{hash date=nav.formattedFollowingDate}} class='next-day'>
       next day &raquo;
     </LinkTo>
   {{/if}}

config/ember-cli-update.json

@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "3.25.2",
+      "version": "3.28.6",
       "blueprints": [
         {
           "name": "app",

config/targets.js

@@ -6,12 +6,20 @@ const browsers = [
   'last 1 Safari versions',
 ];
 
-const isCI = Boolean(process.env.CI);
-const isProduction = process.env.EMBER_ENV === 'production';
-
-if (isCI || isProduction) {
-  browsers.push('ie 11');
-}
+// Ember's browser support policy is changing, and IE11 support will end in
+// v4.0 onwards.
+//
+// See https://deprecations.emberjs.com/v3.x#toc_3-0-browser-support-policy
+//
+// If you need IE11 support on a version of Ember that still offers support
+// for it, uncomment the code block below.
+//
+// const isCI = Boolean(process.env.CI);
+// const isProduction = process.env.EMBER_ENV === 'production';
+//
+// if (isCI || isProduction) {
+//   browsers.push('ie 11');
+// }
 
 module.exports = {
   browsers,

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
@@ -25,19 +25,19 @@
   "devDependencies": {
     "@ember/jquery": "^1.1.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.2.0",
-    "@glimmer/component": "^1.0.3",
-    "@glimmer/tracking": "^1.0.3",
+    "@ember/test-helpers": "^2.6.0",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "babel-eslint": "^10.1.0",
     "bourbon": "4.2.3",
     "bourbon-neat": "1.7.1",
     "broccoli-asset-rev": "^3.0.0",
     "dompurify": "^2.0.17",
     "ember-auto-import": "^2.1.0",
     "ember-classic-decorator": "^1.0.5",
-    "ember-cli": "~3.25.2",
-    "ember-cli-app-version": "^4.0.0",
-    "ember-cli-babel": "^7.23.1",
+    "ember-cli": "~3.28.6",
+    "ember-cli-app-version": "^5.0.0",
+    "ember-cli-babel": "^7.26.10",
     "ember-cli-code-coverage": "^1.0.0-beta.8",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deploy": "^1.0.2",
@@ -47,57 +47,58 @@
     "ember-cli-deploy-with-rsync": "^0.3.0",
     "ember-cli-deprecation-workflow": "^1.0.1",
     "ember-cli-document-title-northm": "^1.0.2",
-    "ember-cli-htmlbars": "^5.3.2",
-    "ember-cli-inject-live-reload": "^2.0.2",
+    "ember-cli-htmlbars": "^5.7.2",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-inline-content": "0.4.1",
     "ember-cli-mirage": "^1.1.6",
     "ember-cli-moment-shim": "^3.5.0",
     "ember-cli-sass": "^7.1.5",
     "ember-cli-showdown": "^4.1.1",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-terser": "^4.0.1",
+    "ember-cli-terser": "^4.0.2",
     "ember-cli-test-loader": "^2.2.0",
     "ember-concurrency": "^1.1.3",
-    "ember-data": "~3.25.0",
+    "ember-data": "~3.28.6",
     "ember-decorators": "^6.1.1",
     "ember-export-application-global": "^2.0.1",
     "ember-feature-flags": "6.0.0",
-    "ember-fetch": "^8.0.4",
+    "ember-fetch": "^8.1.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-metrics": "^1.1.0",
     "ember-moment": "^8.0.0",
-    "ember-page-title": "^6.2.1",
+    "ember-page-title": "^6.2.2",
     "ember-percy": "^1.6.0",
     "ember-power-select": "^4.1.3",
     "ember-power-select-typeahead": "^0.8.1",
-    "ember-qunit": "^5.1.2",
-    "ember-resolver": "^8.0.2",
+    "ember-qunit": "^5.1.5",
+    "ember-resolver": "^8.0.3",
     "ember-router-scroll": "^4.0.0",
-    "ember-source": "~3.25.4",
+    "ember-source": "~3.28.8",
     "ember-source-channel-url": "^1.0.1",
-    "ember-template-lint": "^2.18.1",
+    "ember-template-lint": "^3.15.0",
     "ember-test-selectors": "^5.0.0",
     "ember-try": "^1.4.0",
     "emberx-select": "^3.1.1",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-ember": "^10.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ember": "^10.5.8",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-qunit": "^6.2.0",
     "faker": "^4.1.0",
     "glob": "^7.1.1",
     "http-proxy": "^1.18.1",
     "loader.js": "^4.7.0",
     "morgan": "^1.9.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
-    "qunit": "^2.14.0",
+    "prettier": "^2.5.1",
+    "qunit": "^2.17.2",
     "qunit-dom": "^1.6.0",
     "webpack": "^5.51.1"
   },
   "engines": {
-    "node": "10.* || >= 12"
+    "node": "14.* || >= 16"
   },
   "ember": {
     "edition": "octane"