add plus between tags to clarify how they are used getredash#4628

client/app/assets/less/redash/tags-control.less

@@ -10,6 +10,10 @@
     display: inline-block;
   }
 
+  .tag-separator {
+    margin: 4px 3px 0 0;
+  }
+
   &.disabled {
     opacity: 0.4;
   }

client/app/components/NoTaggedObjectsFound.jsx

@@ -7,7 +7,7 @@ export default function NoTaggedObjectsFound({ objectType, tags }) {
   return (
     <BigMessage icon="fa-tags">
       No {objectType} found tagged with&nbsp;
-      <TagsControl className="inline-tags-control" tags={Array.from(tags)} />.
+      <TagsControl className="inline-tags-control" tags={Array.from(tags)} tagSeparator={'+'} />.
     </BigMessage>
   );
 }

client/app/components/tags-control/TagsControl.jsx

@@ -12,6 +12,7 @@ export class TagsControl extends React.Component {
     onEdit: PropTypes.func,
     className: PropTypes.string,
     tagsExtra: PropTypes.node,
+    tagSeparator: PropTypes.node,
     children: PropTypes.node,
   };
 
@@ -22,6 +23,7 @@ export class TagsControl extends React.Component {
     onEdit: () => {},
     className: "",
     tagsExtra: null,
+    tagSeparator: null,
     children: null,
   };
 
@@ -49,13 +51,17 @@ export class TagsControl extends React.Component {
   }
 
   render() {
+    const { tags, tagSeparator } = this.props;
     return (
       <div className={"tags-control " + this.props.className} data-test="TagsControl">
         {this.props.children}
-        {map(this.props.tags, tag => (
-          <span className="label label-tag" key={tag} title={tag} data-test="TagLabel">
-            {tag}
-          </span>
+        {map(tags, (tag, i) => (
+          <React.Fragment key={tag}>
+            {tagSeparator && i > 0 && <span className="tag-separator">{tagSeparator}</span>}
+            <span className="label label-tag" key={tag} title={tag} data-test="TagLabel">
+              {tag}
+            </span>
+          </React.Fragment>
         ))}
         {this.props.canEdit && this.renderEditButton()}
         {this.props.tagsExtra}