Tagging frontend

superset/assets/package.json

@@ -127,6 +127,7 @@
  "react-split": "^2.0.4",
  "react-sticky": "^6.0.2",
  "react-syntax-highlighter": "^7.0.4",
+ "react-tag-autocomplete": "^5.9.0",
  "react-transition-group": "^2.5.3",
  "react-virtualized": "9.19.1",
  "react-virtualized-select": "^3.1.3",

superset/assets/src/components/ObjectTags.jsx

@@ -0,0 +1,143 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTags from 'react-tag-autocomplete';
+import { Glyphicon, Label } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+import TooltipWrapper from './TooltipWrapper';
+
+import './ObjectTags.less';
+
+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 => (
+ <Label bsStyle="info">
+ <a
+ href={`/superset/welcome?tags=${props.tag.name}#tags`}
+ className="deco-none"
+ >
+ {props.tag.name}
+ </a>
+ <TooltipWrapper
+ label="remove"
+ tooltip={t('Click to remove tag')}
+ >
+ <Glyphicon onClick={props.onDelete} glyph="remove" />
+ </TooltipWrapper>
+ </Label>
+ );
+ const {
+ fetchTags,
+ fetchSuggestions,
+ deleteTag,
+ addTag,
+ editable,
+ onChange,
+ ...rest
+ } = this.props;
+ return (
+ <ReactTags
+ {...rest}
+ tags={this.state.tags}
+ suggestions={this.state.suggestions}
+ handleDelete={this.handleDelete}
+ handleAddition={this.handleAddition}
+ allowNew
+ placeHolder={t('Add new tag')}
+ tagComponent={Tag}
+ />
+ );
+ }
+
+ renderReadOnlyTags() {
+ return (
+ <div className="react-tags-rw">
+ {this.state.tags.map(tag => (
+ <Label bsStyle="info">
+ <a
+ href={`/superset/welcome?tags=${tag.name}#tags`}
+ className="deco-none"
+ >
+ {tag.name}
+ </a>
+ </Label>
+ ))}
+ </div>
+ );
+ }
+
+ render() {
+ if (this.props.editable) {
+ return this.renderEditableTags();
+ }
+ return this.renderReadOnlyTags();
+ }
+}
+
+ObjectTags.propTypes = propTypes;
+ObjectTags.defaultProps = defaultProps;

superset/assets/src/components/ObjectTags.less

@@ -0,0 +1,213 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/**
+ * <div class="react-tags">
+ * <div class="react-tags__selected">
+ * <button class="react-tags__selected-tag">
+ * <span class="react-tags__selected-tag-name" />
+ * </button>
+ * </div>
+ * <div class="react-tags__search">
+ * <div class="react-tags__search-input">
+ * <input />
+ * <div />
+ * </div>
+ * <div class="react-tags__suggestions">
+ * <ul>
+ * <li class="is-active">
+ * <mark />
+ * </li>
+ * <li class="is-disabled">
+ * <mark />
+ * </li>
+ * </ul>
+ * </div>
+ * </div>
+ */
+.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;
+}