From 24824f9cb710b3b0d2521bf7a4769f7af2fb7e69 Mon Sep 17 00:00:00 2001
From: Jeff Daley <jeffdaley@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:24:18 -0400
Subject: [PATCH] Fix bug on Approvers/Contributors

---
 web/app/components/document/sidebar.hbs       | 10 +++++++---
 web/app/components/document/sidebar.ts        |  1 -
 web/app/components/editable-field.hbs         |  7 ++++++-
 web/app/components/editable-field.ts          |  2 ++
 web/app/components/hermes-users.ts            |  1 +
 web/app/styles/components/editable-field.scss |  8 +++++---
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
index 0bf8280dc..75da5e8b3 100644
--- a/web/app/components/document/sidebar.hbs
+++ b/web/app/components/document/sidebar.hbs
@@ -109,8 +109,8 @@
             @disabled={{not this.isOwner}}
             @isRequired={{true}}
             @name="title"
-            class="mb-1.5"
             @tag="h1"
+            class="mb-1.5"
           />
         </div>
       </div>
@@ -183,7 +183,7 @@
             <EditableField
               data-test-document-contributors
               data-test-editable={{this.isOwner}}
-              @value={{this.contributors}}
+              @value={{h.users}}
               @onChange={{perform this.save "contributors"}}
               @isSaving={{this.saveIsRunning}}
               @disabled={{not this.isOwner}}
@@ -224,11 +224,15 @@
       <div>
         <Document::Sidebar::SectionHeader @title="Approvers" />
         <div class="editable-field-container mt-[3px]">
+          {{!
+          FIXME: this needs to be a local variable probably
+          so when people are added their avatars are available
+           }}
           <HermesUsers class="w-full" @emails={{@document.approvers}} as |h|>
             <EditableField
               data-test-document-approvers
               data-test-editable={{this.isOwner}}
-              @value={{this.approvers}}
+              @value={{h.users}}
               @onChange={{perform this.save "approvers"}}
               @isSaving={{this.saveIsRunning}}
               @disabled={{not this.isOwner}}
diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts
index 9d23a84ee..7f6fdfa5a 100644
--- a/web/app/components/document/sidebar.ts
+++ b/web/app/components/document/sidebar.ts
@@ -723,7 +723,6 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
 
   @action
   updateContributors(contributors: HermesUser[]) {
-    debugger;
     this.contributors = contributors;
   }
 
diff --git a/web/app/components/editable-field.hbs b/web/app/components/editable-field.hbs
index efc3952c2..9734c6e9d 100644
--- a/web/app/components/editable-field.hbs
+++ b/web/app/components/editable-field.hbs
@@ -5,6 +5,7 @@
 >
   {{#if (and this.editingIsEnabled (not @isSaving))}}
 
+    {{! FIXME: ...something here }}
     {{on-document "keydown" this.handleKeydown}}
 
     <div {{did-insert this.registerEditingContainer}} class="w-full">
@@ -72,7 +73,11 @@
     {{#if (or @isSaving @isLoading)}}
       <div
         data-test-spinner
-        class={{if @isSaving "absolute top-0 right-0" "flex h-5 items-center"}}
+        class={{if
+          @isSaving
+          "absolute top-2.5 right-[9px]"
+          "flex h-5 items-center"
+        }}
       >
         <FlightIcon @name="loading" data-test-loading-spinner />
       </div>
diff --git a/web/app/components/editable-field.ts b/web/app/components/editable-field.ts
index 65cd7cace..ce3ebf4dd 100644
--- a/web/app/components/editable-field.ts
+++ b/web/app/components/editable-field.ts
@@ -167,6 +167,7 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
    * On Escape, we disable editing.
    */
   @action protected handleKeydown(ev: KeyboardEvent) {
+    console.log("handleKeydown", ev.key);
     switch (ev.key) {
       case "Enter":
         if (document.activeElement === this.cancelButton) {
@@ -175,6 +176,7 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
           break;
         }
         ev.preventDefault();
+        // FIXME: this is not the value we want
         this.maybeUpdateValue(this.value);
         break;
       case "Escape":
diff --git a/web/app/components/hermes-users.ts b/web/app/components/hermes-users.ts
index 25ed65862..fdeedae90 100644
--- a/web/app/components/hermes-users.ts
+++ b/web/app/components/hermes-users.ts
@@ -57,6 +57,7 @@ export default class HermesUsersComponent extends Component<HermesUsersComponent
     })) ?? [];
 
   @action updateUsers(users: HermesUser[]) {
+    console.log("updateUsers", users);
     this.serializedUsers = users;
   }
 }
diff --git a/web/app/styles/components/editable-field.scss b/web/app/styles/components/editable-field.scss
index 01682a88a..5646c0a02 100644
--- a/web/app/styles/components/editable-field.scss
+++ b/web/app/styles/components/editable-field.scss
@@ -5,13 +5,15 @@
 .editable-field {
   @apply relative flex w-full;
 
-  &[disabled] {
+  &[disabled],
+  &.saving {
     cursor: default;
   }
 
-  .loading,
   .saving {
     opacity: 0.5;
+
+    // disable mouseover stfuf
   }
 
   &.button-affordance {
@@ -38,7 +40,7 @@
       @apply cursor-auto items-center;
     }
 
-    &:not(.disabled, disabled) {
+    &:not([disabled], .disabled, .saving) {
       &:hover,
       &:focus-visible &:focus {
         @apply bg-color-palette-neutral-175;