[MM-53102] Add support for multi-word highlights without notifications in web (#24050)

- Adds a new section under settings/notifications for adding custom multi-word keywords that get highlighted without notification
- Adds a new classname for highlighting words although the styling is the same as mentions highlights
- Added a few components to the ReduxFromProps pattern
- Adds supported type for the hook of PluginComponent type
- Add upsell for highlight without notification
- Moved 'setting_item.tsx' to the components folder
- Improved prop names and function structure for setting_item, setting_item_max and setting_item_min
- Moved 'toggle_modal_button.tsx' to the components folder
- Removed t and utility messages from a few components
- Fixed bug where the tooltip was not getting rendered on restrictedButtons
- Improved the mobile view of the settings modal
- Adds E2E for the feature

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

@@ -34,8 +34,8 @@ 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: 'keysWithNotification', label: 'Keywords that trigger Notifications', type: 'checkbox'},
-            {key: 'comments', label: 'Reply notifications', type: 'radio'},
+            {key: 'keysWithNotification', label: 'Keywords That Trigger Notifications', type: 'checkbox'},
+            {key: 'comments', label: 'Reply Notifications', type: 'radio'},
         ],
         display: [
             {key: 'theme', label: 'Theme', type: 'radio'},

e2e-tests/cypress/tests/integration/channels/enterprise/cloud/billing/notify_admin_spec.ts

@@ -188,6 +188,8 @@ function mapFeatureIdToId(id: string) {
         return 'All Professional features';
     case 'mattermost.feature.all_enterprise':
         return 'All Enterprise features';
+    case 'mattermost.feature.highlight_without_notification':
+        return 'Keywords Highlight Without Notification';
     default:
         return '';
     }

e2e-tests/cypress/tests/integration/channels/messaging/message_auto_response_spec.js

@@ -48,7 +48,7 @@ describe('Auto Response In DMs', () => {
         // # Open 'Settings' modal and view 'Notifications'
         cy.uiOpenSettingsModal().within(() => {
             // # Click on 'Edit' for 'Automatic Direct Message Replies
-            cy.get('#auto-responderEdit').should('be.visible').click();
+            cy.get('#auto-responderEdit').should('exist').scrollIntoView().and('be.visible').click();
 
             // # Click on 'Enabled' checkbox
             cy.get('#autoResponderActive').should('be.visible').click();

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

@@ -23,8 +23,8 @@ describe('Notifications', () => {
 
             // # Open 'Settings' modal
             cy.uiOpenSettingsModal().within(() => {
-                // # Open 'Keywords that trigger Notifications' setting and uncheck all the checkboxes
-                cy.findByRole('heading', {name: 'Keywords that trigger Notifications'}).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');

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

@@ -252,7 +252,7 @@ function setNotificationSettings(desiredSettings = {first: true, username: true,
     cy.findAllByText('Notifications').should('be.visible');
 
     // Open up 'Words that trigger mentions' sub-section
-    cy.findByText('Keywords that trigger Notifications').
+    cy.findByText('Keywords That Trigger Notifications').
         scrollIntoView().
         click();
 

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

@@ -29,8 +29,8 @@ describe('Notifications', () => {
 
             // # Open 'Settings' modal
             cy.uiOpenSettingsModal().within(() => {
-                // # Open 'Keywords that trigger Notifications' setting
-                cy.findByRole('heading', {name: 'Keywords that trigger Notifications'}).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.findByRole('checkbox', {name: `Your non case-sensitive username "${otherUser.username}"`}).should('not.be.checked');

e2e-tests/playwright/support/ui/components/channels/delete_post_modal.ts

@@ -9,7 +9,7 @@ export default class DeletePostModal {
 
     constructor(container: Locator) {
         this.container = container;
-        this.confirmButton = this.container.locator('#deletePostModalButton');
+        this.confirmButton = container.locator('#deletePostModalButton');
     }
 
     async toBeVisible() {

e2e-tests/playwright/support/ui/components/channels/settings/notification_settings.ts

@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+type NotificationSettingsSection = 'keysWithHighlight' | 'keysWithNotification';
+
+export default class NotificationsSettings {
+    readonly container: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    async expandSection(section: NotificationSettingsSection) {
+        if (section === 'keysWithHighlight') {
+            await this.container.getByText('Keywords That Get Highlighted (without notifications)').click();
+            await this.verifySectionIsExpanded('keysWithHighlight');
+        }
+    }
+
+    async verifySectionIsExpanded(section: NotificationSettingsSection) {
+        await expect(this.container.locator(`#${section}Edit`)).not.toBeVisible();
+
+        if (section === 'keysWithHighlight') {
+            await expect(
+                this.container.getByText(
+                    'Enter non case-sensitive keywords, press Tab or use commas to separate them:',
+                ),
+            ).toBeVisible();
+            await expect(
+                this.container.getByText(
+                    'These keywords will be shown to you with a highlight when anyone sends a message that includes them.',
+                ),
+            ).toBeVisible();
+        }
+    }
+
+    async getKeywordsInput() {
+        await expect(this.container.locator('input')).toBeVisible();
+        return this.container.locator('input');
+    }
+
+    async save() {
+        await expect(this.container.getByText('Save')).toBeVisible();
+        await this.container.getByText('Save').click();
+    }
+}
+
+export {NotificationsSettings};

e2e-tests/playwright/support/ui/components/channels/settings/settings_modal.ts

@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+import {NotificationsSettings} from './notification_settings';
+
+export default class SettingsModal {
+    readonly container: Locator;
+
+    readonly notificationsSettingsTab;
+    readonly notificationsSettings;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.notificationsSettingsTab = container.locator('#notificationsButton');
+        this.notificationsSettings = new NotificationsSettings(container.locator('#notificationSettings'));
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    async openNotificationsTab() {
+        await expect(this.notificationsSettingsTab).toBeVisible();
+        await this.notificationsSettingsTab.click();
+
+        await this.notificationsSettings.toBeVisible();
+    }
+
+    async closeModal() {
+        await this.container.getByLabel('Close').click();
+
+        await expect(this.container).not.toBeVisible();
+    }
+}
+
+export {SettingsModal};

e2e-tests/playwright/support/ui/components/global_header.ts

@@ -7,11 +7,19 @@ export default class GlobalHeader {
     readonly container: Locator;
 
     readonly productSwitchMenu;
+    readonly recentMentionsButton;
+    readonly settingsButton;
 
     constructor(container: Locator) {
         this.container = container;
 
         this.productSwitchMenu = container.getByRole('button', {name: 'Product switch menu'});
+        this.recentMentionsButton = container.getByRole('button', {name: 'Recent mentions'});
+        this.settingsButton = container.getByRole('button', {name: 'Settings'});
+    }
+
+    async toBeVisible(name: string) {
+        await expect(this.container.getByRole('heading', {name})).toBeVisible();
     }
 
     async switchProduct(name: string) {
@@ -19,8 +27,14 @@ export default class GlobalHeader {
         await this.container.getByRole('link', {name}).click();
     }
 
-    async toBeVisible(name: string) {
-        await expect(this.container.getByRole('heading', {name})).toBeVisible();
+    async openSettings() {
+        await expect(this.settingsButton).toBeVisible();
+        await this.settingsButton.click();
+    }
+
+    async openRecentMentions() {
+        await expect(this.recentMentionsButton).toBeVisible();
+        await this.recentMentionsButton.click();
     }
 }
 

e2e-tests/playwright/support/ui/components/index.ts

@@ -10,6 +10,7 @@ import {ChannelsSidebarLeft} from './channels/sidebar_left';
 import {ChannelsSidebarRight} from './channels/sidebar_right';
 import {DeletePostModal} from './channels/delete_post_modal';
 import {FindChannelsModal} from './channels/find_channels_modal';
+import {SettingsModal} from './channels/settings/settings_modal';
 import {Footer} from './footer';
 import {GlobalHeader} from './global_header';
 import {MainHeader} from './main_header';
@@ -30,6 +31,7 @@ const components = {
     ChannelsPost,
     FindChannelsModal,
     DeletePostModal,
+    SettingsModal,
     PostDotMenu,
     PostMenu,
     ThreadFooter,

e2e-tests/playwright/support/ui/pages/channels.ts

@@ -18,6 +18,7 @@ export default class ChannelsPage {
 
     readonly findChannelsModal;
     readonly deletePostModal;
+    readonly settingsModal;
 
     readonly postDotMenu;
     readonly postReminderMenu;
@@ -37,6 +38,7 @@ export default class ChannelsPage {
         // Modals
         this.findChannelsModal = new components.FindChannelsModal(page.getByRole('dialog', {name: 'Find Channels'}));
         this.deletePostModal = new components.DeletePostModal(page.locator('#deletePostModal'));
+        this.settingsModal = new components.SettingsModal(page.getByRole('dialog', {name: 'Settings'}));
 
         // Menus
         this.postDotMenu = new components.PostDotMenu(page.getByRole('menu', {name: 'Post extra options'}));

e2e-tests/playwright/tests/functional/channels/settings/notifications/highlight_without_notification.spec.ts

@@ -0,0 +1,271 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect} from '@playwright/test';
+
+import {test} from '@e2e-support/test_fixture';
+import {getRandomId} from '@e2e-support/util';
+import {createRandomPost} from '@e2e-support/server/post';
+
+const keywords = [`AB${getRandomId()}`, `CD${getRandomId()}`, `EF${getRandomId()}`, `Highlight me ${getRandomId()}`];
+
+const highlightWithoutNotificationClass = 'non-notification-highlight';
+
+test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on the textbox', async ({pw, pages}) => {
+    const {user} = await pw.initSetup();
+
+    // # Log in as a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    await channelPage.centerView.postCreate.postMessage('Hello World');
+
+    // # Open settings modal
+    await channelPage.globalHeader.openSettings();
+    await channelPage.settingsModal.toBeVisible();
+
+    // # Open notifications tab
+    await channelPage.settingsModal.openNotificationsTab();
+
+    // # Open keywords that get highlighted section
+    await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
+
+    const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
+
+    // # Enter keyword 1
+    await keywordsInput.type(keywords[0]);
+
+    // # Press Comma on the textbox
+    await keywordsInput.press(',');
+
+    // # Enter keyword 2
+    await keywordsInput.type(keywords[1]);
+
+    // # Press Tab on the textbox
+    await keywordsInput.press('Tab');
+
+    // # Enter keyword 3
+    await keywordsInput.type(keywords[2]);
+
+    // # Press Enter on the textbox
+    await keywordsInput.press('Enter');
+
+    // * Verify that the keywords have been added to the collapsed description
+    await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[0])).toBeVisible();
+    await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[1])).toBeVisible();
+    await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[2])).toBeVisible();
+});
+
+test('MM-T5465-2 Should highlight the keywords when a message is sent with the keyword in center', async ({
+    pw,
+    pages,
+}) => {
+    const {user} = await pw.initSetup();
+
+    // # Log in as a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    // # Open settings modal
+    await channelPage.globalHeader.openSettings();
+    await channelPage.settingsModal.toBeVisible();
+
+    // # Open notifications tab
+    await channelPage.settingsModal.openNotificationsTab();
+
+    // # Open keywords that get highlighted section
+    await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
+
+    // # Enter the keyword
+    const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
+    await keywordsInput.type(keywords[3]);
+    await keywordsInput.press('Tab');
+
+    // # Save the keyword
+    await channelPage.settingsModal.notificationsSettings.save();
+
+    // # Close the settings modal
+    await channelPage.settingsModal.closeModal();
+
+    // # Post a message without the keyword
+    const messageWithoutKeyword = 'This message does not contain the keyword';
+    await channelPage.centerView.postCreate.postMessage(messageWithoutKeyword);
+    const lastPostWithoutHighlight = await channelPage.centerView.getLastPost();
+
+    // * Verify that the keywords are not highlighted
+    await expect(lastPostWithoutHighlight.container.getByText(messageWithoutKeyword)).toBeVisible();
+    await expect(lastPostWithoutHighlight.container.getByText(messageWithoutKeyword)).not.toHaveClass(
+        highlightWithoutNotificationClass,
+    );
+
+    // # Post a message with the keyword
+    const messageWithKeyword = `This message contains the keyword ${keywords[3]}`;
+    await channelPage.centerView.postCreate.postMessage(messageWithKeyword);
+    const lastPostWithHighlight = await channelPage.centerView.getLastPost();
+
+    // * Verify that the keywords are highlighted
+    await expect(lastPostWithHighlight.container.getByText(messageWithKeyword)).toBeVisible();
+    await expect(lastPostWithHighlight.container.getByText(keywords[3])).toHaveClass(highlightWithoutNotificationClass);
+});
+
+test('MM-T5465-3 Should highlight the keywords when a message is sent with the keyword in rhs', async ({pw, pages}) => {
+    const {user} = await pw.initSetup();
+
+    // # Log in as a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    // # Open settings modal
+    await channelPage.globalHeader.openSettings();
+    await channelPage.settingsModal.toBeVisible();
+
+    // # Open notifications tab
+    await channelPage.settingsModal.openNotificationsTab();
+
+    // # Open keywords that get highlighted section
+    await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
+
+    // # Enter the keyword
+    const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
+    await keywordsInput.type(keywords[3]);
+    await keywordsInput.press('Tab');
+
+    // # Save the keyword
+    await channelPage.settingsModal.notificationsSettings.save();
+
+    // # Close the settings modal
+    await channelPage.settingsModal.closeModal();
+
+    // # Post a message without the keyword
+    const messageWithoutKeyword = 'This message does not contain the keyword';
+    await channelPage.centerView.postCreate.postMessage(messageWithoutKeyword);
+    const lastPostWithoutHighlight = await channelPage.centerView.getLastPost();
+
+    // # Open the message in the RHS
+    await lastPostWithoutHighlight.hover();
+    await lastPostWithoutHighlight.postMenu.toBeVisible();
+    await lastPostWithoutHighlight.postMenu.reply();
+    await channelPage.sidebarRight.toBeVisible();
+
+    // # Post a message with the keyword in the RHS
+    const messageWithKeyword = `This message contains the keyword ${keywords[3]}`;
+    await channelPage.sidebarRight.postCreate.postMessage(messageWithKeyword);
+
+    // * Verify that the keywords are highlighted
+    const lastPostWithHighlightInRHS = await channelPage.sidebarRight.getLastPost();
+    await expect(lastPostWithHighlightInRHS.container.getByText(messageWithKeyword)).toBeVisible();
+    await expect(lastPostWithHighlightInRHS.container.getByText(keywords[3])).toHaveClass(
+        highlightWithoutNotificationClass,
+    );
+});
+
+test('MM-T5465-4 Highlighted keywords should not appear in the Recent Mentions', async ({pw, pages}) => {
+    const {user} = await pw.initSetup();
+
+    // # Log in as a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    // # Open settings modal
+    await channelPage.globalHeader.openSettings();
+    await channelPage.settingsModal.toBeVisible();
+
+    // # Open notifications tab
+    await channelPage.settingsModal.openNotificationsTab();
+
+    // # Open keywords that get highlighted section
+    await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
+
+    // # Enter the keyword
+    const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
+    await keywordsInput.type(keywords[0]);
+    await keywordsInput.press('Tab');
+
+    // # Save the keyword
+    await channelPage.settingsModal.notificationsSettings.save();
+
+    // # Close the settings modal
+    await channelPage.settingsModal.closeModal();
+
+    // # Open the recent mentions
+    await channelPage.globalHeader.openRecentMentions();
+
+    // * Verify recent mentions is empty
+    await channelPage.sidebarRight.toBeVisible();
+    await expect(channelPage.sidebarRight.container.getByText('No mentions yet')).toBeVisible();
+});
+
+test('MM-T5465-5 Should highlight keywords in message sent from another user', async ({pw, pages}) => {
+    const {adminClient, team, adminUser, user} = await pw.initSetup();
+
+    if (!adminUser) {
+        throw new Error('Failed to create admin user');
+    }
+
+    // # Get the default channel of the team for getting the channel id
+    const channel = await adminClient.getChannelByName(team.id, 'town-square');
+
+    const highlightKeyword = keywords[0];
+    const messageWithKeyword = `This recieved message contains the ${highlightKeyword} keyword `;
+
+    // # Create a post containing the keyword in the channel by admin
+    await adminClient.createPost(
+        createRandomPost({
+            message: messageWithKeyword,
+            channel_id: channel.id,
+            user_id: adminUser.id,
+        }),
+    );
+
+    // # Now log in as a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    // # Open settings modal
+    await channelPage.globalHeader.openSettings();
+    await channelPage.settingsModal.toBeVisible();
+
+    // # Open notifications tab
+    await channelPage.settingsModal.openNotificationsTab();
+
+    // # Open keywords that get highlighted section
+    await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
+
+    // # Enter the keyword
+    const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
+    await keywordsInput.type(keywords[0]);
+    await keywordsInput.press('Tab');
+
+    // # Save the keyword
+    await channelPage.settingsModal.notificationsSettings.save();
+
+    // # Close the settings modal
+    await channelPage.settingsModal.closeModal();
+
+    // * Verify that the keywords are highlighted in the last message recieved
+    const lastPostWithHighlight = await channelPage.centerView.getLastPost();
+    await expect(lastPostWithHighlight.container.getByText(messageWithKeyword)).toBeVisible();
+    await expect(lastPostWithHighlight.container.getByText(highlightKeyword)).toHaveClass(
+        highlightWithoutNotificationClass,
+    );
+});