From 3f7af317c3e2c499200185587655856c5727ef83 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Tue, 26 Feb 2019 20:33:54 +0200
Subject: [PATCH 1/3] QuerySelector in Alert page

---
 client/app/components/QuerySelector.jsx | 35 ++++++++++++++++++++++++-
 client/app/pages/alert/alert.html       | 11 +-------
 client/app/pages/alert/index.js         |  1 +
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/client/app/components/QuerySelector.jsx b/client/app/components/QuerySelector.jsx
index 26a18593c1..14151fbddc 100644
--- a/client/app/components/QuerySelector.jsx
+++ b/client/app/components/QuerySelector.jsx
@@ -1,13 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { react2angular } from 'react2angular';
 import { debounce, find } from 'lodash';
 import Input from 'antd/lib/input';
+import Select from 'antd/lib/select';
 import { Query } from '@/services/query';
 import { toastr } from '@/services/ng';
 import { QueryTagsControl } from '@/components/tags-control/TagsControl';
 
 const SEARCH_DEBOUNCE_DURATION = 200;
+const { Option } = Select;
 
 class StaleSearchError extends Error {
   constructor() {
@@ -127,6 +130,30 @@ export function QuerySelector(props) {
     return <Input value={selectedQuery && selectedQuery.name} placeholder={placeholder} disabled />;
   }
 
+  if (props.type === 'select') {
+    const suffixIcon = selectedQuery ? clearIcon : null;
+    const value = selectedQuery ? selectedQuery.name : searchTerm;
+
+    return (
+      <Select
+        showSearch
+        dropdownMatchSelectWidth={false}
+        placeholder={placeholder}
+        value={value || undefined} // undefined for the placeholder to show
+        onSearch={setSearchTerm}
+        onChange={selectQuery}
+        suffixIcon={searching ? spinIcon : suffixIcon}
+        notFoundContent={null}
+        filterOption={false}
+        defaultActiveFirstOption={false}
+      >
+        {searchResults && searchResults.map(q => (
+          <Option value={q.id} key={q.id}>{q.name}</Option>
+        ))}
+      </Select>
+    );
+  }
+
   return (
     <React.Fragment>
       {selectedQuery ? (
@@ -149,12 +176,18 @@ export function QuerySelector(props) {
 QuerySelector.propTypes = {
   onChange: PropTypes.func.isRequired,
   selectedQuery: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  type: PropTypes.oneOf(['select', 'default']),
   disabled: PropTypes.bool,
 };
 
 QuerySelector.defaultProps = {
   selectedQuery: null,
+  type: 'default',
   disabled: false,
 };
 
-export default QuerySelector;
+export default function init(ngModule) {
+  ngModule.component('querySelector', react2angular(QuerySelector));
+}
+
+init.init = true;
diff --git a/client/app/pages/alert/alert.html b/client/app/pages/alert/alert.html
index 61c8bc8ef7..95c191690b 100644
--- a/client/app/pages/alert/alert.html
+++ b/client/app/pages/alert/alert.html
@@ -9,16 +9,7 @@
         <form name="alertForm" class="form">
           <div class="form-group">
             <label>Query</label>
-            <ui-select ng-model="$ctrl.alert.query" reset-search-input="false" on-select="$ctrl.onQuerySelected($item)" ng-disabled="!$ctrl.canEdit">
-              <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"
-                                 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>
+            <query-selector type="'select'" selected-query="$ctrl.alert.query" on-change="$ctrl.onQuerySelected" disabled="!$ctrl.canEdit" />
           </div>
 
           <div class="form-group" ng-show="$ctrl.selectedQuery">
diff --git a/client/app/pages/alert/index.js b/client/app/pages/alert/index.js
index 8826f62b34..3ae8913e1e 100644
--- a/client/app/pages/alert/index.js
+++ b/client/app/pages/alert/index.js
@@ -11,6 +11,7 @@ function AlertCtrl($routeParams, $location, $sce, toastr, currentUser, Query, Ev
   this.trustAsHtml = html => $sce.trustAsHtml(html);
 
   this.onQuerySelected = (item) => {
+    this.alert.query = item;
     this.selectedQuery = new Query(item);
     this.selectedQuery.getQueryResultPromise().then((result) => {
       this.queryResult = result;

From 130049911086e3089aa5c69726a1ec59c4d023c3 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Wed, 27 Feb 2019 12:45:19 +0200
Subject: [PATCH 2/3] Added full option content

---
 client/app/assets/less/redash/tags-control.less |  4 ++++
 client/app/components/QuerySelector.jsx         | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/app/assets/less/redash/tags-control.less b/client/app/assets/less/redash/tags-control.less
index fabf788710..6698c4a5f7 100644
--- a/client/app/assets/less/redash/tags-control.less
+++ b/client/app/assets/less/redash/tags-control.less
@@ -9,6 +9,10 @@
   &.inline-tags-control {
     display: inline-block;
   }
+
+  &.disabled {
+    opacity: 0.4;
+  }
 }
 
 // This is for using .inline-tags-control in Angular which renders
diff --git a/client/app/components/QuerySelector.jsx b/client/app/components/QuerySelector.jsx
index 14151fbddc..dc7c2a2d65 100644
--- a/client/app/components/QuerySelector.jsx
+++ b/client/app/components/QuerySelector.jsx
@@ -147,9 +147,15 @@ export function QuerySelector(props) {
         filterOption={false}
         defaultActiveFirstOption={false}
       >
-        {searchResults && searchResults.map(q => (
-          <Option value={q.id} key={q.id}>{q.name}</Option>
-        ))}
+        {searchResults && searchResults.map((q) => {
+          const disabled = q.is_draft;
+          return (
+            <Option value={q.id} key={q.id} disabled={disabled}>
+              {q.name}{' '}
+              <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className={cx('inline-tags-control', { disabled })} />
+            </Option>
+          );
+        })}
       </Select>
     );
   }

From f4ebd5cbd4df9ce50390a5e04d42a25f804c016b Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Wed, 27 Feb 2019 12:50:50 +0200
Subject: [PATCH 3/3] Added $scope.$applyAsync() to change handler

---
 client/app/pages/alert/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/app/pages/alert/index.js b/client/app/pages/alert/index.js
index 3ae8913e1e..4020c39b4a 100644
--- a/client/app/pages/alert/index.js
+++ b/client/app/pages/alert/index.js
@@ -1,7 +1,7 @@
 import { template as templateBuilder } from 'lodash';
 import template from './alert.html';
 
-function AlertCtrl($routeParams, $location, $sce, toastr, currentUser, Query, Events, Alert) {
+function AlertCtrl($scope, $routeParams, $location, $sce, toastr, currentUser, Query, Events, Alert) {
   this.alertId = $routeParams.alertId;
 
   if (this.alertId === 'new') {
@@ -17,6 +17,7 @@ function AlertCtrl($routeParams, $location, $sce, toastr, currentUser, Query, Ev
       this.queryResult = result;
       this.alert.options.column = this.alert.options.column || result.getColumnNames()[0];
     });
+    $scope.$applyAsync();
   };
 
   if (this.alertId === 'new') {