Fix Notifications Overlay that opens automatically

[marcelo-earth]

Closes #6130.

Describe your changes:

Problem

TL;DR The close button does not close properly because of the parent component

We have this current user flow:

1. User receives information notification ✅ Alert is displayed
2. User opens notification list ✅ Notification list is displayed
3. User closes notification list ⚠️

⚠️ At this point two things can happen: if the user closes the notification list before 3000 milliseconds (since the alert is sent) everything works correctly. The variable in charge of displaying the NotificationList component will switch from true to false.

But after that time, if the user tries to close it, the error occurs.

The emitting event to close of the NotificationsList component is not sent to the NotificationIndicator once it is hidden (not rendered).

Since the variable in charge of displaying the NotificationList component is still true, the next time Open MCT tries to send any kind of alert, it will open the alert with the notification list. Here's the bug.

Solution

Adding showNotificationsOverlay to this condition continue to display the NotificationIndicator element even if there are no notifications. This allows the notification list closing flow to continue on its way without interruption.

// If there are no notifications, is the notification list displayed? If so, keep the parent component rendered so the user can close it properly, otherwise just if there are notifications.
notifications.length === 0 ? showNotificationsOverlay : notifications.length > 0

This has minimal impact on the user experience, because the modal still hides all page content including the indicator itself.

All Submissions:

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?
• Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

• Changes address original issue?
• Tests included and/or updated with changes?
• Command line build passes?
• Has this been smoke tested?
• Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

• Changes appear to address issue?
• Reviewer has tested changes by following the provided instructions?
• Changes appear not to be breaking changes?
• Appropriate automated tests included?
• Code style and in-line documentation are appropriate?
• Has associated issue been labelled unverified? (only applicable if this PR closes the issue)
• Has associated issue been labelled bug? (only applicable if this PR is for a bug fix)

[codecov]

Codecov Report

Merging #6133 (4ccfd46) into master (d5adaf6) will decrease coverage by 0.01%.
The diff coverage is n/a.

❗ Current head 4ccfd46 differs from pull request most recent head 4de8d54. Consider uploading reports for the commit 4de8d54 to get more accurate results

@@            Coverage Diff             @@
##           master    #6133      +/-   ##
==========================================
- Coverage   54.65%   54.64%   -0.01%     
==========================================
  Files         600      600              
  Lines       23950    23950              
  Branches     2117     2117              
==========================================
- Hits        13089    13087       -2     
- Misses      10261    10264       +3     
+ Partials      600      599       -1     

Flag	Coverage Δ		*Carryforward flag
e2e-ci	39.49% <ø> (ø)		Carriedforward from a02ae5b
e2e-full	51.23% <ø> (ø)		Carriedforward from a02ae5b
e2e-stable	50.09% <ø> (ø)
unit	50.25% <ø> (-0.01%)	⬇️

*This pull request uses carry forward flags. Click here to find out more.

Impacted Files	Coverage Δ
...tionIndicator/components/NotificationIndicator.vue	81.81% <ø> (ø)
src/plugins/tabs/components/tabs.vue	34.40% <0.00%> (-1.61%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d5adaf6...4de8d54. Read the comment docs.

[unlikelyzero]

This looks amazing! Would you mind adding a regression test for this area?

[marcelo-earth]

This looks amazing! Would you mind adding a regression test for this area?

Sure! I will push the test for your review.

[unlikelyzero]

Test looks great! I just had a single question about accessible locators.

Would you mind moving the test into the existing notification.e2e.spec.js file?

[ozyx]

Looks great! Just have one minor request and this is good to merge.

[ozyx]

Awesome work. Really appreciate the quick turnaround on this! Thank you again.