From 306da7b79373f8cc99f62da5a042536ef694965f Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Thu, 12 Jan 2017 19:39:32 -0500
Subject: [PATCH] Updated the search key to be a little more relevant

---
 .../smart-search/smart-search.block.less      | 47 +++++++++++--------
 .../smart-search/smart-search.partial.html    | 30 ++++++------
 2 files changed, 44 insertions(+), 33 deletions(-)

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 0b22331d5a..8ef22851b2 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
@@ -197,29 +197,11 @@
     border: 1px solid @login-notice-border;
     background-color: @login-notice-bg;
     color: @login-notice-text;
-}
-
-.SmartSearch-relations{
-    margin-top: 15px;
+    position: relative;
 }
 
 .SmartSearch-keyRow {
-    width: 33%;
-    flex: 1 1 auto;
-    flex-direction: column;
     margin-bottom: 15px;
-    padding-right: 50px;
-}
-// 100% rows in a modal
-.modal-body .SmartSearch-keyRow{
-    width: 100%;
-}
-// `.${list.name}List` class can be used to set add custom class overrides
-.groupsList .SmartSearch-keyRow, .hostsList .SmartSearch-keyRow, .PortalMode .SmartSearch-keyRow{
-    width: 100%;
-}
-.SmartSearch-keyRow:nth-child(3){
-    padding-right: 0px;
 }
 
 .SmartSearch-keyName {
@@ -232,3 +214,30 @@
 .SmartSearch-keyComparators {
     flex: 1 0 auto;
 }
+
+.SmartSearch-keyPane--exitHolder {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+.SmartSearch-keyPane--exit {
+    background-color: @login-notice-bg;
+}
+
+.SmartSearch-examples {
+    display: flex;
+}
+
+.SmartSearch-examples--title {
+    margin-right: 5px;
+}
+
+.SmartSearch-examples--search {
+    color: @default-err;
+    background-color: @default-bg;
+    border: 1px solid @default-border;
+    border-radius: 5px;
+    padding: 0px 5px;
+    margin-right: 5px;
+}
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 073cb6f8d1..04f5d8d6bf 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
@@ -33,25 +33,27 @@
     </div>
     <!-- hint key -->
     <div class="SmartSearch-keyPane row" ng-repeat="model in models" ng-show="showKeyPane">
-        <div class="SmartSearch-keyPane--exit">
-            <button class="Form-exit" ng-click="toggleKeyPane()">
+        <div class="SmartSearch-keyPane--exitHolder">
+            <button class="Form-exit SmartSearch-keyPane--exit" ng-click="toggleKeyPane()">
                 <i class="fa fa-times-circle"></i>
             </button>
         </div>
-        <div class="SmartSearch-keyRow" ng-repeat="(key,value) in model.base">
-            <div class="SmartSearch-keyName">
-                {{ key }}
-            </div>
-            <div class="SmartSearch-keyInfo">
-                <div>Type: {{ value.type }}</div>
-                <div>Description: {{value.help_text}}</div>
-                <div ng-if="value.choices">
-                    Enumerated: <span ng-repeat="choice in value.choices"> {{ choice[0] }} </span>
-                </div>
+        <div class="SmartSearch-keyRow SmartSearch-examples">
+            <div class="SmartSearch-examples--title">
+                <b>EXAMPLES:</b>
             </div>
+            <div class="SmartSearch-examples--search">name:foo</div>
+            <div class="SmartSearch-examples--search">organization.name:Default</div>
+            <div class="SmartSearch-examples--search">id:>10</div>
         </div>
-        <div class="SmartSearch-keyRow SmartSearch-relations">
-            <b>Searchable relationships:</b> <span ng-repeat="relation in model.related track by $index">{{ relation }}<span ng-if="$index !== Object.keys(model.related).length -1">, </span></span>
+        <div class="SmartSearch-keyRow">
+            <b>FIELDS:</b> <span ng-repeat="(key,value) in model.base">{{ key }}<span ng-if="!$last">, </span></span>
+        </div>
+        <div class="SmartSearch-keyRow">
+            <b>RELATED FIELDS:</b> <span ng-repeat="relation in model.related">{{ relation }}<span ng-if="!$last">, </span></span>
+        </div>
+        <div class="SmartSearch-keyRow">
+            <b>ADDITIONAL INFORMATION:</b> <span>For additional information on advanced search search syntax please see the Ansible Tower documentation.</span>
         </div>
     </div>
 </div>