show error if trying unpublished query in alert or dashboard

client/app/components/dashboards/add-widget-dialog.html

@@ -37,7 +37,7 @@ <h4 class="modal-title">Add Widget</h4>
       <div ng-if="$ctrl.searchTerm == ''">
         <div class="list-group" ng-if="$ctrl.recentQueries.length > 0">
           <a class="list-group-item" ng-repeat="query in $ctrl.recentQueries"
-            ng-click="$ctrl.selectQuery(query.id)">{{query.name}}</a>
+            ng-click="$ctrl.selectQuery(query.id)">{{query.name}} <span ng-repeat="tag in query.tags"><span class="label label-tag">{{tag}}</span> </span></a>
         </div>
       </div>
 
@@ -49,6 +49,7 @@ <h4 class="modal-title">Add Widget</h4>
           <a class="list-group-item"
             ng-repeat="query in $ctrl.searchedQueries" ng-click="$ctrl.selectQuery(query.id)"
             ng-bind-html="$ctrl.trustAsHtml(query.name | highlight: $ctrl.searchTerm)"
+            ng-class="query.is_draft === false ? '' : 'inactive'"
           ></a>
         </div>
       </div>
@@ -66,5 +67,5 @@ <h4 class="modal-title">Add Widget</h4>
 
 <div class="modal-footer">
   <button type="button" class="btn btn-default" ng-disabled="$ctrl.saveInProgress" ng-click="$ctrl.dismiss()">Close</button>
-  <button type="button" class="btn btn-primary" ng-disabled="$ctrl.saveInProgress || !($ctrl.selectedVis || $ctrl.isTextBox)" ng-click="$ctrl.saveWidget()">Add to Dashboard</button>
+  <button type="button" class="btn btn-primary" ng-disabled="$ctrl.saveInProgress || !($ctrl.selectedVis || $ctrl.isTextBox) || $ctrl.selectedQuery.is_draft === true" ng-click="$ctrl.saveWidget()">Add to Dashboard</button>
 </div>

client/app/components/dashboards/add-widget-dialog.js

@@ -23,7 +23,7 @@ const AddWidgetDialog = {
     this.searchTerm = '';
     this.recentQueries = [];
 
-    // Don't show draft (unpublished) queries
+    // Don't show draft (unpublished) queries in Add Widget modal list
     Query.recent().$promise.then((items) => {
       this.recentQueries = items.filter(item => !item.is_draft);
     });
@@ -71,6 +71,14 @@ const AddWidgetDialog = {
         // outdated results.
         if (this.searchTerm === term) {
           this.searchedQueries = results.results;
+          this.searchedQueries.forEach((q) => {
+            if (q.is_draft === true) {
+              q.name += ' <span class="label label-tag-unpublished">Unpublished</span>';
+            }
+            q.tags.forEach((t) => {
+              q.name += ' <span class="label label-tag">' + t + '</span>';
+            });
+          });
         }
       });
     }, 200);

client/app/components/dashboards/add-widget-dialog.less

@@ -1,3 +1,13 @@
 .word-wrap-break {
 	word-wrap: break-word;
+}
+
+.inactive {
+  background-color: #eee !important;
+  border-color: transparent;
+  opacity: 0.5;
+  box-shadow: none;
+  color: #333;
+  pointer-events: none;
+  cursor: not-allowed;
 }

client/app/pages/alert/alert.html

@@ -15,7 +15,8 @@
               <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">
+                                 refresh-delay="0"
+                                 ui-disable-choice="q.is_draft === true">
                 <div ng-bind-html="$ctrl.trustAsHtml(q.name | highlight: $select.search)"></div>
               </ui-select-choices>
             </ui-select>

client/app/pages/alert/index.js

@@ -47,6 +47,14 @@ function AlertCtrl($routeParams, $location, $sce, toastr, currentUser, Query, Ev
 
     Query.query({ q: term }, (results) => {
       this.queries = results.results;
+      this.queries.forEach((q) => {
+        if (q.is_draft === true) {
+          q.name += ' <span class="label label-tag-unpublished">Unpublished</span>';
+        }
+        q.tags.forEach((t) => {
+          q.name += ' <span class="label label-tag">' + t + '</span>';
+        });
+      });
     });
   };