[MM-54440] Add link to notification docs in the Settings modal (#24538)

* [MM-54440] Add link to notification docs in the Settings modal

* Fix i18n

* PR feedback

webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap

@@ -39,6 +39,9 @@ Object {
         </div>
         <div
           class="user-settings"
+        >
+          <div
+            class="notificationSettingsModalHeader"
           >
             <h3
               class="tab-header"
@@ -46,6 +49,19 @@ Object {
             >
               Notifications
             </h3>
+            <a
+              href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <i
+                class="icon icon-help-circle-outline"
+              />
+              <span>
+                Learn more about notifications
+              </span>
+            </a>
+          </div>
           <div
             class="divider-dark first"
           />
@@ -247,6 +263,9 @@ Object {
       </div>
       <div
         class="user-settings"
+      >
+        <div
+          class="notificationSettingsModalHeader"
         >
           <h3
             class="tab-header"
@@ -254,6 +273,19 @@ Object {
           >
             Notifications
           </h3>
+          <a
+            href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <i
+              class="icon icon-help-circle-outline"
+            />
+            <span>
+              Learn more about notifications
+            </span>
+          </a>
+        </div>
         <div
           class="divider-dark first"
         />

webapp/channels/src/components/user_settings/notifications/user_settings_notifications.scss

@@ -3,3 +3,37 @@
         margin-block-start: 10px;
     }
 }
+
+.notificationSettingsModalHeader {
+    display: flex;
+
+    > span {
+        align-self: center;
+        margin-left: auto;
+
+        a {
+            display: flex;
+
+            &:hover,
+            &:active,
+            &:focus {
+                color: var(--button-bg);
+                text-decoration: none;
+            }
+
+            > i {
+                font-size: 14.4px;
+            }
+
+            > span {
+                font-size: 12px;
+                font-weight: 600;
+                line-height: 16px;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}

webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx

@@ -15,6 +15,7 @@ import type {UserNotifyProps, UserProfile} from '@mattermost/types/users';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
+import ExternalLink from 'components/external_link';
 import LocalizedIcon from 'components/localized_icon';
 import SettingItem from 'components/setting_item';
 import SettingItemMax from 'components/setting_item_max';
@@ -1085,6 +1086,7 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                     ref={this.wrapperRef}
                     className='user-settings'
                 >
+                    <div className='notificationSettingsModalHeader'>
                         <h3
                             id='notificationSettingsTitle'
                             className='tab-header'
@@ -1094,6 +1096,19 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                                 defaultMessage='Notifications'
                             />
                         </h3>
+                        <FormattedMessage
+                            id='user.settings.notifications.learnMore'
+                            defaultMessage='<a>Learn more about notifications</a>'
+                            values={{
+                                a: (chunks: string) => ((
+                                    <ExternalLink href='https://mattermost.com/pl/about-notifications'>
+                                        <i className='icon icon-help-circle-outline'/>
+                                        <span>{chunks}</span>
+                                    </ExternalLink>
+                                )),
+                            }}
+                        />
+                    </div>
                     <div className='divider-dark first'/>
                     <DesktopNotificationSettings
                         activity={this.state.desktopActivity}

webapp/channels/src/i18n/en.json

@@ -5424,6 +5424,7 @@
   "user.settings.notifications.info": "Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps.",
   "user.settings.notifications.keywordsWithNotification.extraInfo": "Notifications are triggered when someone sends a message that includes your username (\"@{username}\") or any of the options selected above.",
   "user.settings.notifications.keywordsWithNotification.title": "Keywords that trigger Notifications",
+  "user.settings.notifications.learnMore": "<a>Learn more about notifications</a>",
   "user.settings.notifications.never": "Never",
   "user.settings.notifications.off": "Off",
   "user.settings.notifications.on": "On",