Create Product::Avatar component

web/app/components/doc/thumbnail.hbs

@@ -25,11 +25,12 @@
     {{/if}}
 
     {{#if this.productShortName}}
-      <div
-        data-test-doc-thumbnail-product-badge
-        class="product-badge {{this.productShortName}}"
-      >
-        <FlightIcon @size="16" @name={{this.productShortName}} />
+      <div class="absolute left-0 bottom-0">
+        <Product::Avatar
+          data-test-doc-thumbnail-product-badge
+          @product={{@product}}
+          @size={{this.productAvatarSize}}
+        />
       </div>
     {{/if}}
   </div>

web/app/components/doc/thumbnail.ts

@@ -2,6 +2,11 @@ import Component from "@glimmer/component";
 import { dasherize } from "@ember/string";
 import getProductId from "hermes/utils/get-product-id";
 
+export enum DocThumbnailSize {
+  Small = "small",
+  Large = "large",
+}
+
 interface DocThumbnailComponentSignature {
   Element: HTMLDivElement;
   Args: {
@@ -20,6 +25,14 @@ export default class DocThumbnailComponent extends Component<DocThumbnailCompone
     }
   }
 
+  protected get productAvatarSize() {
+    if (this.sizeIsLarge) {
+      return DocThumbnailSize.Large;
+    } else {
+      return DocThumbnailSize.Small;
+    }
+  }
+
   protected get sizeIsLarge(): boolean {
     return this.args.size === "large";
   }

web/app/components/document/sidebar.hbs

@@ -17,13 +17,10 @@
   >
     {{#let (get-product-id this.product) as |productIcon|}}
       {{#if productIcon}}
-        <div
-          class="product-badge
-            {{productIcon}}
-            {{if this.saveIsRunning 'opacity-50'}}"
-        >
-          <FlightIcon @name={{productIcon}} />
-        </div>
+        <Product::Avatar
+          @product={{productIcon}}
+          class="rounded-l-none {{if this.saveIsRunning 'opacity-50'}}"
+        />
       {{/if}}
     {{/let}}
 

web/app/components/person/avatar.ts

@@ -1,9 +1,5 @@
 import Component from "@glimmer/component";
-
-enum HermesAvatarSize {
-  Small = "small",
-  Medium = "medium",
-}
+import { HermesAvatarSize } from "hermes/types/avatar-size";
 
 interface PersonAvatarComponentSignature {
   Element: HTMLDivElement;

web/app/components/product/avatar.gts

@@ -0,0 +1,59 @@
+import Component from "@glimmer/component";
+import getProductID from "hermes/utils/get-product-id";
+import { inject as service } from "@ember/service";
+import FlightIcon from "@hashicorp/ember-flight-icons/components/flight-icon";
+import ProductAreasService from "hermes/services/product-areas";
+import { assert } from "@ember/debug";
+import { HermesAvatarSize } from "hermes/types/avatar-size";
+
+interface ProductAvatarComponentSignature {
+  Element: HTMLDivElement;
+  Args: {
+    product: string;
+    size?: `${HermesAvatarSize}`;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class ProductAvatarComponent extends Component<ProductAvatarComponentSignature> {
+  @service declare productAreas: ProductAreasService;
+
+  private get productID(): string {
+    const productID = getProductID(this.args.product);
+    assert("productID must edxist", productID);
+    return productID;
+  }
+
+  private get sizeIsMedium() {
+    return this.args.size === HermesAvatarSize.Medium;
+  }
+
+  private get sizeIsLarge() {
+    return this.args.size === HermesAvatarSize.Large;
+  }
+
+  <template>
+    <div
+      data-test-product-avatar
+      class="product-badge relative flex shrink-0 shrink-0 items-center justify-center rounded-md
+        {{this.productID}}
+        {{if
+          this.sizeIsLarge
+          'h-8 w-8'
+          (if this.sizeIsMedium 'h-7 w-7' 'h-5 w-5')
+        }}
+        "
+      ...attributes
+    >
+      <FlightIcon @name={{this.productID}} class="h-4 w-4" />
+    </div>
+  </template>
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Product::Avatar": typeof ProductAvatarComponent;
+  }
+}

web/app/styles/components/doc/thumbnail.scss

@@ -1,22 +1,22 @@
 .doc-thumbnail {
-  @apply relative w-12 shrink-0 flex overflow-hidden;
+  @apply relative flex w-12 shrink-0 overflow-hidden;
 
   // Outer border / shadow
   &::after {
     content: "";
-    @apply absolute z-10 pointer-events-none;
+    @apply pointer-events-none absolute z-10;
     // Make the element 1px smaller than its container
     // so its shadow picks up colors from the elements below it.
     @apply top-px right-px bottom-px left-px;
-    @apply shadow-surface-low rounded-sm;
+    @apply rounded-sm shadow-surface-low;
   }
 
   .status-icon {
     @apply absolute opacity-75 mix-blend-multiply;
-    @apply w-9 h-9;
+    @apply h-9 w-9;
 
     &.approved {
-      @apply fill-color-palette-green-200 -rotate-6;
+      @apply -rotate-6 fill-color-palette-green-200;
       @apply -right-[7px] top-[5px];
     }
 
@@ -27,8 +27,7 @@
   }
 
   .product-badge {
-    @apply bottom-0 left-0;
-    @apply w-[19px] h-[17px] rounded-bl rounded-tr;
+    @apply rounded-tl-none rounded-br-none rounded-bl rounded-tr;
 
     .flight-icon {
       @apply scale-75;
@@ -42,23 +41,22 @@
   }
 
   &.large {
-    // Match the width of the progress bars
     @apply w-28;
 
     &::after {
-      @apply shadow-surface-mid rounded;
+      @apply rounded shadow-surface-mid;
     }
 
     .product-badge {
-      @apply w-[36px] h-[32px] rounded-bl rounded-tr;
+      @apply rounded-bl rounded-tr;
 
       .flight-icon {
-      @apply scale-100;
-    }
+        @apply scale-100;
+      }
     }
 
     .status-icon {
-      @apply w-[84px] h-[84px] top-[8px];
+      @apply top-[8px] h-[84px] w-[84px];
 
       &.approved {
         @apply -right-3.5;

web/app/types/avatar-size.ts

@@ -0,0 +1,5 @@
+export enum HermesAvatarSize {
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+}

web/tests/integration/components/product/avatar-test.ts

@@ -0,0 +1,45 @@
+import { TestContext, render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import ProductAreasService from "hermes/services/product-areas";
+import { module, test } from "qunit";
+
+const AVATAR = "[data-test-product-avatar]";
+const ICON = ".flight-icon";
+
+interface ProductAvatarTestContext extends TestContext {
+  product: string;
+}
+
+module("Integration | Component | product/avatar", function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(async function (this: ProductAvatarTestContext) {
+    const productAreasService = this.owner.lookup(
+      "service:product-areas",
+    ) as ProductAreasService;
+  });
+
+  test("it renders the product icon", async function (this: ProductAvatarTestContext, assert) {
+    this.set("product", "Terraform");
+
+    await render<ProductAvatarTestContext>(hbs`
+      <Product::Avatar
+        @product={{this.product}}
+       />
+    `);
+
+    assert.dom(AVATAR).hasClass("terraform");
+    assert.dom(ICON).hasAttribute("data-test-icon", "terraform");
+
+    this.set("product", "Vault");
+
+    assert.dom(AVATAR).hasClass("vault");
+    assert.dom(ICON).hasAttribute("data-test-icon", "vault");
+
+    // expect an error if the product is not found
+    assert.throws(() => {
+      this.set("product", "foo");
+    });
+  });
+});