PLT-3728 Updated help text on integration pages (#3721)

3 files changed, 131 insertions, 23 deletions

diff --git a/webapp/components/integrations/components/add_command.jsx b/webapp/components/integrations/components/add_command.jsx
index d24acd70d..cf1824145 100644
--- a/webapp/components/integrations/components/add_command.jsx
+++ b/webapp/components/integrations/components/add_command.jsx
@@ -261,8 +261,8 @@ export default class AddCommand extends React.Component {
                         />
                         <div className='form__help'>
                             <FormattedMessage
-                                id='add_command.autocompleteDescription.help'
-                                defaultMessage='Optional hint in the autocomplete list about command parameters'
+                                id='add_command.autocompleteHint.help'
+                                defaultMessage='(Optional) Arguments associated with your slash command, displayed as help in the autocomplete list.'
                             />
                         </div>
                     </div>
@@ -295,7 +295,7 @@ export default class AddCommand extends React.Component {
                         <div className='form__help'>
                             <FormattedMessage
                                 id='add_command.autocompleteDescription.help'
-                                defaultMessage='Optional short description of slash command for the autocomplete list.'
+                                defaultMessage='(Optional) Short description of slash command for the autocomplete list.'
                             />
                         </div>
                     </div>
@@ -341,6 +341,12 @@ export default class AddCommand extends React.Component {
                                     value={this.state.displayName}
                                     onChange={this.updateDisplayName}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_command.displayName.help'
+                                        defaultMessage='Display name for your slash command made of up to 64 characters.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -362,6 +368,12 @@ export default class AddCommand extends React.Component {
                                     value={this.state.description}
                                     onChange={this.updateDescription}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_command.description.help'
+                                        defaultMessage='Description for your incoming webhook.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -386,14 +398,34 @@ export default class AddCommand extends React.Component {
                                 />
                                 <div className='form__help'>
                                     <FormattedMessage
-                                        id='add_command.trigger.help1'
-                                        defaultMessage='Examples: /patient, /client /employee'
+                                        id='add_command.trigger.help'
+                                        defaultMessage='Trigger word must be unique, and cannot begin with a slash or contain any spaces.'
                                     />
                                 </div>
                                 <div className='form__help'>
                                     <FormattedMessage
-                                        id='add_command.trigger.help2'
-                                        defaultMessage='Reserved: /echo, /join, /logout, /me, /shrug'
+                                        id='add_command.trigger.helpExamples'
+                                        defaultMessage='Examples: client, employee, patient, weather'
+                                    />
+                                </div>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_command.trigger.helpReserved'
+                                        defaultMessage='Reserved: {link}'
+                                        values={{
+                                            link: (
+                                                <a
+                                                    href='https://docs.mattermost.com/help/messaging/executing-commands.html#built-in-commands'
+                                                    target='_blank'
+                                                    rel='noopener noreferrer'
+                                                >
+                                                    <FormattedMessage
+                                                        id='add_command.trigger.helpReservedLinkText'
+                                                        defaultMessage='see list of built-in slash commands'
+                                                    />
+                                                </a>
+                                            )
+                                        }}
                                     />
                                 </div>
                             </div>
@@ -481,7 +513,7 @@ export default class AddCommand extends React.Component {
                                 <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.username.help'
-                                        defaultMessage='Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and the symbols "-", "_", and ".".'
+                                        defaultMessage='(Optional) Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and they symbols "-", "_", and "." .'
                                     />
                                 </div>
                             </div>
@@ -509,28 +541,32 @@ export default class AddCommand extends React.Component {
                                 <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.iconUrl.help'
-                                        defaultMessage='Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.'
+                                        defaultMessage='(Optional) Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.'
                                     />
                                 </div>
                             </div>
                         </div>
-                        <div className='form-group padding-bottom'>
-                            <div className='col-sm-12'>
-                                <div className='checkbox'>
-                                    <input
-                                        type='checkbox'
-                                        checked={this.state.autocomplete}
-                                        onChange={this.updateAutocomplete}
-                                    />
-                                    <FormattedMessage
-                                        id='add_command.autocomplete'
-                                        defaultMessage='Autocomplete'
-                                    />
-                                </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='autocomplete'
+                            >
+                                <FormattedMessage
+                                    id='add_command.iconUrl'
+                                    defaultMessage='Response Icon'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8 checkbox'>
+                                <input
+                                    id='autocomplete'
+                                    type='checkbox'
+                                    checked={this.state.autocomplete}
+                                    onChange={this.updateAutocomplete}
+                                />
                                 <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.autocomplete.help'
-                                        defaultMessage='Show this command in the autocomplete list'
+                                        defaultMessage='(Optional) Show slash command in autocomplete list.'
                                     />
                                 </div>
                             </div>
diff --git a/webapp/components/integrations/components/add_incoming_webhook.jsx b/webapp/components/integrations/components/add_incoming_webhook.jsx
index a213a805f..4a3779aff 100644
--- a/webapp/components/integrations/components/add_incoming_webhook.jsx
+++ b/webapp/components/integrations/components/add_incoming_webhook.jsx
@@ -142,6 +142,12 @@ export default class AddIncomingWebhook extends React.Component {
                                     value={this.state.displayName}
                                     onChange={this.updateDisplayName}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_incoming_webhook.displayName.help'
+                                        defaultMessage='Display name for your incoming webhook made of up to 64 characters.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -163,6 +169,12 @@ export default class AddIncomingWebhook extends React.Component {
                                     value={this.state.description}
                                     onChange={this.updateDescription}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_incoming_webhook.description.help'
+                                        defaultMessage='Description for your incoming webhook.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -183,6 +195,12 @@ export default class AddIncomingWebhook extends React.Component {
                                     selectOpen={true}
                                     selectPrivate={true}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_incoming_webhook.channel.help'
+                                        defaultMessage='Public channel or private group that receives the webhook payloads. You must belong to the private group when setting up the webhook.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='backstage-form__footer'>
diff --git a/webapp/components/integrations/components/add_outgoing_webhook.jsx b/webapp/components/integrations/components/add_outgoing_webhook.jsx
index 6f9750a90..540b565cd 100644
--- a/webapp/components/integrations/components/add_outgoing_webhook.jsx
+++ b/webapp/components/integrations/components/add_outgoing_webhook.jsx
@@ -214,6 +214,12 @@ export default class AddOutgoingWebhook extends React.Component {
                                     value={this.state.displayName}
                                     onChange={this.updateDisplayName}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.displayName.help'
+                                        defaultMessage='Display name for your incoming webhook made of up to 64 characters.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -235,6 +241,12 @@ export default class AddOutgoingWebhook extends React.Component {
                                     value={this.state.description}
                                     onChange={this.updateDescription}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.description.help'
+                                        defaultMessage='Description for your incoming webhook.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -264,6 +276,24 @@ export default class AddOutgoingWebhook extends React.Component {
                                         {contentTypeOption2}
                                     </option>
                                 </select>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.contentType.help1'
+                                        defaultMessage='Choose the content type by which the response will be sent.'
+                                    />
+                                </div>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.contentType.help2'
+                                        defaultMessage='If application/x-www-form-urlencoded is chosen, the server assumes you will be encoding the parameters in a URL format.'
+                                    />
+                                </div>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.contentType.help3'
+                                        defaultMessage='If application/json is chosen, the server assumes you will posting JSON data.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -283,6 +313,12 @@ export default class AddOutgoingWebhook extends React.Component {
                                     onChange={this.updateChannelId}
                                     selectOpen={true}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.channel.help'
+                                        defaultMessage='Public channel to receive webhook payloads. Optional if at least one Trigger Word is specified.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -304,6 +340,12 @@ export default class AddOutgoingWebhook extends React.Component {
                                     value={this.state.triggerWords}
                                     onChange={this.updateTriggerWords}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.triggerWords.help'
+                                        defaultMessage='Messages that start with one of the specified words will trigger the outgoing webhook. Optional if Channel is selected.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -339,6 +381,12 @@ export default class AddOutgoingWebhook extends React.Component {
                                         />
                                     </option>
                                 </select>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.triggerWordsTriggerWhen.help'
+                                        defaultMessage='Choose when to trigger the outgoing webhook; if the first word of a message matches a Trigger Word exactly, or if it starts with a Trigger Word.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='form-group'>
@@ -360,6 +408,12 @@ export default class AddOutgoingWebhook extends React.Component {
                                     value={this.state.callbackUrls}
                                     onChange={this.updateCallbackUrls}
                                 />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.callbackUrls.help'
+                                        defaultMessage='The URL that messages will be sent to.'
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className='backstage-form__footer'>