Tweak search results header; improve /results types; prep for project results

web/app/components/doc/tile-medium.ts

@@ -15,7 +15,7 @@ interface DocTileMediumComponentSignature {
      * The search query associated with the current view.
      * Used to highlight search terms in the document title.
      */
-    query?: string;
+    query?: string | null;
   };
   Blocks: {
     default: [];

web/app/components/pagination.hbs

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

web/app/components/results/index.hbs

@@ -1,24 +1,16 @@
-<h1
-  data-test-results-header-text
-  class="mb-4 text-display-300 font-semibold"
->{{@results.nbHits}}
-  {{if (eq 1 @results.nbHits) "document" "documents"}}
-  {{#if @query}}
-    matching
-    <mark>
-      {{@query}}
-    </mark>
-  {{/if}}
-</h1>
+<h2 data-test-results-subhead class="mb-6 text-display-300 font-semibold">
+  {{@docResults.nbHits}}
+  {{if (eq @docResults.nbHits 1) "match" "matches"}}
+</h2>
 <ol class="divided-list">
-  {{#each @results.hits as |doc|}}
+  {{#each @docResults.hits as |doc|}}
     <li data-test-doc-search-result class="group relative">
       <Doc::TileMedium @doc={{doc}} @query={{@query}} />
     </li>
   {{/each}}
 </ol>
 
 <Pagination
-  @currentPage={{(add @results.page 1)}}
-  @nbPages={{@results.nbPages}}
+  @currentPage={{(add (or @docResults.page 0) 1)}}
+  @nbPages={{@docResults.nbPages}}
 />

web/app/components/results/index.ts

@@ -1,29 +1,18 @@
 import Component from "@glimmer/component";
 import { SearchResponse } from "@algolia/client-search";
 import { HermesDocument } from "hermes/types/document";
-import { capitalize } from "@ember/string";
 
 interface ResultsIndexComponentSignature {
   Args: {
-    results: SearchResponse<HermesDocument>;
-    query: string;
+    docResults?: SearchResponse<HermesDocument>;
+    query: string | null;
   };
 }
 
-export default class ResultsIndexComponent extends Component<ResultsIndexComponentSignature> {
-  get lowercasedQuery(): string {
-    return this.args.query?.toLowerCase();
-  }
-
-  get capitalizedQuery(): string {
-    return capitalize(this.lowercasedQuery);
-  }
+export default class ResultsIndexComponent extends Component<ResultsIndexComponentSignature> {}
 
-  get queryIsProductName(): boolean {
-    let hits = this.args.results?.hits as HermesDocument[];
-    // Assume at least one of the first 12 hits is a product match for the query.
-    return hits.some(
-      (hit) => hit.product?.toLowerCase() === this.lowercasedQuery,
-    );
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    Results: typeof ResultsIndexComponent;
   }
 }

web/app/controllers/authenticated/results.ts

@@ -5,7 +5,7 @@ import { ModelFrom } from "hermes/types/route-models";
 export default class AuthenticatedResultsController extends Controller {
   queryParams = ["docType", "owners", "page", "product", "q", "status"];
 
-  q = null;
+  q: string | null = null;
   page = 1;
   docType = [];
   owners = [];

web/app/routes/authenticated/results.ts

@@ -36,14 +36,16 @@ export default class AuthenticatedResultsRoute extends Route {
   };
 
   async model(params: ResultsRouteParams) {
-    const searchIndex = this.configSvc.config.algolia_docs_index_name;
+    const docsIndex = this.configSvc.config.algolia_docs_index_name;
 
-    const [facets, results] = await Promise.all([
-      this.algolia.getFacets.perform(searchIndex, params),
-      this.algolia.getDocResults.perform(searchIndex, params),
+    const [docFacets, docResults] = await Promise.all([
+      this.algolia.getFacets.perform(docsIndex, params),
+      this.algolia.getDocResults.perform(docsIndex, params),
     ]);
 
-    const hits = (results as { hits?: HermesDocument[] }).hits;
+    const typedDocResults = docResults as SearchResponse<HermesDocument>;
+
+    const hits = typedDocResults.hits;
 
     if (hits) {
       // Load owner information
@@ -52,7 +54,7 @@ export default class AuthenticatedResultsRoute extends Route {
 
     this.activeFilters.update(params);
 
-    return { facets, results };
+    return { docFacets, docResults: typedDocResults };
   }
 
   /**

web/app/styles/components/header/active-filter-list.scss

@@ -1,16 +1,16 @@
 .active-filter-list {
-  @apply pt-6 flex items-start;
+  @apply flex items-start pt-6;
 
   h3 {
-    @apply h-[30px] flex items-center mr-4 font-semibold shrink-0;
+    @apply mr-4 flex h-[30px] shrink-0 items-center font-semibold text-color-foreground-strong;
   }
 
   .active-filter-list-container {
-    @apply min-h-[30px] flex items-center flex-wrap;
+    @apply flex min-h-[30px] flex-wrap items-center;
   }
 
   .clear-all-link {
-    @apply no-underline text-color-foreground-faint flex items-center h-[30px] ml-2 shrink-0;
+    @apply ml-2 flex h-[30px] shrink-0 items-center text-color-foreground-faint no-underline;
 
     &:hover {
       @apply text-color-foreground-strong;

web/app/templates/authenticated/results.hbs

@@ -1,5 +1,15 @@
 {{page-title this.pageTitle}}
 
-<Header::Toolbar @facets={{this.model.facets}} />
+<div class="mb-6">
+  <h1 data-test-results-headline class="w-full text-display-500">
+    Results
+    {{#if this.q}}
+      for
+      <mark>{{this.q}}</mark>
+    {{/if}}
+  </h1>
+</div>
 
-<Results @results={{this.model.results}} @query={{this.q}} />
+<Header::Toolbar @facets={{this.model.docFacets}} />
+
+<Results @docResults={{this.model.docResults}} @query={{this.q}} />

web/tests/acceptance/authenticated/results-test.ts

@@ -19,7 +19,8 @@ const VIEW_ALL_DOCS_LINK = "[data-test-view-all-docs-link]";
 
 // Header
 const DOC_SEARCH_RESULT = "[data-test-doc-search-result]";
-const RESULTS_HEADER_TEXT = "[data-test-results-header-text]";
+const RESULTS_HEADLINE = "[data-test-results-headline]";
+const RESULTS_SUBHEAD = "[data-test-results-subhead]";
 const ACTIVE_FILTER_LIST = "[data-test-active-filter-list]";
 const ACTIVE_FILTER_LINK = "[data-test-active-filter-link]";
 const CLEAR_ALL_FILTERS_LINK = "[data-test-clear-all-filters-link]";
@@ -69,24 +70,23 @@ module("Acceptance | authenticated/results", function (hooks) {
 
     assert.dom(DOC_SEARCH_RESULT).exists({ count: totalDocCount });
 
+    assert.dom(RESULTS_HEADLINE).hasText("Results");
     assert
-      .dom(RESULTS_HEADER_TEXT)
+      .dom(RESULTS_SUBHEAD)
       .hasText(
-        `${totalDocCount} documents`,
-        "the correct header text is shown (plural, no query)",
+        `${totalDocCount} matches`,
+        "the correct header text is shown (plural)",
       );
 
     // search for title
     await visit(`/results?q=${uniqueTitle.replace(" ", "+")}`);
 
     assert.dom(DOC_SEARCH_RESULT).exists({ count: 1 });
 
+    assert.dom(RESULTS_HEADLINE).hasText(`Results for ${uniqueTitle}`);
     assert
-      .dom(RESULTS_HEADER_TEXT)
-      .hasText(
-        `1 document matching ${uniqueTitle}`,
-        "the correct header text is shown (singular, with query)",
-      );
+      .dom(RESULTS_SUBHEAD)
+      .hasText("1 match", "the correct header text is shown (singular)");
   });
 
   test("you can filter results", async function (this: Context, assert) {
@@ -144,7 +144,7 @@ module("Acceptance | authenticated/results", function (hooks) {
 
     await visit("/results");
 
-    assert.dom(RESULTS_HEADER_TEXT).containsText(`${totalDocCount}`);
+    assert.dom(RESULTS_SUBHEAD).containsText(`${totalDocCount}`);
     assert.dom(DOC_SEARCH_RESULT).exists({ count: totalDocCount });
 
     assert
@@ -168,7 +168,7 @@ module("Acceptance | authenticated/results", function (hooks) {
 
     await click(secondFacet as unknown as Element);
 
-    assert.dom(RESULTS_HEADER_TEXT).containsText(`${frdCount}`);
+    assert.dom(RESULTS_SUBHEAD).containsText(`${frdCount}`);
     assert.dom(DOC_SEARCH_RESULT).exists({ count: frdCount });
 
     assert
@@ -201,7 +201,7 @@ module("Acceptance | authenticated/results", function (hooks) {
 
     await click(secondFacet as unknown as Element);
 
-    assert.dom(RESULTS_HEADER_TEXT).containsText("1");
+    assert.dom(RESULTS_SUBHEAD).containsText("1");
     assert.dom(DOC_SEARCH_RESULT).exists({ count: 1 });
 
     assert
@@ -234,7 +234,7 @@ module("Acceptance | authenticated/results", function (hooks) {
 
     await click(ACTIVE_FILTER_LINK);
 
-    assert.dom(RESULTS_HEADER_TEXT).containsText(`${terraformDocCount}`);
+    assert.dom(RESULTS_SUBHEAD).containsText(`${terraformDocCount}`);
     assert.dom(DOC_SEARCH_RESULT).exists({ count: terraformDocCount });
 
     assert
@@ -246,7 +246,7 @@ module("Acceptance | authenticated/results", function (hooks) {
 
     await click(CLEAR_ALL_FILTERS_LINK);
 
-    assert.dom(RESULTS_HEADER_TEXT).containsText(`${totalDocCount}`);
+    assert.dom(RESULTS_SUBHEAD).containsText(`${totalDocCount}`);
 
     assert.dom(DOC_SEARCH_RESULT).exists({ count: totalDocCount });