+ *
+ *
+ *
+ *
+ */
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 1px solid #F5F5F5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags-rw {
+ display: inline-block;
+ margin: 0 10px;
+ font-size: 12px;
+ line-height: 1.2;
+}
+
+.react-tags.is-focused {
+ border-color: #F0F0F0;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 1px solid #F5F5F5;
+ border-radius: 2px;
+ background: #F1F1F1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__selected-tag:after {
+ content: '\2715';
+ color: #AAA;
+ margin-left: 8px;
+}
+
+.react-tags__selected-tag:hover,
+.react-tags__selected-tag:focus {
+ border-color: #B1B1B1;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* match tag layout */
+ padding: 7px 2px;
+ margin-bottom: 0;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+@media screen and (min-width: 30em) {
+
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+
+}
+
+.react-tags__search input {
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 2px;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+
+ .react-tags__suggestions {
+ width: 240px;
+ }
+
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #D1D1D1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__suggestions li {
+ border-bottom: 1px solid #ddd;
+ padding: 6px 8px;
+}
+
+.react-tags__suggestions li mark {
+ text-decoration: underline;
+ background: none;
+ font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+ cursor: pointer;
+ background: #eee;
+}
+
+.react-tags__suggestions li.is-active {
+ background: #b7cfe0;
+}
+
+.react-tags__suggestions li.is-disabled {
+ opacity: 0.5;
+ cursor: auto;
+}
+
+.react-tags span.label {
+ margin-left: 5px;
+ padding: 0.3em 0.6em 0.3em;
+}
+
+.react-tags a.deco-none {
+ color: inherit;
+ text-decoration:none;
+}
+
+.react-tags-rw span.label {
+ margin-left: 5px;
+}
+
+.react-tags-rw a.deco-none {
+ color: inherit;
+ text-decoration:none;
+}
+
+.react-tags span.glyphicon {
+ cursor: pointer;
+ margin-left: 3px;
+ top: 2px;
+}
diff --git a/superset/assets/src/components/ObjectTags.jsx b/superset/assets/src/components/ObjectTags.jsx
new file mode 100644
index 0000000000000..ab8114f34bcfc
--- /dev/null
+++ b/superset/assets/src/components/ObjectTags.jsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTags from 'react-tag-autocomplete';
+import { Glyphicon, Label } from 'react-bootstrap';
+import TooltipWrapper from './TooltipWrapper';
+
+import './ObjectTags.css';
+
+import { t } from '../locales';
+
+const propTypes = {
+ fetchTags: PropTypes.func,
+ fetchSuggestions: PropTypes.func,
+ deleteTag: PropTypes.func,
+ addTag: PropTypes.func,
+ editable: PropTypes.bool,
+ onChange: PropTypes.func,
+};
+
+const defaultProps = {
+ fetchTags: (callback) => { callback([]); },
+ fetchSuggestions: (callback) => { callback([]); },
+ deleteTag: (tag, callback) => { callback(); },
+ addTag: (tag, callback) => { callback(); },
+ editable: true,
+ onChange: () => {},
+};
+
+export default class ObjectTags extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ tags: [],
+ suggestions: [],
+ };
+
+ this.handleDelete = this.handleDelete.bind(this);
+ this.handleAddition = this.handleAddition.bind(this);
+ }
+
+ componentDidMount() {
+ this.props.fetchTags(tags => this.setState({ tags }));
+ this.props.fetchSuggestions(suggestions => this.setState({ suggestions }));
+ }
+
+ handleDelete(i) {
+ const tags = this.state.tags.slice(0);
+ const tag = tags.splice(i, 1)[0].name;
+ this.props.deleteTag(tag, () => this.setState({ tags }));
+ this.props.onChange(tags);
+ }
+
+ handleAddition(tag) {
+ const tags = [...this.state.tags, tag];
+ this.props.addTag(tag.name, () => this.setState({ tags }));
+ this.props.onChange(tags);
+ }
+
+ renderEditableTags() {
+ const Tag = props => (
+
+ );
+ const {
+ fetchTags,
+ fetchSuggestions,
+ deleteTag,
+ addTag,
+ editable,
+ onChange,
+ ...rest
+ } = this.props;
+ return (
+
+ );
+ }
+
+ renderReadOnlyTags() {
+ return (
+
+ );
+ }
+
+ render() {
+ if (this.props.editable) {
+ return this.renderEditableTags();
+ }
+ return this.renderReadOnlyTags();
+ }
+}
+
+ObjectTags.propTypes = propTypes;
+ObjectTags.defaultProps = defaultProps;
diff --git a/superset/assets/src/dashboard/components/BuilderComponentPane.jsx b/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
index a21ec11de7ba3..723c075bb91eb 100644
--- a/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
+++ b/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
@@ -10,6 +10,7 @@ import NewDivider from './gridComponents/new/NewDivider';
import NewHeader from './gridComponents/new/NewHeader';
import NewRow from './gridComponents/new/NewRow';
import NewTabs from './gridComponents/new/NewTabs';
+import NewTags from './gridComponents/new/NewTags';
import NewMarkdown from './gridComponents/new/NewMarkdown';
import SliceAdder from '../containers/SliceAdder';
import { t } from '../../locales';
@@ -93,6 +94,7 @@ class BuilderComponentPane extends React.PureComponent {
+