From 3ebc259f63faddfd1d704037f5e84090fca82a7d Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Wed, 6 Jul 2016 16:40:40 -0400 Subject: Added help text to integrations pages in backstage (#3513) --- .../backstage/components/backstage_list.jsx | 4 ++++ webapp/components/emoji/components/emoji_list.jsx | 2 +- .../integrations/components/installed_commands.jsx | 20 ++++++++++++++++++++ .../components/installed_incoming_webhooks.jsx | 20 ++++++++++++++++++++ .../components/installed_outgoing_webhooks.jsx | 20 ++++++++++++++++++++ webapp/i18n/en.json | 6 ++++++ webapp/sass/routes/_backstage.scss | 15 +++++---------- 7 files changed, 76 insertions(+), 11 deletions(-) (limited to 'webapp') diff --git a/webapp/components/backstage/components/backstage_list.jsx b/webapp/components/backstage/components/backstage_list.jsx index 81b8ec4d9..ecb8783b7 100644 --- a/webapp/components/backstage/components/backstage_list.jsx +++ b/webapp/components/backstage/components/backstage_list.jsx @@ -15,6 +15,7 @@ export default class BackstageList extends React.Component { addLink: React.PropTypes.string, addText: React.PropTypes.node, emptyText: React.PropTypes.node, + helpText: React.PropTypes.node, loading: React.PropTypes.bool.isRequired, searchPlaceholder: React.PropTypes.string } @@ -99,6 +100,9 @@ export default class BackstageList extends React.Component { /> + + {this.props.helpText} +
{children}
diff --git a/webapp/components/emoji/components/emoji_list.jsx b/webapp/components/emoji/components/emoji_list.jsx index 7f761fffd..b80615935 100644 --- a/webapp/components/emoji/components/emoji_list.jsx +++ b/webapp/components/emoji/components/emoji_list.jsx @@ -140,7 +140,7 @@ export default class EmojiList extends React.Component { /> - + } + helpText={ + + + + ) + }} + /> + } searchPlaceholder={Utils.localizeMessage('installed_commands.search', 'Search Slash Commands')} loading={this.state.loading} > diff --git a/webapp/components/integrations/components/installed_incoming_webhooks.jsx b/webapp/components/integrations/components/installed_incoming_webhooks.jsx index a3bcf904e..b14d1e3e8 100644 --- a/webapp/components/integrations/components/installed_incoming_webhooks.jsx +++ b/webapp/components/integrations/components/installed_incoming_webhooks.jsx @@ -91,6 +91,26 @@ export default class InstalledIncomingWebhooks extends React.Component { defaultMessage='No incoming webhooks found' /> } + helpText={ + + + + ) + }} + /> + } searchPlaceholder={Utils.localizeMessage('installed_incoming_webhooks.search', 'Search Incoming Webhooks')} loading={this.state.loading} > diff --git a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx index ebc9a6fc1..214e60a48 100644 --- a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx +++ b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx @@ -97,6 +97,26 @@ export default class InstalledOutgoingWebhooks extends React.Component { defaultMessage='No outgoing webhooks found' /> } + helpText={ + + + + ) + }} + /> + } searchPlaceholder={Utils.localizeMessage('installed_outgoing_webhooks.search', 'Search Outgoing Webhooks')} loading={this.state.loading} > diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index b305e25bc..e47f68eb9 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1060,11 +1060,15 @@ "installed_commands.add": "Add Slash Command", "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.search": "Search Slash Commands", "installed_commands.unnamed_command": "Unnamed Slash Command", "installed_incoming_webhooks.add": "Add Incoming Webhook", "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.search": "Search Incoming Webhooks", "installed_incoming_webhooks.unknown_channel": "A Private Webhook", "installed_integrations.callback_urls": "Callback URLs: {urls}", @@ -1078,6 +1082,8 @@ "installed_outgoing_webhooks.add": "Add Outgoing Webhook", "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.search": "Search Outgoing Webhooks", "installed_outgoing_webhooks.unknown_channel": "A Private Webhook", "integrations.command.description": "Slash commands send events to external integrations", diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index c74671231..5edba2660 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -196,7 +196,6 @@ input { background: $white; - border-bottom-width: 0; padding-left: 30px; } } @@ -208,6 +207,11 @@ min-height: 50px; } +.backstage-list__help { + display: block; + padding: 1em 0; +} + .backstage-list__item { border-bottom: 1px solid $light-gray; display: flex; @@ -353,15 +357,6 @@ color: $dark-gray; } -.emoji-list .backstage-filter__search input { - border-bottom-width: 1px; -} - -.emoji-list__help { - display: block; - padding: 1em 0; -} - .emoji-list__table { width: 100%; -- cgit v1.2.3-1-g7c22