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