Document sidebar header refactor (tooltips, scroll border, copy butto…

…n) (hashicorp-forge#106)

* Start of padding

* Improve scrollbars

* Add min-height and increase thumb width

* Tweak padding

* Adjust FF style

* Tooltip improvements

* Tweak tooltip behavior

* Padding tweak

* CopyURLButton component and test

* Improve scrolled-header styles

* Merge styles

* Fix tests

* Mock clipboard with Sinon

* Cleanup

* Fix external link

* Add /header tests

web/app/components/copy-u-r-l-button.hbs

@@ -0,0 +1,13 @@
+<Action
+  data-test-copy-url-button
+  {{tooltip
+    (if this.urlWasRecentlyCopied "Copied!" "Copy URL")
+    placement=(or @tooltipPlacement "top")
+    stayOpenOnClick=true
+  }}
+  {{did-insert this.didInsertButton}}
+  {{on "click" (perform this.copyURL)}}
+  ...attributes
+>
+  <FlightIcon @name={{if this.urlWasRecentlyCopied "check" "link"}} />
+</Action>

web/app/components/copy-u-r-l-button.ts

@@ -0,0 +1,85 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import Ember from "ember";
+import FlashMessageService from "ember-cli-flash/services/flash-messages";
+import { restartableTask, timeout } from "ember-concurrency";
+import { inject as service } from "@ember/service";
+import { Placement } from "@floating-ui/dom";
+import { action } from "@ember/object";
+import { assert } from "@ember/debug";
+
+interface CopyURLButtonComponentSignature {
+  Element: HTMLButtonElement;
+  Args: {
+    url: string;
+    tooltipPlacement?: Placement;
+  };
+}
+
+export default class CopyURLButtonComponent extends Component<CopyURLButtonComponentSignature> {
+  @service declare flashMessages: FlashMessageService;
+
+  /**
+   * Whether the URL was recently copied to the clipboard.
+   * Used to determine if the tooltip should say "Copy URL" or "Copied."
+   * Temporarily set true when the URL is successfully copied.
+   */
+  @tracked protected urlWasRecentlyCopied = false;
+
+  /**
+   * The button element.
+   * Used to get the tooltip's ID by way of the `aria-describedby` attribute.
+   */
+  @tracked private button: HTMLElement | null = null;
+
+  /**
+   * The action called when the button is clicked.
+   * Registers the button element locally.
+   */
+  @action protected didInsertButton(e: HTMLElement) {
+    this.button = e;
+  }
+
+  /**
+   * The action called when the button is clicked.
+   * Copies the URL to the clipboard and temporarily
+   * triggers the "Copied" start of the tooltip.
+   */
+  protected copyURL = restartableTask(async () => {
+    try {
+      await navigator.clipboard.writeText(this.args.url);
+
+      if (navigator.clipboard.readText) {
+        const result = await navigator.clipboard.readText();
+        if (result === this.args.url) {
+          this.urlWasRecentlyCopied = true;
+          assert("button must exist", this.button);
+
+          let tooltipId = this.button.getAttribute("aria-describedby");
+
+          assert("tooltipId must exist", tooltipId);
+
+          document
+            .getElementById(tooltipId)
+            ?.setAttribute("data-url-copied", "true");
+
+          await timeout(Ember.testing ? 0 : 2000);
+
+          this.urlWasRecentlyCopied = false;
+
+          document
+            .getElementById(tooltipId)
+            ?.setAttribute("data-url-copied", "false");
+        }
+      }
+    } catch (e) {
+      this.flashMessages.add({
+        title: "Error copying link",
+        message: e as string,
+        type: "critical",
+        timeout: 5000,
+        extendedTimeout: 1000,
+      });
+    }
+  });
+}

web/app/components/document/index.hbs

@@ -1,12 +1,12 @@
-<div class="flex flex-1 pt-4 space-x-px max-h-screen">
+<div class="flex flex-1 space-x-px max-h-screen">
   <Document::Sidebar
     @profile={{this.authenticatedUser.info}}
     @document={{@document}}
     @deleteDraft={{this.deleteDraft}}
     @docType={{@docType}}
   />
 
-  <div class="pb-4 pr-4 w-full">
+  <div class="pt-4 pb-4 pr-4 w-full">
     <Hds::Card::Container
       @level="high"
       @hasBorder="true"