Merge branch 'master' into prevent-public-import

elastic · May 22, 2020 · dbd0641 · dbd0641
2 parents fafa902 + 875d698
commit dbd0641
Show file tree

Hide file tree

Showing 44 changed files with 1,932 additions and 307 deletions.
diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js
@@ -48,9 +48,16 @@ export const ElasticCharts = require('@elastic/charts');
 export const ElasticEui = require('@elastic/eui');
 export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
 export const ElasticEuiLibServicesFormat = require('@elastic/eui/lib/services/format');
-export const ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
-export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
 export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');
+export let ElasticEuiLightTheme;
+export let ElasticEuiDarkTheme;
+if (window.__kbnThemeVersion__ === 'v7') {
+  ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
+  ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
+} else {
+  ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_amsterdam_light.json');
+  ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
+}
 
 // massive deps that we should really get rid of or reduce in size substantially
 export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');
diff --git a/packages/kbn-ui-shared-deps/index.d.ts b/packages/kbn-ui-shared-deps/index.d.ts
@@ -42,11 +42,21 @@ export const baseCssDistFilename: string;
  */
 export const darkCssDistFilename: string;
 
+/**
+ * Filename of the dark-theme css file in the distributable directory
+ */
+export const darkV8CssDistFilename: string;
+
 /**
  * Filename of the light-theme css file in the distributable directory
  */
 export const lightCssDistFilename: string;
 
+/**
+ * Filename of the light-theme css file in the distributable directory
+ */
+export const lightV8CssDistFilename: string;
+
 /**
  * Externals mapping inteded to be used in a webpack config
  */

diff --git a/packages/kbn-ui-shared-deps/index.js b/packages/kbn-ui-shared-deps/index.js
@@ -23,8 +23,10 @@ exports.distDir = Path.resolve(__dirname, 'target');
 exports.jsDepFilenames = ['kbn-ui-shared-deps.@elastic.js'];
 exports.jsFilename = 'kbn-ui-shared-deps.js';
 exports.baseCssDistFilename = 'kbn-ui-shared-deps.css';
