[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>
2023-11-14 20:42:56 +05:00
--- 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]}
--- 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'})}
                />
--- 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;
--- 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;
--- 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>
--- 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>
--- 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",