RTC-13524 Add notification ignore button

spec/notificationComp.spec.ts

@@ -129,6 +129,19 @@ describe('Toast notification component', () => {
     expect(toastNotificationReplyButton.exists()).toBeTruthy();
   });
 
+  it('should display ignore button when requested', () => {
+    const hasIgnore = true;
+    const ignoreButtonSelector = `.action-button`;
+    let toastNotificationIgnoreButton = wrapper.find(ignoreButtonSelector);
+    expect(toastNotificationIgnoreButton.exists()).toBeFalsy();
+    ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
+      ...defaultProps,
+      hasIgnore,
+    });
+    toastNotificationIgnoreButton = wrapper.find(ignoreButtonSelector);
+    expect(toastNotificationIgnoreButton.exists()).toBeTruthy();
+  });
+
   it('should trigger mouse hovering function while hovering a notification', async () => {
     const spy = jest.spyOn(ipcRenderer, 'send');
     const notificationContainer = wrapper.find(

src/common/api-interface.ts

@@ -187,6 +187,7 @@ export interface INotificationData {
   theme: Theme;
   isElectronNotification?: boolean;
   callback?: () => void;
+  hasIgnore?: boolean;
   hasReply?: boolean;
   hasMention?: boolean;
 }
@@ -195,6 +196,7 @@ export enum NotificationActions {
   notificationClicked = 'notification-clicked',
   notificationClosed = 'notification-closed',
   notificationReply = 'notification-reply',
+  notificationIgnore = 'notification-ignore',
 }
 
 /**

src/renderer/components/notification-comp.tsx

@@ -47,6 +47,7 @@ interface INotificationState {
   flash: boolean;
   isExternal: boolean;
   theme: Theme;
+  hasIgnore: boolean;
   hasReply: boolean;
   hasMention: boolean;
   isInputHidden: boolean;
@@ -74,6 +75,7 @@ export default class NotificationComp extends React.Component<
       this.close(_event, winKey),
     onClick: (data) => (_event: mouseEventButton) => this.click(data),
     onContextMenu: (event) => this.contextMenu(event),
+    onIgnore: (winKey) => (_event: mouseEventButton) => this.onIgnore(winKey),
     onMouseEnter: (winKey) => (_event: mouseEventButton) =>
       this.onMouseEnter(winKey),
     onMouseLeave: (winKey) => (_event: mouseEventButton) =>
@@ -100,6 +102,7 @@ export default class NotificationComp extends React.Component<
       isExternal: false,
       theme: '',
       isInputHidden: true,
+      hasIgnore: false,
       hasReply: false,
       hasMention: false,
       containerHeight: CONTAINER_HEIGHT,
@@ -193,6 +196,7 @@ export default class NotificationComp extends React.Component<
                 {this.renderExtBadge(isExternal)}
               </div>
               {this.renderReplyButton(id, themeClassName)}
+              {this.renderIgnoreButton(id, themeClassName)}
             </div>
             <span className={`message-preview ${themeClassName}`}>{body}</span>
           </div>
@@ -360,6 +364,15 @@ export default class NotificationComp extends React.Component<
     }
   }
 
+  /**
+   * Handles ignore action
+   * @param id
+   * @private
+   */
+  private onIgnore(id: number): void {
+    ipcRenderer.send('notification-on-ignore', id);
+  }
+
   /**
    * Handles reply action
    * @param id
@@ -561,6 +574,29 @@ export default class NotificationComp extends React.Component<
     return;
   }
 
+  /**
+   * Renders ignore button
+   * @param id
+   * @param theming
+   */
+  private renderIgnoreButton(
+    id: number,
+    theming: string,
+  ): JSX.Element | undefined {
+    if (this.state.hasIgnore) {
+      return (
+        <button
+          className={`action-button ${theming}`}
+          style={{ display: 'block' }}
+          onClick={this.eventHandlers.onIgnore(id)}
+        >
+          {i18n.t('Ignore')()}
+        </button>
+      );
+    }
+    return;
+  }
+
   /**
    * This function aims at providing toast notification css classes
    */

src/renderer/notification.ts

@@ -109,6 +109,9 @@ class Notification extends NotificationHandler {
     ipcMain.on('notification-on-reply', (_event, windowId, replyText) => {
       this.onNotificationReply(windowId, replyText);
     });
+    ipcMain.on('notification-on-ignore', (_event, windowId) => {
+      this.onNotificationIgnore(windowId);
+    });
     ipcMain.on('show-reply', this.funcHandlers.onShowReply);
     // Update latest notification settings from config
     app.on('ready', () => this.updateNotificationSettings());
@@ -273,6 +276,7 @@ class Notification extends NotificationHandler {
       flash,
       isExternal,
       theme,
+      hasIgnore,
       hasReply,
       hasMention,
     } = data;
@@ -287,6 +291,7 @@ class Notification extends NotificationHandler {
       flash,
       isExternal,
       theme,
+      hasIgnore,
       hasReply,
       hasMention,
     });
@@ -398,6 +403,26 @@ class Notification extends NotificationHandler {
     }
   }
 
+  /**
+   * Handles notification ignore action
+   * @param clientId {number}
+   */
+  public onNotificationIgnore(clientId: number): void {
+    const browserWindow = this.getNotificationWindow(clientId);
+    if (
+      browserWindow &&
+      windowExists(browserWindow) &&
+      browserWindow.notificationData
+    ) {
+      const data = browserWindow.notificationData;
+      const callback = this.notificationCallbacks[clientId];
+      if (typeof callback === 'function') {
+        callback(NotificationActions.notificationIgnore, data);
+      }
+      this.hideNotification(clientId);
+    }
+  }
+
   /**
    * Returns the notification based on the client id
    *