Merge branch 'main' into enable-data-view-edit-from-flyout-1

elastic · Jan 4, 2023 · e5f2939 · e5f2939
2 parents 05d6050 + 9186244
commit e5f2939
Show file tree

Hide file tree

Showing 90 changed files with 1,490 additions and 442 deletions.
diff --git a/.buildkite/pipelines/pull_request/observability_plugin.yml b/.buildkite/pipelines/pull_request/observability_plugin.yml
@@ -5,6 +5,8 @@ steps:
       queue: n2-4-spot
     depends_on: build
     timeout_in_minutes: 120
+    artifact_paths:
+      - 'x-pack/plugins/observability/e2e/.journeys/**/*'
     retry:
       automatic:
         - exit_status: '-1'

diff --git a/.buildkite/pipelines/pull_request/synthetics_plugin.yml b/.buildkite/pipelines/pull_request/synthetics_plugin.yml
@@ -5,6 +5,8 @@ steps:
       queue: n2-4-spot
     depends_on: build
     timeout_in_minutes: 120
+    artifact_paths:
+      - 'x-pack/plugins/synthetics/e2e/.journeys/**/*'
     retry:
       automatic:
         - exit_status: '-1'

diff --git a/.buildkite/pipelines/pull_request/ux_plugin_e2e.yml b/.buildkite/pipelines/pull_request/ux_plugin_e2e.yml
@@ -5,6 +5,8 @@ steps:
       queue: n2-4-spot
     depends_on: build
     timeout_in_minutes: 120
+    artifact_paths:
+      - 'x-pack/plugins/ux/e2e/.journeys/**/*'
     retry:
       automatic:
         - exit_status: '-1'

diff --git a/src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts b/src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts
@@ -79,7 +79,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "config-global": "b8f559884931609a349e129c717af73d23e7bc76",
         "connector_token": "fa5301aa5a2914795d3b1b82d0a49939444009da",
         "core-usage-stats": "f40a213da2c597b0de94e364a4326a5a1baa4ca9",
