updates link-to usages to remove deprecated patterns (#14571)

ui/app/components/secret-link.js

@@ -2,23 +2,6 @@ import { computed } from '@ember/object';
 import Component from '@ember/component';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
-export function linkParams({ mode, secret, queryParams }) {
-  let params;
-  const route = `vault.cluster.secrets.backend.${mode}`;
-
-  if ((mode !== 'versions' && !secret) || secret === ' ') {
-    params = [route + '-root'];
-  } else {
-    params = [route, encodePath(secret)];
-  }
-
-  if (queryParams) {
-    params.push(queryParams);
-  }
-
-  return params;
-}
-
 export default Component.extend({
   onLinkClick() {},
   tagName: '',
@@ -30,8 +13,16 @@ export default Component.extend({
   queryParams: null,
   ariaLabel: null,
 
-  linkParams: computed('mode', 'secret', 'queryParams', function () {
-    let data = { mode: this.mode, secret: this.secret, queryParams: this.queryParams };
-    return linkParams(data);
+  link: computed('mode', 'secret', function () {
+    const route = `vault.cluster.secrets.backend.${this.mode}`;
+    if ((this.mode !== 'versions' && !this.secret) || this.secret === ' ') {
+      return { route: `${route}-root`, models: [] };
+    } else {
+      return { route, models: [encodePath(this.secret)] };
+    }
+  }),
+  query: computed('queryParams', function () {
+    const qp = this.queryParams || {};
+    return qp.isQueryParams ? qp.values : qp;
   }),
 });

ui/app/services/permissions.js

@@ -36,12 +36,12 @@ const API_PATHS = {
 };
 
 const API_PATHS_TO_ROUTE_PARAMS = {
-  'sys/auth': ['vault.cluster.access.methods'],
-  'identity/entity/id': ['vault.cluster.access.identity', 'entities'],
-  'identity/group/id': ['vault.cluster.access.identity', 'groups'],
-  'sys/leases/lookup': ['vault.cluster.access.leases'],
-  'sys/namespaces': ['vault.cluster.access.namespaces'],
-  'sys/control-group/': ['vault.cluster.access.control-groups'],
+  'sys/auth': { route: 'vault.cluster.access.methods', models: [] },
+  'identity/entity/id': { route: 'vault.cluster.access.identity', models: ['entities'] },
+  'identity/group/id': { route: 'vault.cluster.access.identity', models: ['groups'] },
+  'sys/leases/lookup': { route: 'vault.cluster.access.leases', models: [] },
+  'sys/namespaces': { route: 'vault.cluster.access.namespaces', models: [] },
+  'sys/control-group/': { route: 'vault.cluster.access.control-groups', models: [] },
 };
 
 /*
@@ -99,7 +99,7 @@ export default Service.extend({
   navPathParams(navItem) {
     const path = Object.values(API_PATHS[navItem]).find((path) => this.hasPermission(path));
     if (['policies', 'tools'].includes(navItem)) {
-      return path.split('/').lastObject;
+      return { models: [path.split('/').lastObject] };
     }
 
     return API_PATHS_TO_ROUTE_PARAMS[path];

ui/app/templates/components/generated-item-list.hbs

@@ -23,13 +23,11 @@
       <nav class="tabs">
         <ul>
           {{#each tabs as |tab|}}
-            {{! template-lint-configure no-curly-component-invocation "warn" }}
-            {{#link-to params=tab.routeParams tagName="li" data-test-auth-section-tab=true}}
-              {{#link-to params=tab.routeParams}}
+            <li>
+              <LinkTo @route={{get tab.routeParams 0}} @model={{get tab.routeParams 1}} data-test-auth-section-tab={{true}}>
                 {{tab.label}}
-              {{/link-to}}
-            {{/link-to}}
-            {{! template-lint-configure no-curly-component-invocation "on" }}
+              </LinkTo>
+            </li>
           {{/each}}
         </ul>
       </nav>
@@ -61,14 +59,10 @@
         this.itemType
       }} will be listed here. Create your first {{this.itemType}} to get started."
     >
-      {{! template-lint-configure no-curly-component-invocation "warn" }}
-      {{! template-lint-configure no-link-to-positional-params "warn" }}
-      {{#link-to "vault.cluster.access.method.item.create" this.itemType class="link"}}
+      <LinkTo @route="vault.cluster.access.method.item.create" @model={{this.itemType}} class="link">
         Create
         {{singularize this.itemType}}
-      {{/link-to}}
-      {{! template-lint-configure no-curly-component-invocation "on" }}
-      {{! template-lint-configure no-link-to-positional-params "on" }}
+      </LinkTo>
     </list.empty>
   {{else if list.item}}
     <ListItem @linkParams={{array "vault.cluster.access.method.item.show" this.itemType list.item.id}} as |Item|>
@@ -77,20 +71,16 @@
       </Item.content>
       <Item.menu as |Menu|>
         <li class="action">
-          {{! template-lint-configure no-curly-component-invocation "warn" }}
-          {{! template-lint-configure no-link-to-positional-params "warn" }}
-          {{#link-to "vault.cluster.access.method.item.show" list.item.id class="is-block"}}
+          <LinkTo @route="vault.cluster.access.method.item.show" @model={{list.item.id}} class="is-block">
             View
             {{singularize this.itemType}}
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li class="action">
-          {{#link-to "vault.cluster.access.method.item.edit" list.item.id class="is-block"}}
+          <LinkTo @route="vault.cluster.access.method.item.edit" @model={{list.item.id}} class="is-block">
             Edit
             {{singularize this.itemType}}
-          {{/link-to}}
-          {{! template-lint-configure no-curly-component-invocation "on" }}
-          {{! template-lint-configure no-link-to-positional-params "on" }}
+          </LinkTo>
         </li>
         <li>
           <Menu.Message

ui/app/templates/components/secret-link.hbs

@@ -1,18 +1,19 @@
-{{! template-lint-configure no-curly-component-invocation "warn" }}
-{{#link-to
-  params=this.linkParams
-  class=this.class
-  data-test-secret-create=this.data-test-secret-create
-  data-test-credentials-link=this.data-test-credentials-link
-  data-test-backend-credentials=this.data-test-backend-credentials
-  data-test-edit-link=this.data-test-edit-link
-  data-test-sign-link=this.data-test-sign-link
-  data-test-transit-link=this.data-test-transit-link
-  data-test-transit-key-actions-link=this.data-test-transit-key-actions-link
-  data-test-transit-action-link=this.data-test-transit-action-link
-  data-test-version-history=this.data-test-version-history
-  data-test-version=this.data-test-version
-  invokeAction=(action this.onLinkClick)
-}}
+<LinkTo
+  @route={{this.link.route}}
+  @models={{this.link.models}}
+  @query={{this.query}}
+  class={{this.class}}
+  data-test-secret-create={{this.data-test-secret-create}}
+  data-test-credentials-link={{this.data-test-credentials-link}}
+  data-test-backend-credentials={{this.data-test-backend-credentials}}
+  data-test-edit-link={{this.data-test-edit-link}}
+  data-test-sign-link={{this.data-test-sign-link}}
+  data-test-transit-link={{this.data-test-transit-link}}
+  data-test-transit-key-actions-link={{this.data-test-transit-key-actions-link}}
+  data-test-transit-action-link={{this.data-test-transit-action-link}}
+  data-test-version-history={{this.data-test-version-history}}
+  data-test-version={{this.data-test-version}}
+  {{on "click" this.onLinkClick}}
+>
   {{yield}}
-{{/link-to}}
+</LinkTo>

ui/app/templates/components/secret-version-menu.hbs

@@ -46,7 +46,7 @@
             @mode="versions"
             @secret={{@model.id}}
             @class="has-text-black has-text-weight-semibold has-bottom-shadow"
-            @onLinkClick={{action D.actions.close}}
+            @onLinkClick={{D.actions.close}}
           >
             View version history
           </SecretLink>

ui/app/templates/components/section-tabs.hbs

@@ -4,13 +4,11 @@
       <nav class="tabs">
         <ul>
           {{#each tabs as |tab|}}
-            {{! template-lint-configure no-curly-component-invocation "warn" }}
-            {{#link-to params=tab.routeParams tagName="li" data-test-auth-section-tab=true}}
-              {{#link-to params=tab.routeParams}}
+            <li>
+              <LinkTo @route={{get tab.routeParams 0}} @model={{get tab.routeParams 1}} data-test-auth-section-tab={{true}}>
                 {{tab.label}}
-              {{/link-to}}
-            {{/link-to}}
-            {{! template-lint-configure no-curly-component-invocation "on" }}
+              </LinkTo>
+            </li>
           {{/each}}
         </ul>
       </nav>

ui/app/templates/vault/cluster.hbs

@@ -13,51 +13,52 @@
           </li>
         {{/if}}
         <li class={{if (is-active-route "vault.cluster.secrets") "is-active"}}>
-          {{! template-lint-configure no-curly-component-invocation "warn" }}
-          {{! template-lint-configure no-link-to-positional-params "warn" }}
-          {{#link-to
-            "vault.cluster.secrets"
-            current-when="vault.cluster.secrets vault.cluster.settings.mount-secret-backend vault.cluster.settings.configure-secret-backend"
-            invokeAction=(action Nav.closeDrawer)
+          <LinkTo
+            @route="vault.cluster.secrets"
+            @current-when="vault.cluster.secrets vault.cluster.settings.mount-secret-backend vault.cluster.settings.configure-secret-backend"
+            {{on "click" Nav.closeDrawer}}
             data-test-navbar-item="secrets"
-          }}
+          >
             Secrets
-          {{/link-to}}
+          </LinkTo>
         </li>
         {{#if (has-permission "access")}}
           <li class={{if (is-active-route "vault.cluster.access") "is-active"}}>
-            {{#link-to
-              params=(route-params-for "access")
-              current-when="vault.cluster.access vault.cluster.settings.auth"
-              invokeAction=(action Nav.closeDrawer)
+            <LinkTo
+              @route={{get (route-params-for "access") "route"}}
+              @models={{get (route-params-for "access") "models"}}
+              @current-when="vault.cluster.access vault.cluster.settings.auth"
+              {{on "click" Nav.closeDrawer}}
               data-test-navbar-item="access"
-            }}
+            >
               Access
-            {{/link-to}}
+            </LinkTo>
           </li>
         {{/if}}
         {{#if (has-permission "policies")}}
           <li class={{if (is-active-route (array "vault.cluster.policies" "vault.cluster.policy")) "is-active"}}>
-            {{#link-to
-              "vault.cluster.policies"
-              (route-params-for "policies")
-              current-when="vault.cluster.policies vault.cluster.policy"
-              invokeAction=(action Nav.closeDrawer)
+            <LinkTo
+              @route="vault.cluster.policies"
+              @models={{get (route-params-for "policies") "models"}}
+              @current-when="vault.cluster.policies vault.cluster.policy"
+              {{on "click" Nav.closeDrawer}}
               data-test-navbar-item="policies"
-            }}
+            >
               Policies
-            {{/link-to}}
+            </LinkTo>
           </li>
         {{/if}}
         {{#if (has-permission "tools")}}
           <li class={{if (is-active-route "vault.cluster.tools") "is-active"}}>
-            {{#link-to "vault.cluster.tools.tool" (route-params-for "tools") invokeAction=(action Nav.closeDrawer)}}
+            <LinkTo
+              @route="vault.cluster.tools.tool"
+              @models={{get (route-params-for "tools") "models"}}
+              {{on "click" Nav.closeDrawer}}
+            >
               Tools
-            {{/link-to}}
+            </LinkTo>
           </li>
         {{/if}}
-        {{! template-lint-configure no-curly-component-invocation "on" }}
-        {{! template-lint-configure no-link-to-positional-params "on" }}
       </ul>
     </Nav.main>
     <Nav.items>
@@ -73,17 +74,13 @@
       )}}
         <div class="navbar-sections">
           <div class={{if (is-active-route "vault.cluster.clients") "is-active"}}>
-            {{! template-lint-configure no-curly-component-invocation "warn" }}
-            {{! template-lint-configure no-link-to-positional-params "warn" }}
-            {{#link-to
-              "vault.cluster.clients.history"
-              current-when="vault.cluster.clients.history"
+            <LinkTo
+              @route="vault.cluster.clients.history"
+              @current-when="vault.cluster.clients.history"
               data-test-navbar-item="metrics"
-            }}
+            >
               Client count
-            {{/link-to}}
-            {{! template-lint-configure no-curly-component-invocation "on" }}
-            {{! template-lint-configure no-link-to-positional-params "on" }}
+            </LinkTo>
           </div>
         </div>
       {{/if}}

ui/app/templates/vault/cluster/access/leases/list.hbs

@@ -105,6 +105,6 @@
     @page={{this.model.meta.currentPage}}
     @lastPage={{this.model.meta.lastPage}}
     @link={{concat "vault.cluster.access.leases.list" (unless this.baseKey.id "-root")}}
-    @model={{compact (array (if this.baseKey.id this.baseKey.id))}}
+    @models={{compact (array (if this.baseKey.id this.baseKey.id))}}
   />
 {{/if}}

ui/app/templates/vault/cluster/secrets/backend/error.hbs

@@ -3,16 +3,10 @@
     <p.top>
       <nav class="breadcrumb">
         <li>
-          {{! template-lint-configure no-curly-component-invocation "warn" }}
-          {{! template-lint-configure no-link-to-positional-params "warn" }}
-          {{#link-to
-            params=(if this.model.backend (array "vault.cluster.secrets.backend.list-root") (array "vault.cluster.secrets"))
-          }}
+          <LinkTo @route={{if this.model.backend "vault.cluster.secrets.backend.list-root" "vault.cluster.secrets"}}>
             <span class="sep">&#x0002f;</span>
             {{if this.model.backend this.model.backend "secrets"}}
-          {{/link-to}}
-          {{! template-lint-configure no-curly-component-invocation "on" }}
-          {{! template-lint-configure no-link-to-positional-params "on" }}
+          </LinkTo>
         </li>
       </nav>
     </p.top>
@@ -33,16 +27,10 @@
       <p data-test-secret-not-found>
         Unable to find secret at
         <code>{{concat this.model.backend "/" this.model.secret}}</code>. Try going back to the
-        {{! template-lint-configure no-curly-component-invocation "warn" }}
-        {{! template-lint-configure no-link-to-positional-params "warn" }}
-        {{#link-to
-          params=(if this.model.backend (array "vault.cluster.secrets.backend.list-root") (array "vault.cluster.secrets"))
-        }}
+        <LinkTo @route={{if this.model.backend "vault.cluster.secrets.backend.list-root" "vault.cluster.secrets"}}>
           root
-        {{/link-to}}
+        </LinkTo>
         and navigating from there.
-        {{! template-lint-configure no-curly-component-invocation "on" }}
-        {{! template-lint-configure no-link-to-positional-params "on" }}
       </p>
     {{else if (eq this.model.httpStatus 403)}}
       {{#if (eq this.model.policyPath "sys/capabilities-self")}}

ui/app/templates/vault/cluster/secrets/backend/list.hbs

@@ -124,7 +124,7 @@
           @page={{this.model.meta.currentPage}}
           @lastPage={{this.model.meta.lastPage}}
           @link={{concat "vault.cluster.secrets.backend.list" (unless this.baseKey.id "-root")}}
-          @model={{compact (array this.backend (if this.baseKey.id this.baseKey.id))}}
+          @models={{compact (array this.backend (if this.baseKey.id this.baseKey.id))}}
         />
       {{/if}}
     {{else}}

ui/lib/core/addon/components/form-save-buttons.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import layout from '../templates/components/form-save-buttons';
 
 /**
@@ -23,4 +24,10 @@ import layout from '../templates/components/form-save-buttons';
 export default Component.extend({
   layout,
   tagName: '',
+
+  cancelLink: computed('cancelLinkParams.[]', function () {
+    if (!Array.isArray(this.cancelLinkParams) || !this.cancelLinkParams.length) return;
+    const [route, ...models] = this.cancelLinkParams;
+    return { route, models };
+  }),
 });

ui/lib/core/addon/components/list-item.js

@@ -1,6 +1,7 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { task } from 'ember-concurrency';
+import { computed } from '@ember/object';
 import layout from '../templates/components/list-item';
 
 export default Component.extend({
@@ -24,4 +25,9 @@ export default Component.extend({
       model.rollbackAttributes();
     }
   }),
+  link: computed('linkParams.[]', function () {
+    if (!Array.isArray(this.linkParams) || !this.linkParams.length) return {};
+    const [route, ...models] = this.linkParams;
+    return { route, models };
+  }),
 });

ui/lib/core/addon/components/list-pagination.js

@@ -2,6 +2,7 @@ import { gt } from '@ember/object/computed';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { range } from 'ember-composable-helpers/helpers/range';
+import { A } from '@ember/array';
 import layout from '../templates/components/list-pagination';
 
 export default Component.extend({
@@ -10,7 +11,7 @@ export default Component.extend({
   page: null,
   lastPage: null,
   link: null,
-  model: null,
+  models: A(),
   // number of links to show on each side of page
   spread: 2,
   hasNext: computed('page', 'lastPage', function () {

ui/lib/core/addon/templates/components/form-save-buttons.hbs

@@ -10,13 +10,11 @@
         {{or @saveButtonText "Save"}}
       </button>
     </div>
-    {{#if @cancelLinkParams}}
+    {{#if this.cancelLink}}
       <div class="control">
-        {{! refactor to use @route and @model args and convert to angle brackets }}
-        {{! template-lint-configure no-curly-component-invocation "warn" }}
-        {{#link-to params=@cancelLinkParams class="button"}}
+        <LinkTo @route={{this.cancelLink.route}} @models={{this.cancelLink.models}} class="button">
           {{or @cancelButtonText "Cancel"}}
-        {{/link-to}}
+        </LinkTo>
       </div>
     {{/if}}
     {{#if @onCancel}}

ui/lib/core/addon/templates/components/list-item.hbs

@@ -10,14 +10,13 @@
   >
     <div class="level is-mobile">
       <div class="level-left is-flex-1" data-test-list-item-content>
-        {{! refactor to use @route and @model args and convert to angle brackets }}
-        {{! template-lint-configure no-curly-component-invocation "warn" }}
-        {{#link-to
-          params=this.linkParams
+        <LinkTo
+          @route={{this.link.route}}
+          @models={{this.link.models}}
           class="has-text-weight-semibold has-text-black is-display-flex is-flex-1 is-no-underline"
-        }}
+        >
           {{yield (hash content=(component "list-item/content"))}}
-        {{/link-to}}
+        </LinkTo>
       </div>
       <div class="level-right">
         <div class="level-item" data-test-list-item-popup>

ui/lib/core/addon/templates/components/list-pagination.hbs

@@ -1,86 +1,89 @@
-{{! warn is not working! }}
-{{! template-lint-disable no-curly-component-invocation }}
-{{#with (compact (flatten (array this.link this.model))) as |params|}}
-  <nav class="pagination is-centered" aria-label="pagination">
-    {{#if this.hasPrevious}}
-
-      {{#link-to params=(append params (query-params page=(dec this.page))) class="pagination-previous"}}
-        <Chevron @direction="left" />
-        <span class="pagination-previous-label">
-          Previous
-        </span>
-      {{/link-to}}
-    {{else}}
-      <button type="button" disabled={{true}} class="pagination-previous is-invisible" aria-hidden={{true}}>
-        <Chevron @direction="left" />
-        <span class="pagination-previous-label">
-          Previous
-        </span>
-      </button>
-    {{/if}}
-    {{#if this.hasNext}}
-      {{#link-to params=(append params (query-params page=(inc this.page))) class="pagination-next"}}
-        <span class="pagination-next-label">
-          Next
-        </span>
-        <Chevron />
-      {{/link-to}}
-    {{else}}
-      <button type="button" disabled={{true}} class="pagination-next is-invisible" aria-hidden={{true}}>
-        <span class="pagination-next-label">
-          Next
-        </span>
-        <Chevron />
-      </button>
-    {{/if}}
-    {{#if this.segmentLinks}}
-      <ul class="pagination-list">
+<nav class="pagination is-centered" aria-label="pagination">
+  {{#if this.hasPrevious}}
+    <LinkTo @route={{this.link}} @models={{this.models}} @query={{hash page=(dec this.page)}} class="pagination-previous">
+      <Chevron @direction="left" />
+      <span class="pagination-previous-label">
+        Previous
+      </span>
+    </LinkTo>
+  {{else}}
+    <button type="button" disabled={{true}} class="pagination-previous is-invisible" aria-hidden={{true}}>
+      <Chevron @direction="left" />
+      <span class="pagination-previous-label">
+        Previous
+      </span>
+    </button>
+  {{/if}}
+  {{#if this.hasNext}}
+    <LinkTo @route={{this.link}} @models={{this.models}} @query={{hash page=(inc this.page)}} class="pagination-next">
+      <span class="pagination-next-label">
+        Next
+      </span>
+      <Chevron />
+    </LinkTo>
+  {{else}}
+    <button type="button" disabled={{true}} class="pagination-next is-invisible" aria-hidden={{true}}>
+      <span class="pagination-next-label">
+        Next
+      </span>
+      <Chevron />
+    </button>
+  {{/if}}
+  {{#if this.segmentLinks}}
+    <ul class="pagination-list">
+      <li>
+        <LinkTo
+          @route={{this.link}}
+          @models={{this.models}}
+          @query={{hash page=1}}
+          class={{concat (if (eq this.page 1) "is-current ") "pagination-link"}}
+          aria-label="Go to page 1"
+        >
+          1
+        </LinkTo>
+      </li>
+      <li><span class="pagination-ellipsis">&hellip;</span></li>
+      {{#each this.pageRange as |p|}}
         <li>
-          {{#link-to
-            params=(append params (query-params page=1))
-            class=(concat (if (eq this.page 1) "is-current ") "pagination-link")
-            aria-label=(concat "Go to page " 1)
-          }}
-            1
-          {{/link-to}}
+          <LinkTo
+            @route={{this.link}}
+            @models={{this.models}}
+            @query={{hash page=p}}
+            class={{concat (if (eq this.page 1) "is-current ") "pagination-link"}}
+            aria-label={{concat "Go to page " p}}
+          >
+            {{p}}
+          </LinkTo>
         </li>
-        <li><span class="pagination-ellipsis">&hellip;</span></li>
-        {{#each this.pageRange as |p|}}
-          <li>
-            {{#link-to
-              params=(append params (query-params page=p))
-              class=(concat (if (eq this.page p) "is-current ") "pagination-link")
-              aria-label=(concat "Go to page " p)
-            }}
-              {{p}}
-            {{/link-to}}
-          </li>
-        {{/each}}
-        <li><span class="pagination-ellipsis">&hellip;</span></li>
+      {{/each}}
+      <li><span class="pagination-ellipsis">&hellip;</span></li>
+      <li>
+        <LinkTo
+          @route={{this.link}}
+          @models={{this.models}}
+          @query={{hash page=this.lastPage}}
+          class={{concat (if (eq this.page this.lastPage) "is-current ") "pagination-link"}}
+          aria-label={{concat "Go to page " this.lastPage}}
+        >
+          {{this.lastPage}}
+        </LinkTo>
+      </li>
+    </ul>
+  {{else}}
+    <ul class="pagination-list">
+      {{#each this.pageRange as |p|}}
         <li>
-          {{#link-to
-            params=(append params (query-params page=this.lastPage))
-            class=(concat (if (eq this.page this.lastPage) "is-current ") "pagination-link")
-            aria-label=(concat "Go to page " this.lastPage)
-          }}
-            {{this.lastPage}}
-          {{/link-to}}
+          <LinkTo
+            @route={{this.link}}
+            @models={{this.models}}
+            @query={{hash page=p}}
+            class={{concat (if (eq this.page p) "is-current ") "pagination-link"}}
+            aria-label={{concat "Go to page " p}}
+          >
+            {{p}}
+          </LinkTo>
         </li>
-      </ul>
-    {{else}}
-      <ul class="pagination-list">
-        {{#each this.pageRange as |p|}}
-          <li>
-            {{#link-to
-              params=(append params (query-params page=p))
-              class=(concat (if (eq this.page p) "is-current ") "pagination-link")
-              aria-label=(concat "Go to page " p)
-            }}
-              {{p}}
-            {{/link-to}}
-          </li>
-        {{/each}}
-      </ul>
-    {{/if}}
-  </nav>
-{{/with}}
+      {{/each}}
+    </ul>
+  {{/if}}
+</nav>

ui/lib/kmip/addon/components/edit-form-kmip-role.js

@@ -1,10 +1,17 @@
 import EditForm from 'core/components/edit-form';
+import { computed } from '@ember/object';
 import layout from '../templates/components/edit-form-kmip-role';
 
 export default EditForm.extend({
   layout,
   model: null,
 
+  cancelLink: computed('cancelLinkParams.[]', function () {
+    if (!Array.isArray(this.cancelLinkParams) || !this.cancelLinkParams.length) return;
+    const [route, ...models] = this.cancelLinkParams;
+    return { route, models };
+  }),
+
   init() {
     this._super(...arguments);
 

ui/lib/kmip/addon/templates/components/edit-form-kmip-role.hbs

@@ -90,13 +90,16 @@
           {{this.saveButtonText}}
         </button>
       </div>
-      {{#if this.cancelLinkParams}}
+      {{#if this.cancelLink}}
         <div class="control">
-          {{! refactor to use @route and @model args and convert to angle brackets }}
-          {{! template-lint-configure no-curly-component-invocation "warn" }}
-          {{#link-to params=this.cancelLinkParams class="button" data-test-edit-form-cancel="true"}}
+          <LinkTo
+            @route={{this.cancelLink.route}}
+            @models={{this.cancelLink.models}}
+            class="button"
+            data-test-edit-form-cancel={{true}}
+          >
             Cancel
-          {{/link-to}}
+          </LinkTo>
         </div>
       {{/if}}
     </div>

ui/tests/unit/services/permissions-test.js

@@ -139,7 +139,7 @@ module('Unit | Service | permissions', function (hooks) {
       },
     };
     service.set('exactPaths', policyPaths);
-    assert.equal(service.navPathParams('policies'), 'rgp');
+    assert.equal(service.navPathParams('policies').models[0], 'rgp');
   });
 
   test('returns the first allowed nav route for access', function (assert) {
@@ -152,7 +152,7 @@ module('Unit | Service | permissions', function (hooks) {
         capabilities: ['read'],
       },
     };
-    const expected = ['vault.cluster.access.identity', 'entities'];
+    const expected = { route: 'vault.cluster.access.identity', models: ['entities'] };
     service.set('exactPaths', accessPaths);
     assert.deepEqual(service.navPathParams('access'), expected);
   });