From 07e4dcbf88fe3b331eb83c222053b5f7f71ad927 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Tue, 17 Oct 2023 19:07:10 -0500
Subject: [PATCH 01/23] notifier scrolls when there are too many notifications
 to display

---
 app/assets/stylesheets/shared/notifier.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/shared/notifier.scss b/app/assets/stylesheets/shared/notifier.scss
index 8c59976327..b649986c95 100644
--- a/app/assets/stylesheets/shared/notifier.scss
+++ b/app/assets/stylesheets/shared/notifier.scss
@@ -8,10 +8,12 @@
 }
 
 #notifications {
-  bottom: 2em;
+  bottom: 0;
   display: flex;
   flex-direction: column;
   font-weight: 900;
+  max-height: 100vh;
+  overflow-y: auto;
   position: fixed;
   right: 2em;
   z-index: 100;

From f917202d71cab39b031ac9ba4df260884d3e25f2 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Tue, 17 Oct 2023 19:26:00 -0500
Subject: [PATCH 02/23] notifier keeps track of how many of each kind of
 notification there are

---
 app/javascript/src/notifier.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index eeaee48903..b9247a33de 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -21,9 +21,13 @@ const levels = {
 }
 
 class Notification {
-  constructor (notificationElementAsJQuery) {
+  constructor (notificationElementAsJQuery, parentNotifier) {
     TypeChecker.checkNonEmptyJQueryObject(notificationElementAsJQuery, 'notificationElementAsJQuery')
 
+    if (!(parentNotifier instanceof Notifier)) {
+      throw new TypeError('Param parentNotifier must be an instance of Notifier')
+    }
+
     const levelCapturedViaClassNames = notificationElementAsJQuery.attr('class').match(/(warn|failure|success)-indicator/)
 
     if (!levelCapturedViaClassNames) {
@@ -38,13 +42,19 @@ class Notification {
       this.level = 'info'
     }
 
+    notificationElementAsJQuery.children('button').on('click', () => {
+      this.dismiss()
+    })
+
     this.notificationElement = notificationElementAsJQuery
+    this.parentNotifier = parentNotifier
   }
 
   dismiss () {
     this.#throwErrorIfDismissed()
 
     this.notificationElement.remove()
+    this.parentNotifier.notificationsCount[this.level]--
   }
 
   getText () {
@@ -100,8 +110,8 @@ class Notification {
     const dismissButton = $(`<button class="btn btn-${levels[this.level].classSuffixDismissButton} btn-sm">×</button>`)
     this.notificationElement.append(dismissButton)
 
-    dismissButton.on('click', function () {
-      $(this).parent().remove()
+    dismissButton.on('click', () => {
+      this.dismiss()
     })
   }
 }
@@ -112,6 +122,11 @@ class Notifier {
     TypeChecker.checkNonEmptyJQueryObject(notificationsElement, 'notificationsElement')
 
     this.loadingToast = notificationsElement.find('#async-waiting-indicator')
+    this.notificationsCount = {
+      error: 0,
+      info: 0,
+      warn: 0
+    }
     this.notificationsElement = notificationsElement
     this.savedToast = notificationsElement.find('#async-success-indicator')
     this.savedToastTimeouts = []
@@ -148,13 +163,9 @@ class Notifier {
 
     this.notificationsElement.append(newNotificationAsJQuery)
 
-    if (isDismissable) {
-      newNotificationAsJQuery.children('button').on('click', function () {
-        $(this).parent().remove()
-      })
-    }
+    const newNotification = new Notification(newNotificationAsJQuery, this)
 
-    const newNotification = new Notification(newNotificationAsJQuery)
+    this.notificationsCount[level]++
 
     return newNotification
   }

From 75e0515be7530e75bb82f29efbed5a71a0282c6f Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Tue, 17 Oct 2023 19:40:39 -0500
Subject: [PATCH 03/23] added toggle notification minimize button, styled it

---
 app/assets/stylesheets/shared/notifier.scss | 8 ++++++++
 app/views/layouts/_notifier.erb             | 1 +
 2 files changed, 9 insertions(+)

diff --git a/app/assets/stylesheets/shared/notifier.scss b/app/assets/stylesheets/shared/notifier.scss
index b649986c95..adcf28162e 100644
--- a/app/assets/stylesheets/shared/notifier.scss
+++ b/app/assets/stylesheets/shared/notifier.scss
@@ -60,4 +60,12 @@
       width: 1em
     }
   }
+
+  #toggle-minimize-notifications {
+    background-color: #333;
+    border: 0;
+    border-radius: 10px 10px 0 0;
+    color: white;
+    padding: 0.25em 1em;
+  }
 }
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index 88036b5c04..bed504abc1 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -5,4 +5,5 @@
   <div id="async-success-indicator" class="success-indicator" style="display: none">
     Saved
   </div>
+  <button id="toggle-minimize-notifications" >minimize <i class="fa-solid fa-minus"></i></button>
 </div>

From 705311c3332ab598d5c883d606196614ef658038 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Tue, 17 Oct 2023 19:43:21 -0500
Subject: [PATCH 04/23] alphabetize notifier methods

---
 app/javascript/src/notifier.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index b9247a33de..5c59051b59 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -170,12 +170,6 @@ class Notifier {
     return newNotification
   }
 
-  // Shows a loading indicator until all operations resolve
-  waitForAsyncOperation () {
-    this.loadingToast.show()
-    this.waitingAsyncOperationCount++
-  }
-
   // Shows the saved toast for 2 seconds and hides the loading indicator if no more async operations are pending
   //  @param  {string=}  error The error to be displayed(optional)
   //  @throws {Error}    for trying to resolve more async operations than the amount currently awaiting
@@ -211,6 +205,12 @@ class Notifier {
       this.notify(errorMsg, 'error')
     }
   }
+
+  // Shows a loading indicator until all operations resolve
+  waitForAsyncOperation () {
+    this.loadingToast.show()
+    this.waitingAsyncOperationCount++
+  }
 }
 
 module.exports = { Notifier, Notification }

From 87c9fdb49c8229da8a60b5b61f5b6b54a3e2ed65 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Tue, 17 Oct 2023 22:25:47 -0500
Subject: [PATCH 05/23] notifier automatically shows/hides minimize button
 depending on presence of notifications

