feat(linked-item): add option to link to index route of passed href

adfinis · Feb 2, 2022 · 450e24f · 450e24f
1 parent 917c1d1
commit 450e24f
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 23 deletions.
diff --git a/addon/components/-private/linked-list-item.js b/addon/components/-private/linked-list-item.js
@@ -63,7 +63,9 @@ export default class LinkedListItemComponent extends Component {
     if (!routeInfo) return null;
 
     return {
-      name: routeInfo.name.replace(/\.index$/, ""),
+      name: this.args.linkToIndex
+        ? routeInfo.name
+        : routeInfo.name.replace(/\.index$/, ""),
       args: [
         ...getParams(routeInfo),
         ...(Object.keys(routeInfo.queryParams)

diff --git a/tests/dummy/app/controllers/docs/components/subnav.js b/tests/dummy/app/controllers/docs/components/subnav.js
@@ -14,6 +14,7 @@ export default class DocsComponentsSubnavController extends Controller {
   @tracked itemDisabled = false;
   @tracked linkItemDisabled = false;
   @tracked href = this.router.currentURL;
+  @tracked linkToIndex = false;
 
   get availableRoutes() {
     // eslint-disable-next-line ember/no-private-routing-service
@@ -24,17 +25,14 @@ export default class DocsComponentsSubnavController extends Controller {
           !name.endsWith("loading") &&
           ![
             "application",
-            "docs",
             "docs.index",
-            "docs.components",
             "docs.components.index",
-            "docs.utilities",
             "docs.utilities.index",
-            "docs.services",
             "docs.services.index",
           ].includes(name)
       )
-      .map((name) => this.router.urlFor(name));
+      .map((name) => this.router.urlFor(name))
+      .sort();
   }
 
   @task

diff --git a/tests/dummy/app/controllers/docs/components/tab.js b/tests/dummy/app/controllers/docs/components/tab.js
@@ -12,6 +12,7 @@ export default class DocsComponentsTabController extends Controller {
   @tracked itemDisabled = false;
   @tracked linkItemDisabled = false;
   @tracked href = this.router.currentURL;
+  @tracked linkToIndex = false;
 
   get availableRoutes() {
     // eslint-disable-next-line ember/no-private-routing-service
@@ -22,17 +23,14 @@ export default class DocsComponentsTabController extends Controller {
           !name.endsWith("loading") &&
           ![
             "application",
-            "docs",
             "docs.index",
-            "docs.components",
             "docs.components.index",
-            "docs.utilities",
             "docs.utilities.index",
-            "docs.services",
             "docs.services.index",
           ].includes(name)
       )
-      .map((name) => this.router.urlFor(name));
+      .map((name) => this.router.urlFor(name))
+      .sort();
   }
 
   @task

diff --git a/tests/dummy/app/routes/docs/components/index.js b/tests/dummy/app/routes/docs/components/index.js
@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class DocsComponentsIndexRoute extends Route {
+  redirect() {
+    this.replaceWith("docs.components.badge");
+  }
+}
diff --git a/tests/dummy/app/routes/docs/services/index.js b/tests/dummy/app/routes/docs/services/index.js
@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class DocsServicesIndexRoute extends Route {
+  redirect() {
+    this.replaceWith("docs.services.notification");
+  }
+}
diff --git a/tests/dummy/app/routes/docs/utilities/index.js b/tests/dummy/app/routes/docs/utilities/index.js
@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class DocsUtilitiesIndexRoute extends Route {
+  redirect() {
+    this.replaceWith("docs.utilities.flex");
+  }
+}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -5,7 +5,7 @@
         <li><LinkTo @route="index">Introduction</LinkTo></li>
         <li class="uk-nav-divider"></li>
         <li class="uk-parent">
-          <a href="" class="uk-disabled">Components</a>
+          <LinkTo @route="docs.components">Components</LinkTo>
           <ul class="uk-nav-sub">
             <li><LinkTo @route="docs.components.badge">Badge</LinkTo></li>
             <li><LinkTo @route="docs.components.button">Button</LinkTo></li>
@@ -24,15 +24,7 @@
         </li>
         <li class="uk-nav-divider"></li>
         <li class="uk-parent">
-          <a href="" class="uk-disabled">Utilities</a>
-          <ul class="uk-nav-sub">
-            <li><LinkTo @route="docs.utilities.flex">Flex</LinkTo></li>
-            <li><LinkTo @route="docs.utilities.width">Width</LinkTo></li>
-          </ul>
-        </li>
-        <li class="uk-nav-divider"></li>
-        <li class="uk-parent">
-          <a href="" class="uk-disabled">Services</a>
+          <LinkTo @route="docs.services">Services</LinkTo>
           <ul class="uk-nav-sub">
             <li>
               <LinkTo @route="docs.services.notification">
@@ -41,6 +33,14 @@
             </li>
           </ul>
         </li>
+        <li class="uk-nav-divider"></li>
+        <li class="uk-parent">
+          <LinkTo @route="docs.utilities">Utilities</LinkTo>
+          <ul class="uk-nav-sub">
+            <li><LinkTo @route="docs.utilities.flex">Flex</LinkTo></li>
+            <li><LinkTo @route="docs.utilities.width">Width</LinkTo></li>
+          </ul>
+        </li>
       </ul>
     </div>
     <div class="uk-width-1-1 uk-width-3-4@m">

diff --git a/tests/dummy/app/templates/docs/components/subnav.hbs b/tests/dummy/app/templates/docs/components/subnav.hbs
@@ -20,7 +20,11 @@
     >
       Item
     </nav.item>
-    <nav.item @href={{this.href}} @disabled={{this.linkItemDisabled}}>
+    <nav.item
+      @href={{this.href}}
+      @disabled={{this.linkItemDisabled}}
+      @linkToIndex={{this.linkToIndex}}
+    >
       Link Item
     </nav.item>
   </UkSubnav>
@@ -151,6 +155,26 @@
                 />
               </td>
             </tr>
+            <tr>
+              <td><code>linkToIndex</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>
+                Whether to link to the index route of the passed
+                <code>href</code>
+                or not. If
+                <code>true</code>
+                the item will only be active if the index route is active.
+                Otherwise it will be active for subroutes as well.
+              </td>
+              <td>
+                <Input
+                  @type="checkbox"
+                  class="uk-checkbox"
+                  @checked={{this.linkToIndex}}
+                />
+              </td>
+            </tr>
             <tr>
               <td><code>onClick</code></td>
               <td></td>

diff --git a/tests/dummy/app/templates/docs/components/tab.hbs b/tests/dummy/app/templates/docs/components/tab.hbs
@@ -25,7 +25,11 @@
     >
       Item
     </tab.item>
-    <tab.item @href={{this.href}} @disabled={{this.linkItemDisabled}}>
+    <tab.item
+      @href={{this.href}}
+      @disabled={{this.linkItemDisabled}}
+      @linkToIndex={{this.linkToIndex}}
+    >
       Link Item
     </tab.item>
   </UkTab>
@@ -169,6 +173,26 @@
                 />
               </td>
             </tr>
+            <tr>
+              <td><code>linkToIndex</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>
+                Whether to link to the index route of the passed
+                <code>href</code>
+                or not. If
+                <code>true</code>
+                the item will only be active if the index route is active.
+                Otherwise it will be active for subroutes as well.
+              </td>
+              <td>
+                <Input
+                  @type="checkbox"
+                  class="uk-checkbox"
+                  @checked={{this.linkToIndex}}
+                />
+              </td>
+            </tr>
             <tr>
               <td><code>onClick</code></td>
               <td></td>

diff --git a/tests/integration/components/uk-subnav/item-test.js b/tests/integration/components/uk-subnav/item-test.js
@@ -73,4 +73,28 @@ module("Integration | Component | uk subnav/item", function (hooks) {
 
     assert.dom("a").hasText("active");
   });
+
+  test("respects linkToIndex", async function (assert) {
+    assert.expect(2);
+
+    this.linkToIndex = false;
+
+    this.owner.lookup("service:router").recognize = () => ({
+      name: "foo.index",
+      params: {},
+      paramNames: [],
+      parent: null,
+      queryParams: {},
+    });
+
+    this.owner.lookup("service:router").isActive = (routeName) => {
+      assert.strictEqual(routeName, this.linkToIndex ? "foo.index" : "foo");
+    };
+
+    await render(
+      hbs`<UkSubnav::Item @href="/foo" @linkToIndex={{this.linkToIndex}}>Test</UkSubnav::Item>`
+    );
+
+    this.set("linkToIndex", true);
+  });
 });
diff --git a/tests/integration/components/uk-tab/item-test.js b/tests/integration/components/uk-tab/item-test.js
@@ -70,4 +70,28 @@ module("Integration | Component | uk tab/item", function (hooks) {
 
     assert.dom("a").hasText("active");
   });
+
+  test("respects linkToIndex", async function (assert) {
+    assert.expect(2);
+
+    this.linkToIndex = false;
+
+    this.owner.lookup("service:router").recognize = () => ({
+      name: "foo.index",
+      params: {},
+      paramNames: [],
+      parent: null,
+      queryParams: {},
+    });
+
+    this.owner.lookup("service:router").isActive = (routeName) => {
+      assert.strictEqual(routeName, this.linkToIndex ? "foo.index" : "foo");
+    };
+
+    await render(
+      hbs`<UkTab::Item @href="/foo" @linkToIndex={{this.linkToIndex}}>Test</UkTab::Item>`
+    );
+
+    this.set("linkToIndex", true);
+  });
 });