-        "csp-rule-template": "d7e403244d466ee0daaf75e1616b9c5d5fd8c1cb",
+        "csp-rule-template": "d6104585d0b032355c64a7dbf2a834163351cb1c",
         "csp_rule": "d2bb53ea5d2bdfba1a835ad8956dfcd2b2c32e19",
         "dashboard": "7e37790f802b39c852f905c010e13674e893105a",
         "endpoint:user-artifact": "f94c250a52b30d0a2d32635f8b4c5bdabd1e25c0",

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
@@ -870,6 +870,27 @@ describe('MetricVisComponent', function () {
               max-height: 100%;
               max-width: 100%;
               overflow-y: auto;
+              scrollbar-width: thin;
+
+          &::-webkit-scrollbar {
+            inline-size: 16px;
+            block-size: 16px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background-color: rgba(105,112,125,0.5);
+            background-clip: content-box;
+            border-radius: 16px;
+            border: calc(8px * 0.75) solid transparent;
+          }
+
+          &::-webkit-scrollbar-corner,
+          &::-webkit-scrollbar-track {
+            background-color: transparent;
+          }
+
+          scrollbar-color: rgba(105,112,125,0.5) transparent;
+        
             "
     `);
 
@@ -880,6 +901,27 @@ describe('MetricVisComponent', function () {
               max-height: 100%;
               max-width: 100%;
               overflow-y: auto;
+              scrollbar-width: thin;
+
+          &::-webkit-scrollbar {
+            inline-size: 16px;
+            block-size: 16px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background-color: rgba(105,112,125,0.5);
+            background-clip: content-box;
+            border-radius: 16px;
+            border: calc(8px * 0.75) solid transparent;
+          }
+
+          &::-webkit-scrollbar-corner,
+          &::-webkit-scrollbar-track {
+            background-color: transparent;
+          }
+
+          scrollbar-color: rgba(105,112,125,0.5) transparent;
+        
             "
     `);
 
@@ -890,6 +932,27 @@ describe('MetricVisComponent', function () {
               max-height: 100%;
               max-width: 100%;
               overflow-y: auto;
+              scrollbar-width: thin;
+
+          &::-webkit-scrollbar {
+            inline-size: 16px;
+            block-size: 16px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background-color: rgba(105,112,125,0.5);
+            background-clip: content-box;
+            border-radius: 16px;
+            border: calc(8px * 0.75) solid transparent;
+          }
+
+          &::-webkit-scrollbar-corner,
+          &::-webkit-scrollbar-track {
+            background-color: transparent;
+          }
+
+          scrollbar-color: rgba(105,112,125,0.5) transparent;
+        
             "
     `);
   });

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@@ -35,7 +35,7 @@ import type { FieldFormatConvertFunction } from '@kbn/field-formats-plugin/commo
 import { CUSTOM_PALETTE } from '@kbn/coloring';
 import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
-import { useResizeObserver } from '@elastic/eui';
+import { useResizeObserver, useEuiScrollBar } from '@elastic/eui';
 import { DEFAULT_TRENDLINE_NAME } from '../../common/constants';
 import { VisParams } from '../../common';
 import {
@@ -360,6 +360,7 @@ export const MetricVis = ({
         max-height: 100%;
         max-width: 100%;
         overflow-y: auto;
+        ${useEuiScrollBar()}
       `}
     >
       <div

diff --git a/src/plugins/discover/tsconfig.json b/src/plugins/discover/tsconfig.json
@@ -1,12 +1,7 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "target/types",
-    // there is still a decent amount of JS in this plugin and we are taking
-    // advantage of the fact that TS doesn't know the types of that code and
-    // gives us `any`. Once that code is converted to .ts we can remove this
-    // and allow TS to infer types from any JS file imported.
-    "allowJs": false
+    "outDir": "target/types"
   },
   "include": ["common/**/*", "public/**/*", "server/**/*", "../../../typings/**/*", ".storybook/**/*"],
   "kbn_references": [

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/close_confirm_modal.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/close_confirm_modal.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { memo } from 'react';
+import { EuiConfirmModal } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface CloseFilterEditorConfirmModalProps {
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+const strings = {
+  getTitle: () =>
+    i18n.translate('unifiedSearch.filter.closeEditorConfirmModal.title', {
+      defaultMessage: 'Unsaved changes',
+    }),
+  getCancelButton: () =>
+    i18n.translate('unifiedSearch.filter.closeEditorConfirmModal.cancelButton', {
+      defaultMessage: 'Cancel',
+    }),
+  getConfirmButton: () =>
+    i18n.translate('unifiedSearch.filter.closeEditorConfirmModal.confirmButton', {
+      defaultMessage: 'Discard changes',
+    }),
+  getWarningLabel: () =>
+    i18n.translate('unifiedSearch.filter.closeEditorConfirmModal.warningLabel', {
+      defaultMessage: 'If you leave now, your unsaved filters will be lost.',
+    }),
+};
+
+export const CloseFilterEditorConfirmModal = memo(function CloseFilterEditorConfirmModal(
+  props: CloseFilterEditorConfirmModalProps
+) {
+  return (
+    <EuiConfirmModal
+      data-test-subj="close-filter-editor-confirm-modal"
+      title={strings.getTitle()}
+      cancelButtonText={strings.getCancelButton()}
+      confirmButtonText={strings.getConfirmButton()}
+      buttonColor="danger"
+      defaultFocusedButton="confirm"
+      {...props}
+    >
+      <p>{strings.getWarningLabel()}</p>
+    </EuiConfirmModal>
+  );
+});
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
@@ -109,11 +109,19 @@ export const strings = {
       defaultMessage: 'Elasticsearch Query DSL editor',
     }),
 };
+
+interface QueryDslFilter {
+  queryDsl: string;
+  customLabel: string | null;
+}
+
 export interface FilterEditorComponentProps {
   filter: Filter;
   indexPatterns: DataView[];
   onSubmit: (filter: Filter) => void;
   onCancel: () => void;
+  onLocalFilterCreate?: (initialState: { filter: Filter; queryDslFilter: QueryDslFilter }) => void;
+  onLocalFilterUpdate?: (filter: Filter | QueryDslFilter) => void;
   timeRangeForSuggestionsOverride?: boolean;
   mode?: 'edit' | 'add';
 }
@@ -141,6 +149,15 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
     };
   }
 
+  componentDidMount() {
+    const { localFilter, queryDsl, customLabel } = this.state;
+    this.props.onLocalFilterCreate?.({
+      filter: localFilter,
+      queryDslFilter: { queryDsl, customLabel },
+    });
+    this.props.onLocalFilterUpdate?.(localFilter);
+  }
+
   private parseFilterToQueryDsl(filter: Filter) {
     return JSON.stringify(cleanFilter(filter), null, 2);
   }
