Merge branch 'jeffdaley/document-route-performance' into jeffdaley/ex…

…plore-projects

web/app/components/custom-editable-field.ts

@@ -14,7 +14,7 @@ interface CustomEditableFieldComponentSignature {
     field: string;
     attributes: CustomEditableField;
     onChange: (value: any) => void;
-    loading?: boolean;
+    isSaving?: boolean;
     disabled?: boolean;
   };
 }

web/app/components/document/index.hbs

@@ -1,4 +1,7 @@
-<div class="flex flex-1 space-x-px max-h-screen">
+<div
+  class="flex max-h-screen flex-1 space-x-px"
+  {{did-insert this.kickOffBackgroundTasks}}
+>
   <div
     class="sidebar shrink-0 {{if this.sidebarIsCollapsed 'collapsed' 'w-72'}}"
   >
@@ -11,19 +14,18 @@
         @profile={{this.authenticatedUser.info}}
         @document={{@document}}
         @deleteDraft={{perform this.deleteDraft}}
-        @docType={{@docType}}
         @isCollapsed={{this.sidebarIsCollapsed}}
         @toggleCollapsed={{this.toggleSidebarCollapsedState}}
       />
     {{/unless}}
   </div>
 
-  <div class="pt-4 pb-4 pr-4 w-full">
+  <div class="w-full pt-4 pb-4 pr-4">
     <Hds::Card::Container
       @level="high"
       @hasBorder={{true}}
       @overflow="hidden"
