[MM-54440] Add link to notification docs in the Settings modal (matte…

…rmost#24538) * [MM-54440] Add link to notification docs in the Settings modal * Fix i18n * PR feedback
devinbinnie · Sep 13, 2023 · c53b5f7 · c53b5f7
1 parent 1ef935c
commit c53b5f7
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 17 deletions.
diff --git a/...nents/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap b/...nents/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap
@@ -40,12 +40,28 @@ Object {
         <div
           class="user-settings"
         >
-          <h3
-            class="tab-header"
-            id="notificationSettingsTitle"
+          <div
+            class="notificationSettingsModalHeader"
           >
-            Notifications
-          </h3>
+            <h3
+              class="tab-header"
+              id="notificationSettingsTitle"
+            >
+              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"
           />
@@ -248,12 +264,28 @@ Object {
       <div
         class="user-settings"
       >
-        <h3
-          class="tab-header"
-          id="notificationSettingsTitle"
+        <div
+          class="notificationSettingsModalHeader"
         >
-          Notifications
-        </h3>
+          <h3
+            class="tab-header"
+            id="notificationSettingsTitle"
+          >
+            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"
         />

diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.scss b/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;
+                }
+            }
+        }
+    }
+}
diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx b/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,15 +1086,29 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                     ref={this.wrapperRef}
                     className='user-settings'
                 >
-                    <h3
-                        id='notificationSettingsTitle'
-                        className='tab-header'
-                    >
+                    <div className='notificationSettingsModalHeader'>
+                        <h3
+                            id='notificationSettingsTitle'
+                            className='tab-header'
+                        >
+                            <FormattedMessage
+                                id='user.settings.notifications.header'
+                                defaultMessage='Notifications'
+                            />
+                        </h3>
                         <FormattedMessage
-                            id='user.settings.notifications.header'
-                            defaultMessage='Notifications'
+                            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>
+                                )),
+                            }}
                         />
-                    </h3>
+                    </div>
                     <div className='divider-dark first'/>
                     <DesktopNotificationSettings
                         activity={this.state.desktopActivity}

diff --git a/webapp/channels/src/i18n/en.json b/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",