From ba075ce5dd3b0bb10dfbd8633d388a8288c90303 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 30 Jul 2018 10:22:36 -0400
Subject: [PATCH] Disable search submit until a search string is present

---
 .../features/output/search.partial.html       |  2 +-
 .../smart-search/smart-search.block.less      |  7 +-
 .../smart-search/smart-search.controller.js   | 68 ++++++++++---------
 .../smart-search/smart-search.partial.html    |  2 +-
 4 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/awx/ui/client/features/output/search.partial.html b/awx/ui/client/features/output/search.partial.html
index ea91fc3de6..613f768f91 100644
--- a/awx/ui/client/features/output/search.partial.html
+++ b/awx/ui/client/features/output/search.partial.html
@@ -13,7 +13,7 @@
         <span class="input-group-btn">
             <button class="btn at-ButtonHollow--default at-Input-button"
                 ng-click="vm.submitSearch()"
-                ng-disabled="vm.disabled"
+                ng-disabled="vm.disabled || !vm.value || vm.value === ''"
                 type="button">
                 <i class="fa fa-search"></i>
             </button>
diff --git a/awx/ui/client/src/shared/smart-search/smart-search.block.less b/awx/ui/client/src/shared/smart-search/smart-search.block.less
index a27dd3d1f4..41f35eb37b 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.block.less
+++ b/awx/ui/client/src/shared/smart-search/smart-search.block.less
@@ -76,10 +76,15 @@
     z-index: 1;
 }
 
-.SmartSearch-searchButton:hover {
+.SmartSearch-searchButton:not(.SmartSearch-searchButton--disabled):hover {
     background-color: @default-tertiary-bg;
 }
 
+.SmartSearch-searchButton--disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+}
+
 .SmartSearch-flexContainer {
     display: flex;
     width: 100%;
diff --git a/awx/ui/client/src/shared/smart-search/smart-search.controller.js b/awx/ui/client/src/shared/smart-search/smart-search.controller.js
index 8c2523c81d..90eef5e23b 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.controller.js
+++ b/awx/ui/client/src/shared/smart-search/smart-search.controller.js
@@ -174,43 +174,45 @@ function SmartSearchController (
     };
 
     $scope.addTerms = terms => {
-        const { singleSearchParam } = $scope;
-        const unmodifiedQueryset = _.clone(queryset);
+        if (terms && terms !== "") {
+            const { singleSearchParam } = $scope;
+            const unmodifiedQueryset = _.clone(queryset);
 
-        const searchInputQueryset = qs.getSearchInputQueryset(terms, isFilterableBaseField, isRelatedField, isAnsibleFactField, singleSearchParam);
-        queryset = qs.mergeQueryset(queryset, searchInputQueryset, singleSearchParam);
+            const searchInputQueryset = qs.getSearchInputQueryset(terms, isFilterableBaseField, isRelatedField, isAnsibleFactField, singleSearchParam);
+            queryset = qs.mergeQueryset(queryset, searchInputQueryset, singleSearchParam);
 
-        // Go back to the first page after a new search
-        delete queryset.page;
+            // Go back to the first page after a new search
+            delete queryset.page;
 
-        // https://ui-router.github.io/docs/latest/interfaces/params.paramdeclaration.html#dynamic
-        // This transition will not reload controllers/resolves/views but will register new
-        // $stateParams[searchKey] terms.
-        if (!$scope.querySet) {
-            transitionSuccessListener();
-            $state.go('.', { [searchKey]: queryset })
-                .then(() => {
-                    // same as above in $scope.remove.  For some reason deleting the page
-                    // from the queryset works for all lists except lists in modals.
-                    delete $stateParams[searchKey].page;
-                    listenForTransitionSuccess();
-                });
+            // https://ui-router.github.io/docs/latest/interfaces/params.paramdeclaration.html#dynamic
+            // This transition will not reload controllers/resolves/views but will register new
+            // $stateParams[searchKey] terms.
+            if (!$scope.querySet) {
+                transitionSuccessListener();
+                $state.go('.', { [searchKey]: queryset })
+                    .then(() => {
+                        // same as above in $scope.remove.  For some reason deleting the page
+                        // from the queryset works for all lists except lists in modals.
+                        delete $stateParams[searchKey].page;
+                        listenForTransitionSuccess();
+                    });
+            }
+
+            qs.search(path, queryset)
+                .then(({ data }) => {
+                    if ($scope.querySet) {
+                        $scope.querySet = queryset;
+                    }
+                    $scope.dataset = data;
+                    $scope.collection = data.results;
+                    $scope.$emit('updateDataset', data);
+                })
+                .catch(() => revertSearch(unmodifiedQueryset));
+
+            $scope.searchTerm = null;
+
+            generateSearchTags();
         }
-
-        qs.search(path, queryset)
-            .then(({ data }) => {
-                if ($scope.querySet) {
-                    $scope.querySet = queryset;
-                }
-                $scope.dataset = data;
-                $scope.collection = data.results;
-                $scope.$emit('updateDataset', data);
-            })
-            .catch(() => revertSearch(unmodifiedQueryset));
-
-        $scope.searchTerm = null;
-
-        generateSearchTags();
     };
     // remove tag, merge new queryset, $state.go
     $scope.removeTerm = index => {
diff --git a/awx/ui/client/src/shared/smart-search/smart-search.partial.html b/awx/ui/client/src/shared/smart-search/smart-search.partial.html
index 25e303688d..cc85dd8f30 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.partial.html
+++ b/awx/ui/client/src/shared/smart-search/smart-search.partial.html
@@ -7,7 +7,7 @@
                 <input class="SmartSearch-input" ng-model="searchTerm" placeholder="{{searchPlaceholder}}"
                 ng-disabled="disableSearch">
             </form>
-            <div type="submit" class="SmartSearch-searchButton" ng-disabled="!searchTerm" ng-click="addTerms(searchTerm)">
+            <div type="submit" class="SmartSearch-searchButton" ng-class="{'SmartSearch-searchButton--disabled': !searchTerm || searchTerm === ''}" ng-click="addTerms(searchTerm)">
                 <i class="fa fa-search"></i>
             </div>
         </div>