[GH-25020] Add new resource links to [Help (?) drop-down menu] & icons (#25070)

* fix: add resource links Help (?) dropdown

* fix: refactor styles and update link url

* update: i18n and snapshot

* fix: update style and refactor

* fix: i18n

* fix: update test snapshot

* Update webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap

* Update webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap

* Update webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap

* Update webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx

---------

Co-authored-by: Carrie Warner (Mattermost) <74422101+cwarnermm@users.noreply.github.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap

@@ -49,6 +49,21 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   >
     <MenuGroup>
       <MenuItemExternalLink
+        iconClassName="icon-file-text-outline"
+        id="mattermostUserGuideLink"
+        show={true}
+        text="Mattermost user guide"
+        url="https://docs.mattermost.com/guides/use-mattermost.html"
+      />
+      <MenuItemExternalLink
+        iconClassName="icon-lightbulb-outline"
+        id="trainingResourcesLink"
+        show={true}
+        text="Training resources"
+        url="https://academy.mattermost.com/"
+      />
+      <MenuItemExternalLink
+        iconClassName="icon-help"
         id="askTheCommunityLink"
         onClick={[Function]}
         show={true}
@@ -56,18 +71,14 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
         url="https://mattermost.com/pl/default-ask-mattermost-community/"
       />
       <MenuItemExternalLink
-        id="helpResourcesLink"
+        iconClassName="icon-alert-outline"
-        show={true}
-        text="Help resources"
-        url="helpLink"
-      />
-      <MenuItemExternalLink
         id="reportAProblemLink"
         show={true}
         text="Report a problem"
         url="reportAProblemLink"
       />
       <MenuItemAction
+        iconClassName="icon-keyboard-return"
         id="keyboardShortcuts"
         onClick={[Function]}
         show={true}
@@ -127,18 +138,28 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   >
     <MenuGroup>
       <MenuItemExternalLink
-        id="helpResourcesLink"
+        iconClassName="icon-file-text-outline"
+        id="mattermostUserGuideLink"
         show={true}
-        text="Help resources"
+        text="Mattermost user guide"
-        url="helpLink"
+        url="https://docs.mattermost.com/guides/use-mattermost.html"
       />
       <MenuItemExternalLink
+        iconClassName="icon-lightbulb-outline"
+        id="trainingResourcesLink"
+        show={true}
+        text="Training resources"
+        url="https://academy.mattermost.com/"
+      />
+      <MenuItemExternalLink
+        iconClassName="icon-alert-outline"
         id="reportAProblemLink"
         show={true}
         text="Report a problem"
         url="reportAProblemLink"
       />
       <MenuItemAction
+        iconClassName="icon-keyboard-return"
         id="keyboardShortcuts"
         onClick={[Function]}
         show={true}
@@ -198,6 +219,21 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   >
     <MenuGroup>
       <MenuItemExternalLink
+        iconClassName="icon-file-text-outline"
+        id="mattermostUserGuideLink"
+        show={true}
+        text="Mattermost user guide"
+        url="https://docs.mattermost.com/guides/use-mattermost.html"
+      />
+      <MenuItemExternalLink
+        iconClassName="icon-lightbulb-outline"
+        id="trainingResourcesLink"
+        show={true}
+        text="Training resources"
+        url="https://academy.mattermost.com/"
+      />
+      <MenuItemExternalLink
+        iconClassName="icon-help"
         id="askTheCommunityLink"
         onClick={[Function]}
         show={true}
@@ -205,24 +241,21 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
         url="https://mattermost.com/pl/default-ask-mattermost-community/"
       />
       <MenuItemExternalLink
-        id="helpResourcesLink"
+        iconClassName="icon-alert-outline"
-        show={true}
-        text="Help resources"
-        url="helpLink"
-      />
-      <MenuItemExternalLink
         id="reportAProblemLink"
         show={true}
         text="Report a problem"
         url="reportAProblemLink"
       />
       <MenuItemAction
+        iconClassName="icon-keyboard-return"
         id="keyboardShortcuts"
         onClick={[Function]}
         show={true}
         text="Keyboard shortcuts"
       />
       <MenuItemAction
+        iconClassName="icon-thumbs-up-down"
         id="testId_pluginmenuitem"
         key="testId_pluginmenuitem"
         onClick={[Function]}

webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx

@@ -19,6 +19,8 @@ import {ModalIdentifiers} from 'utils/constants';
 
 import type {PropsFromRedux} from './index';
 
+const mattermostUserGuideLink = 'https://docs.mattermost.com/guides/use-mattermost.html';
+const trainingResourcesLink = 'https://academy.mattermost.com/';
 const askTheCommunityUrl = 'https://mattermost.com/pl/default-ask-mattermost-community/';
 
 type Props = WrappedComponentProps & PropsFromRedux & {
@@ -67,6 +69,7 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
             return (
                 <Menu.ItemAction
                     id={item.id + '_pluginmenuitem'}
+                    iconClassName='icon-thumbs-up-down'
                     key={item.id + '_pluginmenuitem'}
                     onClick={item.action}
                     text={item.text}
@@ -76,30 +79,40 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
 
         return (
             <Menu.Group>
+                <Menu.ItemExternalLink
+                    id='mattermostUserGuideLink'
+                    iconClassName='icon-file-text-outline'
+                    url={mattermostUserGuideLink}
+                    text={intl.formatMessage({id: 'userGuideHelp.mattermostUserGuide', defaultMessage: 'Mattermost user guide'})}
+                />
+                {this.props.helpLink && (
+                    <Menu.ItemExternalLink
+                        id='trainingResourcesLink'
+                        iconClassName='icon-lightbulb-outline'
+                        url={trainingResourcesLink}
+                        text={intl.formatMessage({id: 'userGuideHelp.trainingResources', defaultMessage: 'Training resources'})}
+                    />
+                )}
                 {this.props.enableAskCommunityLink === 'true' && (
                     <Menu.ItemExternalLink
                         id='askTheCommunityLink'
+                        iconClassName='icon-help'
                         url={askTheCommunityUrl}
                         text={intl.formatMessage({id: 'userGuideHelp.askTheCommunity', defaultMessage: 'Ask the community'})}
                         onClick={this.askTheCommunityClick}
                     />
                 )}
-                {this.props.helpLink && (
-                    <Menu.ItemExternalLink
-                        id='helpResourcesLink'
-                        url={this.props.helpLink}
-                        text={intl.formatMessage({id: 'userGuideHelp.helpResources', defaultMessage: 'Help resources'})}
-                    />
-                )}
                 {this.props.reportAProblemLink && (
                     <Menu.ItemExternalLink
                         id='reportAProblemLink'
+                        iconClassName='icon-alert-outline'
                         url={this.props.reportAProblemLink}
                         text={intl.formatMessage({id: 'userGuideHelp.reportAProblem', defaultMessage: 'Report a problem'})}
                     />
                 )}
                 <Menu.ItemAction
                     id='keyboardShortcuts'
+                    iconClassName='icon-keyboard-return'
                     onClick={this.openKeyboardShortcutsModal}
                     text={intl.formatMessage({id: 'userGuideHelp.keyboardShortcuts', defaultMessage: 'Keyboard shortcuts'})}
                 />

webapp/channels/src/components/widgets/menu/menu.scss

@@ -3,7 +3,7 @@
 
     .dropdown-menu {
         display: block;
-        min-width: 220px;
+        min-width: 225px;
         max-width: 270px;
         max-height: 80vh;
         padding: 8px 0;

webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss

@@ -91,6 +91,22 @@
             text-overflow: ellipsis;
             white-space: nowrap;
 
+            i.icon {
+                padding: 0 3px;
+                margin-right: 4px;
+                margin-bottom: 2px;
+                color: rgba(var(--center-channel-color-rgb), 0.72);
+                vertical-align: middle;
+
+                &::before {
+                    margin: 0;
+                }
+            }
+
+            i.icon + span.MenuItem__primary-text {
+                padding: 5px 4px;
+            }
+
             &.disabled {
                 color: rgba(var(--center-channel-color-rgb), 0.48);
                 cursor: default;

webapp/channels/src/components/widgets/menu/menu_items/menu_item_action.tsx

@@ -17,6 +17,7 @@ type Props = {
     isDangerous?: boolean;
     disabled?: boolean;
     sibling?: React.ReactNode;
+    iconClassName?: string;
 }
 export const MenuItemActionImpl = ({
     onClick,
@@ -29,6 +30,7 @@ export const MenuItemActionImpl = ({
     isDangerous,
     disabled,
     sibling,
+    iconClassName,
 }: Props) => (
     <>
         <button
@@ -44,6 +46,7 @@ export const MenuItemActionImpl = ({
             onClick={onClick}
             disabled={disabled}
         >
+            {iconClassName && <i className={`icon ${iconClassName}`}/>}
             {text && <span className='MenuItem__primary-text'>{text}{rightDecorator}</span>}
             {extraText && <span className='MenuItem__help-text'>{extraText}</span>}
         </button>

webapp/channels/src/components/widgets/menu/menu_items/menu_item_external_link.tsx

@@ -11,13 +11,15 @@ type Props = {
     url: string;
     text: React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    iconClassName?: string;
 }
-export const MenuItemExternalLinkImpl: React.FC<Props> = ({url, text, onClick}: Props) => (
+export const MenuItemExternalLinkImpl: React.FC<Props> = ({url, text, iconClassName, onClick}: Props) => (
     <ExternalLink
         href={url}
         onClick={onClick}
         location='menu_item_external_link'
     >
+        {iconClassName && <i className={`icon ${iconClassName}`}/>}
         <span className='MenuItem__primary-text'>
             {text}
         </span>

webapp/channels/src/i18n/en.json

@@ -5657,7 +5657,9 @@
   "userGuideHelp.askTheCommunity": "Ask the community",
   "userGuideHelp.helpResources": "Help resources",
   "userGuideHelp.keyboardShortcuts": "Keyboard shortcuts",
+  "userGuideHelp.mattermostUserGuide": "Mattermost user guide",
   "userGuideHelp.reportAProblem": "Report a problem",
+  "userGuideHelp.trainingResources": "Training resources",
   "version_bar.new": "A new version of Mattermost is available.",
   "version_bar.refresh": "Refresh the app now",
   "view_image_popover.download": "Download",