[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};