Fix LinkTo usage and explicitly provide @route and @models arguments (#1021)

* Fix LinkTo usage and explicitly provide `@route` and `@models` arguments

* Set emberKeyboard.disableInputsInitializer to make CI pass

Author: SergeAstapov

addon/components/docs-header/search-result/index.hbs

@@ -1,12 +1,12 @@
-{{! template-lint-disable no-unknown-arguments-for-builtin-components }}
 <div {{on 'click' this.onClick}} {{on 'mouseenter' this.onMouseEnter}} data-test-search-result>
   <LinkTo
     class={{
       concat
       'docs-block docs-py-2 docs-px-3 docs-text-black docs-no-underline hover:docs-bg-grey-lighter '
       (if @selected 'docs-bg-grey-lighter')
     }}
-    @params={{this.linkArgs}}
+    @route={{this.linkArgs.route}}
+    @models={{this.linkArgs.models}}
   >
     <div class='docs-flex docs-items-center'>
       {{svg-jar

addon/components/docs-header/search-result/index.js

@@ -11,15 +11,18 @@ export default Component.extend({
     'result.document.{route,type}',
     'result.model.routingId',
     function () {
-      let args = [];
       let type = this.get('result.document.type');
       if (type === 'template') {
-        args = [this.get('result.document.route')];
+        return {
+          route: this.get('result.document.route'),
+          models: [],
+        };
       } else {
-        args = ['docs.api.item', this.get('result.model.routingId')];
+        return {
+          route: 'docs.api.item',
+          models: [this.get('result.model.routingId')],
+        };
       }
-
-      return args;
     }
   ),
 

addon/components/docs-viewer/index.js

@@ -48,7 +48,8 @@ export default class DocsViewerComponent extends Component {
   nextPage() {
     if (!formElementHasFocus()) {
       if (this.get('docsRoutes.next')) {
-        this.router.transitionTo(...this.get('docsRoutes.next.route'));
+        const { route, model } = this.get('docsRoutes.next');
+        this.router.transitionTo(route, model);
       }
     }
   }
@@ -58,7 +59,8 @@ export default class DocsViewerComponent extends Component {
   previousPage() {
     if (!formElementHasFocus()) {
       if (this.get('docsRoutes.previous')) {
-        this.router.transitionTo(...this.get('docsRoutes.previous.route'));
+        const { route, model } = this.get('docsRoutes.previous');
+        this.router.transitionTo(route, model);
       }
     }
   }

addon/components/docs-viewer/x-main/index.hbs

@@ -26,7 +26,8 @@
       <LinkTo
         class='docs-text-grey-darkest docs-text-large-4 docs-font-light docs-no-underline
         docs-border-b docs-border-grey hover:docs-border-grey-darkest docs-transition'
-        @params={{this.docsRoutes.previous.route}}
+        @route={{this.docsRoutes.previous.route}}
+        @models={{this.docsRoutes.previous.models}}
       >
         {{this.docsRoutes.previous.label}}
       </LinkTo>
@@ -41,7 +42,8 @@
       <LinkTo
         class='docs-text-grey-darkest docs-text-large-4 docs-font-light docs-no-underline
         docs-border-b docs-border-grey hover:docs-border-grey-darkest docs-transition'
-        @params={{this.docsRoutes.next.route}}
+        @route={{this.docsRoutes.next.route}}
+        @models={{this.docsRoutes.next.models}}
       >
         {{this.docsRoutes.next.label}}
       </LinkTo>

addon/services/docs-routes.js

@@ -61,11 +61,12 @@ export default Service.extend({
 
     if (currentIndex < this.get('routes.length') - 1) {
       let nextRouteIndex = currentIndex + 1;
-      let route = this.routes[nextRouteIndex];
+      let route = this.items.objectAt(nextRouteIndex);
 
       return {
-        route,
-        label: this.items.objectAt(nextRouteIndex).get('label'),
+        route: route.get('route'),
+        models: route.get('model') ? [route.get('model')] : [],
+        label: route.get('label'),
       };
     }
   }),
@@ -75,11 +76,12 @@ export default Service.extend({
 
     if (currentIndex > 0) {
       let previousRouteIndex = currentIndex - 1;
-      let route = this.routes[previousRouteIndex];
+      let route = this.items.objectAt(previousRouteIndex);
 
       return {
-        route,
-        label: this.items.objectAt(previousRouteIndex).get('label'),
+        route: route.get('route'),
+        models: route.get('model') ? [route.get('model')] : [],
+        label: route.get('label'),
       };
     }
   }),

tests/acceptance/search-test.js

@@ -1,15 +1,7 @@
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
-import {
-  click,
-  currentURL,
-  fillIn,
-  find,
-  findAll,
-  visit,
-  waitUntil,
-} from '@ember/test-helpers';
+import { click, currentURL, fillIn, visit, waitFor } from '@ember/test-helpers';
 
 module('Acceptance | Search', function (hooks) {
   setupApplicationTest(hooks);
@@ -19,29 +11,19 @@ module('Acceptance | Search', function (hooks) {
     await visit('/');
     await fillIn('[data-test-search-box-input]', 'quickstart');
 
-    await waitUntil(
-      function () {
-        return findAll('[data-test-search-result]').length > 0;
-      },
-      { timeout: 2000 }
-    );
+    await waitFor('[data-test-search-result]', { timeout: 2000 });
 
-    await click(find('[data-test-search-result] a'));
+    await click('[data-test-search-result] a');
     assert.equal(currentURL(), '/docs/quickstart');
   });
 
   test('search works for API pages', async function (assert) {
     await visit('/');
     await fillIn('[data-test-search-box-input]', 'hero');
 
-    await waitUntil(
-      function () {
-        return findAll('[data-test-search-result]').length > 0;
-      },
-      { timeout: 2000 }
-    );
+    await waitFor('[data-test-search-result]', { timeout: 2000 });
 
-    await click(find('[data-test-search-result] a'));
+    await click('[data-test-search-result] a');
     assert.equal(currentURL(), '/docs/api/components/docs-hero');
   });
 });

tests/dummy/config/environment.js

@@ -23,6 +23,9 @@ module.exports = function (environment) {
       // Here you can pass flags/options to your application instance
       // when it is created
     },
+    emberKeyboard: {
+      disableInputsInitializer: true,
+    },
   };
 
   if (environment === 'development') {