Ember Upgrade to 3.24 (#13443)

* Update browserslist

* Add browserslistrc

* ember-cli-update --to 3.26, fix conflicts

* Run codemodes that start with ember-*

* More codemods - before cp*

* More codemods (curly data-test-*)

* WIP ember-basic-dropdown template errors

* updates ember-basic-dropdown and related deps to fix build issues

* updates basic dropdown instances to new version API

* updates more deps -- ember-template-lint is working again

* runs no-implicit-this codemod

* creates and runs no-quoteless-attributes codemod

* runs angle brackets codemod

* updates lint:hbs globs to only touch hbs files

* removes yield only templates

* creates and runs deprecated args transform

* supresses lint error for invokeAction on LinkTo component

* resolves remaining ambiguous path lint errors

* resolves simple-unless lint errors

* adds warnings for deprecated tagName arg on LinkTo components

* adds warnings for remaining curly component invocation

* upd...

changelog/13443.txt

+```release-note:change
+ui: Upgrade Ember to version 3.24
+```
\ No newline at end of file

ui/.browserslistrc

+defaults
+not IE 11
+maintained node versions

ui/.eslintignore

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

ui/.eslintrc.js

@@ -12,21 +12,28 @@ module.exports = {
       legacyDecorators: true,
     },
   },
