UI: Ember upgrade: Handle deprecation router service from host (#28603)

* use alias for router injection

* update @router declarations in engine files

* fix remaining pki router imports

* dynamically set router based on owner

* address replication routers

* update markdown docs

* use non-deprecated import for getOwner

* revert out of scope changes

* add transition-to test

ui/app/app.js

@@ -8,20 +8,27 @@ import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'vault/config/environment';
 
-// TODO: DEPRECATION https://ember-engines.com/docs/deprecations#-use-alias-for-inject-router-service-from-host-application
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
   Resolver = Resolver;
   engines = {
     'config-ui': {
       dependencies: {
-        services: ['auth', 'flash-messages', 'namespace', 'router', 'store', 'version', 'custom-messages'],
+        services: [
+          'auth',
+          'flash-messages',
+          'namespace',
+          { 'app-router': 'router' },
+          'store',
+          'version',
+          'custom-messages',
+        ],
       },
     },
     'open-api-explorer': {
       dependencies: {
-        services: ['auth', 'flash-messages', 'namespace', 'router', 'version'],
+        services: ['auth', 'flash-messages', 'namespace', { 'app-router': 'router' }, 'version'],
       },
     },
     replication: {
@@ -32,7 +39,7 @@ export default class App extends Application {
           'flash-messages',
           'namespace',
           'replication-mode',
-          'router',
+          { 'app-router': 'router' },
           'store',
           'version',
           '-portal',
@@ -51,7 +58,7 @@ export default class App extends Application {
           'flash-messages',
           'namespace',
           'path-help',
-          'router',
+          { 'app-router': 'router' },
           'store',
           'version',
           'secret-mount-path',
@@ -63,15 +70,15 @@ export default class App extends Application {
     },
     kubernetes: {
       dependencies: {
-        services: ['router', 'store', 'secret-mount-path', 'flash-messages'],
+        services: [{ 'app-router': 'router' }, 'store', 'secret-mount-path', 'flash-messages'],
         externalRoutes: {
           secrets: 'vault.cluster.secrets.backends',
         },
       },
     },
     ldap: {
       dependencies: {
-        services: ['router', 'store', 'secret-mount-path', 'flash-messages', 'auth'],
+        services: [{ 'app-router': 'router' }, 'store', 'secret-mount-path', 'flash-messages', 'auth'],
         externalRoutes: {
           secrets: 'vault.cluster.secrets.backends',
         },
@@ -85,7 +92,7 @@ export default class App extends Application {
           'download',
           'flash-messages',
           'namespace',
-          'router',
+          { 'app-router': 'router' },
           'secret-mount-path',
           'store',
           'version',
@@ -104,7 +111,7 @@ export default class App extends Application {
           'flash-messages',
           'namespace',
           'path-help',
-          'router',
+          { 'app-router': 'router' },
           'secret-mount-path',
           'store',
           'version',
@@ -118,7 +125,7 @@ export default class App extends Application {
     },
     sync: {
       dependencies: {
-        services: ['flash-messages', 'flags', 'router', 'store', 'version'],
+        services: ['flash-messages', 'flags', { 'app-router': 'router' }, 'store', 'version'],
         externalRoutes: {
           kvSecretOverview: 'vault.cluster.secrets.backend.kv.secret.index',
           clientCountOverview: 'vault.cluster.clients',

ui/docs/ember-engines.md

@@ -96,7 +96,7 @@ export default class <EngineName>Engine extends Engine {
   modulePrefix = modulePrefix;
   Resolver = Resolver;
   dependencies = {
-    services: ['router', 'store', 'secret-mount-path', 'flash-messages'],
+    services: ['app-router', 'store', 'secret-mount-path', 'flash-messages'],
     externalRoutes: ['secrets'],
   };
 }
@@ -128,7 +128,7 @@ The external route dependencies allow you to link to a route outside of your eng
 
 ## Register your engine with our main application:
 
-In our `app/app.js` file in the engines object, add your engine’s name and dependencies.
+In our `app/app.js` file in the engines object, add your engine’s name and dependencies. The `router` service must be referenced via an alias within engines. The pattern is to use `app-router` as the alias, see example below.
 
 ```js
 /**
@@ -146,7 +146,7 @@ export default class App extends Application {
   engines = {
     <engine-name>: {
       dependencies: {
-        services: ['router', 'store', 'secret-mount-path', 'flash-messages', <any-other-dependencies-you-have>],
+        services: [{ 'app-router': 'router' }, 'store', 'secret-mount-path', 'flash-messages', <any-other-dependencies-you-have>],
         externalRoutes: {
           secrets: 'vault.cluster.secrets.backends',
         },

ui/lib/config-ui/addon/components/messages/page/create-and-edit.js

@@ -23,7 +23,7 @@ import { isAfter } from 'date-fns';
  */
 
 export default class MessagesList extends Component {
-  @service router;
+  @service('app-router') router;
   @service store;
   @service flashMessages;
   @service customMessages;

ui/lib/config-ui/addon/components/messages/page/details.js

@@ -20,7 +20,7 @@ import errorMessage from 'vault/utils/error-message';
 
 export default class MessageDetails extends Component {
   @service store;
-  @service router;
+  @service('app-router') router;
   @service flashMessages;
   @service customMessages;
   @service namespace;

ui/lib/config-ui/addon/components/messages/page/list.js

@@ -24,7 +24,7 @@ import errorMessage from 'vault/utils/error-message';
 
 export default class MessagesList extends Component {
   @service store;
-  @service router;
+  @service('app-router') router;
   @service flashMessages;
   @service namespace;
   @service customMessages;

ui/lib/config-ui/addon/engine.js

@@ -16,7 +16,7 @@ export default class ConfigUiEngine extends Engine {
   modulePrefix = modulePrefix;
   Resolver = Resolver;
   dependencies = {
-    services: ['auth', 'store', 'flash-messages', 'namespace', 'router', 'version', 'custom-messages'],
+    services: ['auth', 'store', 'flash-messages', 'namespace', 'app-router', 'version', 'custom-messages'],
   };
 }
 

ui/lib/core/addon/components/linked-block.js

@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
+import { getOwner } from '@ember/owner';
 import { action } from '@ember/object';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
@@ -26,7 +26,14 @@ import { encodePath } from 'vault/utils/path-encoding-helpers';
  */
 
 export default class LinkedBlockComponent extends Component {
-  @service router;
+  // We don't import the router service here because Ember Engine's use the alias 'app-router'
+  // Since this component is shared across engines, we look up the router dynamically using getOwner instead.
+  // This way we avoid throwing an error by looking up a service that doesn't exist.
+  // https://guides.emberjs.com/release/services/#toc_accessing-services
+  get router() {
+    const owner = getOwner(this);
+    return owner.lookup('service:router') || owner.lookup('service:app-router');
+  }
 
   @action
   onClick(event) {

ui/lib/core/addon/components/replication-page.js

@@ -9,6 +9,7 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
+import { getOwner } from '@ember/owner';
 
 /**
  * @module ReplicationPage
@@ -28,9 +29,14 @@ const MODE = {
 
 export default class ReplicationPage extends Component {
   @service store;
-  @service router;
   @tracked reindexingDetails = null;
 
+  // This component renders both within and outside the replication engine so we have to dynamically look up the router
+  get router() {
+    const owner = getOwner(this);
+    return owner.lookup('service:router') || owner.lookup('service:app-router');
+  }
+
   @action onModeUpdate(evt, replicationMode) {
     // Called on did-insert and did-update
     this.getReplicationModeStatus.perform(replicationMode);

ui/lib/core/addon/helpers/transition-to.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Helper from '@ember/component/helper';
+import { getOwner } from '@ember/owner';
+
+/*
+template helper that replaces ember-router-helpers https://github.com/rwjblue/ember-router-helpers
+example:
+<MyForm @onSave={{transition-to "vault.cluster.some.route.item" "item-id"}} />
+<MyForm @onSave={{transition-to "vault.cluster.some.external.route"  external=true}} />
+*/
+export default class TransitionTo extends Helper {
+  // We don't import the router service here because Ember Engine's use the alias 'app-router'
+  // Since this helper is shared across engines, we look up the router dynamically using getOwner instead.
+  // This way we avoid throwing an error by looking up a service that doesn't exist.
+  // https://guides.emberjs.com/release/services/#toc_accessing-services
+  get router() {
+    const owner = getOwner(this);
+    return owner.lookup('service:router') || owner.lookup('service:app-router');
+  }
+
+  compute(routeParams, { external = false }) {
+    if (external) {
+      return () => this.router.transitionToExternal(...routeParams);
+    }
+    return () => this.router.transitionTo(...routeParams);
+  }
+}

ui/lib/core/addon/mixins/replication-actions.js

@@ -11,7 +11,6 @@ import { task } from 'ember-concurrency';
 
 export default Mixin.create({
   store: service(),
-  router: service(),
   loading: or('save.isRunning', 'submitSuccess.isRunning'),
   onDisable() {},
   onPromote() {},

ui/lib/core/app/helpers/transition-to.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export { default } from 'core/helpers/transition-to';

ui/lib/kmip/addon/controllers/credentials/show.js

@@ -9,7 +9,7 @@ import { action } from '@ember/object';
 
 export default class CredentialsShowController extends Controller {
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
 
   @action
   async revokeCredentials() {

ui/lib/kmip/addon/controllers/role.js

@@ -9,7 +9,7 @@ import { action } from '@ember/object';
 
 export default class RoleController extends Controller {
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
 
   @action
   async deleteRole() {

ui/lib/kmip/addon/engine.js

@@ -20,7 +20,7 @@ const Eng = Engine.extend({
       'flash-messages',
       'namespace',
       'path-help',
-      'router',
+      'app-router',
       'store',
       'version',
       'secret-mount-path',

ui/lib/kubernetes/addon/components/page/configure.js

@@ -18,7 +18,7 @@ import errorMessage from 'vault/utils/error-message';
  * @param {object} model - config model that contains kubernetes configuration
  */
 export default class ConfigurePageComponent extends Component {
-  @service router;
+  @service('app-router') router;
   @service store;
 
   @tracked inferredState;

ui/lib/kubernetes/addon/components/page/credentials.js

@@ -23,7 +23,7 @@ import timestamp from 'vault/utils/timestamp';
  */
 export default class CredentialsPageComponent extends Component {
   @service store;
-  @service router;
+  @service('app-router') router;
 
   @tracked ttl = '';
   @tracked clusterRoleBinding = false;

ui/lib/kubernetes/addon/components/page/overview.js

@@ -19,7 +19,7 @@ import { action } from '@ember/object';
  */
 
 export default class OverviewPageComponent extends Component {
-  @service router;
+  @service('app-router') router;
 
   @tracked selectedRole = null;
   @tracked roleOptions = [];

ui/lib/kubernetes/addon/components/page/role/create-and-edit.js

@@ -20,7 +20,7 @@ import errorMessage from 'vault/utils/error-message';
  */
 
 export default class CreateAndEditRolePageComponent extends Component {
-  @service router;
+  @service('app-router') router;
   @service flashMessages;
 
   @tracked roleRulesTemplates;

ui/lib/kubernetes/addon/components/page/role/details.js

@@ -17,7 +17,7 @@ import errorMessage from 'vault/utils/error-message';
  */
 
 export default class RoleDetailsPageComponent extends Component {
-  @service router;
+  @service('app-router') router;
   @service flashMessages;
 
   get extraFields() {

ui/lib/kubernetes/addon/components/page/roles.js

@@ -23,7 +23,7 @@ import keys from 'core/utils/key-codes';
  */
 export default class RolesPageComponent extends Component {
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
   @tracked query;
   @tracked roleToDelete = null;
 

ui/lib/kubernetes/addon/engine.js

@@ -16,7 +16,7 @@ export default class KubernetesEngine extends Engine {
   modulePrefix = modulePrefix;
   Resolver = Resolver;
   dependencies = {
-    services: ['router', 'store', 'secret-mount-path', 'flash-messages'],
+    services: ['app-router', 'store', 'secret-mount-path', 'flash-messages'],
     externalRoutes: ['secrets'],
   };
 }

ui/lib/kubernetes/addon/routes/index.js

@@ -7,7 +7,7 @@ import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 
 export default class KubernetesRoute extends Route {
-  @service router;
+  @service('app-router') router;
 
   redirect() {
     this.router.transitionTo('vault.cluster.secrets.backend.kubernetes.overview');

ui/lib/kubernetes/addon/routes/roles/role/index.js

@@ -7,7 +7,7 @@ import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 
 export default class KubernetesRoleRoute extends Route {
-  @service router;
+  @service('app-router') router;
 
   redirect() {
     this.router.transitionTo('vault.cluster.secrets.backend.kubernetes.roles.role.details');

ui/lib/kv/addon/components/kv-list-filter.js

@@ -31,7 +31,7 @@ import { task, timeout } from 'ember-concurrency';
  */
 
 export default class KvListFilterComponent extends Component {
-  @service router;
+  @service('app-router') router;
   @tracked query;
 
   constructor() {

ui/lib/kv/addon/components/page/list.js

@@ -26,7 +26,7 @@ import { pathIsDirectory } from 'kv/utils/kv-breadcrumbs';
 
 export default class KvListPageComponent extends Component {
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
   @service store;
 
   @tracked secretPath;

ui/lib/kv/addon/components/page/secret/details.js

@@ -41,7 +41,7 @@ import { isAdvancedSecret } from 'core/utils/advanced-secret';
 
 export default class KvSecretDetails extends Component {
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
   @service store;
 
   @tracked showJsonView = false;

ui/lib/kv/addon/components/page/secret/edit.js

@@ -31,7 +31,7 @@ import { isAdvancedSecret } from 'core/utils/advanced-secret';
 export default class KvSecretEdit extends Component {
   @service controlGroup;
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
 
   @tracked showJsonView = false;
   @tracked showDiff = false;