Show disabled unpublished queries for alert and dashboard modals. (#3347)

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;
+}

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;
+}

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}
+                    {' '}
+                    <QueryTagsControl tags={query.tags} className="inline-tags-control" />
                   </a>
                 ))}
               </div>
@@ -226,12 +229,18 @@ class AddWidgetDialog extends React.Component {
                 {this.state.searchedQueries.map(query => (
                   <a
                     href="javascript:void(0)"
-                    className="list-group-item"
+                    className={'list-group-item ' + (query.is_draft ? 'inactive' : '')}
                     key={query.id}
                     onClick={() => this.selectQuery(query.id)}
-                    // eslint-disable-next-line react/no-danger
-                    dangerouslySetInnerHTML={{ __html: highlight(query.name, this.state.searchTerm) }}
-                  />
+                  >
+                    <div
+                      // eslint-disable-next-line react/no-danger
+                      dangerouslySetInnerHTML={{ __html: highlight(query.name, this.state.searchTerm) }}
+                      style={{ display: 'inline-block' }}
+                    />
+                    {' '}
+                    <QueryTagsControl isDraft={query.is_draft} tags={query.tags} className="inline-tags-control" />
+                  </a>
                 ))}
               </div>
             )}
@@ -325,7 +334,7 @@ class AddWidgetDialog extends React.Component {
           <button
             type="button"
             className="btn btn-primary"
-            disabled={this.state.saveInProgress}
+            disabled={this.state.saveInProgress || !this.state.selectedQuery}
             onClick={() => this.saveWidget()}
           >
             Add to Dashboard

client/app/pages/alert/alert.html

@@ -13,8 +13,10 @@
               <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
               <ui-select-choices repeat="q in $ctrl.queries"
                                  refresh="$ctrl.searchQueries($select.search)"
-                                 refresh-delay="0">
-                <div ng-bind-html="$ctrl.trustAsHtml(q.name | highlight: $select.search)"></div>
+                                 refresh-delay="0"
+                                 ui-disable-choice="q.is_draft">
+                <div style="display: inline-block" ng-bind-html="$ctrl.trustAsHtml(q.name | highlight: $select.search)"></div>
+                <query-tags-control tags="q.tags" is-draft="q.is_draft" class="inline-tags-control" />
               </ui-select-choices>
             </ui-select>
           </div>