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