diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandBarBusEvents.js b/app/javascript/dashboard/routes/dashboard/commands/commandBarBusEvents.js
index 86e417ad7..7d4f8c9bc 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandBarBusEvents.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandBarBusEvents.js
@@ -18,3 +18,4 @@ export const CMD_AI_ASSIST = 'CMD_AI_ASSIST';
// Inbox Commands (Notifications)
export const CMD_SNOOZE_NOTIFICATION = 'CMD_SNOOZE_NOTIFICATION';
+export const CMD_TOGGLE_SNOOZE_NOTIFICATION = 'CMD_TOGGLE_SNOOZE_NOTIFICATION';
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 45b807fb3..440a254e1 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -32,6 +32,11 @@ export default {
appearanceHotKeys,
goToCommandHotKeys,
],
+ data() {
+ return {
+ modalObserver: null,
+ };
+ },
computed: {
placeholder() {
return this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER');
@@ -55,9 +60,21 @@ export default {
routeName() {
this.setCommandbarData();
},
+ hotKeys() {
+ // This is to update the command bar data when the hot keys are updated dynamically
+ this.setCommandbarData();
+ },
},
mounted() {
this.setCommandbarData();
+ if (this.$route.name === 'inbox_view') {
+ this.$nextTick(() => {
+ this.setModalObserver();
+ });
+ }
+ },
+ beforeDestroy() {
+ this.disposeModalObserver();
},
methods: {
setCommandbarData() {
@@ -72,6 +89,49 @@ export default {
});
this.setCommandbarData();
},
+ setModalObserver() {
+ this.disposeModalObserver();
+
+ const ninjaKeysElement = document.querySelector('ninja-keys');
+ if (ninjaKeysElement && ninjaKeysElement.shadowRoot) {
+ const modalElement =
+ ninjaKeysElement.shadowRoot.querySelector('.modal');
+ if (modalElement instanceof HTMLElement) {
+ this.createModalObserver(modalElement);
+ }
+ }
+ },
+ createModalObserver(modalElement) {
+ // Initialize an observer to detect when the command bar modal is closed and opened
+ // The ninja-keys component does not emit a close event https://github.com/ssleptsov/ninja-keys?tab=readme-ov-file#events.
+ // So by MutationObserver we can detect the modal visibility state by observing DOM changes.
+ // By observing changes to the 'class' attribute of the modal element,
+ // we can determine the modal's visibility state.
+
+ this.modalObserver = new MutationObserver(mutations => {
+ mutations.forEach(mutation => {
+ if (mutation.attributeName === 'class') {
+ const classList = mutation.target.classList;
+ if (!classList.contains('visible')) {
+ // Hide snooze notification items from cmd bar
+ // The this.showSnoozeNotificationItems is from inboxHotKeysMixin
+ this.showSnoozeNotificationItems = false;
+ }
+ }
+ });
+ });
+ this.modalObserver.observe(modalElement, {
+ attributes: true,
+ attributeOldValue: true,
+ attributeFilter: ['class'],
+ });
+ },
+ disposeModalObserver() {
+ if (this.modalObserver) {
+ this.modalObserver.disconnect();
+ this.modalObserver = null;
+ }
+ },
},
};
diff --git a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
index e8f92a9f6..af513a6be 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
@@ -1,6 +1,9 @@
import wootConstants from 'dashboard/constants/globals';
-import { CMD_SNOOZE_NOTIFICATION } from './commandBarBusEvents';
+import {
+ CMD_SNOOZE_NOTIFICATION,
+ CMD_TOGGLE_SNOOZE_NOTIFICATION,
+} from './commandBarBusEvents';
import { ICON_SNOOZE_NOTIFICATION } from './CommandBarIcons';
import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';
@@ -61,14 +64,28 @@ const INBOX_SNOOZE_EVENTS = [
},
];
export default {
+ data() {
+ return {
+ showSnoozeNotificationItems: false,
+ };
+ },
computed: {
inboxHotKeys() {
- if (isAInboxViewRoute(this.$route.name)) {
+ if (
+ isAInboxViewRoute(this.$route.name) ||
+ this.showSnoozeNotificationItems
+ ) {
return this.prepareActions(INBOX_SNOOZE_EVENTS);
}
return [];
},
},
+ mounted() {
+ bus.$on(CMD_TOGGLE_SNOOZE_NOTIFICATION, this.toggleSnoozeOptions);
+ },
+ destroyed() {
+ bus.$off(CMD_TOGGLE_SNOOZE_NOTIFICATION, this.toggleSnoozeOptions);
+ },
methods: {
prepareActions(actions) {
return actions.map(action => ({
@@ -77,5 +94,9 @@ export default {
section: this.$t(action.section),
}));
},
+ toggleSnoozeOptions() {
+ // Used to show/hide snooze notification items in cmd bar dynamically
+ this.showSnoozeNotificationItems = true;
+ },
},
};
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 3651c485c..0f2fccc75 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -38,6 +38,15 @@
@observed="loadMoreNotifications"
/>
+