Add App Directory link to Integrations pages (#6731)

* Update installed_commands.jsx

* Update installed_incoming_webhooks.jsx

* Update installed_oauth_apps.jsx

* Update installed_outgoing_webhooks.jsx

* Update integrations.jsx

* Update quick_switch_modal.jsx

* Update en.json

* Decrease help text size in Integrations page

* Fix syntax error

* Tweak help text size based on Asaad's feedback

* Fix indentation

* Update help text classname to backstage-list__help

* Update _backstage.scss

* Remove the horizontal line in integrations page

* Renamed template strings for integrations help links

8 files changed, 109 insertions, 29 deletions

diff --git a/webapp/components/integrations/components/installed_commands/installed_commands.jsx b/webapp/components/integrations/components/installed_commands/installed_commands.jsx
index c84af77eb..379ade8a1 100644
--- a/webapp/components/integrations/components/installed_commands/installed_commands.jsx
+++ b/webapp/components/integrations/components/installed_commands/installed_commands.jsx
@@ -121,17 +121,29 @@ export default class InstalledCommands extends React.PureComponent {
                 helpText={
                     <FormattedMessage
                         id='installed_commands.help'
-                        defaultMessage='Create slash commands for use in external integrations. Please see {link} to learn more.'
+                        defaultMessage='Use slash commands to connect external tools to Mattermost. {buildYourOwn} or visit the {appDirectory} to find self-hosted, third-party apps and integrations.'
                         values={{
-                            link: (
+                            buildYourOwn: (
                                 <a
                                     target='_blank'
                                     rel='noopener noreferrer'
                                     href='http://docs.mattermost.com/developer/slash-commands.html'
                                 >
                                     <FormattedMessage
-                                        id='installed_commands.helpLink'
-                                        defaultMessage='documentation'
+                                        id='installed_commands.help.buildYourOwn'
+                                        defaultMessage='Build your own'
+                                    />
+                                </a>
+                            ),
+                            appDirectory: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='https://about.mattermost.com/default-app-directory/'
+                                >
+                                    <FormattedMessage
+                                        id='installed_commands.help.appDirectory'
+                                        defaultMessage='App Directory'
                                     />
                                 </a>
                             )
diff --git a/webapp/components/integrations/components/installed_incoming_webhooks.jsx b/webapp/components/integrations/components/installed_incoming_webhooks.jsx
index 80f887d1b..2b46dbd40 100644
--- a/webapp/components/integrations/components/installed_incoming_webhooks.jsx
+++ b/webapp/components/integrations/components/installed_incoming_webhooks.jsx
@@ -139,17 +139,29 @@ export default class InstalledIncomingWebhooks extends React.Component {
                 helpText={
                     <FormattedMessage
                         id='installed_incoming_webhooks.help'
-                        defaultMessage='Create incoming webhook URLs for use in external integrations. Please see {link} to learn more.'
+                        defaultMessage='Use incoming webhooks to connect external tools to Mattermost. {buildYourOwn} or visit the {appDirectory} to find self-hosted, third-party apps and integrations.'
                         values={{
-                            link: (
+                            buildYourOwn: (
                                 <a
                                     target='_blank'
                                     rel='noopener noreferrer'
                                     href='http://docs.mattermost.com/developer/webhooks-incoming.html'
                                 >
                                     <FormattedMessage
-                                        id='installed_incoming_webhooks.helpLink'
-                                        defaultMessage='documentation'
+                                        id='installed_incoming_webhooks.help.buildYourOwn'
+                                        defaultMessage='Build your own'
+                                    />
+                                </a>
+                            ),
+                            appDirectory: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='https://about.mattermost.com/default-app-directory/'
+                                >
+                                    <FormattedMessage
+                                        id='installed_incoming_webhooks.help.appDirectory'
+                                        defaultMessage='App Directory'
                                     />
                                 </a>
                             )
diff --git a/webapp/components/integrations/components/installed_oauth_apps.jsx b/webapp/components/integrations/components/installed_oauth_apps.jsx
index 36d9c8dfa..3f3ff4c11 100644
--- a/webapp/components/integrations/components/installed_oauth_apps.jsx
+++ b/webapp/components/integrations/components/installed_oauth_apps.jsx
@@ -102,17 +102,29 @@ export default class InstalledOAuthApps extends React.Component {
                 helpText={
                     <FormattedMessage
                         id='installed_oauth_apps.help'
-                        defaultMessage='Create OAuth 2.0 applications to securely integrate bots and third-party applications with Mattermost. Please see {link} to learn more.'
+                        defaultMessage='Create {oauthApplications} to securely integrate bots and third-party apps with Mattermost. Visit the {appDirectory} to find available self-hosted apps.'
                         values={{
-                            link: (
+                            oauthApplications: (
                                 <a
                                     target='_blank'
                                     rel='noopener noreferrer'
                                     href='https://docs.mattermost.com/developer/oauth-2-0-applications.html'
                                 >
                                     <FormattedMessage
-                                        id='installed_oauth_apps.helpLink'
-                                        defaultMessage='documentation'
+                                        id='installed_oauth_apps.help.oauthApplications'
+                                        defaultMessage='OAuth 2.0 applications'
+                                    />
+                                </a>
+                            ),
+                            appDirectory: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='https://about.mattermost.com/default-app-directory/'
+                                >
+                                    <FormattedMessage
+                                        id='installed_oauth_apps.help.appDirectory'
+                                        defaultMessage='App Directory'
                                     />
                                 </a>
                             )
diff --git a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
index 2a0f1c59f..4f39b0f05 100644
--- a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
+++ b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
@@ -143,17 +143,29 @@ export default class InstalledOutgoingWebhooks extends React.Component {
                 helpText={
                     <FormattedMessage
                         id='installed_outgoing_webhooks.help'
-                        defaultMessage='Create outgoing webhook URLs for use in external integrations. Please see {link} to learn more.'
+                        defaultMessage='Use outgoing webhooks to connect external tools to Mattermost. {buildYourOwn} or visit the {appDirectory} to find self-hosted, third-party apps and integrations.'
                         values={{
-                            link: (
+                            buildYourOwn: (
                                 <a
                                     target='_blank'
                                     rel='noopener noreferrer'
                                     href='http://docs.mattermost.com/developer/webhooks-outgoing.html'
                                 >
                                     <FormattedMessage
-                                        id='installed_outgoing_webhooks.helpLink'
-                                        defaultMessage='documentation'
+                                        id='installed_outgoing_webhooks.help.buildYourOwn'
+                                        defaultMessage='Build your own'
+                                    />
+                                </a>
+                            ),
+                            appDirectory: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='https://about.mattermost.com/default-app-directory/'
+                                >
+                                    <FormattedMessage
+                                        id='installed_outgoing_webhooks.help.appDirectory'
+                                        defaultMessage='App Directory'
                                     />
                                 </a>
                             )
diff --git a/webapp/components/integrations/components/integrations.jsx b/webapp/components/integrations/components/integrations.jsx
index 6fe809086..7de8810a0 100644
--- a/webapp/components/integrations/components/integrations.jsx
+++ b/webapp/components/integrations/components/integrations.jsx
@@ -145,6 +145,26 @@ export default class Integrations extends React.Component {
                         />
                     </h1>
                 </div>
+                <div className='backstage-list__help'>
+                    <FormattedMessage
+                        id='integrations.help'
+                        defaultMessage='Visit the {appDirectory} to find self-hosted, third-party apps and integrations for Mattermost.'
+                        values={{
+                            appDirectory: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='https://about.mattermost.com/default-app-directory/'
+                                >
+                                    <FormattedMessage
+                                        id='integrations.help.appDirectory'
+                                        defaultMessage='App Directory'
+                                    />
+                                </a>
+                            )
+                        }}
+                    />
+                </div>
                 <div>
                     {options}
                 </div>
diff --git a/webapp/components/quick_switch_modal/quick_switch_modal.jsx b/webapp/components/quick_switch_modal/quick_switch_modal.jsx
index aed274510..2fbfdb2bd 100644
--- a/webapp/components/quick_switch_modal/quick_switch_modal.jsx
+++ b/webapp/components/quick_switch_modal/quick_switch_modal.jsx
@@ -272,7 +272,12 @@ export default class QuickSwitchModal extends React.PureComponent {
 
         let help;
         if (Utils.isMobile()) {
-            help = null;
+            help = (
+                <FormattedMessage
+                    id='quick_switch_modal.help_mobile'
+                    defaultMessage='Type to find a channel.'
+                />
+            );
         } else if (this.props.showTeamSwitcher) {
             help = (
                 <FormattedMessage
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 8d36cf610..0bb7f4231 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1490,16 +1490,18 @@
   "installed_commands.delete.confirm": "This action permanently deletes the slash command and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_commands.empty": "No commands found",
   "installed_commands.header": "Slash Commands",
-  "installed_commands.help": "Create slash commands for use in external integrations. Please see the {link} to learn more.",
-  "installed_commands.helpLink": "documentation",
+  "installed_commands.help": "Use slash commands to connect external tools to Mattermost. {buildYourOwn} or visit the {appDirectory} to find self-hosted, third-party apps and integrations.",
+  "installed_commands.help.buildYourOwn": "Build your own",
+  "installed_commands.help.appDirectory": "App Directory",
   "installed_commands.search": "Search Slash Commands",
   "installed_commands.unnamed_command": "Unnamed Slash Command",
   "installed_incoming_webhooks.add": "Add Incoming Webhook",
   "installed_incoming_webhooks.delete.confirm": "This action permanently deletes the incoming webhook and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_incoming_webhooks.empty": "No incoming webhooks found",
   "installed_incoming_webhooks.header": "Incoming Webhooks",
-  "installed_incoming_webhooks.help": "Create incoming webhook URLs for use in external integrations. Please see the {link} to learn more.",
-  "installed_incoming_webhooks.helpLink": "documentation",
+  "installed_incoming_webhooks.help": "Use incoming webhooks to connect external tools to Mattermost. {buildYourOwn} or visit the {appDirectory} to find self-hosted, third-party apps and integrations.",
+  "installed_incoming_webhooks.help.buildYourOwn": "Build your own",
+  "installed_incoming_webhooks.help.appDirectory": "App Directory",
   "installed_incoming_webhooks.search": "Search Incoming Webhooks",
   "installed_incoming_webhooks.unknown_channel": "A Private Webhook",
   "installed_integrations.callback_urls": "Callback URLs: {urls}",
@@ -1525,8 +1527,9 @@
   "installed_oauth_apps.description": "Description",
   "installed_oauth_apps.empty": "No OAuth 2.0 Applications found",
   "installed_oauth_apps.header": "OAuth 2.0 Applications",
-  "installed_oauth_apps.help": "Create OAuth 2.0 applications to securely integrate bots and third-party applications with Mattermost. Please see {link} to learn more.",
-  "installed_oauth_apps.helpLink": "documentation",
+  "installed_oauth_apps.help": "Create {oauthApplications} to securely integrate bots and third-party apps with Mattermost. Visit the {appDirectory} to find available self-hosted apps.",
+  "installed_oauth_apps.help.oauthApplications": "OAuth 2.0 applications",
+  "installed_oauth_apps.help.appDirectory": "App Directory",
   "installed_oauth_apps.homepage": "Homepage",
   "installed_oauth_apps.iconUrl": "Icon URL",
   "installed_oauth_apps.is_trusted": "Is Trusted: <strong>{isTrusted}</strong>",
@@ -1540,8 +1543,9 @@
   "installed_outgoing_webhooks.delete.confirm": "This action permanently deletes the outgoing webhook and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_outgoing_webhooks.empty": "No outgoing webhooks found",
   "installed_outgoing_webhooks.header": "Outgoing Webhooks",
-  "installed_outgoing_webhooks.help": "Create outgoing webhook URLs for use in external integrations. Please see the {link} to learn more.",
-  "installed_outgoing_webhooks.helpLink": "documentation",
+  "installed_outgoing_webhooks.help": "Use outgoing webhooks to connect external tools to Mattermost. {buildYourOwn} or visit the {appDirectory} to find self-hosted, third-party apps and integrations.",
+  "installed_outgoing_webhooks.help.buildYourOwn": "Build your own",
+  "installed_outgoing_webhooks.help.appDirectory": "App Directory",
   "installed_outgoing_webhooks.search": "Search Outgoing Webhooks",
   "installed_outgoing_webhooks.unknown_channel": "A Private Webhook",
   "integrations.add": "Add",
@@ -1552,6 +1556,8 @@
   "integrations.done": "Done",
   "integrations.edit": "Edit",
   "integrations.header": "Integrations",
+  "integrations.help": "Visit the {appDirectory} to find self-hosted, third-party apps and integrations for Mattermost.",
+  "integrations.help.appDirectory": "App Directory",
   "integrations.incomingWebhook.description": "Incoming webhooks allow external integrations to send messages",
   "integrations.incomingWebhook.title": "Incoming Webhook",
   "integrations.oauthApps.description": "OAuth 2.0 allows external applications to make authorized requests to the Mattermost API.",
@@ -1877,14 +1883,15 @@
   "posts_view.loadingMore": "Loading more messages...",
   "posts_view.newMsg": "New Messages",
   "posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}} below",
-  "quick_switch_modal.channels": "Channels",
-  "quick_switch_modal.channelsShortcut.mac": "- ⌘K",
-  "quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
   "quick_switch_modal.help": "Start typing then use TAB to toggle channels/teams, ↑↓ to browse, ↵ to select, and ESC to dismiss.",
+  "quick_switch_modal.help_mobile": "Type to find a channel.",
   "quick_switch_modal.help_no_team": "Type to find a channel. Use ↑↓ to browse, ↵ to select, ESC to dismiss.",
+  "quick_switch_modal.channels": "Channels",
   "quick_switch_modal.teams": "Teams",
   "quick_switch_modal.teamsShortcut.mac": "- ⌘⌥K",
   "quick_switch_modal.teamsShortcut.windows": "- CTRL+ALT+K",
+  "quick_switch_modal.channelsShortcut.mac": "- ⌘K",
+  "quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
   "reaction.clickToAdd": "(click to add)",
   "reaction.clickToRemove": "(click to remove)",
   "reaction.othersReacted": "{otherUsers, number} {otherUsers, plural, one {user} other {users}}",
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 5274a583e..9785dcca9 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -209,7 +209,7 @@
 
 .backstage-list__help {
     display: block;
-    padding: 1em 0;
+    margin: 1em 0;
 }
 
 .backstage-list__item {