Improves helptext, adds FAQ link #PG-4519

SystemSettings.php

@@ -12,6 +12,7 @@
 use Piwik\Piwik;
 use Piwik\Settings\Setting;
 use Piwik\Settings\FieldConfig;
+use Piwik\Url;
 
 class SystemSettings extends \Piwik\Settings\Plugin\SystemSettings
 {
@@ -29,7 +30,8 @@ private function createSlackOauthTokenSetting()
         return $this->makeSetting('slackOauthToken', $default = '', FieldConfig::TYPE_STRING, function (FieldConfig $field) {
             $field->title = Piwik::translate('Slack_OauthTokenSettingTitle');
             $field->uiControl = FieldConfig::UI_CONTROL_PASSWORD;
-            $field->description = Piwik::translate('Slack_OauthTokenSettingDescription');
+            $link = Url::addCampaignParametersToMatomoLink('https://matomo.org/?post_type=faq&p=87125&preview=true', null, null, 'App.SystemSettings.Slack') . '#step-1-get-a-slack-oauth-token';
+            $field->inlineHelp = Piwik::translate('Slack_OauthTokenSettingDescription', ['<a href="' . $link . '" target="_blank" rel="noreferrer noopener">', '</a>']);
             $field->transform = function ($value) {
                 return trim($value);
             };

lang/en.json

@@ -1,13 +1,13 @@
 {
   "Slack": {
     "ChannelId": "Slack Channel ID",
-    "NoOauthTokenAdded": "Please add your Slack OauthToken %1$shere%2$s.",
-    "OauthTokenRequiredErrorMessage": "Please add your Slack Oauth token in General Settings under Slack section.",
-    "OauthTokenSettingTitle": "Slack Oauth Token",
-    "OauthTokenSettingDescription": "Enter your Slack Oauth Token",
+    "NoOauthTokenAdded": "Please add your Slack OAuth Token %1$shere%2$s.",
+    "OauthTokenRequiredErrorMessage": "To enable Slack, provide your Slack OAuth Token in General settings > Slack.",
+    "OauthTokenSettingTitle": "Slack OAuth Token",
+    "OauthTokenSettingDescription": "Enter your Slack OAuth Token generated from your Slack. %1$sLearn more%2$s.",
     "PleaseFindYourReport": "Here is your %1$s report for %2$s",
     "SlackChannelIdRequiredErrorMessage": "Slack Channel ID cannot be empty.",
     "SlackChannel": "Slack Channel",
-    "SlackEnterYourSlackChannelIdHelpText": "Enter your Slack Channel ID"
+    "SlackEnterYourSlackChannelIdHelpText": "Enter the Slack Channel ID of the channel that will receive these reports. To find the ID, go to Slack and open the channel details > About tab. %1$sLearn more%2$s"
   }
 }

vue/src/SelectSlackChannel/SelectSlackChannel.vue

@@ -26,7 +26,7 @@
                 </span>
           <span
               v-else
-              v-text="translate('Slack_SlackEnterYourSlackChannelIdHelpText')"
+              v-html="$sanitize(getSlackChannelHelpText)"
           >
                 </span>
         </div>
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { MatomoUrl, translate } from 'CoreHome';
+import { MatomoUrl, translate, externalLink } from 'CoreHome';
 import { Field } from 'CorePluginsAdmin';
 
 export default defineComponent({
@@ -70,6 +70,13 @@ export default defineComponent({
         '</a>',
       );
     },
+    getSlackChannelHelpText() {
+      return translate(
+        'Slack_SlackEnterYourSlackChannelIdHelpText',
+        externalLink('https://matomo.org/?post_type=faq&p=87026&preview=true#step-2-set-up-slack-in-matomo'),
+        '</a>',
+      );
+    },
   },
 });
 </script>