Add test notification tool (#28334)

* Add test notification tool

* Add frontend styles

* Remove option from admin view

* Refactor create post and add translations

* Fix several CI errors

* Fix API and frontend snapshots

* Refactor trailing and leading icon on buttons

* Add different button states

* i18n-extract

* Fix wrong text

* Add tests

* Fix wrong string

* Fix test

* feat: E2E send test notifications (#28371)

* Refactor send desktop notification

* Address rest of the feedback

* Fix tests

* Add correct link

* Fix test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>

e2e-tests/cypress/tests/support/index.js

@@ -28,6 +28,7 @@ import './fetch_commands';
 import './keycloak_commands';
 import './ldap_commands';
 import './ldap_server_commands';
+import './notification_commands';
 import './okta_commands';
 import './saml_commands';
 import './shell';

e2e-tests/cypress/tests/support/notification_commands.ts

@@ -0,0 +1,38 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as TIMEOUTS from '../fixtures/timeouts';
+
+/**
+ * permission can be 'granted', 'denied', or 'default'
+ */
+function stubNotificationPermission(permission: string) {
+    cy.window().then((win) => {
+        cy.stub(win.Notification, 'permission').value(permission);
+        cy.stub(win.Notification, 'requestPermission').resolves(permission);
+        cy.stub(win, 'Notification').as('notificationStub').callsFake(() => {
+            return {
+                onclick: cy.stub().as('notificationOnClick'),
+                onerror: cy.stub().as('notificationOnError'),
+            };
+        });
+    });
+}
+
+/**
+ * Verify the system bot message was received
+ */
+function notificationMessage(notificationMessage: string) {
+    // * Assert the unread count is correct
+    cy.get('.SidebarLink:contains(system-bot)').find('#unreadMentions').as('unreadCount').should('be.visible').should('have.text', '1');
+    cy.get('.SidebarLink:contains(system-bot)').find('.Avatar').should('exist').click().wait(TIMEOUTS.HALF_SEC);
+    cy.get('@unreadCount').should('not.exist');
+
+    // * Assert the notification message
+    cy.getLastPostId().then((postId) => {
+        cy.get(`#postMessageText_${postId}`).scrollIntoView().should('be.visible').should('have.text', notificationMessage);
+    });
+}
+
+Cypress.Commands.add('stubNotificationPermission', stubNotificationPermission);
+Cypress.Commands.add('verifySystemBotMessageRecieved', notificationMessage);