From 3dcc6fb95a8c62825e45ce98112af09dc5b2a52f Mon Sep 17 00:00:00 2001
From: Ming Hay Luk <luk.minghay@gmail.com>
Date: Mon, 15 Jul 2024 13:47:37 -0700
Subject: [PATCH] Adds success messaging for add to collection modal

---
 .../modal/add-to-collection/component.js      | 30 +++++++++++++----
 .../modal/add-to-collection/template.hbs      |  7 ++++
 .../modal/add-to-collection/component-test.js | 32 +++++++++++++------
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/app/components/collection/modal/add-to-collection/component.js b/app/components/collection/modal/add-to-collection/component.js
index 67085f7a8..c9543fc21 100644
--- a/app/components/collection/modal/add-to-collection/component.js
+++ b/app/components/collection/modal/add-to-collection/component.js
@@ -7,7 +7,9 @@ import { createCollectionBody, getCollectionsWithoutPipeline } from './util';
 export default class CollectionModalAddToCollectionModalComponent extends Component {
   @service shuttle;
 
-  @tracked errorMessage;
+  @tracked errorMessage = null;
+
+  @tracked successMessage = null;
 
   @tracked newCollectionName = '';
 
@@ -60,6 +62,7 @@ export default class CollectionModalAddToCollectionModalComponent extends Compon
           )
         )
         .then(() => {
+          this.successMessage = `Successfully created new collection: ${this.newCollectionName}`;
           this.newCollectionName = '';
           this.newCollectionDescription = '';
         })
@@ -95,6 +98,7 @@ export default class CollectionModalAddToCollectionModalComponent extends Compon
   async submitCollections() {
     this.isAwaitingResponse = true;
     this.errorMessage = null;
+    this.successMessage = null;
 
     return new Promise(resolve => {
       Promise.allSettled([
@@ -114,12 +118,24 @@ export default class CollectionModalAddToCollectionModalComponent extends Compon
             )}`;
           }
         } else {
-          this.selectedCollections.forEach(collection => {
-            document.getElementById(
-              `collection-${collection.id}`
-            ).disabled = true;
-          });
-          this.selectedCollections = [];
+          const collectionNames = this.selectedCollections
+            .map(collection => collection.name)
+            .join(', ');
+
+          if (collectionNames.length > 0) {
+            if (this.successMessage) {
+              this.successMessage += `.  Also added pipeline to collections: ${collectionNames}`;
+            } else {
+              this.successMessage = `Successfully added pipeline to collections: ${collectionNames}`;
+            }
+
+            this.selectedCollections.forEach(collection => {
+              document.getElementById(
+                `collection-${collection.id}`
+              ).disabled = true;
+            });
+            this.selectedCollections = [];
+          }
         }
         resolve();
       });
diff --git a/app/components/collection/modal/add-to-collection/template.hbs b/app/components/collection/modal/add-to-collection/template.hbs
index e0869fe6b..798e14263 100644
--- a/app/components/collection/modal/add-to-collection/template.hbs
+++ b/app/components/collection/modal/add-to-collection/template.hbs
@@ -15,6 +15,13 @@
         @icon="exclamation-triangle"
       />
     {{/if}}
+    {{#if this.successMessage}}
+      <InfoMessage
+        @message={{this.successMessage}}
+        @type="success"
+        @icon="check-circle"
+      />
+    {{/if}}
     <div class="modal-title">Add to a new collection</div>
     <div class="create-new-collection">
       <label>
diff --git a/tests/integration/components/collection/modal/add-to-collection/component-test.js b/tests/integration/components/collection/modal/add-to-collection/component-test.js
index e4b0a3e08..9db737067 100644
--- a/tests/integration/components/collection/modal/add-to-collection/component-test.js
+++ b/tests/integration/components/collection/modal/add-to-collection/component-test.js
@@ -119,7 +119,7 @@ module(
       assert.dom('#submit-collections').isEnabled();
     });
 
-    test('it makes API request to create new collection', async function (assert) {
+    test('it makes show message indicating new collection was created successfully', async function (assert) {
       const shuttle = this.owner.lookup('service:shuttle');
       const shuttleStub = sinon.stub(shuttle, 'fetchFromApi').resolves();
 
@@ -146,6 +146,10 @@ module(
         ),
         true
       );
+      assert.dom('.alert').exists({ count: 1 });
+      assert
+        .dom('.alert > span')
+        .hasText('Successfully created new collection: New Collection');
     });
 
     test('it sets error message when creating a new collection fails', async function (assert) {
@@ -169,11 +173,11 @@ module(
 
       assert.dom('.alert').exists({ count: 1 });
       assert
-        .dom('.alert')
-        .hasText('× Failed to create new collection: New Collection');
+        .dom('.alert > span')
+        .hasText('Failed to create new collection: New Collection');
     });
 
-    test('it makes API request to add to an existing collection', async function (assert) {
+    test('it displays message indicating adding pipeline to existing collection was successful', async function (assert) {
       const shuttle = this.owner.lookup('service:shuttle');
       const shuttleStub = sinon.stub(shuttle, 'fetchFromApi').resolves();
 
@@ -198,6 +202,10 @@ module(
         shuttleStub.calledWith('put', '/collections/1', { pipelineIds: [123] }),
         true
       );
+      assert.dom('.alert').exists({ count: 1 });
+      assert
+        .dom('.alert > span')
+        .hasText('Successfully added pipeline to collections: Test');
     });
 
     test('it sets error message when adding to an existing collection fails', async function (assert) {
@@ -223,11 +231,11 @@ module(
 
       assert.dom('.alert').exists({ count: 1 });
       assert
-        .dom('.alert')
-        .hasText('× Failed to add pipeline to collections: Test');
+        .dom('.alert > span')
+        .hasText('Failed to add pipeline to collections: Test');
     });
 
-    test('it makes API requests when creating and adding to collections', async function (assert) {
+    test('it displays message indicating creating and adding to collections was successful', async function (assert) {
       const shuttle = this.owner.lookup('service:shuttle');
       const shuttleStub = sinon.stub(shuttle, 'fetchFromApi').resolves();
 
@@ -253,6 +261,12 @@ module(
       await click('#submit-collections');
 
       assert.equal(shuttleStub.callCount, 3);
+      assert.dom('.alert').exists({ count: 1 });
+      assert
+        .dom('.alert > span')
+        .hasText(
+          'Successfully created new collection: New Collection.  Also added pipeline to collections: Test, Funny'
+        );
     });
 
     test('it sets error messages when creating and adding to collections fails', async function (assert) {
@@ -283,9 +297,9 @@ module(
 
       assert.dom('.alert').exists({ count: 1 });
       assert
-        .dom('.alert')
+        .dom('.alert > span')
         .hasText(
-          '× Failed to create new collection: New Collection.  Also failed to add pipeline to collections: Test, Funny'
+          'Failed to create new collection: New Collection.  Also failed to add pipeline to collections: Test, Funny'
         );
     });
   }