QuerySelector in Alert page

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

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,36 @@ 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) => {
+          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>
+    );
+  }
+
   return (
     <React.Fragment>
       {selectedQuery ? (
@@ -149,12 +182,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;

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">

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') {
@@ -11,11 +11,13 @@ 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;
       this.alert.options.column = this.alert.options.column || result.getColumnNames()[0];
     });
+    $scope.$applyAsync();
   };
 
   if (this.alertId === 'new') {