Merge branch 'jeffdaley/product-avatar' into jeffdaley/explore-projects

web/app/components/doc/thumbnail.ts

@@ -24,7 +24,7 @@ export default class DocThumbnailComponent extends Component<DocThumbnailCompone
     if (this.args.product) {
       return getProductID(this.args.product);
     } else {
-      return this.args.product;
+      return;
     }
   }
 

web/app/components/inputs/product-select.ts

@@ -29,7 +29,6 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
   @service declare productAreas: ProductAreasService;
 
   @tracked selected = this.args.selected;
-  @tracked protected errorIsShown = false;
 
   get products() {
     return this.productAreas.index;
@@ -65,22 +64,6 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
     this.selected = newValue;
     this.args.onChange(newValue, attributes);
   }
-
-  @action protected maybeFetchProducts() {
-    if (this.products) {
-      return;
-    }
-    void this.fetchProductAreas.perform();
-  }
-
-  protected fetchProductAreas = task(async () => {
-    try {
-      await this.productAreas.fetch.perform();
-      this.errorIsShown = false;
-    } catch {
-      this.errorIsShown = true;
-    }
-  });
 }
 
 declare module "@glint/environment-ember-loose/registry" {

web/app/components/product-avatar.gts

@@ -1,8 +1,10 @@
 import Component from "@glimmer/component";
 import getProductID from "hermes/utils/get-product-id";
 import or from "ember-truth-helpers/helpers/or";
-import eq from "ember-truth-helpers/helpers/eq";
 import FlightIcon from "@hashicorp/ember-flight-icons/components/flight-icon";
+import getLetterCount from "hermes/helpers/get-letter-count";
+import getProductAbbreviation from "hermes/helpers/get-product-abbreviation";
+import eq from "ember-truth-helpers/helpers/eq";
 
 interface ProductAvatarComponentSignature {
   Element: HTMLDivElement;
@@ -29,16 +31,25 @@ export default class ProductAvatarComponent extends Component<ProductAvatarCompo
     <div
       data-test-doc-thumbnail-product-badge
       class="product-badge
-        {{if (eq @iconSize 24) 'large'}}
-        {{if (eq @iconSize 18) 'medium p-1.5' 'p-1'}}
         {{this.productID}}
-        relative rounded-full"
+        relative flex h-5 w-5 items-center justify-center rounded-full"
       ...attributes
     >
-      <FlightIcon
-        @name={{or this.productID "folder"}}
-        style={{this.sizeStyles}}
-      />
+      {{#if this.productID}}
+        <FlightIcon
+          @name={{or this.productID "folder"}}
+          style={{this.sizeStyles}}
+        />
+      {{else}}
+        <span
+          class="letter-avatar font-medium letter-count-{{getLetterCount
+              (getProductAbbreviation @productArea)
+            }}
+            absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        >
+          {{getProductAbbreviation @productArea}}
+        </span>
+      {{/if}}
     </div>
   </template>
 }

web/app/helpers/get-letter-count.ts

@@ -0,0 +1,21 @@
+import { helper } from "@ember/component/helper";
+
+export interface GetLetterCountHelperSignature {
+  Args: {
+    Positional: [text: string];
+  };
+  Return: string | null;
+}
+const getLetterCount = helper<GetLetterCountHelperSignature>(
+  ([text]: [string]) => {
+    return text.length.toString();
+  },
+);
+
+export default getLetterCount;
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "get-letter-count": typeof getLetterCount;
+  }
+}

web/app/helpers/get-product-abbreviation.ts

@@ -0,0 +1,50 @@
+import Helper from "@ember/component/helper";
+import { inject as service } from "@ember/service";
+import ProductAreasService from "hermes/services/product-areas";
+
+export interface GetProductAbbreviationHelperSignature {
+  Args: {
+    Positional: [productName?: string];
+  };
+  Return: string;
+}
+
+// const getProductAbbreviation = helper<GetProductAbbreviationHelperSignature>(
+//   ([productName]: [string]) => {
+
+//     const nameParts = productName.split("-");
+//     const abbreviation = nameParts[0];
+
+//     if (abbreviation) {
+//       return abbreviation.slice(0, 3).toUpperCase();
+//     }
+
+//     return "";
+//   },
+// );
+
+export default class GetProductAbbreviationHelper extends Helper<GetProductAbbreviationHelperSignature> {
+  @service declare productAreas: ProductAreasService;
+
+  compute([productName]: [string | undefined]): string {
+    if (!productName) {
+      return "";
+    }
+
+    //  need to search the productAreas index for an object called `productName` and return the abbreviation
+    const products = this.productAreas.index;
+    const product = products?.[productName];
+
+    if (!product) {
+      return "";
+    }
+
+    return product.abbreviation.slice(0, 3).toUpperCase();
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "get-doc-abbreviation": typeof GetProductAbbreviationHelper;
+  }
+}

