diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index efb824d138..9dec10381c 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -472,7 +472,7 @@ body {
.label-tag-archived,
.label-tag {
margin-right: 3px;
- display: inline-block;
+ display: inline;
margin-top: 2px;
max-width: 24ch;
.text-overflow();
@@ -940,3 +940,17 @@ text.slicetext {
}
}
+.ui-select-choices-row > span {
+ background-color: inherit !important;
+}
+
+.list-group-item.inactive,
+.ui-select-choices-row.disabled {
+ background-color: #eee !important;
+ border-color: transparent;
+ opacity: 0.5;
+ box-shadow: none;
+ color: #333;
+ pointer-events: none;
+ cursor: not-allowed;
+}
diff --git a/client/app/assets/less/redash/tags-control.less b/client/app/assets/less/redash/tags-control.less
index 3aaf402620..fabf788710 100644
--- a/client/app/assets/less/redash/tags-control.less
+++ b/client/app/assets/less/redash/tags-control.less
@@ -8,6 +8,11 @@
&.inline-tags-control {
display: inline-block;
- vertical-align: middle;
}
}
+
+// This is for using .inline-tags-control in Angular which renders
+// a little differently than React (e.g. in Alert.html)
+.inline-tags-control .tags-control {
+ display: inline-block;
+}
diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx
index 7eab4301dc..f043fcd0eb 100644
--- a/client/app/components/dashboards/AddWidgetDialog.jsx
+++ b/client/app/components/dashboards/AddWidgetDialog.jsx
@@ -9,6 +9,7 @@ import {
ParameterMappingListInput,
editableMappingsToParameterMappings,
} from '@/components/ParameterMappingInput';
+import { QueryTagsControl } from '@/components/tags-control/QueryTagsControl';
import { toastr } from '@/services/ng';
import { Widget } from '@/services/widget';
@@ -41,7 +42,7 @@ class AddWidgetDialog extends React.Component {
parameterMappings: [],
};
- // Don't show draft (unpublished) queries
+ // Don't show draft (unpublished) queries in recent queries.
Query.recent().$promise.then((items) => {
this.setState({
recentQueries: items.filter(item => !item.is_draft),
@@ -208,6 +209,8 @@ class AddWidgetDialog extends React.Component {
onClick={() => this.selectQuery(query.id)}
>
{query.name}
+ {' '}
+
))}
@@ -226,12 +229,18 @@ class AddWidgetDialog extends React.Component {
{this.state.searchedQueries.map(query => (
this.selectQuery(query.id)}
- // eslint-disable-next-line react/no-danger
- dangerouslySetInnerHTML={{ __html: highlight(query.name, this.state.searchTerm) }}
- />
+ >
+
+ {' '}
+
+
))}
)}
@@ -325,7 +334,7 @@ class AddWidgetDialog extends React.Component {