Make ProductArea badges interactive

web/app/components/doc/row.hbs

@@ -24,11 +24,9 @@
   </Hds::Table::Td>
   <Hds::Table::Td class="status">
     <Doc::State @state={{@status}} @hideProgress={{true}} /></Hds::Table::Td>
-  <Hds::Table::Td class="product"><Hds::Badge
-      @text={{this.productAreaName}}
-      @icon={{or (get-product-id @productArea) "folder"}}
-      title={{this.productAreaName}}
-    /></Hds::Table::Td>
+  <Hds::Table::Td class="product">
+    <ProductBadgeLink @productArea={{@productArea}} />
+  </Hds::Table::Td>
   <Hds::Table::Td class="owner">
     <Person @ignoreUnknown={{true}} @imgURL={{@avatar}} @email={{@owner}} />
   </Hds::Table::Td>

web/app/components/doc/row.ts

@@ -17,15 +17,7 @@ interface DocRowComponentSignature {
   };
 }
 
-export default class DocRowComponent extends Component<DocRowComponentSignature> {
-  get productAreaName() {
-    if (this.args.productArea === "Cloud Platform") {
-      return "HCP";
-    } else {
-      return this.args.productArea;
-    }
-  }
-}
+export default class DocRowComponent extends Component<DocRowComponentSignature> {}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {

web/app/components/doc/snippet.ts

@@ -3,7 +3,7 @@ import Component from "@glimmer/component";
 interface DocSnippetComponentSignature {
   Element: HTMLParagraphElement;
   Args: {
-    snippet: string;
+    snippet?: string;
   };
 }
 

web/app/components/doc/tile.hbs

@@ -1,44 +1,56 @@
-<LinkTo
-  @route="authenticated.document"
-  @model={{@docID}}
-  @query={{hash draft=@isDraft}}
-  class="flex flex-col items-start space-y-2 p-4 -m-4 rounded-md hover:bg-color-palette-neutral-50 active:bg-color-palette-neutral-100 overflow-hidden"
->
-  <div class="space-y-2">
-    <Doc::Thumbnail
-      @status={{@status}}
-      @product={{@productArea}}
-      @isLarge={{true}}
-    />
-    <Doc::State @state={{@status}} />
-  </div>
+<div class="relative group">
+  <LinkTo
+    @route="authenticated.document"
+    @model={{@docID}}
+    @query={{hash draft=@isDraft}}
+    class="pb-2 block"
+  >
+    {{!
+      We create a click area that extends beyond the edges of its relative container.
+      This makes the parent div clickable without having to wrap itself in a link,
+      and lets us nest interactive elements (e.g., ProductBadgeLink) in a way that improves the mouse experience without sacrificing accessibility.
+    }}
+    <div
+      aria-hidden="true"
+      class="absolute rounded-md group-hover:bg-color-surface-faint -top-4 -left-4 -right-4 -bottom-6"
+    ></div>
 
-  <div class="flex flex-col items-start space-y-1">
-    <h4 class="doc-tile-title">
-      {{@title}}
-    </h4>
-    {{#if (not (is-empty @docNumber))}}
-      <small class="text-body-100 text-color-foreground-faint">
-        {{@docNumber}}
-      </small>
-    {{/if}}
-  </div>
+    <div class="relative">
+      <div class="space-y-2.5 inline-block">
+        <Doc::Thumbnail
+          @status={{@status}}
+          @product={{@productArea}}
+          @isLarge={{true}}
+        />
+        <Doc::State @state={{@status}} />
+      </div>
+      <div class="mt-2 space-y-1">
+        <h4 class="doc-tile-title">
+          {{@title}}
+        </h4>
+        {{#if @docNumber}}
+          <small class="text-body-100 text-color-foreground-faint">
+            {{@docNumber}}
+          </small>
+        {{/if}}
+      </div>
+      <div class="space-y-1 mt-2 max-w-full">
+        <Person
+          @ignoreUnknown={{true}}
+          @imgURL={{@avatar}}
+          @email="{{@owner}}"
+        />
+        {{#if @modifiedAgo}}
+          <p class="text-body-100 text-color-foreground-faint">
+            {{@modifiedAgo}}
+          </p>
+        {{/if}}
+      </div>
+      {{#if (and @isResult @snippet)}}
+        <Doc::Snippet @snippet={{@snippet}} class="mt-2" />
+      {{/if}}
+    </div>
+  </LinkTo>
 
-  <div class="flex flex-col items-start space-y-1 pb-1 max-w-full">
-    <Person @ignoreUnknown={{true}} @imgURL={{@avatar}} @email={{@owner}} />
-    {{#if (not (is-empty @modifiedAgo))}}
-      <p class="text-body-100 text-color-foreground-faint">
-        {{@modifiedAgo}}
-      </p>
-    {{/if}}
-  </div>
-
-  <Hds::Badge
-    @text={{this.productAreaName}}
-    @icon={{or (get-product-id this.this.args.productArea) "folder"}}
-  />
-
-  {{#if (and @isResult @snippet)}}
-    <Doc::Snippet @snippet={{@snippet}} class="pt-2" />
-  {{/if}}
-</LinkTo>
+  <ProductBadgeLink @productArea={{@productArea}} class="relative" />
+</div>

web/app/components/doc/tile.ts

@@ -7,7 +7,8 @@ interface DocTileComponentSignature {
     docNumber?: string;
     isOwner?: boolean;
     isResult?: boolean;
-    modifiedAge?: string;
+    isDraft?: boolean;
+    modifiedAgo?: string;
     owner?: string;
     productArea?: string;
     snippet?: string;
@@ -17,16 +18,7 @@ interface DocTileComponentSignature {
   };
 }
 
-export default class DocTileComponent extends Component<DocTileComponentSignature> {
-  protected get productAreaName(): string | undefined {
-    switch (this.args.productArea) {
-      case "Cloud Platform":
-        return "HCP";
-      default:
-        return this.args.productArea;
-    }
-  }
-}
+export default class DocTileComponent extends Component<DocTileComponentSignature> {}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {

web/app/components/document/sidebar.hbs

@@ -209,10 +209,9 @@
             />
           </div>
         {{else}}
-          <Hds::Badge
+          <ProductBadgeLink
             data-test-document-product-area-read-only
-            @text={{@document.product}}
-            @icon={{get-product-id @document.product}}
+            @productArea={{@document.product}}
           />
         {{/if}}
       </div>

web/app/components/product-badge-link.hbs

@@ -0,0 +1,12 @@
+<LinkTo
+  @route={{this.route}}
+  @query={{this.query}}
+  class="product-badge-link"
+  ...attributes
+>
+  <Hds::Badge
+    @icon={{or (get-product-id this.this.args.productArea) "folder"}}
+    @text={{this.productAreaName}}
+    title={{this.productAreaName}}
+  />
+</LinkTo>

web/app/components/product-badge-link.ts

@@ -0,0 +1,60 @@
+import RouterService from "@ember/routing/router-service";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+
+interface ProductBadgeLinkComponentSignature {
+  Element: HTMLAnchorElement;
+  Args: {
+    productArea?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class ProductBadgeLinkComponent extends Component<ProductBadgeLinkComponentSignature> {
+  @service declare router: RouterService;
+
+  protected get productAreaName(): string {
+    switch (this.args.productArea) {
+      case "Cloud Platform":
+        return "HCP";
+      default:
+        return this.args.productArea || "Unknown";
+    }
+  }
+
+  protected get query() {
+    if (this.args.productArea) {
+      return {
+        product: [this.args.productArea],
+      };
+    } else {
+      return {};
+    }
+  }
+
+  protected get route() {
+    const { currentRouteName } = this.router;
+
+    if (!currentRouteName) {
+      return "authenticated.all";
+    }
+
+    if (currentRouteName.includes("drafts")) {
+      return "authenticated.drafts";
+    }
+
+    if (currentRouteName.includes("my")) {
+      return "authenticated.my";
+    }
+
+    return "authenticated.all";
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    ProductBadgeLink: typeof ProductBadgeLinkComponent;
+  }
+}

web/app/styles/app.scss

@@ -34,6 +34,7 @@
 @use "components/sidebar";
 @use "components/document/related-resources";
 @use "components/hds-badge";
+@use "components/product-badge-link";
 @use "components/header/facet-dropdown";
 @use "components/floating-u-i/content";
 @use "components/settings/subscription-list-item";

web/app/styles/components/product-badge-link.scss

@@ -0,0 +1,5 @@
+.product-badge-link {
+  &:hover .hds-badge--color-neutral {
+    @apply bg-color-palette-neutral-200;
+  }
+}

web/mirage/config.ts

@@ -397,12 +397,17 @@ export default function (mirageConfig) {
        * a list of facets and draft results.
        */
       this.get("/drafts", () => {
+        const allDocs = this.schema.document.all().models;
+        const drafts = allDocs.filter((doc) => {
+          return doc.attrs.isDraft;
+        });
+
         return new Response(
           200,
           {},
           {
             facets: [],
-            Hits: [],
+            Hits: drafts,
             params: "",
             page: 0,
           }

web/mirage/factories/document.ts

@@ -29,6 +29,7 @@ export default Factory.extend({
   modifiedAgo: 1000000000,
   modifiedTime: 1,
   appCreated: true,
+  isDraft: true,
   docNumber() {
     // @ts-ignore - Mirage types are wrong
     // See discussion at https://github.com/miragejs/miragejs/pull/525

web/tests/acceptance/authenticated/all-test.ts

@@ -1,10 +1,12 @@
 import { visit } from "@ember/test-helpers";
 import { setupApplicationTest } from "ember-qunit";
-import { module, test } from "qunit";
+import { module, test, todo } from "qunit";
 import { authenticateSession } from "ember-simple-auth/test-support";
 import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
 import { getPageTitle } from "ember-page-title/test-support";
 
+const PRODUCT_BADGE_LINK_SELECTOR = ".product-badge-link";
+
 interface AuthenticatedAllRouteTestContext extends MirageTestContext {}
 
 module("Acceptance | authenticated/all", function (hooks) {
@@ -19,4 +21,18 @@ module("Acceptance | authenticated/all", function (hooks) {
     await visit("/all");
     assert.equal(getPageTitle(), "All Docs | Hermes");
   });
+
+  test("product badges have the correct hrefs", async function (this: AuthenticatedAllRouteTestContext, assert) {
+    // Note: "Vault" is the default product area in the Mirage factory.
+
+    this.server.create("document", {
+      product: "Labs",
+    });
+
+    await visit("/all");
+
+    assert
+      .dom(PRODUCT_BADGE_LINK_SELECTOR)
+      .hasAttribute("href", "/all?product=%5B%22Labs%22%5D");
+  });
 });

web/tests/acceptance/authenticated/drafts-test.ts

@@ -1,6 +1,6 @@
 import { visit } from "@ember/test-helpers";
 import { setupApplicationTest } from "ember-qunit";
-import { module, test } from "qunit";
+import { module, test, todo } from "qunit";
 import { authenticateSession } from "ember-simple-auth/test-support";
 import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
 import { getPageTitle } from "ember-page-title/test-support";
@@ -19,4 +19,16 @@ module("Acceptance | authenticated/drafts", function (hooks) {
     await visit("/drafts");
     assert.equal(getPageTitle(), "My Drafts | Hermes");
   });
+
+  test("product badges have the correct hrefs", async function (this: AuthenticatedDraftRouteTestContext, assert) {
+    this.server.create("document", {
+      product: "Security",
+    });
+
+    await visit("/drafts");
+
+    assert
+      .dom(".product-badge-link")
+      .hasAttribute("href", "/drafts?product=%5B%22Security%22%5D");
+  });
 });

web/tests/acceptance/authenticated/my-test.ts

@@ -5,6 +5,8 @@ import { authenticateSession } from "ember-simple-auth/test-support";
 import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
 import { getPageTitle } from "ember-page-title/test-support";
 
+const PRODUCT_BADGE_LINK_SELECTOR = ".product-badge-link";
+
 interface AuthenticatedMyRouteTestContext extends MirageTestContext {}
 
 module("Acceptance | authenticated/my", function (hooks) {
@@ -19,4 +21,16 @@ module("Acceptance | authenticated/my", function (hooks) {
     await visit("/my");
     assert.equal(getPageTitle(), "My Docs | Hermes");
   });
+
+  test("product badges have the correct hrefs", async function (this: AuthenticatedMyRouteTestContext, assert) {
+    this.server.create("document", {
+      product: "Terraform",
+    });
+
+    await visit("/my");
+
+    assert
+      .dom(PRODUCT_BADGE_LINK_SELECTOR)
+      .hasAttribute("href", "/my?product=%5B%22Terraform%22%5D");
+  });
 });

web/tests/acceptance/authenticated/results-test.ts

@@ -19,4 +19,14 @@ module("Acceptance | authenticated/results", function (hooks) {
     await visit("/results");
     assert.equal(getPageTitle(), "Search Results | Hermes");
   });
+
+  test("product badges have the correct hrefs", async function (this: AuthenticatedResultsRouteTestContext, assert) {
+    this.server.createList("document", 10);
+
+    await visit("/results");
+
+    assert
+      .dom(".product-badge-link")
+      .hasAttribute("href", "/all?product=%5B%22Vault%22%5D");
+  });
 });