Merge branch 'master' into dev/import-dashboard-url-generator-directly

.backportrc.json

@@ -25,7 +25,7 @@
   ],
   "targetPRLabels": ["backport"],
   "branchLabelMapping": {
-    "^v7.8.0$": "7.x",
+    "^v7.9.0$": "7.x",
     "^v(\\d+).(\\d+).\\d+$": "$1.$2"
   }
 }

docs/visualize/tsvb.asciidoc

@@ -122,3 +122,17 @@ Edit the source for the Markdown visualization.
 . To insert the mustache template variable into the editor, click the variable name.
 +
 The http://mustache.github.io/mustache.5.html[mustache syntax] uses the Handlebar.js processor, which is an extended version of the Mustache template language.
+
+[float]
+[[tsvb-style-markdown]]
+==== Style Markdown text
+
+Style your Markdown visualization using http://lesscss.org/features/[less syntax].
+
+. Select *Markdown*.
+
+. Select *Panel options*.
+
+. Enter styling rules in *Custom CSS* section
++
+Less in TSVB does not support custom plugins or inline JavaScript.

package.json

@@ -210,7 +210,7 @@
     "leaflet-responsive-popup": "0.6.4",
     "leaflet-vega": "^0.8.6",
     "leaflet.heat": "0.2.0",
-    "less": "^2.7.3",
+    "less": "npm:@elastic/less@2.7.3-kibana",
     "less-loader": "5.0.0",
     "lodash": "npm:@elastic/[email protected]",
     "lodash.clonedeep": "^4.5.0",

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/tabs/utils.ts

