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,7 +8,6 @@ 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;
@@ -16,12 +15,20 @@ export default class App extends Application {
   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,7 +70,7 @@ 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',
         },
@@ -71,7 +78,7 @@ export default class App extends Application {
     },
     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;

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

@@ -37,7 +37,7 @@ import errorMessage from 'vault/utils/error-message';
 export default class KvSecretMetadataDetails extends Component {
   @service controlGroup;
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
   @service store;
 
   @tracked error = null;

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

@@ -37,7 +37,7 @@ import errorMessage from 'vault/utils/error-message';
 export default class KvSecretPatch extends Component {
   @service controlGroup;
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
   @service store;
 
   @tracked controlGroupError;

ui/lib/kv/addon/components/page/secrets/create.js

@@ -28,7 +28,7 @@ import errorMessage from 'vault/utils/error-message';
 export default class KvSecretCreate extends Component {
   @service controlGroup;
   @service flashMessages;
-  @service router;
+  @service('app-router') router;
   @service store;
 
   @tracked showJsonView = false;

ui/lib/kv/addon/engine.js

@@ -22,7 +22,7 @@ export default class KvEngine extends Engine {
       'download',
       'flash-messages',
       'namespace',
-      'router',
+      'app-router',
       'secret-mount-path',
       'store',
       'version',

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

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

ui/lib/kv/addon/routes/list-directory.js

@@ -12,7 +12,7 @@ import { pathIsDirectory } from 'kv/utils/kv-breadcrumbs';
 
 export default class KvSecretsListRoute extends Route {
   @service store;
-  @service router;
+  @service('app-router') router;
   @service secretMountPath;
 
   queryParams = {

ui/lib/kv/addon/routes/secret/index.js

@@ -8,7 +8,7 @@ import { service } from '@ember/service';
 import { breadcrumbsForSecret } from 'kv/utils/kv-breadcrumbs';
 
 export default class SecretIndex extends Route {
-  @service router;
+  @service('app-router') router;
 
   setupController(controller, resolvedModel) {
     super.setupController(controller, resolvedModel);

ui/lib/kv/addon/routes/secret/patch.js

@@ -8,7 +8,7 @@ import { breadcrumbsForSecret } from 'kv/utils/kv-breadcrumbs';
 import { service } from '@ember/service';
 
 export default class SecretPatch extends Route {
-  @service router;
+  @service('app-router') router;
 
   setupController(controller, resolvedModel) {
     super.setupController(controller, resolvedModel);

ui/lib/ldap/addon/components/page/configure.ts

@@ -29,7 +29,7 @@ interface SchemaOption {
 
 export default class LdapConfigurePageComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked showRotatePrompt = false;
   @tracked modelValidations: ValidationMap | null = null;

ui/lib/ldap/addon/components/page/library/create-and-edit.ts

@@ -23,7 +23,7 @@ interface Args {
 
 export default class LdapCreateAndEditLibraryPageComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked modelValidations: ValidationMap | null = null;
   @tracked invalidFormMessage = '';

ui/lib/ldap/addon/components/page/library/details.ts

@@ -20,7 +20,7 @@ interface Args {
 
 export default class LdapLibraryDetailsPageComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @action
   async delete() {

ui/lib/ldap/addon/components/page/library/details/accounts.ts

@@ -21,7 +21,7 @@ interface Args {
 
 export default class LdapLibraryDetailsAccountsPageComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked showCheckOutPrompt = false;
   @tracked checkOutTtl: string | null = null;

ui/lib/ldap/addon/components/page/overview.ts

@@ -25,7 +25,7 @@ interface Args {
 }
 
 export default class LdapLibrariesPageComponent extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked selectedRole: LdapRoleModel | undefined;
 

ui/lib/ldap/addon/components/page/role/create-and-edit.ts

@@ -30,7 +30,7 @@ interface RoleTypeOption {
 
 export default class LdapCreateAndEditRolePageComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
 
   @tracked modelValidations: ValidationMap | null = null;

ui/lib/ldap/addon/components/page/role/details.ts

@@ -23,7 +23,7 @@ interface Args {
 
 export default class LdapRoleDetailsPageComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
 
   @action

ui/lib/ldap/addon/components/page/roles.ts

@@ -27,7 +27,7 @@ interface Args {
 
 export default class LdapRolesPageComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
   @tracked credsToRotate: LdapRoleModel | null = null;
   @tracked roleToDelete: LdapRoleModel | null = null;

ui/lib/ldap/addon/engine.js

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

ui/lib/ldap/addon/routes/libraries/library/check-out.ts

@@ -24,7 +24,7 @@ interface LdapLibraryCheckOutController extends Controller {
 
 export default class LdapLibraryCheckOutRoute extends Route {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   accountsRoute = 'vault.cluster.secrets.backend.ldap.libraries.library.details.accounts';
 

ui/lib/ldap/addon/routes/libraries/library/details/index.ts

@@ -9,7 +9,7 @@ import { service } from '@ember/service';
 import type RouterService from '@ember/routing/router-service';
 
 export default class LdapLibraryRoute extends Route {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   redirect() {
     this.router.transitionTo('vault.cluster.secrets.backend.ldap.libraries.library.details.accounts');

ui/lib/ldap/addon/routes/libraries/library/index.ts

@@ -9,7 +9,7 @@ import { service } from '@ember/service';
 import type RouterService from '@ember/routing/router-service';
 
 export default class LdapLibraryRoute extends Route {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   redirect() {
     this.router.transitionTo('vault.cluster.secrets.backend.ldap.libraries.library.details');

ui/lib/ldap/addon/routes/roles/role/index.ts

@@ -9,7 +9,7 @@ import { service } from '@ember/service';
 import type RouterService from '@ember/routing/router-service';
 
 export default class LdapRoleRoute extends Route {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   redirect() {
     this.router.transitionTo('vault.cluster.secrets.backend.ldap.roles.role.details');

ui/lib/open-api-explorer/addon/engine.js

@@ -14,7 +14,7 @@ const Eng = Engine.extend({
   modulePrefix,
   Resolver,
   dependencies: {
-    services: ['auth', 'flash-messages', 'namespace', 'router', 'version'],
+    services: ['auth', 'flash-messages', 'namespace', 'app-router', 'version'],
   },
 });
 

ui/lib/pki/addon/components/page/pki-configuration-details.ts

@@ -19,7 +19,7 @@ interface Args {
 
 export default class PkiConfigurationDetails extends Component<Args> {
   @service declare readonly store: Store;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly version: VersionService;
   @tracked showDeleteAllIssuers = false;

ui/lib/pki/addon/components/page/pki-configuration-edit.ts

@@ -44,7 +44,7 @@ interface ErrorObject {
   message: string;
 }
 export default class PkiConfigurationEditComponent extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly version: VersionService;
 

ui/lib/pki/addon/components/page/pki-configure-create.ts

@@ -7,7 +7,7 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import type Store from '@ember-data/store';
-import type Router from '@ember/routing/router';
+import type RouterService from '@ember/routing/router';
 import type FlashMessageService from 'vault/services/flash-messages';
 import type PkiActionModel from 'vault/models/pki/action';
 import type { Breadcrumb } from 'vault/vault/app-types';
@@ -26,9 +26,9 @@ interface Args {
  * and form submission and cancel actions.
  */
 export default class PkiConfigureCreate extends Component<Args> {
-  @service declare readonly store: Store;
-  @service declare readonly router: Router;
   @service declare readonly flashMessages: FlashMessageService;
+  @service declare readonly store: Store;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked title = 'Configure PKI';
 

ui/lib/pki/addon/components/page/pki-issuer-edit.ts

@@ -21,7 +21,7 @@ interface Args {
 }
 
 export default class PkiIssuerEditComponent extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly flashMessages: FlashMessageService;
 
   @tracked usageValues: Array<string> = [];

ui/lib/pki/addon/components/page/pki-issuer-rotate-root.ts

@@ -11,7 +11,7 @@ import { waitFor } from '@ember/test-waiters';
 import { task } from 'ember-concurrency';
 import errorMessage from 'vault/utils/error-message';
 import type Store from '@ember-data/store';
-import type Router from '@ember/routing/router';
+import type RouterService from '@ember/routing/router';
 import type FlashMessageService from 'vault/services/flash-messages';
 import type SecretMountPath from 'vault/services/secret-mount-path';
 import type PkiIssuerModel from 'vault/models/pki/issuer';
@@ -31,10 +31,10 @@ const RADIO_BUTTON_KEY = {
 };
 
 export default class PagePkiIssuerRotateRootComponent extends Component<Args> {
-  @service declare readonly store: Store;
-  @service declare readonly router: Router;
   @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly secretMountPath: SecretMountPath;
+  @service declare readonly store: Store;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked displayedForm = RADIO_BUTTON_KEY.oldSettings;
   @tracked showOldSettings = false;

ui/lib/pki/addon/components/page/pki-key-details.ts

@@ -15,7 +15,7 @@ interface Args {
 }
 
 export default class PkiKeyDetails extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly flashMessages: FlashMessageService;
 
   @action

ui/lib/pki/addon/components/page/pki-overview.ts

@@ -19,7 +19,7 @@ interface Args {
 }
 
 export default class PkiOverview extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: Store;
 
   @tracked rolesValue = '';

ui/lib/pki/addon/components/page/pki-role-details.ts

@@ -17,7 +17,7 @@ interface Args {
 }
 
 export default class DetailsPage extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly secretMountPath: SecretMountPath;
 

ui/lib/pki/addon/components/page/pki-tidy-status.ts

@@ -52,7 +52,7 @@ export default class PkiTidyStatusComponent extends Component<Args> {
   @service declare readonly secretMountPath: SecretMountPath;
   @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly version: VersionService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked tidyOptionsModal = false;
   @tracked confirmCancelTidy = false;

ui/lib/pki/addon/components/pki-generate-root.ts

@@ -51,7 +51,7 @@ interface Args {
  */
 export default class PkiGenerateRootComponent extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked modelValidations: ValidationMap | null = null;
   @tracked errorBanner = '';

ui/lib/pki/addon/components/pki-role-generate.ts

@@ -9,7 +9,7 @@ import { task } from 'ember-concurrency';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import errorMessage from 'vault/utils/error-message';
-import type Router from '@ember/routing/router';
+import type RouterService from '@ember/routing/router';
 import type Store from '@ember-data/store';
 import type FlashMessageService from 'vault/services/flash-messages';
 import type DownloadService from 'vault/services/download';
@@ -23,10 +23,10 @@ interface Args {
 }
 
 export default class PkiRoleGenerate extends Component<Args> {
-  @service declare readonly router: Router;
-  @service declare readonly store: Store;
-  @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly download: DownloadService;
+  @service declare readonly flashMessages: FlashMessageService;
+  @service declare readonly store: Store;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked errorBanner = '';
   @tracked invalidFormAlert = '';

ui/lib/pki/addon/components/pki-tidy-form.ts

@@ -30,7 +30,7 @@ interface PkiTidyBooleans {
 }
 
 export default class PkiTidyForm extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked errorBanner = '';
   @tracked invalidFormAlert = '';

ui/lib/pki/addon/engine.js

@@ -22,7 +22,7 @@ export default class PkiEngine extends Engine {
       'flash-messages',
       'namespace',
       'path-help',
-      'router',
+      'app-router',
       'secret-mount-path',
       'store',
       'version',

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

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

ui/lib/replication/addon/controllers/application.js

@@ -29,7 +29,7 @@ export default Controller.extend(structuredClone(DEFAULTS), {
   isModalActive: false,
   isTokenCopied: false,
   expirationDate: null,
-  router: service(),
+  router: service('app-router'),
   store: service(),
   rm: service('replication-mode'),
   replicationMode: alias('rm.mode'),

ui/lib/replication/addon/controllers/mode/secondaries/config-edit.js

@@ -9,7 +9,7 @@ import Controller from '@ember/controller';
 
 export default Controller.extend({
   flashMessages: service(),
-  router: service(),
+  router: service('app-router'),
   rm: service('replication-mode'),
   replicationMode: alias('rm.mode'),
   actions: {

ui/lib/replication/addon/controllers/replication-mode.js

@@ -11,7 +11,7 @@ import { action } from '@ember/object';
 
 export default class ReplicationModeBaseController extends Controller {
   @service('replication-mode') rm;
-  @service router;
+  @service('app-router') router;
   @service store;
 
   get replicationMode() {

ui/lib/replication/addon/engine.js

@@ -20,7 +20,7 @@ const Eng = Engine.extend({
       'flash-messages',
       'namespace',
       'replication-mode',
-      'router',
+      'app-router',
       'store',
       'version',
       '-portal',

ui/lib/replication/addon/routes/application.js

@@ -12,7 +12,7 @@ export default Route.extend(ClusterRoute, {
   version: service(),
   store: service(),
   auth: service(),
-  router: service(),
+  router: service('app-router'),
   capabilities: service(),
 
   async fetchCapabilities() {

ui/lib/replication/addon/routes/mode.js

@@ -12,7 +12,7 @@ const SUPPORTED_REPLICATION_MODES = ['dr', 'performance'];
 
 export default Route.extend({
   replicationMode: service(),
-  router: service(),
+  router: service('app-router'),
   store: service(),
   beforeModel() {
     const replicationMode = this.paramsFor(this.routeName).replication_mode;

ui/lib/replication/addon/routes/mode/index.js

@@ -9,7 +9,7 @@ import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 
 export default Route.extend({
-  router: service(),
+  router: service('app-router'),
   store: service(),
   model() {
     const replicationMode = this.paramsFor('mode').replication_mode;

ui/lib/replication/addon/routes/mode/manage.js

@@ -20,7 +20,7 @@ const pathForAction = (action, replicationMode, clusterMode) => {
 };
 
 export default Route.extend({
-  router: service(),
+  router: service('app-router'),
   store: service(),
   model() {
     const store = this.store;

ui/lib/replication/addon/routes/mode/secondaries.js

@@ -9,7 +9,7 @@ import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 
 export default Route.extend({
-  router: service(),
+  router: service('app-router'),
   store: service(),
   model() {
     const replicationMode = this.paramsFor('mode').replication_mode;

ui/lib/replication/addon/routes/mode/secondaries/config-create.js

@@ -9,7 +9,7 @@ import Base from '../../replication-base';
 
 export default Base.extend({
   flashMessages: service(),
-  router: service(),
+  router: service('app-router'),
 
   modelPath: 'model.config',
 

ui/lib/replication/addon/routes/replication-base.js

@@ -9,7 +9,7 @@ import Route from '@ember/routing/route';
 import UnloadModelRouteMixin from 'vault/mixins/unload-model-route';
 
 export default Route.extend(UnloadModelRouteMixin, {
-  router: service(),
+  router: service('app-router'),
   store: service(),
   version: service(),
   rm: service('replication-mode'),

ui/lib/sync/addon/components/secrets/destination-header.ts

@@ -18,7 +18,7 @@ interface Args {
 }
 
 export default class DestinationsTabsToolbar extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
   @service declare readonly flashMessages: FlashMessageService;
 

ui/lib/sync/addon/components/secrets/page/destinations.ts

@@ -27,7 +27,7 @@ interface Args {
 }
 
 export default class SyncSecretsDestinationsPageComponent extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
   @service declare readonly flashMessages: FlashMessageService;
 

ui/lib/sync/addon/components/secrets/page/destinations/create-and-edit.ts

@@ -23,7 +23,7 @@ interface Args {
 
 export default class DestinationsCreateForm extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
 
   @tracked modelValidations: ValidationMap | null = null;

ui/lib/sync/addon/components/secrets/page/destinations/destination/secrets.ts

@@ -23,7 +23,7 @@ interface Args {
 }
 
 export default class SyncSecretsDestinationsPageComponent extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
   @service declare readonly flashMessages: FlashMessageService;
 

ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.ts

@@ -22,7 +22,7 @@ interface Args {
 }
 
 export default class DestinationSyncPageComponent extends Component<Args> {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
   @service declare readonly flashMessages: FlashMessageService;
 

ui/lib/sync/addon/components/secrets/sync-activation-modal.ts

@@ -24,7 +24,7 @@ interface Args {
 export default class SyncActivationModal extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly store: StoreService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   @tracked hasConfirmedDocs = false;
 

ui/lib/sync/addon/engine.js

@@ -14,7 +14,7 @@ export default class SyncEngine extends Engine {
   modulePrefix = modulePrefix;
   Resolver = Resolver;
   dependencies = {
-    services: ['flash-messages', 'flags', 'router', 'store', 'version'],
+    services: ['flash-messages', 'flags', 'app-router', 'store', 'version'],
     externalRoutes: ['kvSecretOverview', 'clientCountOverview'],
   };
 }

ui/lib/sync/addon/routes/index.ts

@@ -9,7 +9,7 @@ import { service } from '@ember/service';
 import type RouterService from '@ember/routing/router-service';
 
 export default class SyncIndexRoute extends Route {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   redirect() {
     this.router.transitionTo('vault.cluster.sync.secrets.overview');

ui/lib/sync/addon/routes/secrets.ts

@@ -10,7 +10,7 @@ import type RouterService from '@ember/routing/router-service';
 import type FlagService from 'vault/services/flags';
 
 export default class SyncSecretsRoute extends Route {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly flags: FlagService;
 
   model() {

ui/lib/sync/addon/routes/secrets/destinations/destination.ts

@@ -19,7 +19,7 @@ interface RouteParams {
 
 export default class SyncSecretsDestinationsDestinationRoute extends Route {
   @service declare readonly store: Store;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly flashMessages: FlashMessageService;
 
   model(params: RouteParams) {

ui/lib/sync/addon/routes/secrets/destinations/destination/index.ts

@@ -9,7 +9,7 @@ import { service } from '@ember/service';
 import type RouterService from '@ember/routing/router-service';
 
 export default class SyncSecretsDestinationsDestinationIndexRoute extends Route {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   redirect() {
     this.router.transitionTo('vault.cluster.sync.secrets.destinations.destination.details');

ui/lib/sync/addon/routes/secrets/destinations/index.ts

@@ -34,7 +34,7 @@ interface SyncSecretsDestinationsController extends Controller {
 
 export default class SyncSecretsDestinationsIndexRoute extends Route {
   @service declare readonly store: StoreService;
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
 
   queryParams = {
     page: {

ui/lib/sync/addon/routes/secrets/overview.ts

@@ -13,7 +13,7 @@ import type StoreService from 'vault/services/store';
 import type VersionService from 'vault/services/version';
 
 export default class SyncSecretsOverviewRoute extends Route {
-  @service declare readonly router: RouterService;
+  @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: StoreService;
   @service declare readonly flags: FlagsService;
   @service declare readonly version: VersionService;

ui/package.json

@@ -136,7 +136,6 @@
     "ember-qunit": "^8.0.1",
     "ember-resolver": "^11.0.1",
     "ember-responsive": "5.0.0",
-    "ember-router-helpers": "^0.4.0",
     "ember-service-worker": "meirish/ember-service-worker#configurable-scope",
     "ember-sinon-qunit": "^7.4.0",
     "ember-source": "~5.4.0",

ui/tests/integration/helpers/transition-to-test.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'vault/tests/helpers';
+import { setupEngine } from 'ember-engines/test-support';
+import { click, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import Sinon from 'sinon';
+
+module('Integration | Helper | transition-to', function (hooks) {
+  setupRenderingTest(hooks);
+  // using 'kv' here for testing, but this could be any Ember engine in the app
+  // sets this.engine, which we use to set context for the component testing service:app-router
+  setupEngine(hooks, 'kv');
+
+  hooks.beforeEach(function () {
+    this.router = this.owner.lookup('service:router');
+    this.router.reopen({
+      transitionTo: Sinon.stub(),
+      transitionToExternal: Sinon.stub(),
+    });
+  });
+
+  test('it does not call transition on render', async function (assert) {
+    await render(hbs`<button data-test-btn {{on "click" (transition-to "vault.cluster")}}>Click</button>`);
+
+    assert.true(this.router.transitionTo.notCalled, 'transitionTo not called on render');
+    assert.true(this.router.transitionToExternal.notCalled, 'transitionToExternal not called on render');
+  });
+
+  test('it calls transitionTo correctly', async function (assert) {
+    await render(
+      hbs`<button data-test-btn {{on "click" (transition-to "vault.cluster" "foobar" "baz")}}>Click</button>`
+    );
+    await click('[data-test-btn]');
+
+    assert.true(this.router.transitionTo.calledOnce, 'transitionTo called once on click');
+    assert.deepEqual(
+      this.router.transitionTo.args[0],
+      ['vault.cluster', 'foobar', 'baz'],
+      'transitionTo called with positional params'
+    );
+    assert.true(this.router.transitionToExternal.notCalled, 'transitionToExternal not called');
+  });
+
+  test('it calls transitionToExternal correctly', async function (assert) {
+    await render(
+      hbs`<button data-test-btn {{on "click" (transition-to "vault.cluster" "foobar" "baz" external=true)}}>Click</button>`
+    );
+    await click('[data-test-btn]');
+
+    assert.true(this.router.transitionToExternal.calledOnce, 'transitionToExternal called');
+    assert.deepEqual(
+      this.router.transitionToExternal.args[0],
+      ['vault.cluster', 'foobar', 'baz'],
+      'transitionToExternal called with positional params'
+    );
+    assert.true(this.router.transitionTo.notCalled, 'transitionTo not called');
+  });
+
+  // This test is confusing (and admittedly not ideal) because stubbing routers gets strange,
+  // but if you go into the TransitionTo class and console.log owner.lookup('service:router') in get router()
+  // you'll see the getter returns 'service:app-router' (because of the context setup)
+  // so although we're asserting this.router, the TransitionTo helper is using "service:app-router" under the hood.
+  // This test passing, indirectly means the helper works as expected. Failures might be something like "global failure: TypeError: this.router is undefined"
+  test('it uses service:app-router when base router undefined', async function (assert) {
+    await render(
+      hbs`<button data-test-btn {{on "click" (transition-to "vault.cluster" "foobar" "baz" external=true)}}>Click</button>`,
+      { owner: this.engine }
+    );
+    await click('[data-test-btn]');
+    assert.true(this.router.transitionToExternal.calledOnce, 'transitionToExternal called');
+  });
+});

ui/yarn.lock

@@ -7613,7 +7613,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ember-cli-babel@npm:^7.1.2, ember-cli-babel@npm:^7.1.3, ember-cli-babel@npm:^7.10.0, ember-cli-babel@npm:^7.13.0, ember-cli-babel@npm:^7.18.0, ember-cli-babel@npm:^7.20.0, ember-cli-babel@npm:^7.22.1, ember-cli-babel@npm:^7.23.0, ember-cli-babel@npm:^7.26.11, ember-cli-babel@npm:^7.26.3, ember-cli-babel@npm:^7.26.4, ember-cli-babel@npm:^7.26.5, ember-cli-babel@npm:^7.26.6, ember-cli-babel@npm:^7.26.8, ember-cli-babel@npm:^7.5.0, ember-cli-babel@npm:^7.7.3":
+"ember-cli-babel@npm:^7.1.2, ember-cli-babel@npm:^7.1.3, ember-cli-babel@npm:^7.10.0, ember-cli-babel@npm:^7.13.0, ember-cli-babel@npm:^7.18.0, ember-cli-babel@npm:^7.22.1, ember-cli-babel@npm:^7.23.0, ember-cli-babel@npm:^7.26.11, ember-cli-babel@npm:^7.26.3, ember-cli-babel@npm:^7.26.4, ember-cli-babel@npm:^7.26.5, ember-cli-babel@npm:^7.26.6, ember-cli-babel@npm:^7.26.8, ember-cli-babel@npm:^7.5.0, ember-cli-babel@npm:^7.7.3":
   version: 7.26.11
   resolution: "ember-cli-babel@npm:7.26.11"
   dependencies:
@@ -8652,15 +8652,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ember-router-helpers@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "ember-router-helpers@npm:0.4.0"
-  dependencies:
-    ember-cli-babel: ^7.20.0
-  checksum: e847ceb1061f87416d6bb5d72ef539fda738a24086051bc94d740117c6353b3406c65247ac8190b8572df008a70d9f801e224d38489170129c5ca6c4ec7f206e
-  languageName: node
-  linkType: hard
-
 "ember-service-worker@meirish/ember-service-worker#configurable-scope":
   version: 9.0.1
   resolution: "ember-service-worker@https://github.com/meirish/ember-service-worker.git#commit=dda14187aace0d73ecdb6a55beac2194a3aec01b"
@@ -18829,7 +18820,6 @@ __metadata:
     ember-qunit: ^8.0.1
     ember-resolver: ^11.0.1
     ember-responsive: 5.0.0
-    ember-router-helpers: ^0.4.0
     ember-service-worker: "meirish/ember-service-worker#configurable-scope"
     ember-sinon-qunit: ^7.4.0
     ember-source: ~5.4.0