Merge pull request elastic#13 from snide/kql/polish

Some design polish for kql autocomplete
Bargs · Mar 15, 2018 · 3e49dd0 · 3e49dd0
2 parents cb13efb + 36d03ed
commit 3e49dd0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/src/ui/public/kuery/suggestions/operator.js b/src/ui/public/kuery/suggestions/operator.js
@@ -22,13 +22,13 @@ const operators = {
     fieldTypes: ['number', 'date', 'ip']
   },
   ':*': {
-    description: '<span class="suggestionItem__callout">exists</span>'
+    description: '<span class="suggestionItem__callout">exists</span> in any form'
   },
 };
 
-function getDescription({ fieldName, operator }) {
+function getDescription({ operator }) {
   const { description } = operators[operator];
-  return `<p>Filter results where <span class="suggestionItem__callout">${fieldName}</span> ${description}</p>`;
+  return `<p>${description}</p>`;
 }
 
 export function getSuggestionsProvider({ indexPattern }) {
@@ -41,7 +41,7 @@ export function getSuggestionsProvider({ indexPattern }) {
     });
     const suggestions = matchingOperators.map(operator => {
       const text = operator + ' ';
-      const description = getDescription({ fieldName, operator });
+      const description = getDescription({ operator });
       return { type, text, description, start: end, end };
     });
     return suggestions;

diff --git a/src/ui/public/kuery/suggestions/value.js b/src/ui/public/kuery/suggestions/value.js
@@ -1,17 +1,9 @@
 import chrome from 'ui/chrome';
 import { escapeQuotes } from './escape_kql';
-import { escape } from 'lodash';
 
 const baseUrl = chrome.addBasePath('/api/kibana/suggestions/values');
 const type = 'value';
 
-function getDescription({ fieldName, value }) {
-  return `
-    <p>Find results where <span class="suggestionItem__callout">${escape(fieldName)}</span>
-    is <span class="suggestionItem__callout">${escape(value)}</span></p>
-  `;
-}
-
 export function getSuggestionsProvider({ $http, config, indexPattern }) {
   const shouldSuggestValues = config.get('filterEditor:suggestValues');
   return shouldSuggestValues ? getValueSuggestions : () => Promise.resolve([]);
@@ -40,7 +32,8 @@ export function getSuggestionsProvider({ $http, config, indexPattern }) {
         .filter(value => value.toLowerCase().includes(query.toLowerCase()))
         .map(value => {
           const text = `${value} `;
-          const description = getDescription({ fieldName, value });
+          // Values can get long, and they don't really need a description.
+          const description = '';
           return { type, text, description, start, end };
         });
     }

diff --git a/src/ui/public/query_bar/directive/suggestion.less b/src/ui/public/query_bar/directive/suggestion.less
@@ -38,6 +38,10 @@
     background-color: tint(@globalColorTeal, 90%);
     color: @globalColorTeal;
   }
+
+  .suggestionItem__text {
+    width: auto;
+  }
 }
 
 &.suggestionItem--operator {
@@ -49,8 +53,8 @@
 
 &.suggestionItem--conjunction {
   .suggestionItem__type {
-    background-color: tint(@globalColorLightGray, 15%);
-    color: @globalColorMediumGray;
+    background-color: tint(@globalColorPurple, 90%);
+    color: @globalColorPurple;
   }
 }
 
@@ -141,7 +145,7 @@
 
           .suggestionItem--conjunction {
             .suggestionItem__type {
-              background-color: @globalColorLightGray;
+              background-color: tint(@globalColorPurple, 80%);
             }
           }
         }

diff --git a/src/ui/public/styles/variables/colors.less b/src/ui/public/styles/variables/colors.less
@@ -16,6 +16,7 @@
 @globalColorWhite: #FFF;
 @globalColorTeal: #00A69B;
 @globalColorOrange: #E5830E;
+@globalColorPurple: #7800A6;
 
 //## Gray and brand colors for use across Bootstrap.