+
+ );
+ }
+}
diff --git a/webapp/components/backstage/backstage_navbar.jsx b/webapp/components/backstage/components/backstage_navbar.jsx
similarity index 56%
rename from webapp/components/backstage/backstage_navbar.jsx
rename to webapp/components/backstage/components/backstage_navbar.jsx
index 26ab44c878..7bccfc9f7f 100644
--- a/webapp/components/backstage/backstage_navbar.jsx
+++ b/webapp/components/backstage/components/backstage_navbar.jsx
@@ -1,52 +1,28 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import $ from 'jquery';
-
import React from 'react';
-import TeamStore from 'stores/team_store.jsx';
-
import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router/es6';
export default class BackstageNavbar extends React.Component {
- constructor(props) {
- super(props);
-
- this.handleChange = this.handleChange.bind(this);
-
- this.state = {
- team: TeamStore.getCurrent()
+ static get propTypes() {
+ return {
+ team: React.propTypes.object.isRequired
};
}
- componentDidMount() {
- TeamStore.addChangeListener(this.handleChange);
- $('body').addClass('backstage');
- }
-
- componentWillUnmount() {
- TeamStore.removeChangeListener(this.handleChange);
- $('body').removeClass('backstage');
- }
-
- handleChange() {
- this.setState({
- team: TeamStore.getCurrent()
- });
- }
-
render() {
- if (!this.state.team) {
+ if (!this.props.team) {
return null;
}
return (
-
+
+ + {this.props.header} +
+ {addLink} +
+
+
+
+
+
+
+ {children}
+
+
+
diff --git a/webapp/components/backstage/backstage_section.jsx b/webapp/components/backstage/components/backstage_section.jsx
similarity index 100%
rename from webapp/components/backstage/backstage_section.jsx
rename to webapp/components/backstage/components/backstage_section.jsx
diff --git a/webapp/components/backstage/backstage_sidebar.jsx b/webapp/components/backstage/components/backstage_sidebar.jsx
similarity index 52%
rename from webapp/components/backstage/backstage_sidebar.jsx
rename to webapp/components/backstage/components/backstage_sidebar.jsx
index 4d8d8337de..a17d830b0b 100644
--- a/webapp/components/backstage/backstage_sidebar.jsx
+++ b/webapp/components/backstage/components/backstage_sidebar.jsx
@@ -3,13 +3,51 @@
import React from 'react';
-import * as Utils from 'utils/utils.jsx';
+import TeamStore from 'stores/team_store.jsx';
+
import BackstageCategory from './backstage_category.jsx';
import BackstageSection from './backstage_section.jsx';
import {FormattedMessage} from 'react-intl';
export default class BackstageSidebar extends React.Component {
- render() {
+ static get propTypes() {
+ return {
+ team: React.PropTypes.object.isRequired,
+ user: React.PropTypes.object.isRequired
+ };
+ }
+
+ renderCustomEmoji() {
+ if (window.mm_config.EnableCustomEmoji !== 'true') {
+ return null;
+ }
+
+ return (
+
+
+
+
+ );
+ } else {
+ for (const [, emoji] of this.state.emojis) {
+ let onDelete = null;
+ if (isSystemAdmin || this.props.user.id === emoji.creator_id) {
+ onDelete = this.deleteEmoji;
+ }
+
+ emojis.push(
+
+
+ {':' + emoji.name + ':'}
+
+
+ })
+
+
+ {creatorName}
+
+
+ {deleteButton}
+
+
+ );
+ }
+}
diff --git a/webapp/components/backstage/add_command.jsx b/webapp/components/integrations/components/add_command.jsx
similarity index 97%
rename from webapp/components/backstage/add_command.jsx
rename to webapp/components/integrations/components/add_command.jsx
index 91af0416b4..e72670e476 100644
--- a/webapp/components/backstage/add_command.jsx
+++ b/webapp/components/integrations/components/add_command.jsx
@@ -6,7 +6,7 @@ import React from 'react';
import * as AsyncClient from 'utils/async_client.jsx';
import * as Utils from 'utils/utils.jsx';
-import BackstageHeader from './backstage_header.jsx';
+import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
import {FormattedMessage} from 'react-intl';
import FormError from 'components/form_error.jsx';
import {browserHistory, Link} from 'react-router/es6';
@@ -17,6 +17,12 @@ const REQUEST_POST = 'P';
const REQUEST_GET = 'G';
export default class AddCommand extends React.Component {
+ static get propTypes() {
+ return {
+ team: React.propTypes.object.isRequired
+ };
+ }
+
constructor(props) {
super(props);
@@ -155,7 +161,7 @@ export default class AddCommand extends React.Component {
AsyncClient.addCommand(
command,
() => {
- browserHistory.push('/' + Utils.getTeamNameFromUrl() + '/settings/integrations/commands');
+ browserHistory.push('/' + this.props.team.name + '/integrations/commands');
},
(err) => {
this.setState({
@@ -300,7 +306,7 @@ export default class AddCommand extends React.Component {
return (
-
+
-
-
-
- );
- }
-}
diff --git a/webapp/components/emoji/components/add_emoji.jsx b/webapp/components/emoji/components/add_emoji.jsx
new file mode 100644
index 0000000000..46f3454766
--- /dev/null
+++ b/webapp/components/emoji/components/add_emoji.jsx
@@ -0,0 +1,307 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+import EmojiStore from 'stores/emoji_store.jsx';
+
+import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
+import {FormattedMessage} from 'react-intl';
+import FormError from 'components/form_error.jsx';
+import {Link} from 'react-router';
+import SpinnerButton from 'components/spinner_button.jsx';
+
+export default class AddEmoji extends React.Component {
+ static propTypes = {
+ team: React.PropTypes.object.isRequired,
+ user: React.PropTypes.object.isRequired
+ }
+
+ static contextTypes = {
+ router: React.PropTypes.object.isRequired
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.handleSubmit = this.handleSubmit.bind(this);
+
+ this.updateName = this.updateName.bind(this);
+ this.updateImage = this.updateImage.bind(this);
+
+ this.state = {
+ name: '',
+ image: null,
+ imageUrl: '',
+ saving: false,
+ error: null
+ };
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+
+ if (this.state.saving) {
+ return;
+ }
+
+ this.setState({
+ saving: true,
+ error: null
+ });
+
+ const emoji = {
+ creator_id: this.props.user.id,
+ name: this.state.name.trim().toLowerCase()
+ };
+
+ if (!emoji.name) {
+ this.setState({
+ saving: false,
+ error: (
+
-
-
-
- - {this.props.header} -
- - - -
-
-
-
-
-
-
- {children}
-
-
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/webapp/components/emoji/components/emoji_list.jsx b/webapp/components/emoji/components/emoji_list.jsx
new file mode 100644
index 0000000000..5795a57b28
--- /dev/null
+++ b/webapp/components/emoji/components/emoji_list.jsx
@@ -0,0 +1,218 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+import EmojiStore from 'stores/emoji_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedMessage} from 'react-intl';
+import EmojiListItem from './emoji_list_item.jsx';
+import {Link} from 'react-router';
+import LoadingScreen from 'components/loading_screen.jsx';
+
+export default class EmojiList extends React.Component {
+ static get propTypes() {
+ return {
+ team: React.propTypes.object.isRequired,
+ user: React.propTypes.object.isRequired
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.canCreateEmojis = this.canCreateEmojis.bind(this);
+
+ this.handleEmojiChange = this.handleEmojiChange.bind(this);
+
+ this.deleteEmoji = this.deleteEmoji.bind(this);
+
+ this.updateFilter = this.updateFilter.bind(this);
+
+ this.state = {
+ emojis: EmojiStore.getCustomEmojiMap(),
+ loading: !EmojiStore.hasReceivedCustomEmojis(),
+ filter: ''
+ };
+ }
+
+ componentDidMount() {
+ EmojiStore.addChangeListener(this.handleEmojiChange);
+
+ if (window.mm_config.EnableCustomEmoji === 'true') {
+ AsyncClient.listEmoji();
+ }
+ }
+
+ componentWillUnmount() {
+ EmojiStore.removeChangeListener(this.handleEmojiChange);
+ }
+
+ handleEmojiChange() {
+ this.setState({
+ emojis: EmojiStore.getCustomEmojiMap(),
+ loading: !EmojiStore.hasReceivedCustomEmojis()
+ });
+ }
+
+ updateFilter(e) {
+ this.setState({
+ filter: e.target.value
+ });
+ }
+
+ deleteEmoji(emoji) {
+ AsyncClient.deleteEmoji(emoji.id);
+ }
+
+ canCreateEmojis() {
+ if (global.window.mm_license.IsLicensed !== 'true') {
+ return true;
+ }
+
+ if (Utils.isSystemAdmin(this.props.user.roles)) {
+ return true;
+ }
+
+ if (window.mm_config.RestrictCustomEmojiCreation === 'all') {
+ return true;
+ }
+
+ if (window.mm_config.RestrictCustomEmojiCreation === 'admin') {
+ // check whether the user is an admin on any of their teams
+ for (const member of TeamStore.getTeamMembers()) {
+ if (Utils.isAdmin(member.roles)) {
+ return true;
+ }
+ }
+ }
+
+ return false;
+ }
+
+ render() {
+ const filter = this.state.filter.toLowerCase();
+ const isSystemAdmin = Utils.isSystemAdmin(this.props.user.roles);
+
+ let emojis = [];
+ if (this.state.loading) {
+ emojis.push(
+
+
+
+
+
+ );
+ }
+}
diff --git a/webapp/components/emoji/components/emoji_list_item.jsx b/webapp/components/emoji/components/emoji_list_item.jsx
new file mode 100644
index 0000000000..50a4bacb17
--- /dev/null
+++ b/webapp/components/emoji/components/emoji_list_item.jsx
@@ -0,0 +1,118 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import EmojiStore from 'stores/emoji_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+export default class EmojiListItem extends React.Component {
+ static get propTypes() {
+ return {
+ emoji: React.PropTypes.object.isRequired,
+ onDelete: React.PropTypes.func.isRequired,
+ filter: React.PropTypes.string
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.handleDelete = this.handleDelete.bind(this);
+
+ this.state = {
+ creator: UserStore.getProfile(this.props.emoji.creator_id)
+ };
+ }
+
+ handleDelete(e) {
+ e.preventDefault();
+
+ this.props.onDelete(this.props.emoji);
+ }
+
+ matchesFilter(emoji, creator, filter) {
+ if (!filter) {
+ return true;
+ }
+
+ if (emoji.name.toLowerCase().indexOf(filter) !== -1) {
+ return true;
+ }
+
+ if (creator) {
+ if (creator.username.toLowerCase().indexOf(filter) !== -1 ||
+ (creator.first_name && creator.first_name.toLowerCase().indexOf(filter)) ||
+ (creator.last_name && creator.last_name.toLowerCase().indexOf(filter)) ||
+ (creator.nickname && creator.nickname.toLowerCase().indexOf(filter))) {
+ return true;
+ }
+ }
+
+ return false;
+ }
+
+ render() {
+ const emoji = this.props.emoji;
+ const creator = this.state.creator;
+ const filter = this.props.filter ? this.props.filter.toLowerCase() : '';
+
+ if (!this.matchesFilter(emoji, creator, filter)) {
+ return null;
+ }
+
+ let creatorName;
+ if (creator) {
+ creatorName = Utils.displayUsernameForUser(creator);
+
+ if (creatorName !== creator.username) {
+ creatorName += ' (@' + creator.username + ')';
+ }
+ } else {
+ creatorName = (
+
+
+
+ {addLink}
+
+
+
+ {addLink}
+
+
+
+
+
+
+
+
+
+
+
+ |
+ |
+
+ |
+
+ |
+
+ |
+
|---|
-