MM-62784 added tooltip to hidden formatting controls button (#30545)

webapp/channels/src/components/admin_console/admin_definition.tsx

@@ -6318,7 +6318,7 @@ const AdminDefinition: AdminDefinitionType = {
                             type: 'dropdown',
                             key: 'ExperimentalSettings.ClientSideCertCheck',
                             label: defineMessage({id: 'admin.experimental.clientSideCertCheck.title', defaultMessage: 'Client-Side Certification Login Method:'}),
-                            help_text: defineMessage({id: 'admin.experimental.clientSideCertCheck.desc', defaultMessage: 'When **primary**, after the client side certificate is verified, user’s email is retrieved from the certificate and is used to log in without a password. When **secondary**, after the client side certificate is verified, user’s email is retrieved from the certificate and matched against the one supplied by the user. If they match, the user logs in with regular email/password credentials.'}),
+                            help_text: defineMessage({id: 'admin.experimental.clientSideCertCheck.desc', defaultMessage: "When **primary**, after the client side certificate is verified, user's email is retrieved from the certificate and is used to log in without a password. When **secondary**, after the client side certificate is verified, user's email is retrieved from the certificate and matched against the one supplied by the user. If they match, the user logs in with regular email/password credentials."}),
                             help_text_markdown: true,
                             options: [
                                 {
@@ -6518,7 +6518,7 @@ const AdminDefinition: AdminDefinitionType = {
                             type: 'number',
                             key: 'TeamSettings.UserStatusAwayTimeout',
                             label: defineMessage({id: 'admin.experimental.userStatusAwayTimeout.title', defaultMessage: 'User Status Away Timeout:'}),
-                            help_text: defineMessage({id: 'admin.experimental.userStatusAwayTimeout.desc', defaultMessage: 'This setting defines the number of seconds after which the user’s status indicator changes to "Away", when they are away from Mattermost.'}),
+                            help_text: defineMessage({id: 'admin.experimental.userStatusAwayTimeout.desc', defaultMessage: 'This setting defines the number of seconds after which the user\'s status indicator changes to "Away", when they are away from Mattermost.'}),
                             help_text_markdown: false,
                             placeholder: defineMessage({id: 'admin.experimental.userStatusAwayTimeout.example', defaultMessage: 'E.g.: "300"'}),
                             isDisabled: it.not(it.userHasWritePermissionOnResource(RESOURCE_KEYS.EXPERIMENTAL.FEATURES)),

webapp/channels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx

@@ -66,7 +66,7 @@ const ContactSalesCard = (props: Props) => {
         description = (
             <FormattedMessage
                 id='admin.billing.subscription.privateCloudCard.cloudEnterprise.description'
-                defaultMessage='At Mattermost, we work with you and your organization to meet your needs throughout the product. If you’re considering a wider rollout, talk to us.'
+                defaultMessage="At Mattermost, we work with you and your organization to meet your needs throughout the product. If you're considering a wider rollout, talk to us."
             />
         );
     } else {
@@ -110,7 +110,7 @@ const ContactSalesCard = (props: Props) => {
             description = (
                 <FormattedMessage
                     id='admin.billing.subscription.privateCloudCard.cloudEnterprise.description'
-                    defaultMessage='At Mattermost, we work with you and your organization to meet your needs throughout the product. If you’re considering a wider rollout, talk to us.'
+                    defaultMessage="At Mattermost, we work with you and your organization to meet your needs throughout the product. If you're considering a wider rollout, talk to us."
                 />
             );
             break;

webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.test.tsx

@@ -81,4 +81,21 @@ describe('FormattingBar', () => {
         expect(screen.queryByLabelText('heading')).toBeVisible();
         expect(onSubmit).not.toHaveBeenCalled();
     });
+
+    test('should disable tooltip when hidden controls are shown', () => {
+        jest.spyOn(Hooks, 'useFormattingBarControls').mockReturnValue({wideMode: 'narrow', ...splitFormattingBarControls('narrow')});
+
+        const {container} = renderWithContext(
+            <FormattingBar {...baseProps}/>,
+        );
+
+        const hiddenControlsButton = screen.getByLabelText('show hidden formatting options');
+
+        // Click to show hidden controls
+        userEvent.click(hiddenControlsButton);
+
+        // Find the WithTooltip component and verify it has disabled prop
+        const tooltipWrapper = container.querySelector('.tooltipContainer');
+        expect(tooltipWrapper).toBeNull(); // Tooltip should not be visible when controls are shown
+    });
 });

webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.tsx

@@ -10,6 +10,8 @@ import styled from 'styled-components';
 
 import {DotsHorizontalIcon} from '@mattermost/compass-icons/components';
 
+import WithTooltip from 'components/with_tooltip';
+
 import type {ApplyMarkdownOptions} from 'utils/markdown/apply_markdown';
 
 import FormattingIcon, {IconContainer} from './formatting_icon';
@@ -242,20 +244,28 @@ const FormattingBar = (props: FormattingBarProps): JSX.Element => {
 
             {hasHiddenControls && (
                 <>
-                    <IconContainer
-                        id={'HiddenControlsButton' + location}
-                        ref={setReference}
-                        className={classNames({active: showHiddenControls})}
-                        aria-label={HiddenControlsButtonAriaLabel}
-                        type='button'
-                        {...getClickReferenceProps()}
-                        {...getDismissReferenceProps()}
+                    <WithTooltip
+                        title={formatMessage({
+                            id: 'shortcuts.msgs.formatting_bar.more_formatting_options',
+                            defaultMessage: 'More formatting options',
+                        })}
+                        disabled={showHiddenControls}
                     >
-                        <DotsHorizontalIcon
-                            color={'currentColor'}
-                            size={18}
-                        />
-                    </IconContainer>
+                        <IconContainer
+                            id={'HiddenControlsButton' + location}
+                            ref={setReference}
+                            className={classNames({active: showHiddenControls})}
+                            aria-label={HiddenControlsButtonAriaLabel}
+                            type='button'
+                            {...getClickReferenceProps()}
+                            {...getDismissReferenceProps()}
+                        >
+                            <DotsHorizontalIcon
+                                color={'currentColor'}
+                                size={18}
+                            />
+                        </IconContainer>
+                    </WithTooltip>
                 </>
             )}
 

webapp/channels/src/i18n/en.json

@@ -5114,6 +5114,7 @@
   "shortcuts.msgs.comp.last_reaction.mac": "React to last message:\t⌘|Shift|⧵",
   "shortcuts.msgs.comp.username": "Username:\t@|[a-z]|Tab",
   "shortcuts.msgs.edit": "Edit last message in channel:\tUp",
+  "shortcuts.msgs.formatting_bar.more_formatting_options": "More formatting options",
   "shortcuts.msgs.formatting_bar.post_priority": "Message priority",
   "shortcuts.msgs.header": "Messages",
   "shortcuts.msgs.input.header": "Works inside an empty input field",