-  plugins: ['ember', 'prettier'],
-  extends: ['eslint:recommended', 'plugin:ember/recommended', 'prettier'],
+  plugins: ['ember'],
+  extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
   env: {
     browser: true,
-    es6: true,
   },
   rules: {
-    // TODO revisit once figure out how to replace, added during upgrade to 3.20
-    'ember/no-new-mixins': 'off',
-    'ember/no-mixins': 'off',
+    'no-console': 'warn',
+    'ember/no-mixins': 'warn',
+    'ember/no-new-mixins': 'off', // should be warn but then every line of the mixin is green
+    // need to be fully glimmerized before these rules can be turned on
+    'ember/no-classic-classes': 'off',
+    'ember/no-classic-components': 'off',
+    'ember/no-actions-hash': 'off',
+    'ember/require-tagless-components': 'off',
+    'ember/no-component-lifecycle-hooks': 'off',
   },
   overrides: [
     // node files
     {
       files: [
+        '.eslintrc.js',
+        '.prettierrc.js',
         '.template-lintrc.js',
         'ember-cli-build.js',
         'testem.js',
@@ -34,10 +41,10 @@ module.exports = {
         'config/**/*.js',
         'lib/*/index.js',
         'scripts/start-vault.js',
+        'server/**/*.js',
       ],
       parserOptions: {
         sourceType: 'script',
-        ecmaVersion: 2018,
       },
       env: {
         browser: false,

ui/.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 /.sass-cache
+/.eslintcache
 /connect.lock
 /coverage/
 /libpeerconnection.log

ui/.prettierignore

+# 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

ui/.prettierrc

-{
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 110
-}

ui/.prettierrc.js

+'use strict';
+
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'es5',
+  printWidth: 110,
+  overrides: [
+    {
+      files: '*.hbs',
+      options: {
+        singleQuote: false,
+        printWidth: 125,
+      },
+    },
+  ],
+};

ui/.storybook/config.js

@@ -7,8 +7,8 @@ function loadStories() {
   // automatically import all files ending in *.stories.js
   const appStories = require.context('../stories', true, /.stories.js$/);
   const addonAndRepoStories = require.context('../lib', true, /.stories.js$/);
-  appStories.keys().forEach(filename => appStories(filename));
-  addonAndRepoStories.keys().forEach(filename => addonAndRepoStories(filename));
+  appStories.keys().forEach((filename) => appStories(filename));
+  addonAndRepoStories.keys().forEach((filename) => addonAndRepoStories(filename));
 }
 
 addParameters({
@@ -16,7 +16,7 @@ addParameters({
   options: { theme },
 });
 
-addDecorator(storyFn => {
+addDecorator((storyFn) => {
   const { template, context } = storyFn();
 
   // flight icon sprite must be inserted into dom for icon lookup via use element

ui/.template-lintrc.js

 'use strict';
 
 module.exports = {
-  extends: 'recommended',
+  extends: ['octane', 'stylistic'],
   rules: {
-    // should definitely move to template only
-    // glimmer components for this one
-    'no-partial': false,
-
-    // these need to be looked into, but
-    // may be a bigger change
-    'no-invalid-interactive': false,
-    'simple-unless': false,
-
-    'self-closing-void-elements': false,
-    'no-unnecessary-concat': false,
-    'no-quoteless-attributes': false,
-    'no-nested-interactive': false,
-
-    // not sure we'll ever want these on,
-    // would be nice but if prettier isn't doing
-    // it for us, then not sure it's worth it
-    'attribute-indentation': false,
-    'block-indentation': false,
-    quotes: false,
+    'no-bare-strings': 'off',
+    'no-action': 'off',
+    'no-duplicate-landmark-elements': 'warn',
+    'no-implicit-this': {
+      allow: ['supported-auth-backends'],
+    },
+    'require-input-label': 'off',
+    'no-down-event-binding': 'warn',
+    'self-closing-void-elements': 'off',
   },
+  ignore: ['lib/story-md', 'tests/**'],
 };

ui/MODULE_REPORT.md

 ## Module Report
 ### Unknown Global
 
+**Global**: `Ember.testing`
+
+**Location**: `app/components/auth-jwt.js` at line 9
+
+```js
+
+/* eslint-disable ember/no-ember-testing-in-module-scope */
+const WAIT_TIME = Ember.testing ? 0 : 500;
+const ERROR_WINDOW_CLOSED =
+  'The provider window was closed before authentication was complete.  Please click Sign In to try again.';
+```
+
+### Unknown Global
+
+**Global**: `Ember.testing`
+
+**Location**: `app/components/auth-form.js` at line 252
+
+```js
+
+  delayAuthMessageReminder: task(function*() {
+    if (Ember.testing) {
+      this.showLoading = true;
+      yield timeout(0);
+```
+
+### Unknown Global
+
+**Global**: `Ember.testing`
+
+**Location**: `app/routes/vault/cluster/logout.js` at line 30
+
+```js
+    this.flashMessages.clearMessages();
+    this.permissions.reset();
+    if (Ember.testing) {
+      // Don't redirect on the test
+      this.replaceWith('vault.cluster.auth', { queryParams: { with: authType } });
+```
+
+### Unknown Global
+
+**Global**: `Ember.testing`
+
+**Location**: `app/components/mount-backend-form.js` at line 100
+
+```js
+      capabilities = yield this.store.findRecord('capabilities', `${path}/config`);
+    } catch (err) {
+      if (Ember.testing) {
+        //captures mount-backend-form component test
+        yield mountModel.save();
+```
+
+### Unknown Global
+
+**Global**: `Ember.testing`
+
+**Location**: `app/components/oidc-consent-block.js` at line 47
+
+```js
+    let { redirect, ...params } = this.args;
+    let redirectUrl = this.buildUrl(redirect, params);
+    if (Ember.testing) {
+      this.args.testRedirect(redirectUrl.toString());
+    } else {
+```
+
+### Unknown Global
+
+**Global**: `Ember.testing`
+
+**Location**: `lib/core/addon/components/ttl-form.js` at line 82
+
+```js
+    this.set('time', parsedTime);
+    this.handleChange();
+    if (Ember.testing) {
+      return;
+    }
+```
+
+### Unknown Global
+
 **Global**: `Ember.onerror`
 
 **Location**: `tests/helpers/wait-for-error.js` at line 5
@@ -143,34 +227,6 @@ export default function waitForError(opts) {
 
 **Global**: `Ember.testing`
 
-**Location**: `app/components/auth-jwt.js` at line 9
-
-```js
-
-/* eslint-disable ember/no-ember-testing-in-module-scope */
-const WAIT_TIME = Ember.testing ? 0 : 500;
-const ERROR_WINDOW_CLOSED =
-  'The provider window was closed before authentication was complete.  Please click Sign In to try again.';
-```
-
-### Unknown Global
-
-**Global**: `Ember.testing`
-
-**Location**: `app/components/auth-jwt.js` at line 119
-
-```js
-  exchangeOIDC: task(function*(event, oidcWindow) {
-    // in non-incognito mode we need to use a timeout because it takes time before oidcState is written to local storage.
-    let oidcState = Ember.testing
-      ? event.storageArea.getItem('oidcState')
-      : yield timeout(1000).then(() => event.storageArea.getItem('oidcState'));
-```
-
-### Unknown Global
-
-**Global**: `Ember.testing`
-
 **Location**: `app/routes/vault.js` at line 7
 
 ```js
@@ -185,7 +241,7 @@ export default Route.extend({
 
 **Global**: `Ember.testing`
 
-**Location**: `app/services/auth.js` at line 267
+**Location**: `app/services/auth.js` at line 268
 
 ```js
   checkShouldRenew: task(function*() {
@@ -194,17 +250,3 @@ export default Route.extend({
         return;
       }
 ```
-
-### Unknown Global
-
-**Global**: `Ember.testing`
-
-**Location**: `lib/core/addon/components/ttl-form.js` at line 82
-
-```js
-    this.set('time', parsedTime);
-    this.handleChange();
-    if (Ember.testing) {
-      return;
-    }
-```

ui/README.md

@@ -111,9 +111,8 @@ To run the tests locally in a browser other than IE11, swap out `launch_in_ci: [
 
 ### Linting
 
-- `yarn lint:hbs`
-- `yarn lint:js`
-- `yarn lint:js -- --fix`
+* `yarn lint`
+* `yarn lint:fix`
 
 ### Building Vault UI into a Vault Binary
 

ui/app/adapters/application.js

@@ -41,7 +41,7 @@ export default RESTAdapter.extend({
       headers['X-Vault-Wrap-TTL'] = options.wrapTTL;
     }
     let namespace = typeof options.namespace === 'undefined' ? this.namespaceService.path : options.namespace;
-    if (namespace && !NAMESPACE_ROOT_URLS.some(str => url.includes(str))) {
+    if (namespace && !NAMESPACE_ROOT_URLS.some((str) => url.includes(str))) {
       headers['X-Vault-Namespace'] = namespace;
     }
     options.headers = assign(options.headers || {}, headers);
@@ -49,7 +49,7 @@ export default RESTAdapter.extend({
 
   _preRequest(url, options) {
     this.addHeaders(url, options);
-    const isPolling = POLLING_URLS.some(str => url.includes(str));
+    const isPolling = POLLING_URLS.some((str) => url.includes(str));
     if (!isPolling) {
       this.auth.setLastFetch(Date.now());
     }
@@ -86,7 +86,7 @@ export default RESTAdapter.extend({
       const [resp] = args;
       if (resp && resp.warnings) {
         let flash = this.flashMessages;
-        resp.warnings.forEach(message => {
+        resp.warnings.forEach((message) => {
           flash.info(message);
         });
       }
@@ -102,7 +102,7 @@ export default RESTAdapter.extend({
       headers: opts.headers || {},
       body: opts.body,
       signal: opts.signal,
-    }).then(response => {
+    }).then((response) => {
       if (response.status >= 200 && response.status < 300) {
         return RSVP.resolve(response);
       } else {

ui/app/adapters/auth-method.js

@@ -22,7 +22,7 @@ export default ApplicationAdapter.extend({
       return this.ajax(url, 'GET', {
         unauthenticated: true,
       })
-        .then(result => {
+        .then((result) => {
           return {
             data: result.data.auth,
           };
@@ -33,7 +33,7 @@ export default ApplicationAdapter.extend({
           };
         });
     }
-    return this.ajax(this.url(), 'GET').catch(e => {
+    return this.ajax(this.url(), 'GET').catch((e) => {
       if (e instanceof AdapterError) {
         set(e, 'policyPath', 'sys/auth');
       }

ui/app/adapters/aws-credential.js

@@ -22,7 +22,7 @@ export default ApplicationAdapter.extend({
     let role = snapshot.attr('role');
     let url = `/v1/${role.backend}/creds/${role.name}`;
 
-    return this.ajax(url, method, options).then(response => {
+    return this.ajax(url, method, options).then((response) => {
       response.id = snapshot.id;
       response.modelName = type.modelName;
       store.pushPayload(type.modelName, response);

ui/app/adapters/capabilities.js

@@ -8,7 +8,7 @@ export default ApplicationAdapter.extend({
   },
 
   findRecord(store, type, id) {
-    return this.ajax(this.buildURL(type), 'POST', { data: { paths: [id] } }).catch(e => {
+    return this.ajax(this.buildURL(type), 'POST', { data: { paths: [id] } }).catch((e) => {
       if (e instanceof AdapterError) {
         set(e, 'policyPath', 'sys/capabilities-self');
       }
@@ -21,7 +21,7 @@ export default ApplicationAdapter.extend({
     if (!id) {
       return;
     }
-    return this.findRecord(store, type, id).then(resp => {
+    return this.findRecord(store, type, id).then((resp) => {
       resp.path = id;
       return resp;
     });

ui/app/adapters/clients/activity.js

@@ -11,7 +11,7 @@ export default Application.extend({
       query = null;
     }
     // API accepts start and end as query params
-    return this.ajax(url, 'GET', { data: query }).then(resp => {
+    return this.ajax(url, 'GET', { data: query }).then((resp) => {
       let response = resp || {};
       // if the response is a 204 it has no request id
       response.id = response.request_id || 'no-data';

ui/app/adapters/clients/config.js

@@ -2,7 +2,7 @@ import Application from '../application';
 
 export default Application.extend({
   queryRecord() {
-    return this.ajax(this.urlForQuery(), 'GET').then(resp => {
+    return this.ajax(this.urlForQuery(), 'GET').then((resp) => {
       resp.id = resp.request_id;
       return resp;
     });

ui/app/adapters/cluster.js

@@ -40,10 +40,10 @@ export default ApplicationAdapter.extend({
   findRecord(store, type, id, snapshot) {
     let fetches = {
       health: this.health(),
-      sealStatus: this.sealStatus().catch(e => e),
+      sealStatus: this.sealStatus().catch((e) => e),
     };
     if (this.version.isEnterprise && this.namespaceService.inRootNamespace) {
-      fetches.replicationStatus = this.replicationStatus().catch(e => e);
+      fetches.replicationStatus = this.replicationStatus().catch((e) => e);
     }
     return hash(fetches).then(({ health, sealStatus, replicationStatus }) => {
       let ret = {

ui/app/adapters/control-group.js

@@ -11,7 +11,7 @@ export default ApplicationAdapter.extend({
       data: {
         accessor: id,
       },
-    }).then(response => {
+    }).then((response) => {
       response.id = id;
       return response;
     });