diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-24 16:52:29 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-29 15:18:26 -0400 |
commit | dcdea9f30b419eeb8d55ed9be3f824aaf27de50c (patch) | |
tree | 53e3a0442c20dbc8d738ffff8f18e2cb01a12814 /webapp | |
parent | 6fff6a1025be8f13bfea19869da4038a48238ccf (diff) | |
download | chat-dcdea9f30b419eeb8d55ed9be3f824aaf27de50c.tar.gz chat-dcdea9f30b419eeb8d55ed9be3f824aaf27de50c.tar.bz2 chat-dcdea9f30b419eeb8d55ed9be3f824aaf27de50c.zip |
Added AddIntegration page
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/backstage/add_integration.jsx | 110 | ||||
-rw-r--r-- | webapp/components/backstage/add_integration_option.jsx | 39 | ||||
-rw-r--r-- | webapp/components/backstage/installed_integrations.jsx | 2 | ||||
-rw-r--r-- | webapp/root.jsx | 3 | ||||
-rw-r--r-- | webapp/sass/routes/_backstage.scss | 32 |
5 files changed, 183 insertions, 3 deletions
diff --git a/webapp/components/backstage/add_integration.jsx b/webapp/components/backstage/add_integration.jsx new file mode 100644 index 000000000..1ca079bb7 --- /dev/null +++ b/webapp/components/backstage/add_integration.jsx @@ -0,0 +1,110 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import TeamStore from 'stores/team_store.jsx'; + +import {FormattedMessage} from 'react-intl'; +import AddIntegrationOption from './add_integration_option.jsx'; + +import WebhookIcon from 'images/webhook_icon.jpg'; + +export default class AddIntegration extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + + this.state = { + team: TeamStore.getCurrent() + }; + } + + componentDidMount() { + TeamStore.addChangeListener(this.handleChange); + } + + componentWillUnmount() { + TeamStore.removeChangeListener(this.handleChange); + } + + handleChange() { + this.setState({ + team: TeamStore.getCurrent() + }); + } + + render() { + const team = TeamStore.getCurrent(); + + if (!team) { + return null; + } + + const options = []; + + if (window.mm_config.EnableIncomingWebhooks === 'true') { + options.push( + <AddIntegrationOption + key='incomingWebhook' + image={WebhookIcon} + title={ + <FormattedMessage + id='add_integration.incomingWebhook.title' + defaultMessage='Incoming Webhook' + /> + } + description={ + <FormattedMessage + id='add_integration.incomingWebhook.description' + defaultMessage='This is a webhook to which you can send stuff that will be posted' + /> + } + link={`/${team.name}/integrations/add/incoming_webhook`} + /> + ); + } + + if (window.mm_config.EnableOutgoingWebhooks === 'true') { + options.push( + <AddIntegrationOption + key='outgoingWebhook' + image={WebhookIcon} + title={ + <FormattedMessage + id='add_integration.outgoingWebhook.title' + defaultMessage='Outgoing Webhook' + /> + } + description={ + <FormattedMessage + id='add_integration.outgoingWebhook.description' + defaultMessage='This is a webhook that will send stuff to you when stuff is posted' + /> + } + link={`/${team.name}/integrations/add/outgoing_webhook`} + /> + ); + } + + return ( + <div className='backstage row'> + <div className='add-integration'> + <div className='backstage__header'> + <h1 className='text'> + <FormattedMessage + id='add-integration.header' + defaultMessage='Add Integration' + /> + </h1> + </div> + </div> + <div className='add-integration__options'> + {options} + </div> + </div> + ); + } +} + diff --git a/webapp/components/backstage/add_integration_option.jsx b/webapp/components/backstage/add_integration_option.jsx new file mode 100644 index 000000000..3c3caf2f4 --- /dev/null +++ b/webapp/components/backstage/add_integration_option.jsx @@ -0,0 +1,39 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import {Link} from 'react-router'; + +export default class AddIntegrationOption extends React.Component { + static get propTypes() { + return { + image: React.PropTypes.string.isRequired, + title: React.PropTypes.node.isRequired, + description: React.PropTypes.node.isRequired, + link: React.PropTypes.string.isRequired + }; + } + + render() { + const {image, title, description, link} = this.props; + + return ( + <Link + to={link} + className='add-integration-option' + > + <img + className='add-integration-option__image' + src={image} + /> + <div className='add-integration-option__title'> + {title} + </div> + <div className='add-integration-option__description'> + {description} + </div> + </Link> + ); + } +} diff --git a/webapp/components/backstage/installed_integrations.jsx b/webapp/components/backstage/installed_integrations.jsx index cfb68c660..8dae44295 100644 --- a/webapp/components/backstage/installed_integrations.jsx +++ b/webapp/components/backstage/installed_integrations.jsx @@ -198,7 +198,7 @@ export default class InstalledIntegrations extends React.Component { return ( <div className='backstage row'> <div className='installed-integrations'> - <div className='installed-integrations__header'> + <div className='backstage__header'> <h1 className='text'> <FormattedMessage id='installed_integrations.header' diff --git a/webapp/root.jsx b/webapp/root.jsx index c10099967..b6ec954c2 100644 --- a/webapp/root.jsx +++ b/webapp/root.jsx @@ -39,6 +39,7 @@ import TutorialView from 'components/tutorial/tutorial_view.jsx'; import BackstageNavbar from 'components/backstage/backstage_navbar.jsx'; import BackstageSidebar from 'components/backstage/backstage_sidebar.jsx'; import InstalledIntegrations from 'components/backstage/installed_integrations.jsx'; +import AddIntegration from 'components/backstage/add_integration.jsx'; import SignupTeamComplete from 'components/signup_team_complete/components/signup_team_complete.jsx'; import WelcomePage from 'components/signup_team_complete/components/team_signup_welcome_page.jsx'; @@ -267,7 +268,7 @@ function renderRootComponent() { components={{ navbar: BackstageNavbar, sidebar: BackstageSidebar, - center: null + center: AddIntegration }} /> <Route diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index 4619e4cbc..70bab99cb 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -92,7 +92,7 @@ max-width: 958px; } -.installed-integrations__header { +.backstage__header { margin-bottom: 20px; width: 100%; @@ -180,3 +180,33 @@ padding-left: 20px; } } + +.add-integration-option { + background-color: white; + border: lightgray 1px solid; + display: inline-block; + height: 210px; + margin-right: 30px; + padding: 20px; + text-align: center; + width: 250px; + + &:hover { + color: default; + text-decoration: none; + } + + &__image { + width: 80px; + height: 80px; + } + + &__title { + color: black; + margin-bottom: 10px; + } + + &__description { + color: gray; + } +} |