Update sidebar when approvers are modified in the "Request review" mo…

…dal (#656)

Update approvers in sidebar

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.

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) {