Improve handling of DocType icons (#481)

* Create DocumentTypes service

* Update tests

web/app/components/new/doc-form.hbs

@@ -1,6 +1,6 @@
 <New::Form
   @taskIsRunning={{this.docIsBeingCreated}}
-  @icon={{get-doctype-icon @docType}}
+  @icon={{or this.docTypeIcon "file-text"}}
   @headline="Create your {{@docType}}"
   @buttonIsActive={{this.buttonIsActive}}
   @taskIsRunningHeadline="Creating draft in Google Drive..."

web/app/components/new/doc-form.ts

@@ -15,6 +15,9 @@ import cleanString from "hermes/utils/clean-string";
 import { ProductArea } from "hermes/services/product-areas";
 import { next } from "@ember/runloop";
 import HermesFlashMessagesService from "hermes/services/flash-messages";
+import { ModelFrom } from "hermes/types/route-models";
+import AuthenticatedNewRoute from "hermes/routes/authenticated/new";
+import DocumentTypesService from "hermes/services/document-types";
 
 interface DocFormErrors {
   title: string | null;
@@ -33,6 +36,7 @@ interface NewDocFormComponentSignature {
 export default class NewDocFormComponent extends Component<NewDocFormComponentSignature> {
   @service("config") declare configSvc: ConfigService;
   @service("fetch") declare fetchSvc: FetchService;
+  @service declare documentTypes: DocumentTypesService;
   @service declare authenticatedUser: AuthenticatedUserService;
   @service declare flashMessages: HermesFlashMessagesService;
   @service declare modalAlerts: ModalAlertsService;
@@ -79,6 +83,10 @@ export default class NewDocFormComponent extends Component<NewDocFormComponentSi
     return this._form;
   }
 
+  protected get docTypeIcon() {
+    return this.documentTypes.getFlightIcon(this.args.docType);
+  }
+
   /**
    * Whether the form has errors.
    */

web/app/components/new/document-template-list.hbs

@@ -16,9 +16,12 @@
   {{/if}}
 </div>
 
-<ol class="mt-8 grid auto-rows-fr grid-cols-2 gap-2">
-  {{#each @docTypes as |docType|}}
-    <li data-test-template-option class="relative flex items-stretch">
+<ol class="mt-8 grid auto-rows-min grid-cols-2 gap-2">
+  {{#each this.docTypes as |docType|}}
+    <li
+      data-test-template-option
+      class="relative flex min-h-[112px] items-stretch"
+    >
       <LinkTo
         @route="authenticated.new.doc"
         @query={{hash docType=docType.name}}
@@ -34,12 +37,15 @@
             <FlightIcon
               data-test-icon
               @size="24"
-              @name={{or docType.flightIcon (get-doctype-icon docType.name)}}
+              @name={{or docType.flightIcon "file-text"}}
               class="-mt-1 shrink-0 text-color-foreground-faint"
             />
             <div class="w-full">
               <div class="flex w-full items-start justify-between gap-2.5">
-                <h2 data-test-long-name class="hermes-h-300 leading-none">
+                <h2
+                  data-test-long-name
+                  class="hermes-h-300 -mt-1 leading-tight"
+                >
                   {{docType.longName}}
                 </h2>
                 {{#unless
@@ -55,7 +61,7 @@
               </div>
               <p
                 data-test-description
-                class="mt-1.5 max-w-[360px] text-body-300 text-color-foreground-faint"
+                class="mt-0.5 max-w-[360px] text-body-300 text-color-foreground-faint"
               >
                 {{docType.description}}
               </p>
@@ -73,7 +79,7 @@
       Related links
     </h3>
     <ul class="grid gap-1">
-      {{#each @docTypes as |docType|}}
+      {{#each this.docTypes as |docType|}}
         {{#if docType.moreInfoLink}}
           <li>
             <ExternalLink

web/app/components/new/document-template-list.ts

@@ -1,23 +1,24 @@
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
+import DocumentTypesService from "hermes/services/document-types";
 import FlagsService from "hermes/services/flags";
-import { HermesDocumentType } from "hermes/types/document-type";
 
-interface NewDocumentTemplateListComponentSignature {
-  Args: {
-    docTypes: HermesDocumentType[];
-  };
-}
+interface NewDocumentTemplateListComponentSignature {}
 
 export default class NewDocumentTemplateListComponent extends Component<NewDocumentTemplateListComponentSignature> {
+  @service declare documentTypes: DocumentTypesService;
   /**
    * Used in the template to decide whether to show
    * the "Start a project" button.
    */
   @service declare flags: FlagsService;
 
   protected get moreInfoLinksAreShown(): boolean {
-    return this.args.docTypes.some((docType) => docType.moreInfoLink);
+    return !!this.documentTypes.index?.some((docType) => docType.moreInfoLink);
+  }
+
+  protected get docTypes() {
+    return this.documentTypes.index;
   }
 }
 

web/app/routes/authenticated/new.ts

@@ -1,3 +1,13 @@
 import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
+import DocumentTypesService from "hermes/services/document-types";
 
-export default class AuthenticatedNewRoute extends Route {}
+export default class AuthenticatedNewRoute extends Route {
+  @service declare documentTypes: DocumentTypesService;
+
+  async model() {
+    if (!this.documentTypes.index) {
+      await this.documentTypes.fetch.perform();
+    }
+  }
+}

web/app/routes/authenticated/new/index.ts

@@ -1,16 +1,3 @@
 import Route from "@ember/routing/route";
-import { inject as service } from "@ember/service";
-import ConfigService from "hermes/services/config";
-import FetchService from "hermes/services/fetch";
-import { HermesDocumentType } from "hermes/types/document-type";
 
-export default class AuthenticatedNewIndexRoute extends Route {
-  @service("config") declare configSvc: ConfigService;
-  @service("fetch") declare fetchSvc: FetchService;
-
-  async model() {
-    return (await this.fetchSvc
-      .fetch(`/api/${this.configSvc.config.api_version}/document-types`)
-      .then((r) => r?.json())) as HermesDocumentType[];
-  }
-}
+export default class AuthenticatedNewIndexRoute extends Route {}

web/app/services/document-types.ts

@@ -0,0 +1,29 @@
+import Service, { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { task } from "ember-concurrency";
+import ConfigService from "hermes/services/config";
+import FetchService from "./fetch";
+import { HermesDocumentType } from "hermes/types/document-type";
+
+export default class DocumentTypesService extends Service {
+  @service("config") declare configSvc: ConfigService;
+  @service("fetch") declare fetchSvc: FetchService;
+
+  @tracked index: HermesDocumentType[] | null = null;
+
+  fetch = task(async () => {
+    this.index = (await this.fetchSvc
+      .fetch(`/api/${this.configSvc.config.api_version}/document-types`)
+      .then((r) => r?.json())) as HermesDocumentType[];
+  });
+
+  getFlightIcon(type: string): string | undefined {
+    const docType = this.index?.find((t) => t.name === type);
+
+    if (!docType) {
+      return;
+    }
+
+    return docType.flightIcon;
+  }
+}

web/app/templates/authenticated/new/index.hbs

@@ -1,3 +1,3 @@
 {{page-title "Choose a template"}}
 
-<New::DocumentTemplateList @docTypes={{this.model}} />
+<New::DocumentTemplateList />

web/mirage/config.ts

@@ -450,6 +450,7 @@ export default function (mirageConfig) {
                 text: "More-info link",
                 url: "example.com",
               },
+              flightIcon: "discussion-circle",
             },
             {
               name: "PRD",
@@ -458,14 +459,15 @@ export default function (mirageConfig) {
                 "Summarize a problem statement and outline a phased approach to addressing it.",
             },
           ]);
+        } else {
+          return new Response(
+            200,
+            {},
+            this.schema.documentTypes
+              .all()
+              .models.map((docType) => docType.attrs),
+          );
         }
-        return new Response(
-          200,
-          {},
-          this.schema.documentTypes.all().models.map((docType) => {
-            return docType.attrs;
-          }),
-        );
       });
 
       /**

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

@@ -91,9 +91,8 @@ module("Acceptance | authenticated/new", function (hooks) {
 
     // `file-text` is the default icon
     // `square` is the icon we just set for RFC.
-    // `radio` is what's returned from `getDoctypeIcon` for "Memo"
 
-    const expectedIcons = ["file-text", "square", "radio"];
+    const expectedIcons = ["file-text", "square", "file-text"];
 
     assert.deepEqual(
       [...document.querySelectorAll(ICON)].map((el) =>