@@ -372,6 +389,14 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
   private toggleCustomEditor = () => {
     const isCustomEditorOpen = !this.state.isCustomEditorOpen;
     this.setState({ isCustomEditorOpen });
+    if (this.props.onLocalFilterUpdate) {
+      const { customLabel, queryDsl, localFilter } = this.state;
+      if (isCustomEditorOpen) {
+        this.props.onLocalFilterUpdate({ queryDsl, customLabel });
+      } else {
+        this.props.onLocalFilterUpdate(localFilter);
+      }
+    }
   };
 
   private isUnknownFilterType() {
@@ -383,16 +408,20 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
     return getIndexPatternFromFilter(this.props.filter, this.props.indexPatterns);
   }
 
+  private isQueryDslValid = (queryDsl: string) => {
+    try {
+      const queryDslJson = JSON.parse(queryDsl);
+      return Object.keys(queryDslJson).length > 0;
+    } catch {
+      return false;
+    }
+  };
+
   private isFilterValid() {
     const { isCustomEditorOpen, queryDsl, selectedDataView, localFilter } = this.state;
 
     if (isCustomEditorOpen) {
-      try {
-        const queryDslJson = JSON.parse(queryDsl);
-        return Object.keys(queryDslJson).length > 0;
-      } catch (e) {
-        return false;
-      }
+      return this.isQueryDslValid(queryDsl);
     }
 
     if (!selectedDataView) {
@@ -419,10 +448,49 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
   private onCustomLabelChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const customLabel = event.target.value;
     this.setState({ customLabel });
+    if (this.props.onLocalFilterUpdate) {
+      if (this.state.isCustomEditorOpen) {
+        const { queryDsl } = this.state;
+        this.props.onLocalFilterUpdate({ queryDsl, customLabel });
+      } else {
+        const localFilter = {
+          ...this.state.localFilter,
+          meta: {
+            ...this.state.localFilter.meta,
+            alias: customLabel || null,
+          },
+        };
+        this.props.onLocalFilterUpdate(localFilter);
+      }
+    }
   };
 
   private onQueryDslChange = (queryDsl: string) => {
     this.setState({ queryDsl });
+    if (this.props.onLocalFilterUpdate) {
+      const { customLabel } = this.state;
+      this.props.onLocalFilterUpdate({ queryDsl, customLabel });
+    }
+  };
+
+  private getFilterFromQueryDsl = (queryDsl: string) => {
+    const { customLabel } = this.state;
+    const {
+      $state,
+      meta: { index, disabled = false, negate = false },
+    } = this.props.filter;
+
+    if (!$state || !$state.store) {
+      return;
+    }
+
+    const newIndex = index || this.props.indexPatterns[0].id!;
+    try {
+      const body = JSON.parse(queryDsl);
+      return buildCustomFilter(newIndex, body, disabled, negate, customLabel || null, $state.store);
+    } catch {
+      return null;
+    }
   };
 
   private onLocalFilterChange = (updatedFilters: Filter[]) => {
@@ -465,30 +533,22 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
     }
 
     this.setState({ localFilter: newFilter });
+    this.props.onLocalFilterUpdate?.(newFilter);
   };
 
   private onSubmit = () => {
     const { isCustomEditorOpen, queryDsl, customLabel } = this.state;
-    const {
-      $state,
-      meta: { index, disabled = false, negate = false },
-    } = this.props.filter;
+    const { $state } = this.props.filter;
 
     if (!$state || !$state.store) {
       return;
     }
 
     if (isCustomEditorOpen) {
-      const newIndex = index || this.props.indexPatterns[0].id!;
-      const body = JSON.parse(queryDsl);
-      const filter = buildCustomFilter(
-        newIndex,
-        body,
-        disabled,
-        negate,
-        customLabel || null,
-        $state.store
-      );
+      const filter = this.getFilterFromQueryDsl(queryDsl);
+      if (!filter) {
+        return;
+      }
 
       this.props.onSubmit(filter);
     } else {

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/index.ts b/src/plugins/unified_search/public/filter_bar/filter_editor/index.ts
@@ -40,3 +40,6 @@ export { TruncatedLabel } from './truncated_label';
 
 export { FilterEditor } from './filter_editor';
 export type { FilterEditorProps } from './filter_editor';
+
+export { withCloseFilterEditorConfirmModal } from './with_close_confirm_modal';
+export type { WithCloseFilterEditorConfirmModalProps } from './with_close_confirm_modal';