Add documentation link to query bar when Kuery is selected (elastic#1…

…3300) (elastic#13349) * Add doc link to kuery bar
cjcenizal · Aug 4, 2017 · b1f6ddd · b1f6ddd
1 parent b187ef9
commit b1f6ddd
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/src/ui/public/documentation_links/documentation_links.js b/src/ui/public/documentation_links/documentation_links.js
@@ -25,6 +25,7 @@ export const documentationLinks = {
     luceneQuerySyntax:
       `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/query-dsl-query-string-query.html#query-string-syntax`,
     queryDsl: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/query-dsl.html`,
+    kueryQuerySyntax: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/kuery-query.html`,
   },
   date: {
     dateMath: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/common-options.html#date-math`

diff --git a/src/ui/public/query_bar/directive/__tests__/query_bar.js b/src/ui/public/query_bar/directive/__tests__/query_bar.js
@@ -120,20 +120,6 @@ describe('queryBar directive', function () {
       expectDeepEqual($parentScope.submitHandler.getCall(0).args[0], { query: 'bar', language: 'lucene' });
     });
 
-    it('should customize the input element for each language', function () {
-      init({ query: 'foo', language: 'lucene' }, 'discover', true);
-      const luceneInput = $elem.find('.kuiLocalSearchInput');
-      expect(luceneInput.attr('placeholder')).to.be('Search... (e.g. status:200 AND extension:PHP)');
-
-      const helpLink = $elem.find('.kuiLocalSearchAssistedInput__assistance .kuiLink');
-      expect(helpLink.text().trim()).to.be('Uses lucene query syntax');
-
-      $parentScope.query = { query: 'foo', language: 'kuery' };
-      $parentScope.$digest();
-      const kueryInput = $elem.find('.kuiLocalSearchInput');
-      expect(kueryInput.attr('placeholder')).to.be('Search with kuery...');
-    });
-
   });
 
   describe('typeahead key', function () {

diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html
@@ -15,7 +15,7 @@
           ng-model="queryBar.localQuery.query"
           placeholder="Search... (e.g. status:200 AND extension:PHP)"
           aria-label="Search input"
-          aria-describedby="discover-lucene-syntax-hint"
+          aria-describedby="discoverLuceneSyntaxHint"
           type="text"
           class="kuiLocalSearchInput kuiLocalSearchInput--lucene"
           ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
@@ -24,7 +24,7 @@
         <div class="kuiLocalSearchAssistedInput__assistance">
           <p class="kuiText">
             <a
-              id="discover-lucene-syntax-hint"
+              id="discoverLuceneSyntaxHint"
               class="kuiLink"
               ng-href="{{queryBar.queryDocLinks.luceneQuerySyntax}}"
               target="_blank"
@@ -36,18 +36,32 @@
       </div>
 
       <!-- kuery input -->
-      <input
-        ng-if="queryBar.localQuery.language === 'kuery'"
-        ng-model="queryBar.localQuery.query"
-        input-focus
-        kbn-typeahead-input
-        placeholder="Search with kuery..."
-        aria-label="Search input"
-        type="text"
-        class="kuiLocalSearchInput"
-        ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
-        data-test-subj="queryInput"
-      >
+      <div class="kuiLocalSearchAssistedInput" ng-if="queryBar.localQuery.language === 'kuery'">
+        <input
+          ng-model="queryBar.localQuery.query"
+          input-focus
+          kbn-typeahead-input
+          placeholder="Search... (e.g. status:200 AND extension:PHP)"
+          aria-label="Search input"
+          aria-describedby="discoverKuerySyntaxHint"
+          type="text"
+          class="kuiLocalSearchInput kuiLocalSearchInput--kuery"
+          ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
+          data-test-subj="queryInput"
+        >
+        <div class="kuiLocalSearchAssistedInput__assistance">
+          <p class="kuiText">
+            <a
+              id="discoverKuerySyntaxHint"
+              class="kuiLink"
+              ng-href="{{queryBar.queryDocLinks.kueryQuerySyntax}}"
+              target="_blank"
+            >
+              Uses kuery syntax
+            </a>
+          </p>
+        </div>
+      </div>
 
       <select
         class="kuiLocalSearchSelect"

diff --git a/src/ui/public/styles/local_search.less b/src/ui/public/styles/local_search.less
@@ -6,3 +6,7 @@
 .kuiLocalSearchInput--lucene {
   padding-right: 13em; /* 1 */
 }
+
+.kuiLocalSearchInput--kuery {
+  padding-right: 10em; /* 1 */
+}