web/app/routes/application.ts

@@ -59,7 +59,7 @@ export default class ApplicationRoute extends Route {
         JSON.stringify({
           url: transitionTo,
           expiresOn: Date.now() + 60 * 5000, // 5 minutes
-        })
+        }),
       );
     }
 

web/app/routes/authenticated.ts

@@ -2,12 +2,14 @@ import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
 import AuthenticatedUserService from "hermes/services/authenticated-user";
 import ConfigService from "hermes/services/config";
+import ProductAreasService from "hermes/services/product-areas";
 import SessionService from "hermes/services/session";
 
 export default class AuthenticatedRoute extends Route {
   @service("config") declare configSvc: ConfigService;
   @service declare session: SessionService;
   @service declare authenticatedUser: AuthenticatedUserService;
+  @service declare productAreas: ProductAreasService;
 
   beforeModel(transition: any) {
     /**
@@ -29,6 +31,11 @@ export default class AuthenticatedRoute extends Route {
      */
     await this.authenticatedUser.loadInfo.perform();
 
+    /**
+     * Load the ProductAreas index
+     */
+    await this.productAreas.fetch.perform();
+
     /**
      * Kick off the task to poll for expired auth.
      */

web/app/services/product-areas.ts

@@ -1,9 +1,8 @@
 import Service, { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import RouterService from "@ember/routing/router-service";
-import { task, timeout } from "ember-concurrency";
+import { task } from "ember-concurrency";
 import FetchService from "./fetch";
+import { assert } from "@ember/debug";
 
 export type ProductArea = {
   abbreviation: string;
@@ -12,15 +11,20 @@ export type ProductArea = {
 export default class ProductAreasService extends Service {
   @service("fetch") declare fetchSvc: FetchService;
 
-  @tracked index: Record<string, ProductArea> | null = null;
+  @tracked _index: Record<string, ProductArea> | null = null;
+
+  get index() {
+    assert("_index must exist", this._index);
+    return this._index;
+  }
 
   fetch = task(async () => {
     try {
-      this.index = await this.fetchSvc
+      this._index = await this.fetchSvc
         .fetch("/api/v1/products")
         .then((resp) => resp?.json());
     } catch (err) {
-      this.index = null;
+      this._index = null;
       throw err;
     }
   });

web/app/styles/app.scss

@@ -37,6 +37,7 @@
 @use "components/doc/state";
 @use "components/table/sortable-header";
 @use "components/preview-card";
+@use "components/product-avatar";
 @use "components/notification";
 @use "components/sidebar";
 @use "components/document/related-resources";

web/app/styles/components/product-avatar.scss

@@ -0,0 +1,11 @@
+.letter-avatar {
+  @apply tracking-tighter;
+
+  &.letter-count-2 {
+    @apply text-[11px];
+  }
+
+  &.letter-count-3 {
+    @apply text-[9px];
+  }
+}

web/app/styles/hashicorp/product-badge.scss

@@ -1,24 +1,8 @@
 .product-badge {
-  @apply absolute grid place-items-center bg-gradient-to-br from-color-palette-neutral-200 to-color-palette-neutral-300 text-color-foreground-primary;
-
-  &.medium {
-    .flight-icon-folder {
-      @apply stroke-0;
-    }
-  }
-
-  &.large {
-    .flight-icon-folder {
-      @apply stroke-0;
-    }
-  }
-
-  .flight-icon-folder {
-    @apply stroke-[.5] stroke-current;
-  }
+  @apply absolute grid place-items-center bg-gradient-to-br from-color-palette-neutral-400 to-color-palette-neutral-500 text-color-foreground-high-contrast;
 
   &.hcp {
-    @apply from-color-palette-neutral-500 to-color-palette-neutral-600 text-color-foreground-high-contrast;
+    @apply from-color-palette-neutral-500 to-color-palette-neutral-600;
   }
 
   &.nomad {

web/app/utils/get-product-id.ts

@@ -1,4 +1,4 @@
-export default function getProductID(productName?: string): string | undefined {
+export default function getProductId(productName?: string) {
   if (!productName) {
     return;
   }

web/tests/unit/services/product-areas-test.ts

@@ -14,7 +14,7 @@ module("Unit | Service | product-areas", function (hooks) {
 
   test("can set or close an active modal", async function (this: MirageTestContext, assert) {
     const productAreas = this.owner.lookup(
-      "service:product-areas"
+      "service:product-areas",
     ) as ProductAreasService;
 
     this.server.create("product", {