-exports.lightCssDistFilename = 'kbn-ui-shared-deps.light.css';
-exports.darkCssDistFilename = 'kbn-ui-shared-deps.dark.css';
+exports.lightCssDistFilename = 'kbn-ui-shared-deps.v7.light.css';
+exports.lightV8CssDistFilename = 'kbn-ui-shared-deps.v8.light.css';
+exports.darkCssDistFilename = 'kbn-ui-shared-deps.v7.dark.css';
+exports.darkV8CssDistFilename = 'kbn-ui-shared-deps.v8.dark.css';
 exports.externals = {
   // stateful deps
   angular: '__kbnSharedDeps__.Angular',

diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "node scripts/build",
     "kbn:bootstrap": "node scripts/build --dev",
-    "kbn:watch": "node scripts/build --watch"
+    "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
     "@elastic/charts": "19.2.0",

diff --git a/packages/kbn-ui-shared-deps/webpack.config.js b/packages/kbn-ui-shared-deps/webpack.config.js
@@ -32,14 +32,22 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
   mode: dev ? 'development' : 'production',
   entry: {
     'kbn-ui-shared-deps': './entry.js',
-    'kbn-ui-shared-deps.dark': [
+    'kbn-ui-shared-deps.v7.dark': [
       '@elastic/eui/dist/eui_theme_dark.css',
       '@elastic/charts/dist/theme_only_dark.css',
     ],
-    'kbn-ui-shared-deps.light': [
+    'kbn-ui-shared-deps.v7.light': [
       '@elastic/eui/dist/eui_theme_light.css',
       '@elastic/charts/dist/theme_only_light.css',
     ],
+    'kbn-ui-shared-deps.v8.dark': [
+      '@elastic/eui/dist/eui_theme_amsterdam_dark.css',
+      '@elastic/charts/dist/theme_only_dark.css',
+    ],
+    'kbn-ui-shared-deps.v8.light': [
+      '@elastic/eui/dist/eui_theme_amsterdam_light.css',
+      '@elastic/charts/dist/theme_only_light.css',
+    ],
   },
   context: __dirname,
   devtool: dev ? '#cheap-source-map' : false,

diff --git a/src/cli/serve/serve.js b/src/cli/serve/serve.js
@@ -254,6 +254,7 @@ export default function(program) {
         basePath: opts.runExamples ? false : !!opts.basePath,
         optimize: !!opts.optimize,
         oss: !!opts.oss,
+        cache: !!opts.cache,
       },
       features: {
         isClusterModeSupported: CAN_CLUSTER,

diff --git a/src/legacy/core_plugins/kibana/server/ui_setting_defaults.js b/src/legacy/core_plugins/kibana/server/ui_setting_defaults.js
@@ -810,6 +810,18 @@ export function getUiSettingDefaults() {
       }),
       requiresPageReload: true,
     },
+    'theme:version': {
+      name: i18n.translate('kbn.advancedSettings.themeVersionTitle', {
+        defaultMessage: 'Theme version',
+      }),
+      value: 'v7',
+      type: 'select',
+      options: ['v7', 'v8 (beta)'],
+      description: i18n.translate('kbn.advancedSettings.themeVersionText', {
+        defaultMessage: `Switch between the theme used for the current and next version of Kibana. A page refresh is required for the setting to be applied.`,
+      }),
+      requiresPageReload: true,
+    },
     'filters:pinnedByDefault': {
       name: i18n.translate('kbn.advancedSettings.pinFiltersTitle', {
         defaultMessage: 'Pin filters by default',

diff --git a/src/legacy/ui/ui_render/bootstrap/template.js.hbs b/src/legacy/ui/ui_render/bootstrap/template.js.hbs
@@ -1,6 +1,7 @@
 var kbnCsp = JSON.parse(document.querySelector('kbn-csp').getAttribute('data'));
 window.__kbnStrictCsp__ = kbnCsp.strictCsp;
 window.__kbnDarkMode__ = {{darkMode}};
+window.__kbnThemeVersion__ = "{{themeVersion}}";
 window.__kbnPublicPath__ = {{publicPathMap}};
 
 if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {

diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js
@@ -96,6 +96,11 @@ export function uiRenderMixin(kbnServer, server, config) {
             ? await uiSettings.get('theme:darkMode')
             : false;
 
+        const themeVersion =
+          !authEnabled || request.auth.isAuthenticated
+            ? await uiSettings.get('theme:version')
+            : 'v7';
+
         const buildHash = server.newPlatform.env.packageInfo.buildNum;
         const basePath = config.get('server.basePath');
 
@@ -114,12 +119,16 @@ export function uiRenderMixin(kbnServer, server, config) {
           `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.baseCssDistFilename}`,
           ...(darkMode
             ? [
-                `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkCssDistFilename}`,
+                themeVersion === 'v7'
+                  ? `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkCssDistFilename}`
+                  : `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkV8CssDistFilename}`,
                 `${basePath}/node_modules/@kbn/ui-framework/dist/kui_dark.css`,
                 `${regularBundlePath}/dark_theme.style.css`,
               ]
             : [
-                `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`,
+                themeVersion === 'v7'
+                  ? `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`
+                  : `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightV8CssDistFilename}`,
                 `${basePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
                 `${regularBundlePath}/light_theme.style.css`,
               ]),
@@ -186,6 +195,7 @@ export function uiRenderMixin(kbnServer, server, config) {
         const bootstrap = new AppBootstrap({
           templateData: {
             darkMode,
+            themeVersion,
             jsDependencyPaths,
             styleSheetPaths,
             publicPathMap,

diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.js b/x-pack/plugins/canvas/public/components/page_manager/page_manager.js
@@ -219,7 +219,10 @@ export class PageManager extends React.PureComponent {
                 content="Add a new page to this workpad"
                 position="left"
               >
-                <button onClick={addPage} className="canvasPageManager__addPage">
+                <button
+                  onClick={addPage}
+                  className="canvasPageManager__addPage kbn-resetFocusState"
+                >
                   <EuiIcon color="ghost" type="plusInCircle" size="l" />
                 </button>
               </EuiToolTip>

diff --git a/x-pack/plugins/siem/cypress/integration/signal_detection_rules_custom.spec.ts b/x-pack/plugins/siem/cypress/integration/signal_detection_rules_custom.spec.ts
@@ -195,7 +195,7 @@ describe('Signal detection rules, custom', () => {
     cy.get(DEFINITION_STEP)
       .eq(DEFINITION_TIMELINE)
       .invoke('text')
-      .should('eql', 'Default blank timeline');
+      .should('eql', 'None');
 
     cy.get(SCHEDULE_STEP)
       .eq(SCHEDULE_RUNS)

diff --git a/x-pack/plugins/siem/cypress/integration/signal_detection_rules_ml.spec.ts b/x-pack/plugins/siem/cypress/integration/signal_detection_rules_ml.spec.ts
@@ -183,7 +183,7 @@ describe('Signal detection rules, machine learning', () => {
     cy.get(DEFINITION_STEP)
       .eq(DEFINITION_TIMELINE)
       .invoke('text')
-      .should('eql', 'Default blank timeline');
+      .should('eql', 'None');
 
     cy.get(SCHEDULE_STEP)
       .eq(SCHEDULE_RUNS)

diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/schema.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/schema.tsx
@@ -168,8 +168,7 @@ export const schema: FormSchema = {
     helpText: i18n.translate(
       'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTimelineTemplateHelpText',
       {
-        defaultMessage:
-          'Select an existing timeline to use as a template when investigating generated signals.',
+        defaultMessage: 'Select which timeline to use when investigating generated signals.',
       }
     ),
   },

diff --git a/...gins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx b/...gins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
@@ -15,6 +15,7 @@ import { TestProviders } from '../../mock';
 import { createKibanaCoreStartMock } from '../../mock/kibana_core';
 import { FilterManager } from '../../../../../../../src/plugins/data/public';
 import { TimelineContext } from '../../../timelines/components/timeline/timeline_context';
+import { useAddToTimeline } from '../../hooks/use_add_to_timeline';
 
 import { DraggableWrapperHoverContent } from './draggable_wrapper_hover_content';
 
@@ -27,11 +28,18 @@ jest.mock('uuid', () => {
   };
 });
 
+jest.mock('../../hooks/use_add_to_timeline');
+
 const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
 const field = 'process.name';
 const value = 'nice';
 
 describe('DraggableWrapperHoverContent', () => {
+  beforeAll(() => {
+    // our mock implementation of the useAddToTimeline hook returns a mock startDragToTimeline function:
+    (useAddToTimeline as jest.Mock).mockReturnValue(jest.fn());
+  });
+
   // Suppress warnings about "react-beautiful-dnd"
   /* eslint-disable no-console */
   const originalError = console.error;
@@ -329,6 +337,75 @@ describe('DraggableWrapperHoverContent', () => {
     });
   });
 
+  describe('Add to timeline', () => {
+    const aggregatableStringField = 'cloud.account.id';
+    const draggableId = 'draggable.id';
+
+    [false, true].forEach(showTopN => {
+      [value, null].forEach(maybeValue => {
+        [draggableId, undefined].forEach(maybeDraggableId => {
+          const shouldRender = !showTopN && maybeValue != null && maybeDraggableId != null;
+          const assertion = shouldRender ? 'should render' : 'should NOT render';
+
+          test(`it ${assertion} the 'Add to timeline investigation' button when showTopN is ${showTopN}, value is ${maybeValue}, and a draggableId is ${maybeDraggableId}`, () => {
+            const wrapper = mount(
+              <TestProviders>
+                <MockedProvider mocks={mocksSource} addTypename={false}>
+                  <DraggableWrapperHoverContent
+                    draggableId={maybeDraggableId}
+                    field={aggregatableStringField}
+                    showTopN={showTopN}
+                    toggleTopN={jest.fn()}
+                    value={maybeValue}
+                  />
+                </MockedProvider>
+              </TestProviders>
+            );
+
+            expect(
+              wrapper
+                .find('[data-test-subj="add-to-timeline"]')
+                .first()
+                .exists()
+            ).toBe(shouldRender);
+          });
+        });
+      });
+    });
+
+    test('when clicked, it invokes the `startDragToTimeline` function returned by the `useAddToTimeline` hook', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <MockedProvider mocks={mocksSource} addTypename={false}>
+            <DraggableWrapperHoverContent
+              draggableId={draggableId}
+              field={aggregatableStringField}
+              showTopN={false}
+              toggleTopN={jest.fn()}
+              value={value}
+            />
+          </MockedProvider>
+        </TestProviders>
+      );
+
+      // The following "startDragToTimeline" function returned by our mock
+      // useAddToTimeline hook is called when the user clicks the
+      // Add to timeline investigation action:
+      const startDragToTimeline = useAddToTimeline({
+        draggableId,
+        fieldName: aggregatableStringField,
+      });
+
+      wrapper
+        .find('[data-test-subj="add-to-timeline"]')
+        .first()
+        .simulate('click');
+      wrapper.update();
+
+      expect(startDragToTimeline).toHaveBeenCalled();
+    });
+  });
+
   describe('Top N', () => {
     test(`it renders the 'Show top field' button when showTopN is false and an aggregatable string field is provided`, async () => {
       const aggregatableStringField = 'cloud.account.id';