MM-53478 : Improve design of keyword that trigger notification (#23934)

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_account_settings_spec.js

@@ -34,7 +34,7 @@ describe('Verify Accessibility Support in different sections in Settings and Pro
             {key: 'desktop', label: 'Desktop Notifications', type: 'radio'},
             {key: 'email', label: 'Email Notifications', type: 'radio'},
             {key: 'push', label: 'Mobile Push Notifications', type: 'radio'},
-            {key: 'keys', label: 'Words That Trigger Mentions', type: 'checkbox'},
+            {key: 'keysWithNotification', label: 'Keywords that trigger Notifications', type: 'checkbox'},
             {key: 'comments', label: 'Reply notifications', type: 'radio'},
         ],
         display: [

e2e-tests/cypress/tests/integration/channels/notifications/at_icon_still_shows_mentions_list_with_deactivated_triggers_spec.js

@@ -23,12 +23,12 @@ describe('Notifications', () => {
 
             // # Open 'Settings' modal
             cy.uiOpenSettingsModal().within(() => {
-                // # Open 'Words That Trigger Mentions' setting and uncheck all the checkboxes
-                cy.findByRole('heading', {name: 'Words That Trigger Mentions'}).should('be.visible').click();
+                // # Open 'Keywords that trigger Notifications' setting and uncheck all the checkboxes
+                cy.findByRole('heading', {name: 'Keywords that trigger Notifications'}).should('be.visible').click();
                 cy.findByRole('checkbox', {name: `Your case-sensitive first name "${otherUser.first_name}"`}).should('not.be.checked');
                 cy.findByRole('checkbox', {name: `Your non case-sensitive username "${otherUser.username}"`}).should('not.be.checked');
                 cy.findByRole('checkbox', {name: 'Channel-wide mentions "@channel", "@all", "@here"'}).click().should('not.be.checked');
-                cy.findByRole('checkbox', {name: 'Other non case-sensitive words, separated by commas:'}).should('not.be.checked');
+                cy.findByRole('checkbox', {name: 'Other non case-sensitive words, press Tab or use commas to separate keywords:'}).should('not.be.checked');
 
                 // # Save then close the modal
                 cy.uiSaveAndClose();

e2e-tests/cypress/tests/integration/channels/notifications/at_mentions_spec.js

@@ -243,14 +243,16 @@ function setNotificationSettings(desiredSettings = {first: true, username: true,
     // Navigate to settings modal
     cy.uiOpenSettingsModal();
 
-    // Notifications header should be visible
-    cy.get('#notificationSettingsTitle').
-        scrollIntoView().
+    // # Click on notifications tab
+    cy.findByRoleExtended('tab', {name: 'Notifications'}).
         should('be.visible').
-        and('contain', 'Notifications');
+        click();
+
+    // Notifications header should be visible
+    cy.findAllByText('Notifications').should('be.visible');
 
     // Open up 'Words that trigger mentions' sub-section
-    cy.get('#keysTitle').
+    cy.findByText('Keywords that trigger Notifications').
         scrollIntoView().
         click();
 
@@ -270,8 +272,8 @@ function setNotificationSettings(desiredSettings = {first: true, username: true,
     // Set Custom field
     if (desiredSettings.custom && desiredSettings.customText) {
         cy.get('#notificationTriggerCustomText').
-            clear().
-            type(desiredSettings.customText);
+            type(desiredSettings.customText, {force: true}).
+            tab();
     }
 
     // Click “Save” and close modal

e2e-tests/cypress/tests/integration/channels/notifications/deselect_username_mention_trigger_spec.js

@@ -29,14 +29,16 @@ describe('Notifications', () => {
 
             // # Open 'Settings' modal
             cy.uiOpenSettingsModal().within(() => {
-                cy.get('#keysEdit').should('be.visible').click();
+                // # Open 'Keywords that trigger Notifications' setting
+                cy.findByRole('heading', {name: 'Keywords that trigger Notifications'}).should('be.visible').click();
 
                 // * As otherUser, ensure that 'Your non-case sensitive username' is not checked
-                cy.get('#notificationTriggerUsername').should('not.be.checked');
+                cy.findByRole('checkbox', {name: `Your non case-sensitive username "${otherUser.username}"`}).should('not.be.checked');
 
-                // # Close the modal
-                cy.get('#accountSettingsHeader').find('button').should('be.visible').click();
+                // # Save then close the modal
+                cy.uiSaveAndClose();
             });
+
             cy.apiLogout();
 
             // # Login as sysadmin