Add TooltipIcon component to Related Resources

web/app/components/document/sidebar.hbs

@@ -276,7 +276,7 @@
           @allowAddingExternalLinks={{true}}
           @headerTitle="Related resources"
           @modalHeaderTitle="Add related resource"
-          @modalInputPlaceholder="Paste a URL or search documents..."
+          @modalInputPlaceholder="Search docs or paste a URL..."
           @scrollContainer={{this.body}}
           @optionalSearchFilters={{array (concat "product:" @document.product)}}
         />

web/app/components/document/sidebar/related-resources.hbs

@@ -1,6 +1,7 @@
 <Document::Sidebar::SectionHeader
   {{did-insert (perform this.loadRelatedResources)}}
   @title={{@headerTitle}}
+  @titleTooltipText={{this.titleTooltipText}}
   @badgeText="New"
   @buttonIsHidden={{this.sectionHeaderButtonIsHidden}}
   @buttonAction={{this.showAddResourceModal}}

web/app/components/document/sidebar/related-resources.ts

@@ -159,6 +159,12 @@ export default class DocumentSidebarRelatedResourcesComponent extends Component<
     }
     return documents;
   }
+  /**
+   * The text passed to the TooltipIcon beside the title.
+   */
+  protected get titleTooltipText(): string {
+    return `Documents and links that are relevant to this work.`;
+  }
 
   /**
    * The action to update the `sortOrder` attribute of

web/app/components/document/sidebar/section-header.hbs

@@ -1,15 +1,19 @@
 <div class="sidebar-section-header-container" ...attributes>
-  <div class="inline-flex relative">
+  <div class="inline-flex items-center relative">
     <h5 class="sidebar-section-header">
       {{@title}}
     </h5>
+    {{#if @titleTooltipText}}
+      <TooltipIcon @text={{@titleTooltipText}} class="ml-1.5" />
+    {{/if}}
     {{#if @badgeText}}
       <Hds::Badge
         data-test-sidebar-section-header-badge
         @text={{@badgeText}}
         @color="highlight"
+        @type="inverted"
         @size="small"
-        class="absolute -right-2 top-1/2 -translate-y-1/2 translate-x-full"
+        class="absolute -right-1.5 top-1/2 -translate-y-1/2 translate-x-full"
       />
     {{/if}}
   </div>

web/app/components/document/sidebar/section-header.ts

@@ -6,6 +6,7 @@ interface DocumentSidebarSectionHeaderComponentSignature {
   Element: HTMLDivElement;
   Args: {
     title: string;
+    titleTooltipText?: string;
     badgeText?: string;
     buttonLabel?: string;
     buttonAction?: () => void;

web/app/components/tooltip-icon.hbs

@@ -0,0 +1,9 @@
+<span
+  data-test-tooltip-icon-trigger
+  data-test-icon={{this.icon}}
+  {{tooltip @text class="max-w-[200px]"}}
+  class="flex text-color-foreground-faint hover:text-color-foreground-primary"
+  ...attributes
+>
+  <FlightIcon @name={{this.icon}} />
+</span>

web/app/components/tooltip-icon.ts

@@ -0,0 +1,21 @@
+import Component from "@glimmer/component";
+
+interface TooltipIconComponentSignature {
+  Element: HTMLSpanElement;
+  Args: {
+    text: string;
+    icon?: string;
+  };
+}
+
+export default class TooltipIconComponent extends Component<TooltipIconComponentSignature> {
+  protected get icon(): string {
+    return this.args.icon ?? "help";
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    TooltipIcon: typeof TooltipIconComponent;
+  }
+}

web/app/modifiers/tooltip.ts

@@ -51,6 +51,7 @@ interface TooltipModifierNamedArgs {
   stayOpenOnClick?: boolean;
   delay?: number;
   openDuration?: number;
+  class?: string;
   _useTestDelay?: boolean;
 }
 
@@ -171,6 +172,11 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
    */
   @tracked stayOpenOnClick = false;
 
+  /**
+   * Optional classnames to append to the tooltip.
+   */
+  @tracked class: string | null = null;
+
   /**
    * An asserted-to-exist reference to the reference element.
    */
@@ -240,6 +246,11 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
      */
     this.tooltip = document.createElement("div");
     this.tooltip.classList.add("hermes-floating-ui-content", "hermes-tooltip");
+
+    if (this.class) {
+      this.tooltip.classList.add(this.class);
+    }
+
     this.tooltip.setAttribute("id", `tooltip-${this.id}`);
     this.tooltip.setAttribute("role", "tooltip");
 
