Merge pull request #4705 from mabashian/4523-search-key

Updated the search key to be a little more relevant

awx/ui/client/src/shared/smart-search/smart-search.block.less

@@ -186,8 +186,6 @@
 .SmartSearch-keyPane {
     max-height: 200px;
     overflow: auto;
-    display: flex;
-    flex-wrap: wrap;
     margin: 0px 0px 20px 0px;
     font-size: 12px;
     width: 100%;
@@ -197,29 +195,11 @@
     border: 1px solid @login-notice-border;
     background-color: @login-notice-bg;
     color: @login-notice-text;
-}
+    position: relative;
-
-.SmartSearch-relations{
-    margin-top: 15px;
 }
 
 .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 +212,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;
+}

awx/ui/client/src/shared/smart-search/smart-search.partial.html

@@ -33,25 +33,29 @@
     </div>
     <!-- hint key -->
     <div class="SmartSearch-keyPane row" ng-repeat="model in models" ng-show="showKeyPane">
-        <div class="SmartSearch-keyPane--exit">
+        <div class="SmartSearch-keyPane--exitHolder">
-            <button class="Form-exit" ng-click="toggleKeyPane()">
+            <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-keyRow">
-            <div class="SmartSearch-keyName">
+            <div class="SmartSearch-examples">
-                {{ key }}
+                <div class="SmartSearch-examples--title">
-            </div>
+                    <b>EXAMPLES:</b>
-            <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-examples--search">name:foo</div>
+                <div class="SmartSearch-examples--search">organization.name:Default</div>
+                <div class="SmartSearch-examples--search">id:>10</div>
             </div>
         </div>
-        <div class="SmartSearch-keyRow SmartSearch-relations">
+        <div class="SmartSearch-keyRow">
-            <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>
+            <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>