From 52f335edd5b6c6c8c47aeac1d1d40139490f566d Mon Sep 17 00:00:00 2001
From: Arik Fraimovich <arik@arikfr.com>
Date: Sun, 26 Jul 2015 12:44:11 +0300
Subject: [PATCH] Cleanup: remove select2 and use ui-select.

---
 rd_ui/app/index.html                        |  3 ---
 rd_ui/app/scripts/app.js                    |  7 ++++---
 rd_ui/app/scripts/visualizations/base.js    |  4 ----
 rd_ui/app/styles/redash.css                 | 17 +++++++++++++++++
 rd_ui/app/views/alerts/edit.html            |  2 +-
 rd_ui/app/views/visualizations/filters.html | 21 +++++++++++++++------
 rd_ui/bower.json                            |  1 -
 7 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/rd_ui/app/index.html b/rd_ui/app/index.html
index 2925c70aab..57ec53f70f 100644
--- a/rd_ui/app/index.html
+++ b/rd_ui/app/index.html
@@ -14,7 +14,6 @@
     <link rel="stylesheet" href="/bower_components/gridster/dist/jquery.gridster.css">
     <link rel="stylesheet" href="/bower_components/pivottable/dist/pivot.css">
     <link rel="stylesheet" href="/bower_components/cornelius/src/cornelius.css">
-    <link rel="stylesheet" href="/bower_components/select2/select2.css">
     <link rel="stylesheet" href="/bower_components/angular-ui-select/dist/select.css">
     <link rel="stylesheet" href="/bower_components/pace/themes/pace-theme-minimal.css">
     <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css">
@@ -131,8 +130,6 @@
 <script src="/bower_components/cornelius/src/cornelius.js"></script>
 <script src="/bower_components/mousetrap/mousetrap.js"></script>
 <script src="/bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.js"></script>
-<script src="/bower_components/select2/select2.js"></script>
-<script src="/bower_components/angular-ui-select2/src/select2.js"></script>
 <script src="/bower_components/angular-ui-select/dist/select.js"></script>
 <script src="/bower_components/underscore.string/lib/underscore.string.js"></script>
 <script src="/bower_components/marked/lib/marked.js"></script>
diff --git a/rd_ui/app/scripts/app.js b/rd_ui/app/scripts/app.js
index d25421c776..6586698e6b 100644
--- a/rd_ui/app/scripts/app.js
+++ b/rd_ui/app/scripts/app.js
@@ -7,7 +7,6 @@ angular.module('redash', [
     'redash.renderers',
     'redash.visualization',
     'highchart',
-    'ui.select2',
     'angular-growl',
     'angularMoment',
     'ui.bootstrap',
@@ -16,8 +15,8 @@ angular.module('redash', [
     'ngRoute',
     'ui.select',
     'naif.base64'
-  ]).config(['$routeProvider', '$locationProvider', '$compileProvider', 'growlProvider',
-    function ($routeProvider, $locationProvider, $compileProvider, growlProvider) {
+  ]).config(['$routeProvider', '$locationProvider', '$compileProvider', 'growlProvider', 'uiSelectConfig',
+    function ($routeProvider, $locationProvider, $compileProvider, growlProvider, uiSelectConfig) {
       if (featureFlags.clientSideMetrics) {
         Bucky.setOptions({
           host: '/api/metrics'
@@ -32,6 +31,8 @@ angular.module('redash', [
         return query.$promise;
       };
 
+      uiSelectConfig.theme = "bootstrap";
+
       $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http|data):/);
       $locationProvider.html5Mode(true);
       growlProvider.globalTimeToLive(2000);
diff --git a/rd_ui/app/scripts/visualizations/base.js b/rd_ui/app/scripts/visualizations/base.js
index 3177409c52..1aaf975b6b 100644
--- a/rd_ui/app/scripts/visualizations/base.js
+++ b/rd_ui/app/scripts/visualizations/base.js
@@ -84,10 +84,6 @@
       template: '<filters></filters>\n' + Visualization.renderVisualizationsTemplate,
       replace: false,
       link: function (scope) {
-        scope.select2Options = {
-          width: '50%'
-        };
-
         scope.$watch('queryResult && queryResult.getFilters()', function (filters) {
           if (filters) {
             scope.filters = filters;
diff --git a/rd_ui/app/styles/redash.css b/rd_ui/app/styles/redash.css
index 43f0ba00ed..f96480e7c9 100644
--- a/rd_ui/app/styles/redash.css
+++ b/rd_ui/app/styles/redash.css
@@ -137,6 +137,23 @@ a.navbar-brand img {
 
 }
 
+/* Visualization Filters */
+
+.filters-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.filter {
+    width: 33%;
+    padding-left: 5px;
+    padding-bottom: 5px;
+}
+
+.filter > div {
+    width: 100%;
+}
+
 /* Gridster */
 
 .gridster ul {
diff --git a/rd_ui/app/views/alerts/edit.html b/rd_ui/app/views/alerts/edit.html
index b016328327..2153db00f0 100644
--- a/rd_ui/app/views/alerts/edit.html
+++ b/rd_ui/app/views/alerts/edit.html
@@ -8,7 +8,7 @@
             <form name="alertForm" ng-submit="saveChanges()" class="form">
                 <div class="form-group">
                     <label>Query</label>
-                    <ui-select ng-model="alert.query" theme="bootstrap" reset-search-input="false" on-select="onQuerySelected($item)">
+                    <ui-select ng-model="alert.query" reset-search-input="false" on-select="onQuerySelected($item)">
                         <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
                         <ui-select-choices repeat="q in queries"
                                            refresh="searchQueries($select.search)"
diff --git a/rd_ui/app/views/visualizations/filters.html b/rd_ui/app/views/visualizations/filters.html
index 9b32263128..a53644e6c0 100644
--- a/rd_ui/app/views/visualizations/filters.html
+++ b/rd_ui/app/views/visualizations/filters.html
@@ -1,8 +1,17 @@
-<div class="well well-sm" ng-show="filters">
-    <div ng-repeat="filter in filters">
-        {{filter.friendlyName}}:
-        <select ui-select2='select2Options' ng-model="filter.current" ng-multiple="{{filter.multiple}}">
-            <option ng-repeat="value in filter.values" value="{{value}}">{{value}}</option>
-        </select>
+<div class="well well-sm filters-container" ng-show="filters">
+    <div class="filter" ng-repeat="filter in filters">
+        <ui-select ng-model="filter.current" ng-if="!filter.multiple">
+           <ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{filter.friendlyName}}: {{$select.selected}}</ui-select-match>
+           <ui-select-choices repeat="value in filter.values | filter: $select.search track by $index">
+               {{value}}
+           </ui-select-choices>
+        </ui-select>
+
+        <ui-select ng-model="filter.current" multiple ng-if="filter.multiple">
+            <ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{filter.friendlyName}}: {{$item}}</ui-select-match>
+            <ui-select-choices repeat="value in filter.values | filter: $select.search track by $index">
+                {{value}}
+            </ui-select-choices>
+        </ui-select>
     </div>
 </div>
\ No newline at end of file
diff --git a/rd_ui/bower.json b/rd_ui/bower.json
index 92a8a5efc4..ac2308e9b5 100644
--- a/rd_ui/bower.json
+++ b/rd_ui/bower.json
@@ -19,7 +19,6 @@
     "cornelius": "https://github.com/restorando/cornelius.git",
     "gridster": "0.2.0",
     "mousetrap": "~1.4.6",
-    "angular-ui-select2": "~0.0.5",
     "jquery-ui": "~1.10.4",
     "underscore.string": "~2.3.3",
     "marked": "~0.3.2",