[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/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'}));