EditableFields enhancements and bugfixes (#340)

* Define SessionService exports

* WIP convert document route to TS

* Update modifiedTime

* Remove thumbnail, update Tile modifiedAgo

* Cleanup

* Fix modifiedTime type

* Update `modifiedAgo` and `timeAgo`

* Add tests

* Rework "modifiedTime" calculations

* Fix sidebar timeAgo; add documentation

* Add "Modified" to tile

* Remove console.logs

* Update document.ts

* Fix incorrect types and test

* Autofocus PeopleSelects in the sidebar

* Remove console.log

* Improve loading states

* Update/add tests

* Remove console.logs

* Change some sidebar empty states

* Update EditableField components

* Fixed tests

* Add dismissible test

* Remove default margin from H1

* Add RelatedResource emptyState button

* Animation polish

* EditableContainer, remove some TODOs

* Tweak save-state styles

* Add created types

* Clarify types

* Remove comment

* Remove console logs

* Remove unused import

* Move loading to Person component

* Change loading affordance

* Create a `HermesUser` component

* Add tests

* Move test from acceptance to integration

* Remove kickOff task

* Grammar tweak

* Move getDocType into route

* Interface tweak

* Convert `test` to `todo`

* Update related-resources-test.ts

* Update related-resources-test.ts

* Add documentation

* Add `rr.showModal` tests

* Refactor EmptyStateText

* Tweak API

* WIP test

* Update CSS

* Convert to .gts

* Remove shared classes

* Fix bug on Approvers/Contributors

* Add missing import

* `onChange` → `onCommit`

* Save commit

* Mostly working ?

clicking chevkbox on PEOPLE doesnt work...

* Squashed commit of the following:

commit 6cf47b1
Author: Jeff Daley <[email protected]>
Date:   Tue Oct 3 16:31:01 2023 -0400

    Revert HermesUser changes

commit 31d301a
Author: Josh Freda <[email protected]>
Date:   Tue Oct 3 12:39:28 2023 -0500

    Enable Datadog tracing (#354)

    * Add Datadog configuration

    * Add datadog package

    * Enable Datadog tracing

commit 0d61dc3
Author: Jeff Daley <[email protected]>
Date:   Mon Oct 2 13:58:57 2023 -0400

    EmptyStateText (#355)

    * Refactor EmptyStateText

    * Tweak API

    * Convert to .gts

* Squashed commit of the following:

commit cfc61f8
Author: Jeff Daley <[email protected]>
Date:   Tue Oct 3 20:28:07 2023 -0400

    Remove `imageIsLoading`

commit 6cf47b1
Author: Jeff Daley <[email protected]>
Date:   Tue Oct 3 16:31:01 2023 -0400

    Revert HermesUser changes

commit 31d301a
Author: Josh Freda <[email protected]>
Date:   Tue Oct 3 12:39:28 2023 -0500

    Enable Datadog tracing (#354)

    * Add Datadog configuration

    * Add datadog package

    * Enable Datadog tracing

commit 0d61dc3
Author: Jeff Daley <[email protected]>
Date:   Mon Oct 2 13:58:57 2023 -0400

    EmptyStateText (#355)

    * Refactor EmptyStateText

    * Tweak API

    * Convert to .gts

* Improved component sharing

* Add `@type="people"`

* Remove console.logs

* Add support for approvers

* CustomEditableFields cleanup and documentation

* Rename some functions

* Clean up EditableField template

* Add EditableField::ReadValue component

* More cleanup and reorganization

* More documentation

* Improve `isSaving` styles

* Fix customEditable People Field saving

* Improve types

* Stub some tests

* Refactor the `type` argument; EF test

* Update editable-field-test.ts

* EF tests

* More tests

* More tests

* Fix test, remove `click-outside`

* Tweak argument name

* Update yarn.lock

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

@@ -1,60 +1,11 @@
-{{#if this.typeIsString}}
+<div class="editable-field-container" ...attributes>
   <EditableField
-    data-test-custom-string-field
-    @value={{get @document @field}}
-    @onChange={{@onChange}}
+    data-test-custom-field
+    data-test-custom-field-type={{if this.typeIsString "string" "people"}}
+    @value={{if this.typeIsString this.stringValue this.hermesUsers}}
+    @onChange={{if this.typeIsPeople this.onPeopleSelectChange}}
+    @onSave={{if this.typeIsPeople this.onPeopleSave @onSave}}
     @isSaving={{@isSaving}}
-    @disabled={{@disabled}}
-  >
-    <:default as |F|>
-      {{#if F.value}}
-        <p class="truncate text-body-200" title={{F.value}}>
-          {{F.value}}
-        </p>
-      {{else}}
-        <EmptyStateText />
-      {{/if}}
-    </:default>
-    <:editing as |F|>
-      <Hds::Form::Textarea::Field
-        {{F.input}}
-        {{auto-height-textarea}}
-        @value={{F.value}}
-        name={{@field}}
-        data-test-custom-string-field-input
-      />
-    </:editing>
-  </EditableField>
-
-{{else if this.typeIsPeople}}
-  <EditableField
-    data-test-custom-people-field
-    @value={{get @attributes "value"}}
-    @onChange={{@onChange}}
-    @isSaving={{@isSaving}}
-  >
-    <:default>
-      {{#if this.people.length}}
-        <ol class="person-list">
-          {{#each this.people as |user|}}
-            <li>
-              <Person @imgURL={{user.imgURL}} @email={{user.email}} />
-            </li>
-          {{/each}}
-        </ol>
-      {{else}}
-        <EmptyStateText />
-      {{/if}}
-    </:default>
-    <:editing as |F|>
-      <Inputs::PeopleSelect
-        {{autofocus targetChildren=true}}
-        class="multiselect--narrow"
-        @selected={{this.people}}
-        @onChange={{this.updateEmails}}
-        {{click-outside (fn F.update this.people)}}
-        data-test-custom-people-field-input
-      />
-    </:editing>
-  </EditableField>
-{{/if}}
+    @isReadOnly={{@disabled}}
+  />
+</div>

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

@@ -1,4 +1,4 @@
-import { action } from "@ember/object";
+import { action, get } from "@ember/object";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import {
@@ -8,39 +8,68 @@ import {
 } from "hermes/types/document";
 
 interface CustomEditableFieldComponentSignature {
+  Element: HTMLDivElement;
   Args: {
     document: HermesDocument;
     field: string;
     attributes: CustomEditableField;
-    onChange: (value: any) => void;
+    onSave: (value: any) => void;
     isSaving?: boolean;
     disabled?: boolean;
   };
 }
 
 export default class CustomEditableFieldComponent extends Component<CustomEditableFieldComponentSignature> {
-  @tracked protected emails: string | string[] =
-    this.args.attributes.value || [];
-
-  protected get typeIsString(): boolean {
+  protected get typeIsString() {
     return this.args.attributes.type === "STRING";
   }
 
-  protected get typeIsPeople(): boolean {
+  protected get typeIsPeople() {
     return this.args.attributes.type === "PEOPLE";
   }
 
-  protected get people(): HermesUser[] {
+  /**
+   * The value of the field. Initially set to the value passed in.
+   * Changes when the user updates or saves the PeopleSelect value.
+   */
+  @tracked protected emails = this.args.attributes.value || [];
+
+  /**
+   * The value of the field, serialized for the PeopleSelect.
+   */
+  protected get hermesUsers(): HermesUser[] {
     let emails = this.emails instanceof Array ? this.emails : [this.emails];
     return emails.map((email: string) => {
       return { email, imgURL: null };
     });
   }
-  @action protected updateEmails(people: HermesUser[]) {
+
+  protected get stringValue(): string {
+    const value = get(this.args.document, this.args.field);
+    if (typeof value === "string") {
+      return value;
+    } else {
+      return "";
+    }
+  }
+
+  /**
+   * The function to call when the user updates the PeopleSelect value.
+   * Deserializes the value and updates the local `emails` property.
+   */
+  @action protected onPeopleSelectChange(people: HermesUser[]) {
     this.emails = people.map((person: HermesUser) => {
       return person.email;
     });
   }
+
+  /**
+   * The function to call when the user saves PeopleSelect changes.
+   * Calls the parent `onSave` action and updates the local `cached` property.
+   */
+  @action protected onPeopleSave() {
+    this.args.onSave(this.emails);
+  }
 }
 
 declare module "@glint/environment-ember-loose/registry" {