From 41c08a37159eb24c1bf34cb2c15dae03fed179bd Mon Sep 17 00:00:00 2001
From: Umar Abid <75561750+umrkhn@users.noreply.github.com>
Date: Tue, 14 Nov 2023 20:42:56 +0500
Subject: [PATCH] [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>
---
 .../user_guide_dropdown.test.tsx.snap         | 63 ++++++++++++++-----
 .../user_guide_dropdown.tsx                   | 27 +++++---
 .../src/components/widgets/menu/menu.scss     |  2 +-
 .../widgets/menu/menu_items/menu_item.scss    | 16 +++++
 .../menu/menu_items/menu_item_action.tsx      |  3 +
 .../menu_items/menu_item_external_link.tsx    |  4 +-
 webapp/channels/src/i18n/en.json              |  2 +
 7 files changed, 93 insertions(+), 24 deletions(-)

diff --git a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
index 6fa728c63a..5a81689165 100644
--- a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
+++ b/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"
-        show={true}
-        text="Help resources"
-        url="helpLink"
-      />
-      <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}
@@ -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"
-        url="helpLink"
+        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-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"
-        show={true}
-        text="Help resources"
-        url="helpLink"
-      />
-      <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}
         text="Keyboard shortcuts"
       />
       <MenuItemAction
+        iconClassName="icon-thumbs-up-down"
         id="testId_pluginmenuitem"
         key="testId_pluginmenuitem"
         onClick={[Function]}
diff --git a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx
index fc6beb378a..aea91ddc30 100644
--- a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx
+++ b/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'})}
                 />
diff --git a/webapp/channels/src/components/widgets/menu/menu.scss b/webapp/channels/src/components/widgets/menu/menu.scss
index 775094540f..3636ba3a73 100644
--- a/webapp/channels/src/components/widgets/menu/menu.scss
+++ b/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;
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
index 69e2e9758e..63ff4b941a 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
+++ b/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;
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item_action.tsx b/webapp/channels/src/components/widgets/menu/menu_items/menu_item_action.tsx
index 975a5f23b4..25c8c3390e 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item_action.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item_external_link.tsx b/webapp/channels/src/components/widgets/menu/menu_items/menu_item_external_link.tsx
index 0e60410fe7..02531acdf5 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item_external_link.tsx
+++ b/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>
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index a0756bdadf..a196a96efa 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/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",