fix: restore web console runtime compatibility

Author: chen21019

app/application/route.js

@@ -1,5 +1,5 @@
 import RSVP, { reject } from 'rsvp';
-import { cancel, next } from '@ember/runloop';
+import { cancel, next, scheduleOnce } from '@ember/runloop';
 import { service } from '@ember/service';
 import Route from '@ember/routing/route';
 import C from 'ui/utils/constants';
@@ -47,6 +47,14 @@ export default Route.extend({
   },
 
   actions: {
+    didTransition() {
+      // Fast route models can complete without entering Ember's loading
+      // substate. The initial overlay is rendered visible, so always reconcile
+      // it after a successful transition.
+      scheduleOnce('afterRender', this, this.hideLoadingOverlay);
+      return true;
+    },
+
     loading(transition) {
       this.incrementProperty('loadingId');
       let id = this.get('loadingId');
@@ -155,6 +163,13 @@ export default Route.extend({
     }
   },
 
+  hideLoadingOverlay() {
+    cancel(this.get('hideTimer'));
+    this.set('loadingShown', false);
+    $('#loading-overlay').stop(true, true).hide();
+    $('#loading-underlay').stop(true, true).hide();
+  },
+
   shortcuts: {
     'shift+l': 'langToggle',
   },

app/resolver.js

@@ -1,3 +1,18 @@
-import Resolver from 'ember-resolver';
+import { getComponentTemplate, setComponentTemplate } from '@ember/component';
+import EmberResolver from 'ember-resolver';
 
-export default Resolver;
+export default class Resolver extends EmberResolver {
+  resolveComponent(parsedName) {
+    let component = this.resolveOther(parsedName);
+
+    if ( component && !getComponentTemplate(component) ) {
+      let template = this.resolve(`template:components/${parsedName.fullNameWithoutType}`);
+
+      if ( template ) {
+        setComponentTemplate(template, component);
+      }
+    }
+
+    return component;
+  }
+}

app/services/user-language.js

@@ -2,7 +2,7 @@ import { resolve } from 'rsvp';
 import { alias } from '@ember/object/computed';
 import Service, { service } from '@ember/service';
 import C from 'ui/utils/constants';
-import { ajaxPromise } from 'ember-api-store/utils/ajax-promise';
+import fetch from 'ember-api-store/utils/fetch';
 import { loadScript } from 'ui/utils/load-script';
 
 import { on } from '@ember/object/evented';
@@ -32,6 +32,7 @@ export default Service.extend({
   cookies       : service(),
   userTheme     : service('user-theme'),
   loadedLocales : null,
+  translationFetcher: fetch,
 
   bootstrap: on('init', function() {
     this.set('loadedLocales', []);
@@ -144,11 +145,21 @@ export default Service.extend({
       return resolve();
     }
 
-    return ajaxPromise({
-      url: `${this.get('app.baseAssets')}translations/${language}.json?${application.version}`,
+    let url = `${this.get('app.baseAssets')}translations/${language}.json?${application.version}`;
+    let translationFetcher = this.get('translationFetcher');
+
+    return translationFetcher(url, {
       method: 'GET',
-      dataType: 'json',
+      headers: {
+        Accept: 'application/json',
+      },
     }).then((resp) => {
+      let translations = resp.body;
+
+      if ( !translations || typeof translations !== 'object' || Array.isArray(translations) ) {
+        throw new Error(`Invalid translation response for ${language}`);
+      }
+
       let polyfillPromise;
       if ( this.get('app.needIntlPolyfill') ) {
         polyfillPromise = loadScript(`${this.get('app.baseAssets')}assets/intl/locales/${language.toLowerCase()}.js?${application.version}`);
@@ -157,7 +168,7 @@ export default Service.extend({
       }
 
       return polyfillPromise.then(() => {
-        return this.get('intl').addTranslations(language, resp.xhr.responseJSON);
+        return this.get('intl').addTranslations(language, translations);
       }).then(() => {
         if ( !loadedLocales.includes(language) ) {
           loadedLocales.push(language);

app/styles/app-dark.scss

@@ -623,7 +623,8 @@ $bootstrap-config: ("gray-base": $gray-base, "gray-darker": $gray-darker, "gray-
 @include meta.load-css("app/styles/vendors/liquidfire-tweak");
 @include meta.load-css("app/styles/vendors/copy-to-clipboard", $with: ("brand-info": $brand-info, "brand-primary-dark": $brand-primary-dark, "green": $green, "pre-bg": $pre-bg, "primary": $primary));
 @include meta.load-css("app/styles/vendors/prism-theme");
-@include meta.load-css("vendor/ember-power-select/app/styles/ember-power-select");
+// ember-power-select 9 and ember-basic-dropdown 9 ship their base styles as
+// v2-addon public CSS. Keep only PastureStack's themed overrides here.
 @include meta.load-css("app/styles/vendors/power-select", $with: ("accent-two": $accent-two, "bottom-row": $bottom-row, "dropdown-border": $dropdown-border, "input-bg": $input-bg, "line-height-small": $line-height-small, "link-color": $link-color, "padding-small-horizontal": $padding-small-horizontal, "padding-small-vertical": $padding-small-vertical, "table-bg-accent": $table-bg-accent, "table-bg-hover": $table-bg-hover, "text-color": $text-color));
 @include meta.load-css("app/styles/vendors/bootstrap-tweak", $with: ("accent-two": $accent-two, "blueTwo": $blueTwo, "body-bg": $body-bg, "bold-weight": $bold-weight, "border-radius-base": $border-radius-base, "brand-danger": $brand-danger, "brand-info": $brand-info, "brand-primary": $brand-primary, "brand-success": $brand-success, "brand-warning": $brand-warning, "btn-danger-hover": $btn-danger-hover, "btn-default-bg": $btn-default-bg, "btn-default-border": $btn-default-border, "btn-default-color": $btn-default-color, "btn-default-hover": $btn-default-hover, "btn-disabled-bg": $btn-disabled-bg, "btn-disabled-color": $btn-disabled-color, "btn-primary-bg": $btn-primary-bg, "btn-primary-border": $btn-primary-border, "btn-primary-color": $btn-primary-color, "btn-primary-hover": $btn-primary-hover, "dropdown-bg": $dropdown-bg, "dropdown-link-color": $dropdown-link-color, "greenDark": $greenDark, "icon-chevron-down": $icon-chevron-down, "icon-chevron-up": $icon-chevron-up, "input-bg": $input-bg, "input-border": $input-border, "input-color": $input-color, "lightGray": $lightGray, "lightGrayTwo": $lightGrayTwo, "lightTealDark": $lightTealDark, "line-height-computed": $line-height-computed, "link-color": $link-color, "midGray": $midGray, "midGrayDark": $midGrayDark, "normal-weight": $normal-weight, "page-header-border-color": $page-header-border-color, "primary": $primary, "primaryDark": $primaryDark, "redDark": $redDark, "table-bg": $table-bg, "table-border-color": $table-border-color, "tealTwoDark": $tealTwoDark, "text-color": $text-color, "well-bg": $well-bg, "yellowDark": $yellowDark));
 

app/styles/app-light.scss

@@ -623,7 +623,8 @@ $bootstrap-config: ("gray-base": $gray-base, "gray-darker": $gray-darker, "gray-
 @include meta.load-css("app/styles/vendors/liquidfire-tweak");
 @include meta.load-css("app/styles/vendors/copy-to-clipboard", $with: ("brand-info": $brand-info, "brand-primary-dark": $brand-primary-dark, "green": $green, "pre-bg": $pre-bg, "primary": $primary));
 @include meta.load-css("app/styles/vendors/prism-theme");
-@include meta.load-css("vendor/ember-power-select/app/styles/ember-power-select");
+// ember-power-select 9 and ember-basic-dropdown 9 ship their base styles as
+// v2-addon public CSS. Keep only PastureStack's themed overrides here.
 @include meta.load-css("app/styles/vendors/power-select", $with: ("accent-two": $accent-two, "bottom-row": $bottom-row, "dropdown-border": $dropdown-border, "input-bg": $input-bg, "line-height-small": $line-height-small, "link-color": $link-color, "padding-small-horizontal": $padding-small-horizontal, "padding-small-vertical": $padding-small-vertical, "table-bg-accent": $table-bg-accent, "table-bg-hover": $table-bg-hover, "text-color": $text-color));
 @include meta.load-css("app/styles/vendors/bootstrap-tweak", $with: ("accent-two": $accent-two, "blueTwo": $blueTwo, "body-bg": $body-bg, "bold-weight": $bold-weight, "border-radius-base": $border-radius-base, "brand-danger": $brand-danger, "brand-info": $brand-info, "brand-primary": $brand-primary, "brand-success": $brand-success, "brand-warning": $brand-warning, "btn-danger-hover": $btn-danger-hover, "btn-default-bg": $btn-default-bg, "btn-default-border": $btn-default-border, "btn-default-color": $btn-default-color, "btn-default-hover": $btn-default-hover, "btn-disabled-bg": $btn-disabled-bg, "btn-disabled-color": $btn-disabled-color, "btn-primary-bg": $btn-primary-bg, "btn-primary-border": $btn-primary-border, "btn-primary-color": $btn-primary-color, "btn-primary-hover": $btn-primary-hover, "dropdown-bg": $dropdown-bg, "dropdown-link-color": $dropdown-link-color, "greenDark": $greenDark, "icon-chevron-down": $icon-chevron-down, "icon-chevron-up": $icon-chevron-up, "input-bg": $input-bg, "input-border": $input-border, "input-color": $input-color, "lightGray": $lightGray, "lightGrayTwo": $lightGrayTwo, "lightTealDark": $lightTealDark, "line-height-computed": $line-height-computed, "link-color": $link-color, "midGray": $midGray, "midGrayDark": $midGrayDark, "normal-weight": $normal-weight, "page-header-border-color": $page-header-border-color, "primary": $primary, "primaryDark": $primaryDark, "redDark": $redDark, "table-bg": $table-bg, "table-border-color": $table-border-color, "tealTwoDark": $tealTwoDark, "text-color": $text-color, "well-bg": $well-bg, "yellowDark": $yellowDark));
 

config/environment.js

@@ -53,6 +53,13 @@ module.exports = function(environment) {
     rootURL: '/',
     locationType: 'history',
     EmberENV: {
+      // The inherited 1.6 application and ember-api-store still use Ember's
+      // observable NativeArray methods. Ember 7 disables these extensions by
+      // default, so keep the compatibility layer enabled until those call
+      // sites are migrated deliberately.
+      EXTEND_PROTOTYPES: {
+        Array: true
+      },
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. 'with-controller': true

ember-cli-build.js

@@ -5,6 +5,10 @@ var env      = EmberApp.env();
 var dartSass = require('sass');
 var buildTranslationTrees = require('./lib/production-translations').buildTranslationTrees;
 
+var themeOutputPaths = {
+  'app-light': '/assets/ui-light.css',
+  'app-dark': '/assets/ui-dark.css'
+};
 
 module.exports = function(defaults) {
   // Pull in a few useful environment settings for index.html to use
@@ -36,11 +40,7 @@ module.exports = function(defaults) {
     },
     outputPaths: {
       app: {
-        js: '/assets/ui.js',
-        css: {
-          'app-light': '/assets/ui-light.css',
-          'app-dark': '/assets/ui-dark.css'
-        }
+        js: '/assets/ui.js'
       }
     },
     nodeAssets: {
@@ -91,6 +91,13 @@ module.exports = function(defaults) {
     },
   });
 
+  // Ember CLI 7 normalizes app CSS output paths after reading the build
+  // options, which otherwise silently replaces the two runtime themes with an
+  // empty ui.css compiled from app.scss. Keep both the public option and the
+  // already-created default packager on the same explicit theme contract.
+  app.options.outputPaths.app.css = themeOutputPaths;
+  app._defaultPackager.distPaths.appCssFile = themeOutputPaths;
+
   // Use `app.import` to add additional libraries to the generated
   // output files.
   //

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@pasturestack/web-console",
-  "version": "1.6.56-pasturestack.32",
+  "version": "1.6.56-pasturestack.33",
   "private": true,
   "directories": {
     "doc": "doc",

package.json

@@ -109,11 +109,12 @@ diff --git a/node_modules/ember-api-store/addon/mixins/type.js b/node_modules/em
 index 721f184..d10c1ca 100644
 --- a/node_modules/ember-api-store/addon/mixins/type.js
 +++ b/node_modules/ember-api-store/addon/mixins/type.js
-@@ -1,11 +1,13 @@
+@@ -1,11 +1,14 @@
 -import Ember from 'ember';
 -import { get } from '@ember/object';
 +import Mixin from '@ember/object/mixin';
-+import { beginPropertyChanges, computed, endPropertyChanges, get } from '@ember/object';
++import { computed, get } from '@ember/object';
++import { beginPropertyChanges, endPropertyChanges } from '@ember/-internals/metal';
 +import { isArray } from '@ember/array';
 +import { reject } from 'rsvp';
  import Serializable from './serializable';
@@ -295,7 +296,7 @@ diff --git a/node_modules/ember-api-store/addon/services/store.js b/node_modules
 index 7e80cdf..22e33a4 100644
 --- a/node_modules/ember-api-store/addon/services/store.js
 +++ b/node_modules/ember-api-store/addon/services/store.js
-@@ -1,28 +1,20 @@
+@@ -1,28 +1,21 @@
 -import Ember from 'ember';
 +import Service, { service } from '@ember/service';
 +import ArrayProxy from '@ember/array/proxy';
@@ -309,7 +310,8 @@ index 7e80cdf..22e33a4 100644
 -import { get, set } from '@ember/object';
 -import { reject } from 'rsvp';
 -import { inject as service } from '@ember/service';
-+import { beginPropertyChanges, computed, endPropertyChanges, get, getProperties, set } from '@ember/object';
++import { computed, get, getProperties, set } from '@ember/object';
++import { beginPropertyChanges, endPropertyChanges } from '@ember/-internals/metal';
 +import { defer, reject, resolve } from 'rsvp';
  import { isArray } from '@ember/array';
  import { parse as setCookieParser } from 'set-cookie-parser';