ui: Upgrade to ember 3.16 Octane Edition (#7334)

* v3.12.0...v3.16.0 * Upgrades * Remove old wormhole fix * Fixup ember power select (camelcasing) * Fixup immedaitely closing dropdown When clicking on the syntax selector, it seemed like an extra click event was firing from the label, which then immediately closed the dropdown. By adding a for="" attribute this event isn't passed to the dropdown menu and therefore doesn't immediately close * Fix up integration tests with new style (plus standardize titles) * Temporarily disable some template linting rules * Add required methods (even though they aren't used anywhere) * Ensure event sources get closed on destruction
hashicorp · Mar 18, 2020 · 408f1b1 · 408f1b1
1 parent 9cb089b
commit 408f1b1
Show file tree

Hide file tree

Showing 42 changed files with 1,776 additions and 923 deletions.
diff --git a/ui-v2/.editorconfig b/ui-v2/.editorconfig
@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

diff --git a/ui-v2/.eslintrc.js b/ui-v2/.eslintrc.js
@@ -1,8 +1,12 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: ['ember'],
   extends: ['eslint:recommended', 'plugin:ember/recommended'],
@@ -11,7 +15,8 @@ module.exports = {
   },
   rules: {
     'no-unused-vars': ['error', { args: 'none' }],
-    'ember/no-new-mixins': ['warn']
+    'ember/no-new-mixins': ['warn'],
+    'ember/no-jquery': 'warn'
   },
   overrides: [
     // node files

diff --git a/ui-v2/.template-lintrc.js b/ui-v2/.template-lintrc.js
@@ -1,7 +1,7 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended',
+  extends: 'octane',
   rules: {
     'no-partial': false,
 
@@ -10,6 +10,7 @@ module.exports = {
 
     'self-closing-void-elements': false,
     'no-unnecessary-concat': false,
+    'no-quoteless-attributes': false,
     'no-nested-interactive': false,
 
     'block-indentation': false,
@@ -19,6 +20,15 @@ module.exports = {
     'no-triple-curlies': false,
     'no-unused-block-params': false,
     'style-concatenation': false,
-    'link-rel-noopener': false
+    'link-rel-noopener': false,
+
+    'no-implicit-this': false,
+    'no-curly-component-invocation': false,
+    'no-action': false,
+    'no-negated-condition': false,
+    'no-invalid-role': false,
+
+    'no-unnecessary-component-helper': false,
+    'link-href-attributes': false
   },
 };
diff --git a/ui-v2/.travis.yml b/ui-v2/.travis.yml
@@ -0,0 +1,27 @@
+---
+language: node_js
+node_js:
+  - "10"
+
+dist: trusty
+
+addons:
+  chrome: stable
+
+cache:
+  directories:
+    - $HOME/.npm
+
+env:
+  global:
+    # See https://git.io/vdao3 for details.
+    - JOBS=1
+
+branches:
+  only:
+    - master
+
+script:
+  - npm run lint:hbs
+  - npm run lint:js
+  - npm test
diff --git a/ui-v2/app/app.js b/ui-v2/app/app.js
@@ -1,14 +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';
 
-const App = Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver,
-});
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;
diff --git a/ui-v2/app/mixins/with-event-source.js b/ui-v2/app/mixins/with-event-source.js
@@ -53,6 +53,10 @@ export default Mixin.create(WithListeners, {
     }
     return this._super(...arguments);
   },
+  willDestroy: function() {
+    this._super(...arguments);
+    this.reset(true);
+  },
 });
 export const listen = purify(catchable, function(props) {
   return props.map(item => `${PREFIX}${item}`);

diff --git a/ui-v2/app/resolver.js b/ui-v2/app/resolver.js
diff --git a/ui-v2/app/router.js b/ui-v2/app/router.js
@@ -2,10 +2,6 @@ import EmberRouter from '@ember/routing/router';
 import { env } from 'consul-ui/env';
 import walk from 'consul-ui/utils/routing/walk';
 
-const Router = EmberRouter.extend({
-  location: env('locationType'),
-  rootURL: env('rootURL'),
-});
 export const routes = {
   // Our parent datacenter resource sets the namespace
   // for the entire application
@@ -122,4 +118,9 @@ if (env('CONSUL_NSPACES_ENABLED')) {
     dc: routes.dc,
   };
 }
-export default Router.map(walk(routes));
+export default class Router extends EmberRouter {
+  location = env('locationType');
+  rootURL = env('rootURL');
+}
+
+Router.map(walk(routes));
diff --git a/ui-v2/app/services/repository/nspace.js b/ui-v2/app/services/repository/nspace.js
@@ -1,7 +1,14 @@
 import RepositoryService from 'consul-ui/services/repository';
+import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/nspace';
 
 const modelName = 'nspace';
 export default RepositoryService.extend({
+  getPrimaryKey: function() {
+    return PRIMARY_KEY;
+  },
+  getSlugKey: function() {
+    return SLUG_KEY;
+  },
   getModelName: function() {
     return modelName;
   },

diff --git a/ui-v2/app/services/repository/nspace/disabled.js b/ui-v2/app/services/repository/nspace/disabled.js
@@ -1,9 +1,16 @@
 import RepositoryService from 'consul-ui/services/repository';
 import { Promise } from 'rsvp';
+import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/nspace';
 
 const modelName = 'nspace';
 const DEFAULT_NSPACE = 'default';
 export default RepositoryService.extend({
+  getPrimaryKey: function() {
+    return PRIMARY_KEY;
+  },
+  getSlugKey: function() {
+    return SLUG_KEY;
+  },
   getModelName: function() {
     return modelName;
   },

diff --git a/ui-v2/app/services/repository/nspace/enabled.js b/ui-v2/app/services/repository/nspace/enabled.js
@@ -2,11 +2,18 @@ import { inject as service } from '@ember/service';
 import { get } from '@ember/object';
 import { env } from 'consul-ui/env';
 import RepositoryService from 'consul-ui/services/repository';
+import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/nspace';
 
 const modelName = 'nspace';
 export default RepositoryService.extend({
   router: service('router'),
   settings: service('settings'),
+  getPrimaryKey: function() {
+    return PRIMARY_KEY;
+  },
+  getSlugKey: function() {
+    return SLUG_KEY;
+  },
   getModelName: function() {
     return modelName;
   },

diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss
@@ -6,10 +6,6 @@
 
 /*TODO: Move this to its own local component*/
 @import 'ember-power-select';
-#ember-basic-dropdown-wormhole {
-  z-index: 510;
-  position: relative;
-}
 /**/
 
 @import 'components/index';

diff --git a/ui-v2/app/templates/components/child-selector.hbs b/ui-v2/app/templates/components/child-selector.hbs
@@ -2,7 +2,14 @@
   <YieldSlot @name="create">{{yield}}</YieldSlot>
   <label class="type-text">
     <span><YieldSlot @name="label">{{yield}}</YieldSlot></span>
-      <PowerSelect @onopen={{action "open"}} @search={{action "search"}} @options={{options}} @loadingMessage="Loading..." @searchMessage="No possible options" @searchPlaceholder={{placeholder}} @onchange={{action "change" "items[]" items}} as |item|>
+      <PowerSelect
+          @search={{action "search"}}
+          @options={{options}}
+          @loadingMessage="Loading..."
+          @searchMessage="No possible options"
+          @searchPlaceholder={{placeholder}}
+          @onOpen={{action "open"}}
+          @onChange={{action "change" "items[]" items}} as |item|>
         <YieldSlot @name="option" @params={{block-params item}}>{{yield}}</YieldSlot>
       </PowerSelect>
   </label>

diff --git a/ui-v2/app/templates/components/code-editor.hbs b/ui-v2/app/templates/components/code-editor.hbs
@@ -1,7 +1,11 @@
 <IvyCodemirror @value={{value}} @name={{name}} @class={{class}} @options={{options}} @valueUpdated={{action onkeyup}} />
 <pre><code>{{yield}}</code></pre>
 {{#if (and (not readonly) (not syntax))}}
-  <PowerSelect @onchange={{action "change"}} @selected={{mode}} @searchEnabled={{false}} @options={{modes}} as |mode|>
+  <PowerSelect
+      @onChange={{action "change"}}
+      @selected={{mode}}
+      @searchEnabled={{false}}
+      @options={{modes}} as |mode|>
     {{mode.name}}
   </PowerSelect>
 {{/if}}
diff --git a/ui-v2/app/templates/dc/intentions/-form.hbs b/ui-v2/app/templates/dc/intentions/-form.hbs
@@ -5,24 +5,40 @@
         <h2>Source</h2>
         <label data-test-source-element class="type-text{{if item.error.SourceName ' has-error'}}">
           <span>Source Service</span>
-          <PowerSelectWithCreate @options={{services}} @searchField="Name" @selected={{SourceName}} @searchPlaceholder="Type service name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Service called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "SourceName"}} @onchange={{action "change" "SourceName"}} as |service|>
-            {{#if (eq service.Name '*') }}
-              * (All Services)
-            {{else}}
-              {{service.Name}}
-            {{/if}}
+          <PowerSelectWithCreate
+              @options={{services}}
+              @searchField="Name"
+              @selected={{SourceName}}
+              @searchPlaceholder="Type service name"
+              @buildSuggestion={{action "createNewLabel" "Use a future Consul Service called '{{term}}'"}}
+              @showCreateWhen={{action "isUnique"}}
+              @onCreate={{action "change" "SourceName"}}
+              @onChange={{action "change" "SourceName"}} as |service|>
+                  {{#if (eq service.Name '*') }}
+                    * (All Services)
+                  {{else}}
+                    {{service.Name}}
+                  {{/if}}
           </PowerSelectWithCreate>
           <em>Search for an existing service, write in a future one, or write in any Service URI.</em>
         </label>
   {{#if (env 'CONSUL_NSPACES_ENABLED')}}
         <label data-test-source-nspace class="type-text{{if item.error.SourceNS ' has-error'}}">
           <span>Source Namespace</span>
-          <PowerSelectWithCreate @options={{nspaces}} @searchField="Name" @selected={{SourceNS}} @searchPlaceholder="Type namespace name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "SourceNS"}} @onchange={{action "change" "SourceNS"}} as |nspace|>
-            {{#if (eq nspace.Name '*') }}
-              * (All Namespaces)
-            {{else}}
-              {{nspace.Name}}
-            {{/if}}
+          <PowerSelectWithCreate
+              @options={{nspaces}}
+              @searchField="Name"
+              @selected={{SourceNS}}
+              @searchPlaceholder="Type namespace name"
+              @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}}
+              @showCreateWhen={{action "isUnique"}}
+              @onCreate={{action "change" "SourceNS"}}
+              @onChange={{action "change" "SourceNS"}} as |nspace|>
+                {{#if (eq nspace.Name '*') }}
+                  * (All Namespaces)
+                {{else}}
+                  {{nspace.Name}}
+                {{/if}}
           </PowerSelectWithCreate>
           <em>Search for an existing namespace, write in a future one.</em>
         </label>
@@ -32,24 +48,40 @@
         <h2>Destination</h2>
         <label data-test-destination-element class="type-text{{if item.error.DestinationName ' has-error'}}">
           <span>Destination Service</span>
-          <PowerSelectWithCreate @options={{services}} @searchField="Name" @selected={{DestinationName}} @searchPlaceholder="Type service name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Service called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "DestinationName"}} @onchange={{action "change" "DestinationName"}} as |service|>
-            {{#if (eq service.Name '*') }}
-              * (All Services)
-            {{else}}
-              {{service.Name}}
-            {{/if}}
+          <PowerSelectWithCreate
+              @options={{services}}
+              @searchField="Name"
+              @selected={{DestinationName}}
+              @searchPlaceholder="Type service name"
+              @buildSuggestion={{action "createNewLabel" "Use a future Consul Service called '{{term}}'"}}
+              @showCreateWhen={{action "isUnique"}}
+              @onCreate={{action "change" "DestinationName"}}
+              @onChange={{action "change" "DestinationName"}} as |service|>
+                  {{#if (eq service.Name '*') }}
+                    * (All Services)
+                  {{else}}
+                    {{service.Name}}
+                  {{/if}}
           </PowerSelectWithCreate>
           <em>Search for an existing service or write in a future one.</em>
         </label>
   {{#if (env 'CONSUL_NSPACES_ENABLED')}}
         <label data-test-destination-nspace class="type-text{{if item.error.DestinationNS ' has-error'}}">
           <span>Destination Namespace</span>
-          <PowerSelectWithCreate @options={{nspaces}} @searchField="Name" @selected={{DestinationNS}} @searchPlaceholder="Type namespace name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "DestinationNS"}} @onchange={{action "change" "DestinationNS"}} as |nspace|>
-            {{#if (eq nspace.Name '*') }}
-              * (All Namespaces)
-            {{else}}
-              {{nspace.Name}}
-            {{/if}}
+          <PowerSelectWithCreate
+              @options={{nspaces}}
+              @searchField="Name"
+              @selected={{DestinationNS}}
+              @searchPlaceholder="Type namespace name"
+              @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}}
+              @showCreateWhen={{action "isUnique"}}
+              @onCreate={{action "change" "DestinationNS"}}
+              @onChange={{action "change" "DestinationNS"}} as |nspace|>
+                  {{#if (eq nspace.Name '*') }}
+                    * (All Namespaces)
+                  {{else}}
+                    {{nspace.Name}}
+                  {{/if}}
           </PowerSelectWithCreate>
           <em>For the destination, you may choose any namespace for which you have access.</em>
         </label>

diff --git a/ui-v2/app/templates/dc/kv/-form.hbs b/ui-v2/app/templates/dc/kv/-form.hbs
@@ -15,7 +15,7 @@
                   <span>Code</span>
               </label>
             </div>
-            <label class="type-text{{if item.error.Value ' has-error'}}">
+            <label for="" class="type-text{{if item.error.Value ' has-error'}}">
                 <span>Value</span>
 {{#if json}}
                 <CodeEditor @value={{atob item.Value}} @onkeyup={{action "change" "value"}} />

diff --git a/ui-v2/app/utils/dom/event-source/proxy.js b/ui-v2/app/utils/dom/event-source/proxy.js
@@ -51,6 +51,8 @@ export default function(ObjProxy, ArrProxy, createListeners) {
           return this._source.open(...arguments);
         },
         willDestroy: function() {
+          this._super(...arguments);
+          this.close();
           this.listeners.remove();
         },
       });

diff --git a/ui-v2/config/optional-features.json b/ui-v2/config/optional-features.json
@@ -1,3 +1,6 @@
 {
-  "jquery-integration": true
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
 }