@@ -283,7 +294,7 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
         middleware: [
           offset(8),
           flip(),
-          shift(),
+          shift({ padding: 20 }),
           arrow({
             element: this.arrow,
             padding: 10,
@@ -473,6 +484,10 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
       this.placement = named.placement;
     }
 
+    if (named.class) {
+      this.class = named.class;
+    }
+
     if (named.stayOpenOnClick) {
       this.stayOpenOnClick = named.stayOpenOnClick;
     }

web/tests/integration/components/document/sidebar/related-resources-test.ts

@@ -5,6 +5,7 @@ import {
   fillIn,
   find,
   render,
+  triggerEvent,
   waitFor,
   waitUntil,
 } from "@ember/test-helpers";
@@ -53,9 +54,12 @@ const ADD_EXTERNAL_RESOURCE_ERROR_SELECTOR =
   "[data-test-add-external-resource-error]";
 const EDIT_EXTERNAL_RESOURCE_ERROR_SELECTOR =
   "[data-test-external-resource-title-error]";
+const TOOLTIP_TRIGGER_SELECTOR = "[data-test-tooltip-icon-trigger]";
+const TOOLTIP_SELECTOR = ".hermes-tooltip";
 
 interface DocumentSidebarRelatedResourcesTestContext extends MirageTestContext {
   document: HermesDocument;
+  body: HTMLElement;
 }
 
 module(
@@ -73,6 +77,8 @@ module(
       });
 
       this.set("document", this.server.schema.document.first().attrs);
+      const bodyDiv = document.createElement("div");
+      this.set("body", bodyDiv);
     });
 
     test("it renders the related resources list", async function (this: DocumentSidebarRelatedResourcesTestContext, assert) {
@@ -98,6 +104,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -113,6 +120,13 @@ module(
         .dom(HEADER_SELECTOR)
         .hasText("Test title", "the header title is correct");
 
+      assert.dom(TOOLTIP_SELECTOR).doesNotExist();
+      assert.dom(TOOLTIP_TRIGGER_SELECTOR).exists();
+      await triggerEvent(TOOLTIP_TRIGGER_SELECTOR, "mouseenter");
+      assert
+        .dom(".hermes-tooltip")
+        .hasText("Documents and links that are relevant to this work.");
+
       assert.dom(BADGE_SELECTOR).hasText("New", "the 'new' badge is rendered'");
 
       assert
@@ -163,6 +177,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -194,6 +209,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -224,6 +240,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Test header"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -251,6 +268,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Test header"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -289,6 +307,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -325,6 +344,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -352,6 +372,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Test placeholder"
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -420,6 +441,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Test placeholder"
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -462,6 +484,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Test placeholder"
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -483,6 +506,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Test placeholder"
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -534,6 +558,7 @@ module(
             @headerTitle="Test title"
             @modalHeaderTitle="Add related resource"
             @modalInputPlaceholder="Test placeholder"
+            @scrollContainer={{this.body}}
           />
         `);
 
@@ -564,6 +589,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Test header"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -604,6 +630,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Test header"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 
@@ -679,6 +706,7 @@ module(
           @headerTitle="Test title"
           @modalHeaderTitle="Test header"
           @modalInputPlaceholder="Paste a URL or search documents..."
+          @scrollContainer={{this.body}}
         />
       `);
 

web/tests/integration/components/tooltip-icon-test.ts

@@ -0,0 +1,50 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { TestContext, render, triggerEvent } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+interface TooltipIconComponentTestContext extends TestContext {
+  icon?: string;
+}
+
+const TRIGGER_SELECTOR = "[data-test-tooltip-icon-trigger]";
+const TOOLTIP_SELECTOR = ".hermes-tooltip";
+
+module("Integration | Component | tooltip-icon", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders correctly", async function (this: TooltipIconComponentTestContext, assert) {
+    this.set("icon", undefined);
+
+    await render<TooltipIconComponentTestContext>(hbs`
+      <TooltipIcon
+        @text="This is a tooltip"
+        @icon={{this.icon}}
+        class="foo"
+      />
+    `);
+
+    assert
+      .dom(TRIGGER_SELECTOR)
+      .hasAttribute("data-test-icon", "help", "default icon shown")
+      .hasClass("foo", "splattributes handled");
+
+    assert.dom(TOOLTIP_SELECTOR).doesNotExist();
+
+    this.set("icon", "smile");
+
+    assert
+      .dom(TRIGGER_SELECTOR)
+      .hasAttribute(
+        "data-test-icon",
+        "smile",
+        "default icon can be overridden"
+      );
+
+    await triggerEvent(TRIGGER_SELECTOR, "mouseenter");
+
+    assert
+      .dom(TOOLTIP_SELECTOR)
+      .hasText("This is a tooltip", "tooltip text shown");
+  });
+});

web/tests/integration/modifiers/tooltip-test.ts

@@ -3,7 +3,6 @@ import { setupRenderingTest } from "ember-qunit";
 import { render, triggerEvent, waitUntil } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import htmlElement from "hermes/utils/html-element";
-import { wait } from "ember-animated/.";
 
 module("Integration | Modifier | tooltip", function (hooks) {
   setupRenderingTest(hooks);
@@ -139,4 +138,16 @@ module("Integration | Modifier | tooltip", function (hooks) {
 
     assert.equal(tip.getAttribute("data-tooltip-state"), "closed");
   });
+
+  test("you can pass a class to the tooltip", async function (assert) {
+    await render(hbs`
+      <div class="tip" {{tooltip "more information" class="foo"}}>
+        Hover or focus me
+      </div>
+    `);
+
+    await triggerEvent(".tip", "mouseenter");
+
+    assert.dom(".hermes-tooltip").hasClass("foo");
+  });
 });