"Docs awaiting review" refactor/redesign (#282)

* Mirage response for docs awaiting review * Dashboard test * Update dashboard-test.ts * Componentize and test * Fix tests, convert files to TS * Apply Avatar to <Person> component * Comment cleanup * Revert LatestUpdates changes * WIP Pending test * Test breakpoint class * Type cleanup * Add and test truncation/collapse toggling * Remove unused class * Remove 4-item limit from Algolia request
hashicorp-forge · Aug 16, 2023 · 98db3a7 · 98db3a7
1 parent de670c4
commit 98db3a7
Show file tree

Hide file tree

Showing 23 changed files with 566 additions and 129 deletions.
diff --git a/web/app/components/dashboard/docs-awaiting-review.hbs b/web/app/components/dashboard/docs-awaiting-review.hbs
@@ -0,0 +1,36 @@
+<div class="mb-12 w-full">
+  <div class="relative flex justify-between">
+    <h2 class="items-center self-center text-body-300 font-regular md:flex">
+      You have
+      <Hds::BadgeCount
+        data-test-docs-awaiting-review-count
+        @text="{{@docs.length}}"
+        @type="inverted"
+        class="mx-0.5 !bg-color-foreground-critical md:mx-1.5"
+      />
+      document{{if (gt @docs.length 1) "s"}}
+      awaiting your review:
+    </h2>
+
+  </div>
+
+  <ul class="mt-4 gap-1 space-y-0.5">
+    {{#each this.docsToShow as |doc|}}
+      <Dashboard::DocsAwaitingReview::Doc @doc={{doc}} />
+    {{/each}}
+  </ul>
+  {{#if this.toggleButtonIsShown}}
+    <Action
+      data-test-docs-awaiting-review-toggle
+      {{on "click" this.toggleCollapsed}}
+      class="mt-4 flex items-center text-center text-body-200 text-color-foreground-action hover:text-color-foreground-action-hover"
+    >
+      <FlightIcon
+        data-test-docs-awaiting-review-toggle-icon
+        @name={{if this.isCollapsed "plus" "minus"}}
+        class="mr-1.5"
+      />
+      {{if this.isCollapsed "Show all" "Show fewer"}}
+    </Action>
+  {{/if}}
+</div>
diff --git a/web/app/components/dashboard/docs-awaiting-review.ts b/web/app/components/dashboard/docs-awaiting-review.ts
@@ -0,0 +1,58 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { HermesDocument } from "hermes/types/document";
+
+interface DashboardDocsAwaitingReviewComponentSignature {
+  Element: null;
+  Args: {
+    docs: HermesDocument[];
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class DashboardDocsAwaitingReviewComponent extends Component<DashboardDocsAwaitingReviewComponentSignature> {
+  /**
+   * Whether the list is considered collapsed. Determines which docs to show,
+   * as well as the text and icon of the toggle button.
+   */
+  @tracked protected isCollapsed = true;
+
+  /**
+   * (Up to) the first four docs. The default documents shown.
+   */
+  private get firstFourDocs() {
+    return this.args.docs.slice(0, 4);
+  }
+
+  /**
+   * Whether the toggle button should be shown.
+   * True if there are more than four docs.
+   */
+  protected get toggleButtonIsShown() {
+    return this.args.docs.length > 4;
+  }
+
+  /**
+   * The docs to show in the list. If the list is collapsed,
+   * we show the first four docs. Otherwise, we show all docs.
+   */
+  protected get docsToShow() {
+    return this.isCollapsed ? this.firstFourDocs : this.args.docs;
+  }
+
+  /**
+   * The action to take when the toggle button is clicked.
+   */
+  @action protected toggleCollapsed() {
+    this.isCollapsed = !this.isCollapsed;
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Dashboard::DocsAwaitingReview": typeof DashboardDocsAwaitingReviewComponent;
+  }
+}
diff --git a/web/app/components/dashboard/docs-awaiting-review/doc.hbs b/web/app/components/dashboard/docs-awaiting-review/doc.hbs
@@ -0,0 +1,70 @@
+<li class="w-full flex">
+  <LinkTo
+    data-test-doc-awaiting-review-link
+    @route="authenticated.document"
+    @model={{@doc.objectID}}
+    class="w-full bg-white px-3.5 py-3 rounded border border-color-border-primary overflow-hidden hover:bg-color-surface-faint group"
+  >
+    <div class="w-full">
+      <div
+        class="relative w-full flex flex-wrap md:flex-nowrap items-center gap-2.5"
+      >
+
+        {{! Avatar }}
+        <Person::Avatar
+          data-test-doc-awaiting-review-owner-avatar
+          @email={{or (get @doc.owners 0) "Unknown"}}
+          @imgURL={{get @doc.ownerPhotos 0}}
+          @size="medium"
+          class="shrink-0"
+        />
+
+        <div class="w-full block overflow-hidden">
+
+          {{! DocNumber & Title }}
+          <div class="w-full md:flex">
+            <TruncatedText
+              @tagName="h4"
+              @startingBreakpoint="md"
+              class="text-display-200 max-w-[60%] font-semibold text-color-foreground-strong"
+              data-test-doc-awaiting-review-number-and-title
+            >
+              <span class="mr-0.5">
+                {{@doc.docNumber}}
+              </span>
+              {{@doc.title}}
+            </TruncatedText>
+
+            {{! Email }}
+            <div
+              class="self-center my-1 md:my-0 md:ml-2 flex space-x-2 w-full md:w-auto md:max-w-[40%]"
+            >
+              <TruncatedText
+                @startingBreakpoint="md"
+                class="text-body-200 w-full"
+                data-test-doc-awaiting-review-owner
+              >
+                {{get @doc.owners 0}}
+              </TruncatedText>
+            </div>
+          </div>
+        </div>
+
+        {{! Product & DocType }}
+        <div
+          class="absolute top-[3px] left-9 md:relative md:top-0 md:left-0 flex shrink-0 items-center space-x-1"
+        >
+          <Hds::Badge
+            data-test-doc-awaiting-review-product-badge
+            @icon={{or (get-product-id @doc.product) "folder"}}
+            @text={{or @doc.product "Unknown"}}
+          />
+          <Hds::Badge
+            data-test-doc-awaiting-review-doctype-badge
+            @text={{@doc.docType}}
+          />
+        </div>
+      </div>
+    </div>
+  </LinkTo>
+</li>
diff --git a/web/app/components/dashboard/docs-awaiting-review/doc.ts b/web/app/components/dashboard/docs-awaiting-review/doc.ts
@@ -0,0 +1,20 @@
+import Component from "@glimmer/component";
+import { HermesDocument } from "hermes/types/document";
+
+interface DashboardDocsAwaitingReviewDocComponentSignature {
+  Element: null;
+  Args: {
+    doc: HermesDocument;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class DashboardDocsAwaitingReviewDocComponent extends Component<DashboardDocsAwaitingReviewDocComponentSignature> {}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Dashboard::DocsAwaitingReview::Doc": typeof DashboardDocsAwaitingReviewDocComponent;
+  }
+}
diff --git a/web/app/components/person/avatar.hbs b/web/app/components/person/avatar.hbs
@@ -0,0 +1,21 @@
+<div
+  class="overflow-hidden rounded-full flex justify-center items-center bg-color-palette-alpha-300 bg-color-palette-neutral-200 border border-transparent
+    {{if this.sizeIsSmall 'w-5 h-5'}}
+    {{if this.sizeIsMedium 'w-7 h-7'}}
+    "
+  ...attributes
+>
+  {{#if @imgURL}}
+    <img src={{@imgURL}} referrerpolicy="no-referrer" class="w-full" />
+  {{else}}
+    <div class="text-body-100 flex">
+      {{#if @email}}
+        <span class="capitalize">
+          {{get-first-letter @email}}
+        </span>
+      {{else}}
+        <FlightIcon @name="user" class="scale-90" />
+      {{/if}}
+    </div>
+  {{/if}}
+</div>
diff --git a/web/app/components/person/avatar.ts b/web/app/components/person/avatar.ts
@@ -0,0 +1,34 @@
+import Component from "@glimmer/component";
+
+enum HermesAvatarSize {
+  Small = "small",
+  Medium = "medium",
+}
+
+interface PersonAvatarComponentSignature {
+  Element: HTMLDivElement;
+  Args: {
+    imgURL?: string | null;
+    email: string;
+    size: `${HermesAvatarSize}`;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class PersonAvatarComponent extends Component<PersonAvatarComponentSignature> {
+  protected get sizeIsSmall(): boolean {
+    return this.args.size === HermesAvatarSize.Small;
+  }
+
+  protected get sizeIsMedium(): boolean {
+    return this.args.size === HermesAvatarSize.Medium;
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Person::Avatar": typeof PersonAvatarComponent;
+  }
+}
diff --git a/web/app/components/person/index.hbs b/web/app/components/person/index.hbs
@@ -13,25 +13,7 @@
           />
         </div>
       {{/if}}
-      <div
-        class="w-5 h-5 overflow-hidden rounded-full flex justify-center items-center bg-[color:var(--token-color-palette-alpha-300)]"
-      >
-        {{#if @imgURL}}
-          <img src={{@imgURL}} referrerpolicy="no-referrer" class="w-full" />
-        {{else}}
-          <div
-            class="hds-foreground-high-contrast hds-typography-body-100 flex"
-          >
-            {{#if @email}}
-              <span class="capitalize">
-                {{get-first-letter @email}}
-              </span>
-            {{else}}
-              <FlightIcon @name="user" class="scale-90" />
-            {{/if}}
-          </div>
-        {{/if}}
-      </div>
+      <Person::Avatar @size="small" @email={{@email}} @imgURL={{@imgURL}} />
     </div>
     <div
       class="person-email hds-typography-body-200 truncate hds-foreground-primary relative"

diff --git a/web/app/components/truncated-text.hbs b/web/app/components/truncated-text.hbs
@@ -7,7 +7,7 @@
 {{! @glint-ignore - element helper not yet typed }}
 
 {{#let (element (or @tagName "p")) as |Container|}}
-  <Container class="truncated-text-container">
+  <Container class="truncated-text-container {{this.class}}">
     <span class="overflow-hidden" ...attributes>
       {{yield}}
     </span>

diff --git a/web/app/components/truncated-text.ts b/web/app/components/truncated-text.ts
@@ -4,13 +4,21 @@ interface TruncatedTextComponentSignature {
   Element: HTMLSpanElement;
   Args: {
     tagName?: string;
+    startingBreakpoint?: "md";
   };
   Blocks: {
     default: [];
   };
 }
 
-export default class TruncatedTextComponent extends Component<TruncatedTextComponentSignature> {}
+export default class TruncatedTextComponent extends Component<TruncatedTextComponentSignature> {
+  protected get class(): string {
+    if (this.args.startingBreakpoint === "md") {
+      return "starting-breakpoint-md";
+    }
+    return "default";
+  }
+}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {

diff --git a/web/app/controllers/authenticated/dashboard.js b/web/app/controllers/authenticated/dashboard.js
diff --git a/web/app/controllers/authenticated/dashboard.ts b/web/app/controllers/authenticated/dashboard.ts
@@ -0,0 +1,10 @@
+import Controller from "@ember/controller";
+import { inject as service } from "@ember/service";
+import AuthenticatedUserService from "hermes/services/authenticated-user";
+import RecentlyViewedDocsService from "hermes/services/recently-viewed-docs";
+
+export default class AuthenticatedDashboardController extends Controller {
+  @service declare authenticatedUser: AuthenticatedUserService;
+  @service("recently-viewed-docs")
+  declare recentDocs: RecentlyViewedDocsService;
+}