Table and ProductLink design changes (#418)

* Table improvements

* Revert some changes

* Style tweaks

* Helper and utility tests

* Add alpha color

* Update product-badge.scss

web/app/components/doc/tile.hbs

@@ -53,5 +53,5 @@
     </div>
   </LinkTo>
 
-  <ProductBadgeLink @productArea={{@productArea}} class="relative" />
+  <ProductLink @product={{@productArea}} class="relative" />
 </div>

web/app/components/document/sidebar.hbs

@@ -156,9 +156,9 @@
             />
           </div>
         {{else}}
-          <ProductBadgeLink
+          <ProductLink
             data-test-document-product-area-read-only
-            @productArea={{@document.product}}
+            @product={{@document.product}}
             class="inline-block"
           />
         {{/if}}

web/app/components/documents/table.hbs

@@ -0,0 +1,48 @@
+{{#if @docs}}
+  <table class="hds-table">
+    <thead>
+      <tr>
+        <th class="name">Name</th>
+        <th class="type">Type</th>
+        <th class="status">Status</th>
+        <th class="product">Product/Area</th>
+        <th class="owner">Owner</th>
+        <th class="time">
+          <Table::SortableHeader
+            @changeSort={{@changeSort}}
+            @currentSort={{@currentSort}}
+            @sortDirection={{@sortDirection}}
+            @queryParam={{hash
+              sortBy=(if (eq @sortDirection "desc") "dateAsc" "dateDesc")
+              page=1
+            }}
+            @attribute="createdTime"
+            @defaultSortDirection="desc"
+          >
+            Created
+          </Table::SortableHeader>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each @docs as |doc|}}
+        <Table::Row @doc={{doc}} />
+      {{/each}}
+    </tbody>
+  </table>
+  {{#if this.paginationIsShown}}
+    <Pagination @nbPages={{@nbPages}} @currentPage={{@currentPage}} />
+  {{/if}}
+{{else}}
+  {{#if @isDraft}}
+    <Hds::Alert @type="inline" as |A|>
+      <A.Title>No drafts found</A.Title>
+      <A.Button
+        @text="Create a document draft"
+        @color="primary"
+        @icon="file-plus"
+        @route="authenticated.new"
+      />
+    </Hds::Alert>
+  {{/if}}
+{{/if}}

web/app/components/row-results.ts → web/app/components/documents/table.ts

@@ -1,26 +1,29 @@
 import Component from "@glimmer/component";
 import { HermesDocument } from "hermes/types/document";
-import { SortAttribute, SortDirection } from "./table/sortable-header";
+import {
+  SortAttribute,
+  SortDirection,
+} from "hermes/components/table/sortable-header";
 
-interface RowResultsComponentSignature {
+interface DocumentsTableComponentSignature {
   Args: {
     docs: HermesDocument[];
     isDraft?: boolean;
-    nbPages: number;
-    currentPage: number;
+    nbPages?: number;
+    currentPage?: number;
     changeSort?: (attribute: SortAttribute) => void;
     currentSort: `${SortAttribute}`;
     sortDirection: SortDirection;
   };
 }
-export default class RowResultsComponent extends Component<RowResultsComponentSignature> {
+export default class DocumentsTableComponent extends Component<DocumentsTableComponentSignature> {
   protected get paginationIsShown() {
     return this.args.nbPages && this.args.currentPage !== undefined;
   }
 }
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {
-    RowResults: typeof RowResultsComponent;
+    "Documents::Table": typeof DocumentsTableComponent;
   }
 }

web/app/components/pagination.hbs

@@ -1,4 +1,4 @@
-<div class="flex justify-center">
+<div class="pagination flex justify-center">
   {{#if (eq @nbPages 1)}}
     {{! There is only one page of results }}
     <Pagination::Link @icon="chevron-left" @disabled={{true}} />

web/app/components/person/avatar.hbs

@@ -1,7 +1,7 @@
 <div
   data-test-person-avatar
   class="avatar overflow-hidden rounded-full
-    {{unless @isLoading 'bg-color-palette-alpha-300'}}
+    {{unless @isLoading 'bg-color-palette-alpha-100'}}
     {{this.size}}
     "
   ...attributes

web/app/components/product-link.hbs

@@ -0,0 +1,16 @@
+<LinkTo
+  @route={{this.route}}
+  @query={{this.query}}
+  class="product-link"
+  ...attributes
+>
+  {{#if (has-block "default")}}
+    {{yield}}
+  {{else}}
+    <Hds::Badge
+      @icon={{or (get-product-id @product) "folder"}}
+      @text={{this.productAreaName}}
+      title={{this.productAreaName}}
+    />
+  {{/if}}
+</LinkTo>

web/app/components/product-badge-link.ts → web/app/components/product-link.ts

@@ -1,33 +1,29 @@
 import RouterService from "@ember/routing/router-service";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
+import getProductLabel from "hermes/utils/get-product-label";
 
-interface ProductBadgeLinkComponentSignature {
+interface ProductLinkComponentSignature {
   Element: HTMLAnchorElement;
   Args: {
-    productArea?: string;
+    product?: string;
   };
   Blocks: {
     default: [];
   };
 }
 
-export default class ProductBadgeLinkComponent extends Component<ProductBadgeLinkComponentSignature> {
+export default class ProductLinkComponent extends Component<ProductLinkComponentSignature> {
   @service declare router: RouterService;
 
-  protected get productAreaName(): string {
-    switch (this.args.productArea) {
-      case "Cloud Platform":
-        return "HCP";
-      default:
-        return this.args.productArea || "Unknown";
-    }
+  protected get productAreaName(): string | undefined {
+    return getProductLabel(this.args.product);
   }
 
   protected get query() {
-    if (this.args.productArea) {
+    if (this.args.product) {
       return {
-        product: [this.args.productArea],
+        product: [this.args.product],
         docType: [],
         owners: [],
         page: 1,
@@ -59,6 +55,6 @@ export default class ProductBadgeLinkComponent extends Component<ProductBadgeLin
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {
-    ProductBadgeLink: typeof ProductBadgeLinkComponent;
+    ProductLink: typeof ProductLinkComponent;
   }
 }

web/app/components/table/row.hbs

@@ -0,0 +1,63 @@
+<tr>
+  <td class="name">
+    <LinkTo
+      @route="authenticated.document"
+      @model="{{@doc.objectID}}"
+      @query={{hash draft=(eq @doc.status "wip")}}
+      class="inner flex h-full w-full items-start gap-3.5 focus:outline-none"
+    >
+      <Doc::Thumbnail @product={{@doc.product}} @status={{@doc.status}} />
+      <div class="relative overflow-hidden">
+        <div>
+          <h4
+            class="hds-typography-body-200 hds-font-weight-semibold hds-foreground-strong"
+          >
+            {{@doc.title}}
+          </h4>
+          {{#if @doc.docNumber}}
+            <div class="whitespace-nowrap text-color-foreground-faint">
+              {{@doc.docNumber}}
+            </div>
+          {{/if}}
+        </div>
+      </div>
+    </LinkTo>
+  </td>
+  <td class="type">
+    <div class="inner">
+      {{@doc.docType}}
+    </div>
+  </td>
+  <td class="status">
+    <div class="inner">
+      <Doc::State @state={{@doc.status}} @hideProgress={{true}} />
+    </div>
+  </td>
+  <td class="product">
+    <div class="inner">
+      <ProductLink
+        @product={{@doc.product}}
+        class="decoration-color-palette-neutral-300 underline-offset-[3px] hover:underline"
+      >
+        {{get-product-label @doc.product}}
+      </ProductLink>
+    </div>
+  </td>
+  <td class="owner">
+    <div class="inner">
+      <Person
+        @imgURL={{get @doc.ownerPhotos 0}}
+        @email="{{get @doc.owners 0}}"
+      />
+    </div>
+  </td>
+  <td class="time">
+    <div class="inner">
+      <div
+        class={{if (eq this.time "Unknown") "text-color-foreground-disabled"}}
+      >
+        {{this.time}}
+      </div>
+    </div>
+  </td>
+</tr>