From a718043fa844d9a8856efd41355760f3367f2a4c Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Tue, 6 Jun 2023 20:54:17 -0400
Subject: [PATCH] Adds icon `name` and tooltip `content` fields to
 `btrix-copy-button` (#879)

- Adds two new properties, name to pick the icon's name and content to pick a custom tooltip message. These are in-line with what Shoelace uses but are perhaps not the best descriptors...
- Swaps the existing anchor links on the Workflow Details' Settings tab for these and relocates them to after the heading. (Navigation to the links is broken right now... but the copying part works nicely!)
- Updates btrix-section-heading to better handle multiple elements with flexbox and an 8px gap between elements
---
 frontend/src/components/config-details.ts  | 45 +++++++++++++---------
 frontend/src/components/copy-button.ts     | 11 ++++--
 frontend/src/components/section-heading.ts |  3 ++
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/config-details.ts b/frontend/src/components/config-details.ts
index 1b14bd37..eeb8a3f6 100644
--- a/frontend/src/components/config-details.ts
+++ b/frontend/src/components/config-details.ts
@@ -89,10 +89,12 @@ export class ConfigDetails extends LiteElement {
     return html`
       <section id="crawler-settings" class="mb-8">
         <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
-          ><h4>
-            ${this.renderAnchorLink("crawler-settings")}
+          >
+          <h4>
             ${msg("Crawler Settings")}
-          </h4></btrix-section-heading
+          </h4>
+          ${this.renderAnchorLink("crawler-settings")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${when(
@@ -165,10 +167,12 @@ export class ConfigDetails extends LiteElement {
       </section>
       <section id="browser-settings" class="mb-8">
         <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
-          ><h4>
-            ${this.renderAnchorLink("browser-settings")}
+          >
+          <h4>
             ${msg("Browser Settings")}
-          </h4></btrix-section-heading
+          </h4>
+          ${this.renderAnchorLink("browser-settings")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${this.renderSetting(
@@ -199,10 +203,12 @@ export class ConfigDetails extends LiteElement {
       </section>
       <section id="crawl-scheduling" class="mb-8">
         <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
-          ><h4>
-            ${this.renderAnchorLink("crawl-scheduling")}
+          >
+          <h4>
             ${msg("Crawl Scheduling")}
-          </h4></btrix-section-heading
+          </h4>
+          ${this.renderAnchorLink("crawl-scheduling")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${this.renderSetting(
@@ -222,10 +228,13 @@ export class ConfigDetails extends LiteElement {
         </btrix-desc-list>
       </section>
       <section id="crawl-metadata" class="mb-8">
-        <btrix-section-heading style="--margin: var(--sl-spacing-medium)">
+        <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
+          >
           <h4>
-            ${this.renderAnchorLink("crawl-metadata")}${msg("Crawl Metadata")}
-          </h4></btrix-section-heading
+            ${msg("Crawl Metadata")}
+          </h4>
+          ${this.renderAnchorLink("crawl-metadata")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${this.renderSetting(msg("Name"), crawlConfig?.name)}
@@ -341,12 +350,12 @@ export class ConfigDetails extends LiteElement {
     if (!this.anchorLinks) return;
     const currentUrl = window.location.href;
     return html`
-      <a
-        href=${`${currentUrl.replace(window.location.hash, "")}#${id}`}
-        class="text-base hover:text-primary mr-1"
-      >
-        <sl-icon name="link-45deg" class="inline-block align-middle"></sl-icon>
-      </a>
+      <btrix-copy-button 
+        style="font-size: 1rem;"
+        value=${`${currentUrl.replace(window.location.hash, "")}#${id}`}
+        name="link-45deg"
+        content=${msg("Copy Link to Section")}
+      ></btrix-copy-button>
     `;
   }
 
diff --git a/frontend/src/components/copy-button.ts b/frontend/src/components/copy-button.ts
index 8ef80d0d..2e933a51 100644
--- a/frontend/src/components/copy-button.ts
+++ b/frontend/src/components/copy-button.ts
@@ -21,6 +21,12 @@ export class CopyButton extends LitElement {
   @property({ type: String })
   value?: string;
 
+  @property({ type: String })
+  name?: string;
+
+  @property({ type: String })
+  content?: string;
+
   @property({ type: Function })
   getValue?: () => string;
 
@@ -40,10 +46,9 @@ export class CopyButton extends LitElement {
 
   render() {
     return html`
-      <sl-tooltip content=${this.isCopied ? msg("Copied to clipboard!") : msg("Copy")}>
+      <sl-tooltip content=${this.isCopied ? msg("Copied to clipboard!") : (this.content ? this.content : msg("Copy"))}>
         <sl-icon-button
-          size="small"
-          name=${this.isCopied ? "check-lg" : "files"}
+          name=${this.isCopied ? "check-lg" : (this.name ? this.name : "files")}
           label=${msg("Copy to clipboard")}
           @click=${this.onClick}
           ?disabled=${!this.value && !this.getValue}
diff --git a/frontend/src/components/section-heading.ts b/frontend/src/components/section-heading.ts
index 80c28650..b94fd434 100644
--- a/frontend/src/components/section-heading.ts
+++ b/frontend/src/components/section-heading.ts
@@ -11,6 +11,9 @@ import { LitElement, html, css } from "lit";
 export class SectionHeading extends LitElement {
   static styles = css`
     .heading {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
       font-size: var(--sl-font-size-medium);
       color: var(--sl-color-neutral-500);
       padding-top: var(--sl-spacing-x-small);