From 30498e10f0a490bc926c9db5e4e3c68bf2975f5a Mon Sep 17 00:00:00 2001
From: Jeff Daley <jeffdaley@users.noreply.github.com>
Date: Wed, 20 Mar 2024 13:47:46 -0400
Subject: [PATCH] Update approvers in sidebar

---
 web/app/components/document/sidebar.ts        | 31 +++++++++++--------
 .../acceptance/authenticated/document-test.ts | 23 ++++++++++++--
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts
index 841f4e3db..ad0a56f94 100644
--- a/web/app/components/document/sidebar.ts
+++ b/web/app/components/document/sidebar.ts
@@ -834,6 +834,7 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
   requestReview = task(async () => {
     try {
       // Update approvers.
+      this.toggleApproverVisibility();
       await this.patchDocument.perform({
         approvers: this.approvers.compact(),
       });
@@ -1003,6 +1004,22 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
     }
   }
 
+  /**
+   * This is an unfortunate hack to re-render the approvers list
+   * after the user leaves the approver role. Because the EditableField
+   * component has its own caching logic, it doesn't inherit changes
+   * from external components. This can be changed in the future, but will
+   * require a refactor of the EditableField and sidebar components.
+   *
+   * TODO: Improve this
+   */
+  @action private toggleApproverVisibility() {
+    this.approversAreShown = false;
+    schedule("afterRender", () => {
+      this.approversAreShown = true;
+    });
+  }
+
   /**
    * The action to leave the approver role.
    * Updates the local approvers array and saves it to the back end.
@@ -1021,19 +1038,7 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
 
       await this.save.perform("approvers", this.approvers);
 
-      /**
-       * This is an unfortunate hack to re-render the approvers list
-       * after the user leaves the approver role. Because the EditableField
-       * component has its own caching logic, it doesn't inherit changes
-       * from external components. This can be changed in the future, but will
-       * require a refactor of the EditableField and sidebar components.
-       *
-       * TODO: Improve this
-       */
-      this.approversAreShown = false;
-      schedule("afterRender", () => {
-        this.approversAreShown = true;
-      });
+      this.toggleApproverVisibility();
 
       // We set this so that the "Leaving..." state
       // is shown until the UI updates.
diff --git a/web/tests/acceptance/authenticated/document-test.ts b/web/tests/acceptance/authenticated/document-test.ts
index cfb33b656..36dc75697 100644
--- a/web/tests/acceptance/authenticated/document-test.ts
+++ b/web/tests/acceptance/authenticated/document-test.ts
@@ -722,6 +722,11 @@ module("Acceptance | authenticated/document", function (hooks) {
   });
 
   test("doc owners can publish their docs for review", async function (this: AuthenticatedDocumentRouteTestContext, assert) {
+    this.server.create("google/person", {
+      emailAddresses: [{ value: TEST_USER_2_EMAIL }],
+      names: [{ displayName: TEST_USER_2_NAME }],
+    });
+
     this.server.create("document", {
       objectID: 1,
       docType: "PRD",
@@ -735,6 +740,16 @@ module("Acceptance | authenticated/document", function (hooks) {
 
     assert.dom(PUBLISH_FOR_REVIEW_MODAL_SELECTOR).exists();
 
+    // Add an approver
+    await click("dialog [data-test-people-select]");
+
+    await fillIn(
+      ".ember-power-select-trigger-multiple-input",
+      TEST_USER_2_EMAIL,
+    );
+
+    await click(PEOPLE_SELECT_OPTION);
+
     let clickPromise = click(DOCUMENT_MODAL_PRIMARY_BUTTON);
 
     await waitFor(PUBLISHING_FOR_REVIEW_MESSAGE_SELECTOR);
@@ -760,9 +775,11 @@ module("Acceptance | authenticated/document", function (hooks) {
       .hasText("Continue to document")
       .hasAttribute("data-test-color", "tertiary");
 
-    // TODO: Assert that clicking the modal dismisses it.
-    // Requires @hashicorp/design-system-components 2.9.0+
-    // https://github.com/hashicorp/design-system/commit/a6553ea032f70f0167f149589801b72154c3cf75
+    await click(CONTINUE_TO_DOCUMENT_BUTTON_SELECTOR);
+
+    assert.dom(DOC_PUBLISHED_MODAL_SELECTOR).doesNotExist();
+
+    assert.dom(APPROVERS_SELECTOR).containsText(TEST_USER_2_NAME);
   });
 
   test('the "document published" modal hides the share elements if the docNumber fails to load', async function (this: AuthenticatedDocumentRouteTestContext, assert) {