---
 app/javascript/src/notifier.js  | 32 ++++++++++++++++++++++++++++++--
 app/views/layouts/_notifier.erb |  2 +-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index 5c59051b59..31aae00e3c 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -121,12 +121,26 @@ class Notifier {
   constructor (notificationsElement) {
     TypeChecker.checkNonEmptyJQueryObject(notificationsElement, 'notificationsElement')
 
+    const outer = this
+
     this.loadingToast = notificationsElement.find('#async-waiting-indicator')
-    this.notificationsCount = {
+    this.notificationsCount = new Proxy({
       error: 0,
       info: 0,
       warn: 0
-    }
+    }, {
+      set(target, propertyKey, value) {
+        const defaultSet = Reflect.set(target, propertyKey, value)
+
+        if (outer.totalNotificationCount()) {
+          outer.setMinimizeButtonVisibility(true)
+        } else {
+          outer.setMinimizeButtonVisibility(false)
+        }
+
+        return defaultSet
+      }
+    })
     this.notificationsElement = notificationsElement
     this.savedToast = notificationsElement.find('#async-success-indicator')
     this.savedToastTimeouts = []
@@ -206,6 +220,20 @@ class Notifier {
     }
   }
 
+  setMinimizeButtonVisibility (visible) {
+    if (visible) {
+      this.notificationsElement.children('button').show()
+    } else {
+      this.notificationsElement.children('button').hide()
+    }
+  }
+
+  totalNotificationCount () {
+    return Object.values(this.notificationsCount).reduce((acc, currentValue) => {
+      return acc + currentValue
+    }, 0)
+  }
+
   // Shows a loading indicator until all operations resolve
   waitForAsyncOperation () {
     this.loadingToast.show()
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index bed504abc1..9256183ba1 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -5,5 +5,5 @@
   <div id="async-success-indicator" class="success-indicator" style="display: none">
     Saved
   </div>
-  <button id="toggle-minimize-notifications" >minimize <i class="fa-solid fa-minus"></i></button>
+  <button id="toggle-minimize-notifications" style="display: none;">minimize notifications <i class="fa-solid fa-minus"></i></button>
 </div>

From 9d81575fb908f3251f5c9f6d862962f9b77eba77 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Tue, 17 Oct 2023 22:32:58 -0500
Subject: [PATCH 06/23] block stubs for tests

---
 app/javascript/__tests__/notifier.test.js | 47 +++++++++++++++--------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index acdce50ae1..414f964788 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -15,6 +15,7 @@ beforeEach(() => {
       <div id="async-success-indicator" class="success-indicator" style="display: none">
         Saved
       </div>
+      <button id="toggle-minimize-notifications" style="display: none;">minimize notifications <i class="fa-solid fa-minus"></i></button>
     </div>`
 
   $(() => { // JQuery's callback for the DOM loading
@@ -155,23 +156,8 @@ describe('Notifier', () => {
     })
   })
 
-  describe('waitForAsyncOperation', () => {
-    test('displays the loading indicator', (done) => {
-      $(() => {
-        const loadingToast = $('#async-waiting-indicator')
-
-        try {
-          expect(loadingToast.css('display')).toBe('none')
-
-          notifier.waitForAsyncOperation()
-          expect(loadingToast.attr('style')).toEqual(expect.not.stringContaining('display: none'))
-
-          done()
-        } catch (error) {
-          done(error)
-        }
-      })
-    })
+  describe('notificationsCount', () => {
+    
   })
 
   describe('resolveAsyncOperation', () => {
@@ -282,6 +268,33 @@ describe('Notifier', () => {
       })
     })
   })
+
+  describe('setMinimizeButtonVisibility', () => {
+
+  })
+
+  describe('totalNotificationCount', () => {
+
+  })
+
+  describe('waitForAsyncOperation', () => {
+    test('displays the loading indicator', (done) => {
+      $(() => {
+        const loadingToast = $('#async-waiting-indicator')
+
+        try {
+          expect(loadingToast.css('display')).toBe('none')
+
+          notifier.waitForAsyncOperation()
+          expect(loadingToast.attr('style')).toEqual(expect.not.stringContaining('display: none'))
+
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+  })
 })
 
 describe('Notifications', () => {

From b642730fb17e6631551603d4be45d698f8ecd63e Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Wed, 18 Oct 2023 10:09:09 -0500
Subject: [PATCH 07/23] wrote test for minimize button hiding

---
 app/javascript/__tests__/notifier.test.js | 68 ++++++++++++++++++++++-
 app/javascript/src/notifier.js            |  2 +-
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 414f964788..5f15d5b1f7 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -157,7 +157,32 @@ describe('Notifier', () => {
   })
 
   describe('notificationsCount', () => {
-    
+    it('automatically shows the minimize button when going from 0 to 1 notifications', (done) => {
+      $(() => {
+        try {
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    it('automatically hides the minimize button when going from 1 to 0 notifications', (done) => {
+      $(() => {
+        try {
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    it('increments the correct', (done) => {
+      $(() => {
+        try {
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
   })
 
   describe('resolveAsyncOperation', () => {
@@ -270,11 +295,34 @@ describe('Notifier', () => {
   })
 
   describe('setMinimizeButtonVisibility', () => {
+    it('hides the mimimize button when passed false', (done) => {
+      $(() => {
+        try {
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
 
+    it('shows the mimimize button when passed true', (done) => {
+      $(() => {
+        try {
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
   })
 
   describe('totalNotificationCount', () => {
-
+    it('returns the number of notifications the notifier currently has displayed', (done) => {
+      $(() => {
+        try {
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
   })
 
   describe('waitForAsyncOperation', () => {
@@ -369,6 +417,22 @@ describe('Notifications', () => {
         }
       })
     })
+
+    test('causes the notifier to hide the minimize button if it dismisses the last notification', (done) => {
+      $(() => {
+        try {
+          expect(notificationsElement[0].innerHTML).toContain(notificationDefaultMessage)
+          expect($('#toggle-minimize-notifications').css('display')).not.toContain('none')
+
+          notification.dismiss()
+          expect(notificationsElement[0].innerHTML).not.toContain(notificationDefaultMessage)
+          expect($('#toggle-minimize-notifications').css('display')).toContain('none')
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
   })
 
   describe('getText', () => {
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index 31aae00e3c..0d243b70c8 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -129,7 +129,7 @@ class Notifier {
       info: 0,
       warn: 0
     }, {
-      set(target, propertyKey, value) {
+      set (target, propertyKey, value) {
         const defaultSet = Reflect.set(target, propertyKey, value)
 
         if (outer.totalNotificationCount()) {

From d3dc7e34a726d0aa6c98d146d82900573704625a Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Thu, 19 Oct 2023 10:45:54 -0500
Subject: [PATCH 08/23] make setMinimizeButtonVisibility private

---
 app/javascript/__tests__/notifier.test.js | 20 --------------------
 app/javascript/src/notifier.js            |  6 +++---
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 5f15d5b1f7..ec1d138d16 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -294,26 +294,6 @@ describe('Notifier', () => {
     })
   })
 
-  describe('setMinimizeButtonVisibility', () => {
-    it('hides the mimimize button when passed false', (done) => {
-      $(() => {
-        try {
-        } catch (error) {
-          done(error)
-        }
-      })
-    })
-
-    it('shows the mimimize button when passed true', (done) => {
-      $(() => {
-        try {
-        } catch (error) {
-          done(error)
-        }
-      })
-    })
-  })
-
   describe('totalNotificationCount', () => {
     it('returns the number of notifications the notifier currently has displayed', (done) => {
       $(() => {
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index 0d243b70c8..a2df682c7a 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -133,9 +133,9 @@ class Notifier {
         const defaultSet = Reflect.set(target, propertyKey, value)
 
         if (outer.totalNotificationCount()) {
-          outer.setMinimizeButtonVisibility(true)
+          outer.#setMinimizeButtonVisibility(true)
         } else {
-          outer.setMinimizeButtonVisibility(false)
+          outer.#setMinimizeButtonVisibility(false)
         }
 
         return defaultSet
@@ -220,7 +220,7 @@ class Notifier {
     }
   }
 
-  setMinimizeButtonVisibility (visible) {
+  #setMinimizeButtonVisibility (visible) {
     if (visible) {
       this.notificationsElement.children('button').show()
     } else {

From 91c870b6268c721c1f560d835f0276be862d79a5 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Thu, 19 Oct 2023 21:20:47 -0500
Subject: [PATCH 09/23] filled out notificationsCount tests

---
 app/javascript/__tests__/notifier.test.js | 60 ++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index ec1d138d16..eb5f087a4e 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -157,9 +157,27 @@ describe('Notifier', () => {
   })
 
   describe('notificationsCount', () => {
+    const initialNotificationsCountState = {
+      error: 0,
+      info: 0,
+      warn: 0
+    }
+
     it('automatically shows the minimize button when going from 0 to 1 notifications', (done) => {
       $(() => {
         try {
+          expect(notifier.notificationsCount).toEqual(initialNotificationsCountState)
+          expect($('#toggle-minimize-notifications').css('display')).toBe('none')
+
+          notifier.notify('message', 'warn')
+
+          expect(notifier.notificationsCount).toEqual({
+            error: 0,
+            info: 0,
+            warn: 1
+          })
+          expect($('#toggle-minimize-notifications').css('display')).not.toBe('none')
+          done()
         } catch (error) {
           done(error)
         }
@@ -169,15 +187,55 @@ describe('Notifier', () => {
     it('automatically hides the minimize button when going from 1 to 0 notifications', (done) => {
       $(() => {
         try {
+          const notification = notifier.notify('message', 'warn')
+
+          expect(notifier.notificationsCount).toEqual({
+            error: 0,
+            info: 0,
+            warn: 1
+          })
+          expect($('#toggle-minimize-notifications').css('display')).not.toBe('none')
+
+          notification.dismiss()
+
+          expect(notifier.notificationsCount).toEqual(initialNotificationsCountState)
+          expect($('#toggle-minimize-notifications').css('display')).toBe('none')
+          done()
         } catch (error) {
           done(error)
         }
       })
     })
 
-    it('increments the correct', (done) => {
+    it('increments the correct level after creating a new notification', (done) => {
       $(() => {
         try {
+          expect(notifier.notificationsCount).toEqual(initialNotificationsCountState)
+
+          notifier.notify('message', 'info')
+
+          expect(notifier.notificationsCount).toEqual({
+            error: 0,
+            info: 1,
+            warn: 0
+          })
+
+          notifier.notify('message', 'error')
+
+          expect(notifier.notificationsCount).toEqual({
+            error: 1,
+            info: 1,
+            warn: 0
+          })
+
+          notifier.notify('message', 'warn')
+
+          expect(notifier.notificationsCount).toEqual({
+            error: 1,
+            info: 1,
+            warn: 1
+          })
+          done()
         } catch (error) {
           done(error)
         }

From 1f51d5d9e502ccd43bba31e038140debd746093d Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Fri, 20 Oct 2023 01:05:33 -0500
Subject: [PATCH 10/23] wrote test for totalNotificationCount

---
 app/javascript/__tests__/notifier.test.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index eb5f087a4e..562af2c532 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -356,6 +356,26 @@ describe('Notifier', () => {
     it('returns the number of notifications the notifier currently has displayed', (done) => {
       $(() => {
         try {
+          expect(notifier.totalNotificationCount()).toBe(0)
+
+          const notificationCount = Math.floor(Math.random() * 10) + 1
+          const notifications = []
+
+          for (let i = 0; i < notificationCount; i++) {
+            notifications.push(notifier.notify('message', 'error'))
+          }
+
+          expect(notifier.totalNotificationCount()).toBe(notificationCount)
+
+          const aboutHalfNotificationCount = Math.floor(notificationCount / 2)
+
+          for (let i = 0; i < aboutHalfNotificationCount; i++) {
+            notifications.pop().dismiss()
+          }
+
+          expect(notifier.totalNotificationCount()).toBe(notificationCount - aboutHalfNotificationCount)
+
+          done()
         } catch (error) {
           done(error)
         }

From 159b64c009c0b6bde2ab23e91cbbe2b2d1fa6102 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Fri, 20 Oct 2023 09:32:42 -0500
Subject: [PATCH 11/23] fixed notification positioning

---
 app/assets/stylesheets/shared/notifier.scss | 2 +-
 app/javascript/src/notifier.js              | 2 +-
 app/views/layouts/_notifier.erb             | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/shared/notifier.scss b/app/assets/stylesheets/shared/notifier.scss
index adcf28162e..ff9f4975b9 100644
--- a/app/assets/stylesheets/shared/notifier.scss
+++ b/app/assets/stylesheets/shared/notifier.scss
@@ -20,7 +20,7 @@
 
   div {
     border-radius: .25em;
-    margin: .25em;
+    margin-bottom: .5em;
     margin-left: auto;
     margin-right: 0;
     padding: .5em;
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index a2df682c7a..4ec2600300 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -175,7 +175,7 @@ class Notifier {
         </div>`
       )
 
-    this.notificationsElement.append(newNotificationAsJQuery)
+    this.notificationsElement.prepend(newNotificationAsJQuery)
 
     const newNotification = new Notification(newNotificationAsJQuery, this)
 
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index 9256183ba1..2aacd83774 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -5,5 +5,11 @@
   <div id="async-success-indicator" class="success-indicator" style="display: none">
     Saved
   </div>
-  <button id="toggle-minimize-notifications" style="display: none;">minimize notifications <i class="fa-solid fa-minus"></i></button>
+  <button id="toggle-minimize-notifications" style="display: none;">
+    minimize notifications 
+    <span class="badge badge-pill badge-success">1</span>
+    <span class="badge badge-pill badge-warning">1</span>
+    <span class="badge badge-pill badge-danger">1</span>
+    <i class="fa-solid fa-minus"></i>
+  </button>
 </div>

From caba9c7bc541776297f6d3ce6f40fd1a17a0fdc5 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Fri, 20 Oct 2023 16:29:42 -0500
Subject: [PATCH 12/23] added badges for minimized notification display

---
 app/javascript/__tests__/notifier.test.js | 26 ++++++++++++++---------
 app/views/layouts/_notifier.erb           |  6 +++---
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 562af2c532..1e23fc8360 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -9,14 +9,20 @@ let notifier
 
 beforeEach(() => {
   document.body.innerHTML = `<div id="notifications">
-      <div id="async-waiting-indicator" style="display: none">
-        Saving <div class="load-spinner"></div>
-      </div>
-      <div id="async-success-indicator" class="success-indicator" style="display: none">
-        Saved
-      </div>
-      <button id="toggle-minimize-notifications" style="display: none;">minimize notifications <i class="fa-solid fa-minus"></i></button>
-    </div>`
+  <div id="async-waiting-indicator" style="display: none">
+    Saving <i class="load-spinner"></i>
+  </div>
+  <div id="async-success-indicator" class="success-indicator" style="display: none">
+    Saved
+  </div>
+  <button id="toggle-minimize-notifications" style="display: none;">
+    minimize notifications 
+    <span class="badge rounded-pill bg-success">1</span>
+    <span class="badge rounded-pill bg-warning">1</span>
+    <span class="badge rounded-pill bg-danger">1</span>
+    <i class="fa-solid fa-minus"></i>
+  </button>
+</div>`
 
   $(() => { // JQuery's callback for the DOM loading
     notificationsElement = $('#notifications')
@@ -37,7 +43,7 @@ describe('Notifier', () => {
 
           // Notifications contain the hidden "Saved" message and the new message
           expect(successMessages.length).toBe(2)
-          expect(successMessages[1].innerHTML).toContain(notificationMessage)
+          expect(successMessages[0].innerHTML).toContain(notificationMessage)
           done()
         } catch (error) {
           done(error)
@@ -80,7 +86,7 @@ describe('Notifier', () => {
 
           expect(failureMessages.length).toBe(0)
 
-          $(successMessages[1]).children('button').click()
+          $(successMessages[0]).children('button').click()
           successMessages = notificationsElement.find('.success-indicator')
 
           expect(successMessages.length).toBe(1)
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index 2aacd83774..06586fb02c 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -7,9 +7,9 @@
   </div>
   <button id="toggle-minimize-notifications" style="display: none;">
     minimize notifications 
-    <span class="badge badge-pill badge-success">1</span>
-    <span class="badge badge-pill badge-warning">1</span>
-    <span class="badge badge-pill badge-danger">1</span>
+    <span class="badge rounded-pill bg-success">1</span>
+    <span class="badge rounded-pill bg-warning">1</span>
+    <span class="badge rounded-pill bg-danger">1</span>
     <i class="fa-solid fa-minus"></i>
   </button>
 </div>

From 9389f958e57936a160c1458ee90768dc0726a205 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Fri, 20 Oct 2023 19:51:07 -0500
Subject: [PATCH 13/23] moved notification messages to own div

---
 app/assets/stylesheets/shared/notifier.scss |  5 +++++
 app/javascript/__tests__/notifier.test.js   | 16 +++++++++-------
 app/javascript/src/notifier.js              |  2 +-
 app/views/layouts/_notifier.erb             |  2 ++
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/shared/notifier.scss b/app/assets/stylesheets/shared/notifier.scss
index ff9f4975b9..faf582c0bf 100644
--- a/app/assets/stylesheets/shared/notifier.scss
+++ b/app/assets/stylesheets/shared/notifier.scss
@@ -35,6 +35,11 @@
     color: white
   }
 
+  .messages {
+    margin-bottom: 0;
+    padding: 0;
+  }
+
   .success-indicator {
     background-color: #28a745;
     color: white
diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 1e23fc8360..3b07c4900e 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -9,6 +9,8 @@ let notifier
 
 beforeEach(() => {
   document.body.innerHTML = `<div id="notifications">
+  <div class="messages">
+  </div>
   <div id="async-waiting-indicator" style="display: none">
     Saving <i class="load-spinner"></i>
   </div>
@@ -39,10 +41,9 @@ describe('Notifier', () => {
         try {
           notifier.notify(notificationMessage, 'info')
 
-          const successMessages = notificationsElement.find('.success-indicator')
+          const successMessages = notificationsElement.children('.messages').find('.success-indicator')
 
-          // Notifications contain the hidden "Saved" message and the new message
-          expect(successMessages.length).toBe(2)
+          expect(successMessages.length).toBe(1)
           expect(successMessages[0].innerHTML).toContain(notificationMessage)
           done()
         } catch (error) {
@@ -75,11 +76,12 @@ describe('Notifier', () => {
           notifier.notify('', 'error')
           notifier.notify('', 'info')
 
-          let failureMessages = notificationsElement.find('.failure-indicator')
-          let successMessages = notificationsElement.find('.success-indicator')
+          const messagesContainer = notificationsElement.children('.messages')
+          let failureMessages = messagesContainer.find('.failure-indicator')
+          let successMessages = messagesContainer.find('.success-indicator')
 
           expect(failureMessages.length).toBe(1)
-          expect(successMessages.length).toBe(2)
+          expect(successMessages.length).toBe(1)
 
           failureMessages.children('button').click()
           failureMessages = notificationsElement.find('.failure-indicator')
@@ -151,7 +153,7 @@ describe('Notifier', () => {
       $(() => {
         try {
           const notification = notifier.notify('test', 'info')
-          const onlyNotification = notificationsElement.children('.success-indicator')
+          const onlyNotification = notificationsElement.children('.messages').children('.success-indicator')
           expect(notification.notificationElement.is(onlyNotification)).toBe(true)
 
           done()
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index 4ec2600300..ce5d57ae86 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -175,7 +175,7 @@ class Notifier {
         </div>`
       )
 
-    this.notificationsElement.prepend(newNotificationAsJQuery)
+    this.notificationsElement.children('.messages').append(newNotificationAsJQuery)
 
     const newNotification = new Notification(newNotificationAsJQuery, this)
 
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index 06586fb02c..51383df57a 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -1,4 +1,6 @@
 <div id="notifications">
+  <div class="messages">
+  </div>
   <div id="async-waiting-indicator" style="display: none">
     Saving <i class="load-spinner"></i>
   </div>

From b63937321c5a1a815f90d9c3229c72d9bfe40e68 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Fri, 20 Oct 2023 21:23:13 -0500
Subject: [PATCH 14/23] created toggleMinimize

---
 app/assets/stylesheets/shared/notifier.scss |  4 ++
 app/javascript/src/notifier.js              | 52 +++++++++++++++++----
 app/views/layouts/_notifier.erb             |  8 ++--
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/shared/notifier.scss b/app/assets/stylesheets/shared/notifier.scss
index faf582c0bf..bdb43b40c0 100644
--- a/app/assets/stylesheets/shared/notifier.scss
+++ b/app/assets/stylesheets/shared/notifier.scss
@@ -72,5 +72,9 @@
     border-radius: 10px 10px 0 0;
     color: white;
     padding: 0.25em 1em;
+
+    span {
+      display: inline;
+    }
   }
 }
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index ce5d57ae86..62982b72ca 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -5,18 +5,18 @@ const TypeChecker = require('./type_checker.js')
 
 const levels = {
   error: {
-    classPrefixMessage: 'failure',
-    classSuffixDismissButton: 'danger'
+    classBootstrap: 'danger',
+    classPrefixMessage: 'failure'
   },
 
   info: {
-    classPrefixMessage: 'success',
-    classSuffixDismissButton: 'success'
+    classBootstrap: 'success',
+    classPrefixMessage: 'success'
   },
 
   warn: {
-    classPrefixMessage: 'warn',
-    classSuffixDismissButton: 'warning'
+    classBootstrap: 'warning',
+    classPrefixMessage: 'warn'
   }
 }
 
@@ -107,7 +107,7 @@ class Notification {
   }
 
   #userDismissableEnable () {
-    const dismissButton = $(`<button class="btn btn-${levels[this.level].classSuffixDismissButton} btn-sm">×</button>`)
+    const dismissButton = $(`<button class="btn btn-${levels[this.level].classBootstrap} btn-sm">×</button>`)
     this.notificationElement.append(dismissButton)
 
     dismissButton.on('click', () => {
@@ -138,6 +138,16 @@ class Notifier {
           outer.#setMinimizeButtonVisibility(false)
         }
 
+        const levelBadge = $('#toggle-minimize-notifications').children(`.bg-${levels[propertyKey].classBootstrap}`)
+
+        levelBadge.text(value)
+
+        if (value && outer.notificationsElement.children('.messages').css('display') === 'none') {
+          levelBadge.show()
+        } else {
+          levelBadge.hide()
+        }
+
         return defaultSet
       }
     })
@@ -166,7 +176,7 @@ class Notifier {
       throw new RangeError('Unsupported option for param level')
     }
 
-    const dismissButtonAsHTML = isDismissable ? `<button class="btn btn-${levels[level].classSuffixDismissButton} btn-sm">×</button>` : ''
+    const dismissButtonAsHTML = isDismissable ? `<button class="btn btn-${levels[level].classBootstrap} btn-sm">×</button>` : ''
     const newNotificationAsJQuery =
       $(
         `<div class="${levels[level].classPrefixMessage}-indicator">
@@ -228,6 +238,32 @@ class Notifier {
     }
   }
 
+  toggleMinimize () {
+    const messagesContainer = this.notificationsElement.children('.messages')
+    const minimizeButton = this.notificationsElement.children('#toggle-minimize-notifications')
+
+    if (messagesContainer.css('display') === 'none') {
+      messagesContainer.show()
+      minimizeButton.children('span').first().show()
+      minimizeButton.children('.badge').hide()
+      minimizeButton.children('.fa-solid').removeClass('fa-plus').addClass('fa-minus')
+    } else {
+      messagesContainer.hide()
+
+      for (const level in this.notificationsCount) {
+        const levelMessageCount = this.notificationsCount[level]
+
+        if (levelMessageCount) {
+          const levelBadge = minimizeButton.children(`.bg-${levels[level].classBootstrap}`)
+          levelBadge.show()
+        }
+      }
+
+      minimizeButton.children('span').first().hide()
+      minimizeButton.children('.fa-solid').removeClass('fa-minus').addClass('fa-plus')
+    }
+  }
+
   totalNotificationCount () {
     return Object.values(this.notificationsCount).reduce((acc, currentValue) => {
       return acc + currentValue
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index 51383df57a..7379bb3a2e 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -8,10 +8,10 @@
     Saved
   </div>
   <button id="toggle-minimize-notifications" style="display: none;">
-    minimize notifications 
-    <span class="badge rounded-pill bg-success">1</span>
-    <span class="badge rounded-pill bg-warning">1</span>
-    <span class="badge rounded-pill bg-danger">1</span>
+    <span>minimize notifications </span>
+    <span class="badge rounded-pill bg-success" style="display: none;"></span>
+    <span class="badge rounded-pill bg-warning" style="display: none;"></span>
+    <span class="badge rounded-pill bg-danger" style="display: none;"></span>
     <i class="fa-solid fa-minus"></i>
   </button>
 </div>

From 973b7639d37f01875e332cc6801dc5ead243efae Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sat, 21 Oct 2023 16:23:55 -0500
Subject: [PATCH 15/23] reduced jQuery lookups, made code simpler

---
 app/assets/stylesheets/shared/notifier.scss |  6 +-
 app/javascript/__tests__/notifier.test.js   | 22 +++---
 app/javascript/src/notifier.js              | 86 +++++++++++----------
 app/views/layouts/_notifier.erb             |  2 +-
 4 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/app/assets/stylesheets/shared/notifier.scss b/app/assets/stylesheets/shared/notifier.scss
index bdb43b40c0..7e3f89d648 100644
--- a/app/assets/stylesheets/shared/notifier.scss
+++ b/app/assets/stylesheets/shared/notifier.scss
@@ -30,7 +30,7 @@
     }
   }
 
-  .failure-indicator {
+  .danger-notification {
     background-color: #b71c1c;
     color: white
   }
@@ -40,12 +40,12 @@
     padding: 0;
   }
 
-  .success-indicator {
+  .success-notification {
     background-color: #28a745;
     color: white
   }
 
-  .warn-indicator {
+  .warning-notification {
     background-color: #ffc107;
   }
 
diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 3b07c4900e..7b5c31a0a7 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -14,7 +14,7 @@ beforeEach(() => {
   <div id="async-waiting-indicator" style="display: none">
     Saving <i class="load-spinner"></i>
   </div>
-  <div id="async-success-indicator" class="success-indicator" style="display: none">
+  <div id="async-success-indicator" class="success-notification" style="display: none">
     Saved
   </div>
   <button id="toggle-minimize-notifications" style="display: none;">
@@ -41,7 +41,7 @@ describe('Notifier', () => {
         try {
           notifier.notify(notificationMessage, 'info')
 
-          const successMessages = notificationsElement.children('.messages').find('.success-indicator')
+          const successMessages = notificationsElement.children('.messages').find('.success-notification')
 
           expect(successMessages.length).toBe(1)
           expect(successMessages[0].innerHTML).toContain(notificationMessage)
@@ -59,7 +59,7 @@ describe('Notifier', () => {
         try {
           notifier.notify(notificationMessage, 'error')
 
-          const failureMessages = notificationsElement.find('.failure-indicator')
+          const failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
           expect(failureMessages[0].innerHTML).toContain(notificationMessage)
@@ -77,19 +77,19 @@ describe('Notifier', () => {
           notifier.notify('', 'info')
 
           const messagesContainer = notificationsElement.children('.messages')
-          let failureMessages = messagesContainer.find('.failure-indicator')
-          let successMessages = messagesContainer.find('.success-indicator')
+          let failureMessages = messagesContainer.find('.danger-notification')
+          let successMessages = messagesContainer.find('.success-notification')
 
           expect(failureMessages.length).toBe(1)
           expect(successMessages.length).toBe(1)
 
           failureMessages.children('button').click()
-          failureMessages = notificationsElement.find('.failure-indicator')
+          failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(0)
 
           $(successMessages[0]).children('button').click()
-          successMessages = notificationsElement.find('.success-indicator')
+          successMessages = notificationsElement.find('.success-notification')
 
           expect(successMessages.length).toBe(1)
 
@@ -105,12 +105,12 @@ describe('Notifier', () => {
         try {
           notifier.notify('', 'error', false)
 
-          let failureMessages = notificationsElement.find('.failure-indicator')
+          let failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
 
           failureMessages.children('button').click()
-          failureMessages = notificationsElement.find('.failure-indicator')
+          failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
 
@@ -153,7 +153,7 @@ describe('Notifier', () => {
       $(() => {
         try {
           const notification = notifier.notify('test', 'info')
-          const onlyNotification = notificationsElement.children('.messages').children('.success-indicator')
+          const onlyNotification = notificationsElement.children('.messages').children('.success-notification')
           expect(notification.notificationElement.is(onlyNotification)).toBe(true)
 
           done()
@@ -313,7 +313,7 @@ describe('Notifier', () => {
           notifier.waitForAsyncOperation()
           notifier.resolveAsyncOperation(errorMessage)
 
-          const failureMessages = notificationsElement.find('.failure-indicator')
+          const failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
           expect(failureMessages[0].innerHTML).toContain(errorMessage)
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index 62982b72ca..bf133baf15 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -3,21 +3,10 @@ import { escape } from 'lodash'
 
 const TypeChecker = require('./type_checker.js')
 
-const levels = {
-  error: {
-    classBootstrap: 'danger',
-    classPrefixMessage: 'failure'
-  },
-
-  info: {
-    classBootstrap: 'success',
-    classPrefixMessage: 'success'
-  },
-
-  warn: {
-    classBootstrap: 'warning',
-    classPrefixMessage: 'warn'
-  }
+const levelClasses = {
+  error: 'danger',
+  info: 'success',
+  warn: 'warning'
 }
 
 class Notification {
@@ -28,7 +17,7 @@ class Notification {
       throw new TypeError('Param parentNotifier must be an instance of Notifier')
     }
 
-    const levelCapturedViaClassNames = notificationElementAsJQuery.attr('class').match(/(warn|failure|success)-indicator/)
+    const levelCapturedViaClassNames = notificationElementAsJQuery.attr('class').match(/(warning|danger|success)-notification/)
 
     if (!levelCapturedViaClassNames) {
       throw new RangeError('Failed to parse notification level from notification level class')
@@ -36,10 +25,12 @@ class Notification {
 
     this.level = levelCapturedViaClassNames[1]
 
-    if (this.level === 'failure') {
+    if (this.level === 'danger') {
       this.level = 'error'
     } else if (this.level === 'success') {
       this.level = 'info'
+    } else if (this.level === 'warning') {
+      this.level = 'warn'
     }
 
     notificationElementAsJQuery.children('button').on('click', () => {
@@ -107,7 +98,7 @@ class Notification {
   }
 
   #userDismissableEnable () {
-    const dismissButton = $(`<button class="btn btn-${levels[this.level].classBootstrap} btn-sm">×</button>`)
+    const dismissButton = $(`<button class="btn btn-${levelClasses[this.level]} btn-sm">×</button>`)
     this.notificationElement.append(dismissButton)
 
     dismissButton.on('click', () => {
@@ -123,7 +114,22 @@ class Notifier {
 
     const outer = this
 
-    this.loadingToast = notificationsElement.find('#async-waiting-indicator')
+    this.elements = {
+      loadingToast: notificationsElement.find('#async-waiting-indicator'),
+      messageCountBadges: {
+        all: notificationsElement.find('#toggle-minimize-notifications .badge'),
+        error: notificationsElement.find('#toggle-minimize-notifications .bg-danger'),
+        info: notificationsElement.find('#toggle-minimize-notifications .bg-success'),
+        warn: notificationsElement.find('#toggle-minimize-notifications .bg-warning')
+      },
+      messagesContainer: notificationsElement.children('.messages'),
+      minimizeButton: notificationsElement.children('#toggle-minimize-notifications'),
+      minimizeButtonIcon: notificationsElement.find('#toggle-minimize-notifications fa-solid'),
+      minimizeButtonText: notificationsElement.find('#toggle-minimize-notifications span').first(),
+      notificationsElement,
+      savedToast: notificationsElement.find('#async-success-indicator')
+    }
+
     this.notificationsCount = new Proxy({
       error: 0,
       info: 0,
@@ -138,11 +144,11 @@ class Notifier {
           outer.#setMinimizeButtonVisibility(false)
         }
 
-        const levelBadge = $('#toggle-minimize-notifications').children(`.bg-${levels[propertyKey].classBootstrap}`)
+        const levelBadge = outer.elements.messageCountBadges[propertyKey]
 
         levelBadge.text(value)
 
-        if (value && outer.notificationsElement.children('.messages').css('display') === 'none') {
+        if (value && outer.elements.messagesContainer.css('display') === 'none') {
           levelBadge.show()
         } else {
           levelBadge.hide()
@@ -151,8 +157,7 @@ class Notifier {
         return defaultSet
       }
     })
-    this.notificationsElement = notificationsElement
-    this.savedToast = notificationsElement.find('#async-success-indicator')
+
     this.savedToastTimeouts = []
     this.waitingAsyncOperationCount = 0
   }
@@ -172,20 +177,20 @@ class Notifier {
 
     const escapedMessage = escape(message)
 
-    if (!(levels[level])) {
+    if (!(levelClasses[level])) {
       throw new RangeError('Unsupported option for param level')
     }
 
-    const dismissButtonAsHTML = isDismissable ? `<button class="btn btn-${levels[level].classBootstrap} btn-sm">×</button>` : ''
+    const dismissButtonAsHTML = isDismissable ? `<button class="btn btn-${levelClasses[level]} btn-sm">×</button>` : ''
     const newNotificationAsJQuery =
       $(
-        `<div class="${levels[level].classPrefixMessage}-indicator">
+        `<div class="${levelClasses[level]}-notification">
           <span>${escapedMessage}</span>
           ${dismissButtonAsHTML}
         </div>`
       )
 
-    this.notificationsElement.children('.messages').append(newNotificationAsJQuery)
+    this.elements.messagesContainer.append(newNotificationAsJQuery)
 
     const newNotification = new Notification(newNotificationAsJQuery, this)
 
@@ -207,18 +212,18 @@ class Notifier {
     this.waitingAsyncOperationCount--
 
     if (this.waitingAsyncOperationCount === 0) {
-      this.loadingToast.hide()
+      this.elements.loadingToast.hide()
     }
 
     if (!errorMsg) {
-      this.savedToast.show()
+      this.elements.savedToast.show()
 
       this.savedToastTimeouts.forEach((timeoutID) => {
         clearTimeout(timeoutID)
       })
 
       this.savedToastTimeouts.push(setTimeout(() => {
-        this.savedToast.hide()
+        this.elements.savedToast.hide()
         this.savedToastTimeouts.shift()
       }, 2000))
     } else {
@@ -232,21 +237,20 @@ class Notifier {
 
   #setMinimizeButtonVisibility (visible) {
     if (visible) {
-      this.notificationsElement.children('button').show()
+      this.elements.minimizeButton.show()
     } else {
-      this.notificationsElement.children('button').hide()
+      this.elements.minimizeButton.hide()
     }
   }
 
   toggleMinimize () {
-    const messagesContainer = this.notificationsElement.children('.messages')
-    const minimizeButton = this.notificationsElement.children('#toggle-minimize-notifications')
+    const { messagesContainer } = this.elements
 
     if (messagesContainer.css('display') === 'none') {
       messagesContainer.show()
-      minimizeButton.children('span').first().show()
-      minimizeButton.children('.badge').hide()
-      minimizeButton.children('.fa-solid').removeClass('fa-plus').addClass('fa-minus')
+      this.elements.minimizeButtonText.show()
+      this.elements.messageCountBadges.all.hide()
+      this.elements.minimizeButtonIcon.removeClass('fa-plus').addClass('fa-minus')
     } else {
       messagesContainer.hide()
 
@@ -254,13 +258,13 @@ class Notifier {
         const levelMessageCount = this.notificationsCount[level]
 
         if (levelMessageCount) {
-          const levelBadge = minimizeButton.children(`.bg-${levels[level].classBootstrap}`)
+          const levelBadge = this.elements.messageCountBadges[level]
           levelBadge.show()
         }
       }
 
-      minimizeButton.children('span').first().hide()
-      minimizeButton.children('.fa-solid').removeClass('fa-minus').addClass('fa-plus')
+      this.elements.minimizeButtonText.hide()
+      this.elements.minimizeButtonIcon.removeClass('fa-minus').addClass('fa-plus')
     }
   }
 
@@ -272,7 +276,7 @@ class Notifier {
 
   // Shows a loading indicator until all operations resolve
   waitForAsyncOperation () {
-    this.loadingToast.show()
+    this.elements.loadingToast.show()
     this.waitingAsyncOperationCount++
   }
 }
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index 7379bb3a2e..127ba59afb 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -4,7 +4,7 @@
   <div id="async-waiting-indicator" style="display: none">
     Saving <i class="load-spinner"></i>
   </div>
-  <div id="async-success-indicator" class="success-indicator" style="display: none">
+  <div id="async-success-indicator" class="success-notification" style="display: none">
     Saved
   </div>
   <button id="toggle-minimize-notifications" style="display: none;">

From 1e5c38320ac43173579a7fa3e9f409a929c2c4dc Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sat, 21 Oct 2023 17:12:08 -0500
Subject: [PATCH 16/23] minimize button toggles minimize mode, fixed double
 instantiation of notifier on patch notes page

---
 app/javascript/src/dashboard.js | 2 +-
 app/javascript/src/notifier.js  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index 0edc294589..7a5fc460de 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -16,7 +16,7 @@ const defineCaseContactsTable = function () {
 $(() => { // JQuery's callback for the DOM loading
   const notificationsElement = $('#notifications')
 
-  if (notificationsElement.length) {
+  if (notificationsElement.length && ($('table#case_contacts').length || $('table#casa_cases').length || $('table#volunteers').length || $('table#supervisors').length)) {
     pageNotifier = new Notifier(notificationsElement)
   }
 
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index bf133baf15..158be66755 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -160,6 +160,10 @@ class Notifier {
 
     this.savedToastTimeouts = []
     this.waitingAsyncOperationCount = 0
+
+    this.elements.minimizeButton.on('click', () => {
+      this.toggleMinimize()
+    })
   }
 
   // Adds notification messages to the notification element

From 981e80d5834ef6af09339bb75cc23cf3b31c5de1 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sun, 22 Oct 2023 07:33:57 -0500
Subject: [PATCH 17/23] test stubs

---
 app/javascript/__tests__/notifier.test.js | 169 +++++++++++-----------
 1 file changed, 82 insertions(+), 87 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 7b5c31a0a7..0fedabdc3f 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -33,6 +33,28 @@ beforeEach(() => {
 })
 
 describe('Notifier', () => {
+  describe('clicking the minify button', () => {
+    test('should toggle the notifier between the minified and expanded state', (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    test('should show only badges where there exists at least one notification matching the badge level when minimized', (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+  })
+
   describe('notify', () => {
     test("displays a green notification when passed a message and level='info'", (done) => {
       const notificationMessage = "'Y$deH[|%ROii]jy"
@@ -70,6 +92,36 @@ describe('Notifier', () => {
       })
     })
 
+    test('displays the minimize button after no notifications were present before', (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    test("displays the badge corresponding to the notification's level if it is the only notification with that level", (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    test("increments the number on badge corresponding to the notification's level when the badge is already displayed", (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
     test('appends a dismissable message to the notifications widget', (done) => {
       $(() => {
         try {
@@ -164,93 +216,6 @@ describe('Notifier', () => {
     })
   })
 
-  describe('notificationsCount', () => {
-    const initialNotificationsCountState = {
-      error: 0,
-      info: 0,
-      warn: 0
-    }
-
-    it('automatically shows the minimize button when going from 0 to 1 notifications', (done) => {
-      $(() => {
-        try {
-          expect(notifier.notificationsCount).toEqual(initialNotificationsCountState)
-          expect($('#toggle-minimize-notifications').css('display')).toBe('none')
-
-          notifier.notify('message', 'warn')
-
-          expect(notifier.notificationsCount).toEqual({
-            error: 0,
-            info: 0,
-            warn: 1
-          })
-          expect($('#toggle-minimize-notifications').css('display')).not.toBe('none')
-          done()
-        } catch (error) {
-          done(error)
-        }
-      })
-    })
-
-    it('automatically hides the minimize button when going from 1 to 0 notifications', (done) => {
-      $(() => {
-        try {
-          const notification = notifier.notify('message', 'warn')
-
-          expect(notifier.notificationsCount).toEqual({
-            error: 0,
-            info: 0,
-            warn: 1
-          })
-          expect($('#toggle-minimize-notifications').css('display')).not.toBe('none')
-
-          notification.dismiss()
-
-          expect(notifier.notificationsCount).toEqual(initialNotificationsCountState)
-          expect($('#toggle-minimize-notifications').css('display')).toBe('none')
-          done()
-        } catch (error) {
-          done(error)
-        }
-      })
-    })
-
-    it('increments the correct level after creating a new notification', (done) => {
-      $(() => {
-        try {
-          expect(notifier.notificationsCount).toEqual(initialNotificationsCountState)
-
-          notifier.notify('message', 'info')
-
-          expect(notifier.notificationsCount).toEqual({
-            error: 0,
-            info: 1,
-            warn: 0
-          })
-
-          notifier.notify('message', 'error')
-
-          expect(notifier.notificationsCount).toEqual({
-            error: 1,
-            info: 1,
-            warn: 0
-          })
-
-          notifier.notify('message', 'warn')
-
-          expect(notifier.notificationsCount).toEqual({
-            error: 1,
-            info: 1,
-            warn: 1
-          })
-          done()
-        } catch (error) {
-          done(error)
-        }
-      })
-    })
-  })
-
   describe('resolveAsyncOperation', () => {
     test('displays the saved toast for 2 seconds when not passed an error', (done) => {
       $(() => {
@@ -499,6 +464,36 @@ describe('Notifications', () => {
         }
       })
     })
+
+    test("hides the badge corresponding to the notification's level when there are no more notifications matching the dismissed notification's level", (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    test('hides the minimize button if no notifications are left', (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    test("decrements the number on badge corresponding to the notification's level when there are still notifications matching the dismissed notification's level left", (done) => {
+      $(() => {
+        try {
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
   })
 
   describe('getText', () => {

From af321ae38ae4a4f6c991ecd99e4e9523f33a8ab2 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sun, 22 Oct 2023 08:39:29 -0500
Subject: [PATCH 18/23] made toggleMinimize private

---
 app/javascript/src/notifier.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index 158be66755..b884736044 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -162,7 +162,7 @@ class Notifier {
     this.waitingAsyncOperationCount = 0
 
     this.elements.minimizeButton.on('click', () => {
-      this.toggleMinimize()
+      this.#toggleMinimize()
     })
   }
 
@@ -247,7 +247,7 @@ class Notifier {
     }
   }
 
-  toggleMinimize () {
+  #toggleMinimize () {
     const { messagesContainer } = this.elements
 
     if (messagesContainer.css('display') === 'none') {

From f8985e59640b8540cd5c3db889024056abc67d1d Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sun, 22 Oct 2023 15:51:38 -0500
Subject: [PATCH 19/23] filled in test for minimize toggle

---
 app/javascript/__tests__/notifier.test.js | 41 ++++++++++++++++++++---
 app/javascript/src/notifier.js            |  2 +-
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 0fedabdc3f..10a8f52dc3 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -18,10 +18,10 @@ beforeEach(() => {
     Saved
   </div>
   <button id="toggle-minimize-notifications" style="display: none;">
-    minimize notifications 
-    <span class="badge rounded-pill bg-success">1</span>
-    <span class="badge rounded-pill bg-warning">1</span>
-    <span class="badge rounded-pill bg-danger">1</span>
+    <span>minimize notifications </span>
+    <span class="badge rounded-pill bg-success" style="display: none;"></span>
+    <span class="badge rounded-pill bg-warning" style="display: none;"></span>
+    <span class="badge rounded-pill bg-danger" style="display: none;"></span>
     <i class="fa-solid fa-minus"></i>
   </button>
 </div>`
@@ -34,9 +34,42 @@ beforeEach(() => {
 
 describe('Notifier', () => {
   describe('clicking the minify button', () => {
+    let minimizeButton
+
+    beforeEach(() => { // Create a notification so the minify button displays
+      $(() => {
+        notifier.notify('a notification', 'info')
+        minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+      })
+    })
+
     test('should toggle the notifier between the minified and expanded state', (done) => {
       $(() => {
         try {
+          const messageNotificationsContainer = notificationsElement.find('.messages')
+          const minimizeButtonIcon = minimizeButton.children('i')
+          const minimizeButtonText = minimizeButton.children('span').first()
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+          expect(messageNotificationsContainer.css('display')).not.toBe('none')
+          expect(minimizeButtonIcon.hasClass('fa-minus')).toBeTruthy()
+          expect(minimizeButtonIcon.hasClass('fa-plus')).not.toBeTruthy()
+          expect(minimizeButtonText.css('display')).not.toBe('none')
+
+          minimizeButton.click()
+
+          expect(messageNotificationsContainer.css('display')).toBe('none')
+          expect(minimizeButtonIcon.hasClass('fa-minus')).not.toBeTruthy()
+          expect(minimizeButtonIcon.hasClass('fa-plus')).toBeTruthy()
+          expect(minimizeButtonText.css('display')).toBe('none')
+
+          minimizeButton.click()
+
+          expect(messageNotificationsContainer.css('display')).not.toBe('none')
+          expect(minimizeButtonIcon.hasClass('fa-minus')).toBeTruthy()
+          expect(minimizeButtonIcon.hasClass('fa-plus')).not.toBeTruthy()
+          expect(minimizeButtonText.css('display')).not.toBe('none')
+
           done()
         } catch (error) {
           done(error)
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index b884736044..3148163d06 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -124,7 +124,7 @@ class Notifier {
       },
       messagesContainer: notificationsElement.children('.messages'),
       minimizeButton: notificationsElement.children('#toggle-minimize-notifications'),
-      minimizeButtonIcon: notificationsElement.find('#toggle-minimize-notifications fa-solid'),
+      minimizeButtonIcon: notificationsElement.find('#toggle-minimize-notifications i'),
       minimizeButtonText: notificationsElement.find('#toggle-minimize-notifications span').first(),
       notificationsElement,
       savedToast: notificationsElement.find('#async-success-indicator')

From 021c3fc23c5241ddf3a76d9863274717508fba79 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sun, 22 Oct 2023 18:06:32 -0500
Subject: [PATCH 20/23] filled out test for badge states after toggling
 minimize mode

---
 app/javascript/__tests__/notifier.test.js | 35 +++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 10a8f52dc3..a43302f6b9 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -80,6 +80,41 @@ describe('Notifier', () => {
     test('should show only badges where there exists at least one notification matching the badge level when minimized', (done) => {
       $(() => {
         try {
+          const minimizeButtonBadgeError = minimizeButton.children('.bg-danger')
+          const minimizeButtonBadgeInfo = minimizeButton.children('.bg-success')
+          const minimizeButtonBadgeWarning = minimizeButton.children('.bg-warning')
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+
+          minimizeButton.click()
+
+          expect(minimizeButtonBadgeInfo.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeInfo.text()).toBe('1')
+          expect(minimizeButtonBadgeError.css('display')).toContain('none')
+          expect(minimizeButtonBadgeWarning.css('display')).toContain('none')
+
+          minimizeButton.click()
+          const notification2 = notifier.notify('msg', 'error')
+          notifier.notify('msg', 'warn')
+
+          minimizeButton.click()
+          expect(minimizeButtonBadgeInfo.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeInfo.text()).toBe('1')
+          expect(minimizeButtonBadgeError.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeError.text()).toBe('1')
+          expect(minimizeButtonBadgeWarning.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeWarning.text()).toBe('1')
+
+          minimizeButton.click()
+          notification2.dismiss()
+
+          minimizeButton.click()
+          expect(minimizeButtonBadgeInfo.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeInfo.text()).toBe('1')
+          expect(minimizeButtonBadgeError.css('display')).toContain('none')
+          expect(minimizeButtonBadgeWarning.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeWarning.text()).toBe('1')
+
           done()
         } catch (error) {
           done(error)

From 10c14303735861fe1e6021a1cd7e074648b9b64a Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sun, 22 Oct 2023 20:11:32 -0500
Subject: [PATCH 21/23] filled out notify tests for minimize button

---
 app/javascript/__tests__/notifier.test.js | 94 +++++++++++++++++++----
 1 file changed, 79 insertions(+), 15 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index a43302f6b9..0a61dbbbda 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -163,6 +163,17 @@ describe('Notifier', () => {
     test('displays the minimize button after no notifications were present before', (done) => {
       $(() => {
         try {
+          const messageNotificationsContainer = notificationsElement.find('.messages')
+          const minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          expect(minimizeButton.css('display')).toBe('none')
+          expect(messageNotificationsContainer.children().length).toBe(0)
+
+          notifier.notify('msg', 'info')
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+          expect(messageNotificationsContainer.children().length).toBeGreaterThan(0)
+
           done()
         } catch (error) {
           done(error)
@@ -170,23 +181,76 @@ describe('Notifier', () => {
       })
     })
 
-    test("displays the badge corresponding to the notification's level if it is the only notification with that level", (done) => {
-      $(() => {
-        try {
-          done()
-        } catch (error) {
-          done(error)
-        }
+    describe('when the notifier is minimized', () => {
+      let minimizeButton
+
+      beforeEach(() => {
+        $(() => {
+          minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          notifier.notify('msg', 'info')
+          minimizeButton.click()
+        })
       })
-    })
 
-    test("increments the number on badge corresponding to the notification's level when the badge is already displayed", (done) => {
-      $(() => {
-        try {
-          done()
-        } catch (error) {
-          done(error)
-        }
+      test("un-hides the badge corresponding to the notification's level if it is the only notification with that level", (done) => {
+        $(() => {
+          try {
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.css('display')).toBe('none')
+
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
+      })
+
+      test("increments the number on badge corresponding to the notification's level when the badge is already displayed", (done) => {
+        $(() => {
+          try {
+            const minimizeButtonBadgeInfo = notificationsElement.find('#toggle-minimize-notifications .bg-success')
+
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeInfo.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeInfo.text()).toBe('1')
+
+            notifier.notify('msg', 'info')
+
+            expect(minimizeButtonBadgeInfo.text()).toBe('2')
+
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.text()).toBe('1')
+
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.text()).toBe('2')
+
+            const minimizeButtonBadgeWarning = notificationsElement.find('#toggle-minimize-notifications .bg-warning')
+            notifier.notify('msg', 'warn')
+
+            expect(minimizeButtonBadgeWarning.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeWarning.text()).toBe('1')
+
+            notifier.notify('msg', 'warn')
+
+            expect(minimizeButtonBadgeWarning.text()).toBe('2')
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
       })
     })
 

From 1943353b87fecf1202597f82ce1ef18dfc5e5a05 Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Sun, 22 Oct 2023 23:12:15 -0500
Subject: [PATCH 22/23] filled in tests for dismiss

---
 app/javascript/__tests__/notifier.test.js | 106 ++++++++++++++++++----
 1 file changed, 88 insertions(+), 18 deletions(-)

diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index 0a61dbbbda..4a564f0bd1 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -216,10 +216,11 @@ describe('Notifier', () => {
       test("increments the number on badge corresponding to the notification's level when the badge is already displayed", (done) => {
         $(() => {
           try {
-            const minimizeButtonBadgeInfo = notificationsElement.find('#toggle-minimize-notifications .bg-success')
-
             expect(notificationsElement.children('.messages').css('display')).toBe('none')
             expect(minimizeButton.css('display')).not.toBe('none')
+
+            const minimizeButtonBadgeInfo = notificationsElement.find('#toggle-minimize-notifications .bg-success')
+
             expect(minimizeButtonBadgeInfo.css('display')).not.toBe('none')
             expect(minimizeButtonBadgeInfo.text()).toBe('1')
 
@@ -597,9 +598,20 @@ describe('Notifications', () => {
       })
     })
 
-    test("hides the badge corresponding to the notification's level when there are no more notifications matching the dismissed notification's level", (done) => {
+    test('hides the minimize button if no notifications are left', (done) => {
       $(() => {
         try {
+          const messageNotificationsContainer = notificationsElement.find('.messages')
+          const minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+          expect(messageNotificationsContainer.children().length).toBe(1)
+
+          notification.dismiss()
+
+          expect(minimizeButton.css('display')).toBe('none')
+          expect(messageNotificationsContainer.children().length).toBe(0)
+
           done()
         } catch (error) {
           done(error)
@@ -607,23 +619,81 @@ describe('Notifications', () => {
       })
     })
 
-    test('hides the minimize button if no notifications are left', (done) => {
-      $(() => {
-        try {
-          done()
-        } catch (error) {
-          done(error)
-        }
+    describe('when the parent notifier is minimized', () => {
+      let minimizeButton
+
+      beforeEach(() => {
+        $(() => {
+          minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          minimizeButton.click()
+        })
       })
-    })
 
-    test("decrements the number on badge corresponding to the notification's level when there are still notifications matching the dismissed notification's level left", (done) => {
-      $(() => {
-        try {
-          done()
-        } catch (error) {
-          done(error)
-        }
+      test("hides the badge corresponding to the notification's level when there are no more notifications matching the dismissed notification's level", (done) => {
+        $(() => {
+          try {
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+
+            const errorNotification = notifier.notify('msg', 'error')
+
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+
+            errorNotification.dismiss()
+
+            expect(minimizeButtonBadgeError.css('display')).toBe('none')
+
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
+      })
+
+      test("decrements the number on badge corresponding to the notification's level when there are still notifications matching the dismissed notification's level left", (done) => {
+        $(() => {
+          try {
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+
+            const minimizeButtonBadgeInfo = notificationsElement.find('#toggle-minimize-notifications .bg-success')
+            const infoNotification = notifier.notify('msg', 'info')
+            notifier.notify('msg', 'info')
+
+            expect(minimizeButtonBadgeInfo.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeInfo.text()).toBe('2')
+
+            infoNotification.dismiss()
+
+            expect(minimizeButtonBadgeInfo.text()).toBe('1')
+
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+            const errorNotification = notifier.notify('msg', 'error')
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.text()).toBe('2')
+
+            errorNotification.dismiss()
+
+            expect(minimizeButtonBadgeError.text()).toBe('1')
+
+            const minimizeButtonBadgeWarning = notificationsElement.find('#toggle-minimize-notifications .bg-warning')
+            const warningNotification = notifier.notify('msg', 'warn')
+
+            expect(minimizeButtonBadgeWarning.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeWarning.text()).toBe('2')
+
+            warningNotification.dismiss()
+
+            expect(minimizeButtonBadgeWarning.text()).toBe('1')
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
       })
     })
   })

From 81030dadf271824b70a8d9abeb3f9fb450a8790e Mon Sep 17 00:00:00 2001
From: firelemons <shenyang64@gmail.com>
Date: Mon, 23 Oct 2023 08:19:43 -0500
Subject: [PATCH 23/23] update tests

---
 spec/system/all_casa_admins/patch_notes/index_spec.rb | 2 +-
 spec/system/casa_cases/emancipation/show_spec.rb      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/system/all_casa_admins/patch_notes/index_spec.rb b/spec/system/all_casa_admins/patch_notes/index_spec.rb
index dfe40e2b22..edb4da50ed 100644
--- a/spec/system/all_casa_admins/patch_notes/index_spec.rb
+++ b/spec/system/all_casa_admins/patch_notes/index_spec.rb
@@ -13,7 +13,7 @@
           click_on "Create"
         end
 
-        expect(page).to have_selector(".warn-indicator", text: "Cannot save an empty patch note")
+        expect(page).to have_selector(".warning-notification", text: "Cannot save an empty patch note")
       end
     end
 
diff --git a/spec/system/casa_cases/emancipation/show_spec.rb b/spec/system/casa_cases/emancipation/show_spec.rb
index e7331c2bd9..95a1b40898 100644
--- a/spec/system/casa_cases/emancipation/show_spec.rb
+++ b/spec/system/casa_cases/emancipation/show_spec.rb
@@ -29,7 +29,7 @@
       expect(emancipation_category["data-is-open"]).to match(/true/)
       find(".check-item").click
       find(".emacipation-category-input-label-pair").click
-      expect(page).to have_css(".success-indicator", text: "Unchecked #{emancipation_option.name}")
+      expect(page).to have_css(".success-notification", text: "Unchecked #{emancipation_option.name}")
       expect(emancipation_category["data-is-open"]).to match(/true/)
     end