@@ -96,18 +96,21 @@ export function getTabs(
   tabs.push({
     name: getTitle('indexed', filteredCount, totalCount),
     id: TAB_INDEXED_FIELDS,
+    'data-test-subj': 'tab-indexedFields',
   });
 
   if (indexPatternListProvider.areScriptedFieldsEnabled(indexPattern)) {
     tabs.push({
       name: getTitle('scripted', filteredCount, totalCount),
       id: TAB_SCRIPTED_FIELDS,
+      'data-test-subj': 'tab-scriptedFields',
     });
   }
 
   tabs.push({
     name: getTitle('sourceFilters', filteredCount, totalCount),
     id: TAB_SOURCE_FILTERS,
+    'data-test-subj': 'tab-sourceFilters',
   });
 
   return tabs;

src/legacy/ui/public/new_platform/new_platform.test.ts

@@ -22,6 +22,7 @@ jest.mock('history');
 import { setRootControllerMock, historyMock } from './new_platform.test.mocks';
 import { legacyAppRegister, __reset__, __setup__, __start__ } from './new_platform';
 import { coreMock } from '../../../../core/public/mocks';
+import { AppMount } from '../../../../core/public';
 
 describe('ui/new_platform', () => {
   describe('legacyAppRegister', () => {
@@ -33,7 +34,7 @@ describe('ui/new_platform', () => {
 
     const registerApp = () => {
       const unmountMock = jest.fn();
-      const mountMock = jest.fn(() => unmountMock);
+      const mountMock = jest.fn<ReturnType<AppMount>, Parameters<AppMount>>(() => unmountMock);
       legacyAppRegister({
         id: 'test',
         title: 'Test',
@@ -62,13 +63,25 @@ describe('ui/new_platform', () => {
 
       controller(scopeMock, elementMock);
       expect(mountMock).toHaveBeenCalledWith({
-        element: elementMock[0],
+        element: expect.any(HTMLElement),
         appBasePath: '/test/base/path/app/test',
         onAppLeave: expect.any(Function),
         history: historyMock,
       });
     });
 
+    test('app is mounted in new div inside containing element', () => {
+      const { mountMock } = registerApp();
+      const controller = setRootControllerMock.mock.calls[0][1];
+      const scopeMock = { $on: jest.fn() };
+      const elementMock = [document.createElement('div')];
+
+      controller(scopeMock, elementMock);
+
+      const { element } = mountMock.mock.calls[0][0];
+      expect(element.parentElement).toEqual(elementMock[0]);
+    });
+
     test('controller calls deprecated context app.mount when invoked', () => {
       const unmountMock = jest.fn();
       // Two arguments changes how this is called.
@@ -84,7 +97,7 @@ describe('ui/new_platform', () => {
 
       controller(scopeMock, elementMock);
       expect(mountMock).toHaveBeenCalledWith(expect.any(Object), {
-        element: elementMock[0],
+        element: expect.any(HTMLElement),
         appBasePath: '/test/base/path/app/test',
         onAppLeave: expect.any(Function),
         history: historyMock,

src/legacy/ui/public/new_platform/new_platform.ts

@@ -176,7 +176,8 @@ export const legacyAppRegister = (app: App<any>) => {
   legacyAppRegistered = true;
 
   require('ui/chrome').setRootController(app.id, ($scope: IScope, $element: JQLite) => {
-    const element = $element[0];
+    const element = document.createElement('div');
+    $element[0].appendChild(element);
 
     // Root controller cannot return a Promise so use an internal async function and call it immediately
     (async () => {

src/plugins/discover/public/application/_discover.scss

@@ -38,17 +38,7 @@ discover-app {
 }
 
 .dscResultCount {
-  text-align: center;
   padding-top: $euiSizeXS;
-  padding-left: $euiSizeM;
-
-  .dscResultHits {
-    padding-left: $euiSizeXS;
-  }
-
-  > .kuiLink {
-    padding-left: $euiSizeM;
-  }
 }
 
 .dscTimechart__header {

src/plugins/discover/public/application/angular/discover.html

@@ -89,24 +89,12 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
               </span>
             </button>
 
-            <div class="dscResultCount">
-              <strong data-test-subj="discoverQueryHits">{{(hits || 0) | number:0}}</strong>
-              <span
-                class="dscResultHits"
-                i18n-id="discover.hitsPluralTitle"
-                i18n-default-message="{hits, plural, one {hit} other {hits}}"
-                i18n-values="{ hits }"
-              ></span>
-              <button
-                ng-if="opts.savedSearch.id"
-                class="kuiLink"
-                type="button"
-                id="reload_saved_search"
-                ng-click="resetQuery()"
-              >
-                {{::'discover.reloadSavedSearchButton' | i18n: {defaultMessage: 'Reset search'} }}
-              </button>
-            </div>
+            <hits-counter
+              hits="hits || 0"
+              show-reset-button="opts.savedSearch.id"
+              on-reset-query="resetQuery"
+            >
+            </hits-counter>
 
             <section
               aria-label="{{::'discover.histogramOfFoundDocumentsAriaLabel' | i18n: {defaultMessage: 'Histogram of found documents'} }}"

src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss

@@ -1,3 +1,6 @@
+.kbnDocTableHeader {
+  white-space: nowrap;
+}
 .kbnDocTableHeader button {
   margin-left: $euiSizeXS;
 }

src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ReactWrapper } from 'enzyme';
+import { HitsCounter, HitsCounterProps } from './hits_counter';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+describe('hits counter', function() {
+  let props: HitsCounterProps;
+  let component: ReactWrapper<HitsCounterProps>;
+
+  beforeAll(() => {
+    props = {
+      onResetQuery: jest.fn(),
+      showResetButton: true,
+      hits: 2,
+    };
+  });
+
+  it('HitsCounter renders a button by providing the showResetButton property', () => {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    expect(findTestSubject(component, 'resetSavedSearch').length).toBe(1);
+  });
+
+  it('HitsCounter not renders a button when the showResetButton property is false', () => {
+    component = mountWithIntl(
+      <HitsCounter hits={2} showResetButton={false} onResetQuery={jest.fn()} />
+    );
+    expect(findTestSubject(component, 'resetSavedSearch').length).toBe(0);
+  });
+
+  it('expect to render the number of hits', function() {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    const hits = findTestSubject(component, 'discoverQueryHits');
+    expect(hits.text()).toBe('2');
+  });
+
+  it('expect to render 1,899 hits if 1899 hits given', function() {
+    component = mountWithIntl(
+      <HitsCounter hits={1899} showResetButton={false} onResetQuery={jest.fn()} />
+    );
+    const hits = findTestSubject(component, 'discoverQueryHits');
+    expect(hits.text()).toBe('1,899');
+  });
+
+  it('should reset query', function() {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    findTestSubject(component, 'resetSavedSearch').simulate('click');
+    expect(props.onResetQuery).toHaveBeenCalled();
+  });
+});

src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx

@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { formatNumWithCommas } from '../../helpers';
+
+export interface HitsCounterProps {
+  /**
+   * the number of query hits
+   */
+  hits: number;
+  /**
+   * displays the reset button
+   */
+  showResetButton: boolean;
+  /**
+   * resets the query
+   */
+  onResetQuery: () => void;
+}
+
+export function HitsCounter({ hits, showResetButton, onResetQuery }: HitsCounterProps) {
+  return (
+    <I18nProvider>
+      <EuiFlexGroup
+        gutterSize="s"
+        className="dscResultCount"
+        responsive={false}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            <strong data-test-subj="discoverQueryHits">{formatNumWithCommas(hits)}</strong>{' '}
+            <FormattedMessage
+              id="discover.hitsPluralTitle"
+              defaultMessage="{hits, plural, one {hit} other {hits}}"
+              values={{
+                hits,
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+        {showResetButton && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="refresh"
+              data-test-subj="resetSavedSearch"
+              onClick={onResetQuery}
+              size="s"
+              aria-label={i18n.translate('discover.reloadSavedSearchButton', {
+                defaultMessage: 'Reset search',
+              })}
+            >
+              <FormattedMessage
+                id="discover.reloadSavedSearchButton"
+                defaultMessage="Reset search"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </I18nProvider>
+  );
+}

src/plugins/discover/public/application/components/hits_counter/hits_counter_directive.ts

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { HitsCounter } from './hits_counter';
+
+export function createHitsCounterDirective(reactDirective: any) {
+  return reactDirective(HitsCounter, [
+    ['hits', { watchDepth: 'reference' }],
+    ['showResetButton', { watchDepth: 'reference' }],
+    ['onResetQuery', { watchDepth: 'reference' }],
+  ]);
+}

src/plugins/discover/public/application/components/hits_counter/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { HitsCounter } from './hits_counter';
+export { createHitsCounterDirective } from './hits_counter_directive';