ExternalResource: New icon and URL (#303)

* ExternalResource: New icon and URL * Update code comments
hashicorp-forge · Aug 23, 2023 · 977612f · 977612f
1 parent b82acac
commit 977612f
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 54 deletions.
diff --git a/web/app/components/document/sidebar/related-resources/list-item.hbs b/web/app/components/document/sidebar/related-resources/list-item.hbs
@@ -21,7 +21,7 @@
       <ExternalLink
         data-test-item-type="external-resource"
         href={{this.externalResourceURL}}
-        class="related-resource-link peer items-center"
+        class="related-resource-link peer"
       >
         <Document::Sidebar::RelatedResources::ListItem::Resource
           @resource={{@resource}}

diff --git a/web/app/components/document/sidebar/related-resources/list-item/resource.hbs b/web/app/components/document/sidebar/related-resources/list-item/resource.hbs
@@ -1,4 +1,4 @@
-<div class="flex w-[22px] shrink-0">
+<div class="mt-[3px] flex w-[22px] shrink-0">
   {{#if this.resourceIsDocument}}
     <div
       class="hds-surface-mid mt-[3px] flex overflow-hidden rounded-sm bg-white p-px"
@@ -8,24 +8,34 @@
   {{else}}
     <FlightIcon
       @name={{get-link-icon this.url}}
-      class={{if (eq (get-link-icon this.url) "file") "opacity-40"}}
+      class={{if (eq (get-link-icon this.url) "globe") "opacity-40"}}
     />
   {{/if}}
 </div>
 
 <div class="w-full overflow-hidden">
   <TruncatedText
+    data-test-resource-title
     @tagName="h4"
     class="text-body-200 font-medium text-color-foreground-strong"
     title={{this.title}}
   >
     {{this.title}}
   </TruncatedText>
-  {{#if this.resourceIsDocument}}
-    <div class="mt-px text-body-100 text-color-foreground-faint">
-      {{this.docType}}
-      ·
-      {{this.docNumber}}
-    </div>
-  {{/if}}
+  <div class="pr-6">
+    <TruncatedText
+      data-test-resource-secondary-text
+      class="mt-px text-body-100 text-color-foreground-faint"
+    >
+      {{#if this.resourceIsDocument}}
+        {{#if this.docType}}
+          {{this.docType}}
+          ·
+        {{/if}}
+        {{this.docNumber}}
+      {{else}}
+        {{this.displayURL}}
+      {{/if}}
+    </TruncatedText>
+  </div>
 </div>
diff --git a/web/app/components/document/sidebar/related-resources/list-item/resource.ts b/web/app/components/document/sidebar/related-resources/list-item/resource.ts
@@ -49,12 +49,22 @@ export default class DocumentSidebarRelatedResourcesListItemResourceComponent ex
   }
 
   /**
-   * The URL of a definitely ExternalResource
+   * The full URL of an ExternalResource
    */
-  protected get url() {
+  private get url() {
     assert("url must exist in the resource", "url" in this.args.resource);
     return this.args.resource.url;
   }
+  /**
+   * The url to display in the ResourceList.
+   * Strips the protocol, "www" and path.
+   */
+  protected get displayURL() {
+    return this.url
+      .replace(/(^\w+:|^)\/\//, "")
+      .replace("www.", "")
+      .split("/")[0];
+  }
 
   /**
    * A method that asserts that a given resource is a Hermes Document.

diff --git a/web/app/helpers/get-link-icon.ts b/web/app/helpers/get-link-icon.ts
@@ -42,7 +42,7 @@ const getLinkIconHelper = helper<GetLinkIconSignature>(([url]) => {
       }
     }
   }
-  return "file";
+  return "globe";
 });
 
 export default getLinkIconHelper;

diff --git a/web/app/styles/components/document/related-resources.scss b/web/app/styles/components/document/related-resources.scss
@@ -1,8 +1,8 @@
 .related-resources-list {
-  @apply w-full mt-0.5;
+  @apply mt-0.5 w-full;
 
   .related-resource-inner {
-    @apply w-full relative;
+    @apply relative w-full;
 
     &:hover,
     &:focus-within {
@@ -13,61 +13,61 @@
   }
 
   .related-resource {
-    @apply flex w-full relative;
+    @apply relative flex w-full;
 
     .highlight-affordance {
-      @apply absolute top-0 left-0 w-full h-full rounded z-[-1];
-      @apply bg-color-surface-highlight border border-color-border-highlight;
+      @apply absolute top-0 left-0 z-[-1] h-full w-full rounded;
+      @apply border border-color-border-highlight bg-color-surface-highlight;
     }
   }
 }
 
 .related-resources-failed-to-load {
-  @apply text-display-300 text-color-foreground-faint opacity-50 font-semibold mb-2;
+  @apply mb-2 text-display-300 font-semibold text-color-foreground-faint opacity-50;
 }
 
 .related-resources-modal-container {
-  @apply relative px-3 w-full;
+  @apply relative w-full px-3;
 }
 
 .add-external-resource-container {
-  @apply w-full relative flex items-center;
-  @apply px-10 mt-6;
+  @apply relative flex w-full items-center;
+  @apply mt-6 px-10;
   @apply h-[228px];
   animation: fadeIn 400ms ease-out;
 
   &::before,
   &::after {
     content: "";
-    @apply absolute top-0 left-0 w-full h-full rounded-lg border z-[-1];
+    @apply absolute top-0 left-0 z-[-1] h-full w-full rounded-lg border;
   }
 
   &::before {
-    @apply opacity-0 bg-color-page-faint border-color-border-primary;
+    @apply border-color-border-primary bg-color-page-faint opacity-0;
     @apply hds-elevation-low;
     animation: fadeIn 200ms ease-out 500ms forwards;
   }
 
   &::after {
-    @apply bg-color-surface-highlight border-color-border-highlight;
+    @apply border-color-border-highlight bg-color-surface-highlight;
     animation: fadeIn 400ms ease-out, scaleIn 500ms ease-out,
       fadeOut 500ms ease-out 600ms forwards;
   }
 }
 
 .related-resources-overflow-menu-item-button {
-  @apply w-full flex space-x-2 py-2 px-4 leading-none;
+  @apply flex w-full space-x-2 py-2 px-4 leading-none;
 
   > .flight-icon {
     @apply text-inherit;
   }
 }
 
 .related-resources-overflow-button-container {
-  @apply absolute top-0 -right-1 pointer-events-none;
-  @apply w-16 flex justify-end rounded-tr;
+  @apply pointer-events-none absolute top-0 -right-1;
+  @apply flex w-16 justify-end rounded-tr;
   @apply bg-gradient-to-l from-color-surface-interactive-hover via-color-surface-interactive-hover to-transparent;
-  @apply group-hover:visible group-focus-within:visible;
+  @apply group-focus-within:visible group-hover:visible;
 
   &:hover,
   &:focus-within {
@@ -76,7 +76,7 @@
 }
 
 .related-resource-overflow-button {
-  @apply relative pointer-events-auto p-[3px];
+  @apply pointer-events-auto relative p-[3px];
 
   &:hover,
   &:focus,
@@ -89,30 +89,24 @@
   }
 
   .button-affordance {
-    @apply flex top-[4px] right-0 rounded p-1;
+    @apply top-[4px] right-0 flex rounded p-1;
     @apply border border-transparent text-color-foreground-primary;
   }
 }
 
 .related-resource-link {
-  @apply relative grid gap-2 items-start rounded border border-transparent py-[5px];
-  @apply w-[calc(100%+12px)] -ml-[8px] pl-[8px] pr-3 -mr-[4px];
+  @apply relative grid items-start gap-2 rounded border border-transparent py-[5px];
+  @apply -ml-[8px] -mr-[4px] w-[calc(100%+12px)] pl-[8px] pr-3;
   @apply outline-offset-[3px];
   grid-template-columns: 22px auto;
 
   .hermes-document + .external-resource {
     @apply mt-1.5;
   }
-
-  .external-resource {
-    .related-resource-link {
-      @apply items-center;
-    }
-  }
 }
 
 .external-resource-title-input {
-  @apply text-display-300 font-semibold h-11 px-2.5;
+  @apply h-11 px-2.5 text-display-300 font-semibold;
 
   &::placeholder {
     @apply opacity-50;
@@ -121,18 +115,18 @@
 
 .external-resource-url {
   @apply relative w-full text-color-foreground-faint;
-  @apply pl-6 mb-5;
+  @apply mb-5 pl-6;
 
   .external-resource-favicon {
-    @apply w-4 h-4;
+    @apply h-4 w-4;
     @apply absolute left-0 top-1/2 -translate-y-1/2;
   }
 }
 
 .related-resources-modal-body-header {
-  @apply w-full text-color-foreground-faint text-display-300 opacity-75 font-semibold text-center;
+  @apply w-full text-center text-display-300 font-semibold text-color-foreground-faint opacity-75;
 }
 
 .related-document-option {
-  @apply w-full rounded grid place-items-center py-1.5 px-3 h-[74px];
+  @apply grid h-[74px] w-full place-items-center rounded py-1.5 px-3;
 }
diff --git a/web/tests/integration/components/document/sidebar/related-resources-test.ts b/web/tests/integration/components/document/sidebar/related-resources-test.ts
@@ -55,6 +55,8 @@ 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 RESOURCE_TITLE_SELECTOR = "[data-test-resource-title]";
+const RESOURCE_SECONDARY_TEXT_SELECTOR = "[data-test-resource-secondary-text]";
 const TOOLTIP_TRIGGER_SELECTOR = "[data-test-tooltip-icon-trigger]";
 const TOOLTIP_SELECTOR = ".hermes-tooltip";
 
@@ -306,7 +308,8 @@ module(
 
       assert.dom(EDIT_MODAL_SELECTOR).doesNotExist("the modal is closed");
 
-      assert.dom(EXTERNAL_RESOURCE_SELECTOR).hasText("New title");
+      assert.dom(RESOURCE_TITLE_SELECTOR).hasText("New title");
+      assert.dom(RESOURCE_SECONDARY_TEXT_SELECTOR).hasText("new-url.com");
       assert
         .dom(EXTERNAL_RESOURCE_SELECTOR + " a")
         .hasAttribute("href", "https://new-url.com");
@@ -436,10 +439,8 @@ module(
         .dom(ADD_RESOURCE_MODAL_SELECTOR)
         .doesNotExist("the modal is closed");
 
-      assert
-        .dom(LIST_ITEM_SELECTOR)
-        .exists({ count: 1 }, "there is 1 item")
-        .hasText("Example");
+      assert.dom(LIST_ITEM_SELECTOR).exists({ count: 1 }, "there is 1 item");
+      assert.dom(RESOURCE_TITLE_SELECTOR).hasText("Example");
     });
 
     test("it prevents duplicate external resources", async function (this: DocumentSidebarRelatedResourcesTestContext, assert) {

diff --git a/web/tests/integration/components/document/sidebar/related-resources/list-item-test.ts b/web/tests/integration/components/document/sidebar/related-resources/list-item-test.ts
@@ -18,6 +18,9 @@ const OVERFLOW_MENU_SELECTOR =
   "[data-test-related-resources-list-item-overflow-menu]";
 const DROPDOWN_LIST_ITEM_SELECTOR = ".x-dropdown-list-item";
 
+const RESOURCE_TITLE_SELECTOR = "[data-test-resource-title]";
+const RESOURCE_SECONDARY_TEXT_SELECTOR = "[data-test-resource-secondary-text]";
+
 interface DocumentSidebarRelatedResourcesListItemTestContext
   extends MirageTestContext {
   document: RelatedHermesDocument;
@@ -46,7 +49,7 @@ module(
         sortOrder: 1,
       });
       this.set("externalResource", {
-        url: "https://example.com",
+        url: "https://example.com/file/1234",
         name: "Example",
         sortOrder: 1,
       });
@@ -75,18 +78,28 @@ module(
       const secondListItemSelector = `${RELATED_RESOURCE_SELECTOR}:nth-child(2)`;
 
       const firstListItem = htmlElement(firstListItemSelector);
-      const secondListItem = htmlElement(secondListItemSelector);
-
       assert.dom(firstListItem).hasClass("hermes-document");
-      assert.dom(secondListItem).hasClass("external-resource");
-
       assert
         .dom(`${firstListItemSelector} ${RELATED_RESOURCE_LINK_SELECTOR}`)
         .hasAttribute("data-test-item-type", "hermes-document");
+      assert
+        .dom(`${firstListItemSelector} ${RESOURCE_TITLE_SELECTOR}`)
+        .hasText("Test Document 0");
+      assert
+        .dom(`${firstListItemSelector} ${RESOURCE_SECONDARY_TEXT_SELECTOR}`)
+        .hasText("RFC · HCP-001");
 
+      const secondListItem = htmlElement(secondListItemSelector);
+      assert.dom(secondListItem).hasClass("external-resource");
       assert
         .dom(`${secondListItemSelector} ${RELATED_RESOURCE_LINK_SELECTOR}`)
         .hasAttribute("data-test-item-type", "external-resource");
+      assert
+        .dom(`${secondListItemSelector} ${RESOURCE_TITLE_SELECTOR}`)
+        .hasText("Example");
+      assert
+        .dom(`${secondListItemSelector} ${RESOURCE_SECONDARY_TEXT_SELECTOR}`)
+        .hasText("example.com");
     });
 
     test("documents can be removed", async function (this: DocumentSidebarRelatedResourcesListItemTestContext, assert) {