MM-53481 Fix textbox broken Help link (#24889)

* Fixed broken link

* Fix importa

* Lint

* Fix import

* Linting

* fix snapshots

webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap

@@ -81,7 +81,7 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
       <div
         className="post-create-footer"
       >
-        <Connect(TextboxLinks)
+        <TextboxLinks
           hasExceededCharacterLimit={false}
           hasText={true}
           isMarkdownPreviewEnabled={false}
@@ -208,7 +208,7 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
       <div
         className="post-create-footer"
       >
-        <Connect(TextboxLinks)
+        <TextboxLinks
           hasExceededCharacterLimit={false}
           hasText={true}
           isMarkdownPreviewEnabled={false}
@@ -353,7 +353,7 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
       <div
         className="post-create-footer"
       >
-        <Connect(TextboxLinks)
+        <TextboxLinks
           hasExceededCharacterLimit={false}
           hasText={true}
           isMarkdownPreviewEnabled={false}
@@ -490,7 +490,7 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
       <div
         className="post-create-footer"
       >
-        <Connect(TextboxLinks)
+        <TextboxLinks
           hasExceededCharacterLimit={false}
           hasText={true}
           isMarkdownPreviewEnabled={false}
@@ -617,7 +617,7 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
       <div
         className="post-create-footer"
       >
-        <Connect(TextboxLinks)
+        <TextboxLinks
           hasExceededCharacterLimit={false}
           hasText={true}
           isMarkdownPreviewEnabled={false}

webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx

@@ -10,10 +10,9 @@ import type {ServerError} from '@mattermost/types/errors';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
-import Textbox from 'components/textbox';
+import Textbox, {TextboxLinks} from 'components/textbox';
 import type {TextboxElement} from 'components/textbox';
 import type TextboxClass from 'components/textbox/textbox';
-import TextboxLinks from 'components/textbox/textbox_links';
 
 import Constants from 'utils/constants';
 import {isKeyPressed} from 'utils/keyboard';

webapp/channels/src/components/textbox/index.ts

@@ -22,6 +22,7 @@ import {searchAssociatedGroupsForReference} from 'actions/views/group';
 
 import Textbox from './textbox';
 import type {Props as TextboxProps} from './textbox';
+import TextboxLinks from './textbox_links';
 
 type Props = {
     channelId: string;
@@ -63,3 +64,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 export {Textbox as TextboxClass};
 
 export default connect(makeMapStateToProps, mapDispatchToProps, null, {forwardRef: true})(Textbox);
+export {TextboxLinks};

webapp/channels/src/components/textbox/textbox_links.tsx

@@ -4,7 +4,8 @@
 import React from 'react';
 import type {MouseEvent} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Link} from 'react-router-dom';
+
+import ExternalLink from 'components/external_link';
 
 type Props = {
     showPreview?: boolean;
@@ -12,7 +13,6 @@ type Props = {
     hasText?: boolean;
     hasExceededCharacterLimit?: boolean;
     isMarkdownPreviewEnabled: boolean;
-    currentLocale: string;
     updatePreview?: (showPreview: boolean) => void;
 };
 
@@ -22,7 +22,6 @@ function TextboxLinks({
     hasText = false,
     hasExceededCharacterLimit = false,
     isMarkdownPreviewEnabled,
-    currentLocale,
     updatePreview,
 }: Props) {
     const togglePreview = (e: MouseEvent) => {
@@ -125,17 +124,16 @@ function TextboxLinks({
         <div className={'help__text ' + helpTextClass}>
             {helpText}
             {previewLink}
-            <Link
-                target='_blank'
-                rel='noopener noreferrer'
-                to={`/help/messaging?locale=${currentLocale}`}
+            <ExternalLink
+                location='textbox_links'
+                href={'https://docs.mattermost.com/collaborate/format-messages.html'}
                 className='textbox-help-link'
             >
                 <FormattedMessage
                     id='textbox.help'
                     defaultMessage='Help'
                 />
-            </Link>
+            </ExternalLink>
         </div>
     );
 }

webapp/channels/src/components/textbox/textbox_links/index.ts

@@ -1,18 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import {getCurrentLocale} from 'selectors/i18n';
-
-import type {GlobalState} from 'types/store';
-
-import TextboxLinks from './textbox_links';
-
-function mapStateToProps(state: GlobalState) {
-    return ({
-        currentLocale: getCurrentLocale(state),
-    });
-}
-
-export default connect(mapStateToProps)(TextboxLinks);