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

5 files changed, 84 insertions, 16 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>