Merge branch 'main' into jeffdaley/explore

web/app/components/dashboard/docs-awaiting-review.hbs

@@ -14,7 +14,7 @@
 
   </div>
 
-  <ul class="mt-4 gap-1 space-y-0.5">
+  <ul class="mt-4">
     {{#each this.docsToShow as |doc|}}
       <Dashboard::DocsAwaitingReview::Doc @doc={{doc}} />
     {{/each}}

web/app/components/dashboard/docs-awaiting-review/doc.hbs

@@ -1,13 +1,13 @@
-<li class="w-full flex">
+<li class="doc-awaiting-review flex w-full">
   <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"
+    class="group w-full overflow-hidden border border-color-border-primary bg-white px-3.5 py-3 hover:bg-color-surface-faint"
   >
     <div class="w-full">
       <div
-        class="relative w-full flex flex-wrap md:flex-nowrap items-center gap-2.5"
+        class="relative flex w-full flex-wrap items-center gap-2.5 md:flex-nowrap"
       >
 
         {{! Avatar }}
@@ -19,14 +19,14 @@
           class="shrink-0"
         />
 
-        <div class="w-full block overflow-hidden">
+        <div class="block w-full 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"
+              class="max-w-[60%] text-display-200 font-semibold text-color-foreground-strong"
               data-test-doc-awaiting-review-number-and-title
             >
               <span class="mr-0.5">
@@ -37,11 +37,11 @@
 
             {{! 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%]"
+              class="my-1 flex w-full space-x-2 self-center md:my-0 md:ml-2 md:w-auto md:max-w-[40%]"
             >
               <TruncatedText
                 @startingBreakpoint="md"
-                class="text-body-200 w-full"
+                class="w-full text-body-200"
                 data-test-doc-awaiting-review-owner
               >
                 {{get @doc.owners 0}}
@@ -52,7 +52,7 @@
 
         {{! 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"
+          class="absolute top-[3px] left-9 flex shrink-0 items-center space-x-1 md:relative md:top-0 md:left-0"
         >
           <Hds::Badge
             data-test-doc-awaiting-review-product-badge

web/app/components/header/toolbar.hbs

@@ -29,20 +29,11 @@
             <Header::FacetDropdown
               @label="Owner"
               @facets={{@facets.owners}}
-              @disabled={{this.ownerFacetIsDisabled}}
+              @disabled={{not @facets.owners}}
               @position="right"
             />
           </div>
         </div>
-        {{#if (and @facets (not @sortControlIsHidden))}}
-          <Header::SortDropdown
-            @label={{this.getSortByLabel}}
-            @facets={{this.sortByFacets}}
-            @disabled={{this.sortControlIsDisabled}}
-            @currentSortByValue={{this.currentSortByValue}}
-            @dropdownPlacement="bottom-end"
-          />
-        {{/if}}
       </div>
       <Header::ActiveFilterList />
     </div>

web/app/components/header/toolbar.ts

@@ -40,77 +40,32 @@ export type ActiveFilters = {
 
 interface ToolbarComponentSignature {
   Args: {
-    facets: FacetDropdownGroups;
-    sortControlIsHidden?: boolean;
+    facets?: FacetDropdownGroups;
   };
 }
 
 export default class ToolbarComponent extends Component<ToolbarComponentSignature> {
   @service declare router: RouterService;
   @service declare activeFilters: ActiveFiltersService;
 
-  get currentSortByValue() {
-    if (!this.router.currentRoute) {
-      return SortByValue.DateDesc;
-    }
-    let sortBy = this.router.currentRoute.queryParams["sortBy"];
-
-    switch (sortBy) {
-      case SortByValue.DateAsc:
-        return sortBy;
-      default:
-        return SortByValue.DateDesc;
-    }
-  }
-
-  protected get getSortByLabel(): SortByLabel {
-    if (this.currentSortByValue === SortByValue.DateDesc) {
-      return SortByLabel.Newest;
-    } else {
-      return SortByLabel.Oldest;
-    }
-  }
-
   get currentRouteName(): string {
     return this.router.currentRouteName;
   }
 
-  /**
-   * Whether the owner facet is disabled.
-   * True on the My Docs and My Drafts screens.
-   */
-  protected get ownerFacetIsDisabled() {
-    switch (this.currentRouteName) {
-      case "authenticated.my":
-      case "authenticated.drafts":
-        return true;
-      default:
-        return false;
-    }
-  }
-
-  /**
-   * Whether the sort control is disabled.
-   * True when there are no drafts or docs.
-   */
-  protected get sortControlIsDisabled() {
-    return Object.keys(this.args.facets).length === 0;
-  }
-
   /**
    * The statuses available as filters.
    */
   protected get statuses(): FacetDropdownObjects | null {
     let statuses: FacetDropdownObjects = {};
-    for (let status in this.args.facets.status) {
+    for (let status in this.args.facets?.status) {
       if (
         status === "Approved" ||
         status === "In-Review" ||
         status === "In Review" ||
         status === "Obsolete" ||
         status === "WIP"
       ) {
-        statuses[status] = this.args.facets.status[
+        statuses[status] = this.args.facets?.status[
           status
         ] as FacetDropdownObjectDetails;
       }
@@ -124,19 +79,6 @@ export default class ToolbarComponent extends Component<ToolbarComponentSignatur
     }
   }
 
-  get sortByFacets(): SortByFacets {
-    return {
-      Newest: {
-        count: 0,
-        isSelected: this.currentSortByValue === SortByValue.DateDesc,
-      },
-      Oldest: {
-        count: 0,
-        isSelected: this.currentSortByValue === SortByValue.DateAsc,
-      },
-    };
-  }
-
   /**
    * Closes the dropdown on the next run loop.
    * Done so we don't interfere with Ember's <LinkTo> handling.

web/app/components/pagination/index.hbs → web/app/components/pagination.hbs

@@ -1,9 +1,8 @@
-{{! @glint-nocheck: not typesafe yet }}
 <div class="flex justify-center">
   {{#if (eq @nbPages 1)}}
     {{! There is only one page of results }}
     <Pagination::Link @icon="chevron-left" @disabled={{true}} />
-    <Pagination::Link @page="1" @disabled={{true}} />
+    <Pagination::Link @page={{1}} @disabled={{true}} />
     <Pagination::Link @icon="chevron-right" @disabled={{true}} />
   {{else}}
     {{! There is more than one page of results }}

web/app/components/pagination/index.ts → web/app/components/pagination.ts

@@ -44,3 +44,9 @@ export default class PaginationComponent extends Component<PaginationComponentSi
     return pages;
   }
 }
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    Pagination: typeof PaginationComponent;
+  }
+}

web/app/components/pagination/link.hbs

@@ -1,23 +1,22 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{#if @disabled}}
   <span
-    class="w-9 h-12 grid place-items-center relative
+    class="relative grid h-12 w-9 place-items-center
       {{if @icon 'opacity-50' 'text-color-foreground-action'}}"
   >
     {{#if @icon}}
       <FlightIcon @name={{@icon}} />
     {{else}}
       {{@page}}
       <div
-        class="absolute h-0.5 w-6 bg-color-palette-blue-200 bottom-0 left-1/2 -translate-x-1/2"
+        class="absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 bg-color-palette-blue-200"
       ></div>
     {{/if}}
   </span>
 {{else}}
   <LinkTo
     @route={{this.currentRouteName}}
     @query={{hash page=@page}}
-    class="w-9 h-12 hover:text-color-foreground-strong grid place-items-center"
+    class="grid h-12 w-9 place-items-center hover:text-color-foreground-strong"
   >
     {{#if @icon}}
       <FlightIcon @name={{@icon}} />

web/app/components/pagination/link.ts

@@ -4,7 +4,11 @@ import Component from "@glimmer/component";
 
 interface PaginationLinkComponentSignature {
   Element: HTMLAnchorElement;
-  Args: {};
+  Args: {
+    disabled?: boolean;
+    icon?: string;
+    page?: number;
+  };
 }
 
 export default class PaginationLinkComponent extends Component<PaginationLinkComponentSignature> {
@@ -14,3 +18,9 @@ export default class PaginationLinkComponent extends Component<PaginationLinkCom
     return this.router.currentRouteName;
   }
 }
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Pagination::Link": typeof PaginationLinkComponent;
+  }
+}

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

@@ -28,6 +28,11 @@ export default class ProductBadgeLinkComponent extends Component<ProductBadgeLin
     if (this.args.productArea) {
       return {
         product: [this.args.productArea],
+        docType: [],
+        owners: [],
+        page: 1,
+        sortBy: "dateDesc",
+        status: [],
       };
     } else {
       return {};

web/app/components/row-results.hbs

@@ -1,14 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
-{{!
-  Displays the results of an Algolia search in a rows format.
-
-  <RowResults /> properties:
-    @docs: Algolia result's "hits" element from a docs search response.
-    @isDraft: Document is a draft.
-    @nbPages: Algolia result's "nbPages" element from a docs search response.
-    @page: Algolia result's "page" element from a docs search response.
-}}
-
 <section>
   <div class="x-container">
     <div class="row-results">
@@ -21,7 +10,21 @@
               <H.Th class="status">Status</H.Th>
               <H.Th class="product">Product/Area</H.Th>
               <H.Th class="owner">Owner</H.Th>
-              <H.Th class="created">Created</H.Th>
+              <H.Th class="created">
+                <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>
+              </H.Th>
             </H.Tr>
           </:head>
           <:body>
@@ -41,7 +44,9 @@
             {{/each}}
           </:body>
         </Hds::Table>
-        <Pagination @nbPages={{@nbPages}} @currentPage={{@currentPage}} />
+        {{#if this.paginationIsShown}}
+          <Pagination @nbPages={{@nbPages}} @currentPage={{@currentPage}} />
+        {{/if}}
       {{else}}
         {{#if @isDraft}}
           <Hds::Alert @type="inline" as |A|>

web/app/components/row-results.ts

@@ -1,12 +1,26 @@
 import Component from "@glimmer/component";
+import { HermesDocument } from "hermes/types/document";
+import { SortAttribute, SortDirection } from "./table/sortable-header";
 
 interface RowResultsComponentSignature {
   Args: {
-    // TODO: Add HermesDocument[] when we have a type for it.
-    docs: unknown[];
+    docs: HermesDocument[];
     isDraft?: boolean;
     nbPages: number;
     currentPage: number;
+    changeSort?: (attribute: SortAttribute) => void;
+    currentSort: `${SortAttribute}`;
+    sortDirection: SortDirection;
   };
 }
-export default class RowResultsComponent extends Component<RowResultsComponentSignature> {}
+export default class RowResultsComponent extends Component<RowResultsComponentSignature> {
+  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;
+  }
+}

web/app/components/table/sortable-header.hbs

@@ -0,0 +1,30 @@
+{{#if @changeSort}}
+  <Action
+    data-test-sortable-table-header
+    data-test-attribute={{@attribute}}
+    data-test-element="button"
+    class="sortable-table-header {{if this.isActive 'active'}}"
+    {{on "click" this.changeSort}}
+    ...attributes
+  >
+    <div class="sort-icon">
+      <FlightIcon @name={{this.iconName}} />
+    </div>
+    {{yield}}
+  </Action>
+{{else}}
+  <LinkTo
+    data-test-sortable-table-header
+    data-test-attribute={{@attribute}}
+    data-test-element="anchor"
+    ...attributes
+    @route={{this.currentRoute}}
+    @query={{@queryParam}}
+    class="sortable-table-header {{if this.isActive 'active'}}"
+  >
+    <div class="sort-icon">
+      <FlightIcon @name={{this.iconName}} />
+    </div>
+    {{yield}}
+  </LinkTo>
+{{/if}}