Replace RelatedResource FlightIcons with Favicons

web/app/components/document/sidebar/related-resources/add/external-resource.hbs

@@ -19,7 +19,7 @@
           {{@url}}
         </div>
         <div class="external-resource-favicon">
-          <FlightIcon @name={{get-link-icon @url}} />
+          <Favicon @url={{@url}} />
         </div>
       </div>
 

web/app/components/document/sidebar/related-resources/list-item/resource.hbs

@@ -6,10 +6,7 @@
       <img src="/images/document.png" class="h-auto w-[18px]" />
     </div>
   {{else}}
-    <FlightIcon
-      @name={{get-link-icon this.url}}
-      class={{if (eq (get-link-icon this.url) "globe") "opacity-40"}}
-    />
+    <Favicon @url={{this.url}} />
   {{/if}}
 </div>
 

web/app/components/document/sidebar/related-resources/list-item/resource.ts

@@ -51,10 +51,11 @@ export default class DocumentSidebarRelatedResourcesListItemResourceComponent ex
   /**
    * The full URL of an ExternalResource
    */
-  private get url() {
+  protected 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.

web/app/components/favicon.hbs

@@ -0,0 +1,17 @@
+{{#if this.fallbackIconIsShown}}
+  <FlightIcon
+    ...attributes
+    data-test-fallback-favicon
+    @name="globe"
+    class="opacity-60"
+  />
+{{else}}
+  <img
+    ...attributes
+    data-test-favicon
+    {{on "error" this.showFallbackIcon}}
+    src={{this.faviconURL}}
+    height="16"
+    width="16"
+  />
+{{/if}}

web/app/components/favicon.ts

@@ -0,0 +1,26 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+interface FaviconComponentSignature {
+  Element: SVGElement | HTMLImageElement;
+  Args: {
+    url: string;
+  };
+}
+
+export default class FaviconComponent extends Component<FaviconComponentSignature> {
+  @tracked protected fallbackIconIsShown = false;
+
+  protected readonly faviconURL = `https://www.google.com/s2/favicons?sz=64&domain=${this.args.url}`;
+
+  @action protected showFallbackIcon() {
+    this.fallbackIconIsShown = true;
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    Favicon: typeof FaviconComponent;
+  }
+}

web/tests/integration/components/favicon-test.ts

@@ -0,0 +1,39 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { find, render, waitFor } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+const FALLBACK_ICON_SELECTOR = "[data-test-fallback-favicon]";
+const FAVICON_SELECTOR = "[data-test-favicon]";
+
+module("Integration | Component | favicon", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it appends the passed-in URL to the google favicon path", async function (assert) {
+    await render(hbs`
+      <Favicon @url="https://hashicorp.com"/>
+    `);
+
+    assert
+      .dom(FAVICON_SELECTOR)
+      .hasAttribute(
+        "src",
+        "https://www.google.com/s2/favicons?sz=64&domain=https://hashicorp.com"
+      );
+  });
+
+  test("it shows a fallback icon when the favicon URL is invalid", async function (assert) {
+    await render(hbs`
+      <Favicon @url="-"/>
+    `);
+
+    assert.dom(FALLBACK_ICON_SELECTOR).doesNotExist();
+
+    find(FAVICON_SELECTOR)?.dispatchEvent(new Event("error"));
+
+    await waitFor(FALLBACK_ICON_SELECTOR);
+
+    assert.dom(FALLBACK_ICON_SELECTOR).exists();
+    assert.dom(FAVICON_SELECTOR).doesNotExist();
+  });
+});