-      class="flex items-center justify-center h-full"
+      class="flex h-full items-center justify-center"
     >
       {{#unless @modelIsChanging}}
         {{!

web/app/components/document/index.ts

@@ -12,7 +12,6 @@ import { action } from "@ember/object";
 
 interface DocumentIndexComponentSignature {
   document: HermesDocument;
-  docType: string;
   modelIsChanging: boolean;
 }
 
@@ -30,6 +29,21 @@ export default class DocumentIndexComponent extends Component<DocumentIndexCompo
     this.sidebarIsCollapsed = !this.sidebarIsCollapsed;
   }
 
+  @action kickOffBackgroundTasks() {
+    // Ensure an up-to-date list of recently viewed docs
+    // by the time the user returns to the dashboard.
+    void this.recentDocs.fetchAll.perform();
+
+    void this.fetchSvc.fetch("/api/v1/web/analytics", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        document_id: this.args.document.objectID,
+        product_name: this.args.document.product,
+      }),
+    });
+  }
+
   protected deleteDraft = dropTask(async (docID: string) => {
     try {
       let fetchResponse = await this.fetchSvc.fetch("/api/v1/drafts/" + docID, {

web/app/components/document/sidebar.ts

@@ -28,13 +28,20 @@ import Ember from "ember";
 import htmlElement from "hermes/utils/html-element";
 import ConfigService from "hermes/services/config";
 import isValidURL from "hermes/utils/is-valid-u-r-l";
+import { GoogleUser } from "../inputs/people-select";
 import { HermesDocumentType } from "hermes/types/document-type";
 
+const serializePeople = (people: GoogleUser[]): HermesUser[] => {
+  return people.map((p) => ({
+    email: p.emailAddresses[0]?.value as string,
+    imgURL: p.photos?.[0]?.url,
+  }));
+};
+
 interface DocumentSidebarComponentSignature {
   Args: {
     profile: AuthenticatedUser;
     document: HermesDocument;
-    docType: HermesDocumentType;
     deleteDraft: (docId: string) => void;
     isCollapsed: boolean;
     toggleCollapsed: () => void;
@@ -73,6 +80,8 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
   @tracked docTypeCheckboxValue = false;
   @tracked emailFields = ["approvers", "contributors"];
 
+  @tracked protected docType: HermesDocumentType | null = null;
+
   get modalIsShown() {
     return (
       this.archiveModalIsShown ||
@@ -471,6 +480,21 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
     return !this.editingIsDisabled;
   }
 
+  private getDocType = task(async () => {
+    const docTypes = (await this.fetchSvc
+      .fetch("/api/v1/document-types")
+      .then((r) => r?.json())) as HermesDocumentType[];
+
+    assert("docTypes must exist", docTypes);
+
+    const docType = docTypes.find(
+      (dt) => dt.name === this.args.document.docType
+    );
+
+    assert("docType must exist", docType);
+    this.docType = docType;
+  });
+
   @action refreshRoute() {
     // We force refresh due to a bug with `refreshModel: true`
     // See: https://github.com/emberjs/ember.js/issues/19260
@@ -510,6 +534,40 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
     });
   }
 
+  @action kickOffBackgroundTasks() {
+    void this.getDocType.perform();
+    void this.serializeContributorsAndApprovers.perform();
+  }
+
+  protected serializeContributorsAndApprovers = task(async () => {
+    let maybePromises = [];
+
+    const contributorsPromise = this.fetchSvc
+      .fetch(`/api/v1/people?emails=${this.contributors.join(",")}`)
+      .then((r) => r?.json());
+
+    const approversPromise = this.fetchSvc
+      .fetch(`/api/v1/people?emails=${this.approvers.join(",")}`)
+      .then((r) => r?.json());
+
+    maybePromises.push(this.contributors.length ? contributorsPromise : []);
+    maybePromises.push(this.approvers.length ? approversPromise : []);
+
+    if (!maybePromises.length) {
+      return;
+    }
+
+    const [contributors, approvers] = await Promise.all(maybePromises);
+
+    if (contributors.length) {
+      this.contributors = serializePeople(contributors);
+    }
+
+    if (approvers.length) {
+      this.approvers = serializePeople(approvers);
+    }
+  });
+
   /**
    * A task that waits for a short time and then resolves.
    * Used to trigger the "link created" state of the share button.

web/app/components/document/sidebar/header.hbs

@@ -1,4 +1,4 @@
-<div class="sidebar-header {{if @userHasScrolled 'scrolled'}}">
+<div class="sidebar-header {{if @userHasScrolled 'scrolled'}}" ...attributes>
   <LinkTo
     data-test-sidebar-dashboard-link
     class="sidebar-header-button sidebar-dashboard-link"

web/app/components/document/sidebar/header.ts

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { HermesDocument } from "hermes/types/document";
 
 interface DocumentSidebarHeaderComponentSignature {
+  Element: HTMLDivElement;
   Args: {
     document: HermesDocument;
     isCollapsed: boolean;

web/app/components/editable-field.hbs

@@ -1,10 +1,8 @@
 <div
-  class="editable-field
-    {{if (and this.editingIsEnabled (not @loading)) 'z-10'}}"
+  class="editable-field {{if this.editingBlockIsShown 'z-10'}}"
   ...attributes
 >
-  {{#if (and this.editingIsEnabled (not @loading))}}
-
+  {{#if this.editingBlockIsShown}}
     {{on-document "keydown" this.handleKeydown}}
 
     <div {{did-insert this.registerEditingContainer}} class="w-full">
@@ -69,8 +67,13 @@
     </div>
 
   {{else}}
-    {{#if @loading}}
-      <FlightIcon @name="loading" class="loading-indicator" />
+    {{#if (or @isSaving @isLoading)}}
+      <div
+        data-test-spinner
+        class={{if @isSaving "absolute top-0 right-0" "flex h-5 items-center"}}
+      >
+        <FlightIcon @name="loading" data-test-loading-spinner />
+      </div>
     {{/if}}
     <Action
       {{did-insert this.registerToggleButton}}

web/app/components/editable-field.ts

@@ -3,8 +3,6 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { next, schedule, scheduleOnce } from "@ember/runloop";
 import { assert } from "@ember/debug";
-import { modifier } from "ember-modifier";
-import { ModifierLike } from "@glint/template";
 import { guidFor } from "@ember/object/internals";
 
 export const FOCUSABLE =
@@ -15,7 +13,8 @@ interface EditableFieldComponentSignature {
   Args: {
     value: any;
     onChange: (value: any) => void;
-    loading?: boolean;
+    isLoading?: boolean;
+    isSaving?: boolean;
     disabled?: boolean;
     isRequired?: boolean;
     class?: string;
@@ -33,7 +32,7 @@ interface EditableFieldComponentSignature {
         value: any;
         update: (value: any) => void;
         applyPeopleSelectClasses: (element: HTMLElement) => void;
-      }
+      },
     ];
   };
 }
@@ -80,6 +79,11 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
   @tracked protected relatedButtons: HTMLElement[] = [];
   @tracked protected toggleButton: HTMLElement | null = null;
   @tracked protected cancelButton: HTMLElement | null = null;
+
+  protected get editingBlockIsShown() {
+    return this.editingIsEnabled && !this.args.isSaving && !this.args.isLoading;
+  }
+
   /**
    * The modifier passed to the `editing` block to apply to the input or textarea.
    * Autofocuses the input and adds a blur listener to commit changes.
@@ -99,7 +103,7 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
 
   @action protected applyPeopleSelectClasses(
     element: HTMLElement,
-    onNextRunLoop = true
+    onNextRunLoop = true,
   ) {
     const addClasses = () => element.classList.add("relative", "z-10");
 
@@ -115,7 +119,7 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
   @action protected registerEditingContainer(element: HTMLElement) {
     this.editingContainer = element;
     const relatedButtons = Array.from(
-      this.editingContainer.querySelectorAll("button")
+      this.editingContainer.querySelectorAll("button"),
     ) as HTMLElement[];
     this.relatedButtons.push(...relatedButtons);
   }

web/app/components/row-results.hbs

@@ -32,7 +32,7 @@
               {{log doc.status}}
               <Doc::Row
                 @avatar="{{get doc.ownerPhotos 0}}"
-                @createdDate={{doc.created}}
+                @createdDate="{{parse-date doc.created}}"
                 @docID="{{doc.objectID}}"
                 @docNumber="{{doc.docNumber}}"
                 @docType="{{doc.docType}}"

web/app/helpers/parse-date.ts

@@ -4,17 +4,14 @@ export interface ParseDateHelperSignature {
   Args: {
     Positional: [
       time: string | number | Date | undefined,
-      monthFormat: undefined | "short" | "long"
+      monthFormat?: "short" | "long"
     ];
     Return: Date | undefined;
   };
 }
 
 const parseDateHelper = helper<ParseDateHelperSignature>(
-  ([time, monthFormat = "short"]: [
-    string | number | Date | undefined,
-    undefined | "short" | "long"
-  ]) => {
+  ([time, monthFormat = "short"]) => {
     return parseDate(time, monthFormat);
   }
 );