+
{embeddablePanelContextMenu}
{ariaLabelElement}
@@ -104,7 +104,7 @@ export const EmbeddablePanelHeader = ({
hideTitle={hideTitle}
embeddable={embeddable}
description={description}
- customizePanelAction={universalActions.customizePanel}
+ editPanelAction={universalActions.editPanel}
/>
{showBadges && badgeComponents}
diff --git a/src/plugins/embeddable/public/embeddable_panel/panel_header/embeddable_panel_title.tsx b/src/plugins/embeddable/public/embeddable_panel/panel_header/embeddable_panel_title.tsx
index 734b420d04052..693215a3084ca 100644
--- a/src/plugins/embeddable/public/embeddable_panel/panel_header/embeddable_panel_title.tsx
+++ b/src/plugins/embeddable/public/embeddable_panel/panel_header/embeddable_panel_title.tsx
@@ -11,21 +11,22 @@ import React, { useMemo } from 'react';
import { EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui';
import { IEmbeddable, ViewMode } from '../../lib';
-import { CustomizePanelAction } from '../panel_actions';
import { getEditTitleAriaLabel, placeholderTitle } from '../embeddable_panel_strings';
+import { EditPanelAction } from '../panel_actions';
+import { openCustomizePanelFlyout } from '../panel_actions/customize_panel_action/open_customize_panel';
export const EmbeddablePanelTitle = ({
viewMode,
hideTitle,
embeddable,
description,
- customizePanelAction,
+ editPanelAction,
}: {
hideTitle?: boolean;
viewMode?: ViewMode;
description?: string;
embeddable: IEmbeddable;
- customizePanelAction?: CustomizePanelAction;
+ editPanelAction?: EditPanelAction;
}) => {
const title = embeddable.getTitle();
@@ -39,32 +40,44 @@ export const EmbeddablePanelTitle = ({
if (viewMode === ViewMode.VIEW) {
return
{title};
}
- if (customizePanelAction) {
+ if (editPanelAction) {
return (
customizePanelAction.execute({ embeddable })}
+ onClick={() =>
+ openCustomizePanelFlyout({
+ editPanel: editPanelAction,
+ embeddable,
+ focusOnTitle: true,
+ })
+ }
>
{title || placeholderTitle}
);
}
return null;
- }, [customizePanelAction, embeddable, title, viewMode, hideTitle]);
+ }, [editPanelAction, embeddable, title, viewMode, hideTitle]);
const titleComponentWithDescription = useMemo(() => {
- if (!description) return
{titleComponent};
+ if (!description)
+ return (
+
+ {titleComponent}
+
+ );
return (
-
+
{titleComponent}{' '}
- badges?.map((badge) => (
- badge.execute({ embeddable, trigger: panelBadgeTrigger })}
- onClickAriaLabel={badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
- data-test-subj={`embeddablePanelBadge-${badge.id}`}
- >
- {badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
-
- )),
+ badges?.map((badge) => {
+ const badgeComponent = (
+ badge.execute({ embeddable, trigger: panelBadgeTrigger })}
+ onClickAriaLabel={badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
+ data-test-subj={`embeddablePanelBadge-${badge.id}`}
+ >
+ {badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
+
+ );
+
+ const tooltip = badge.getDisplayNameTooltip
+ ? badge.getDisplayNameTooltip({ embeddable, trigger: panelBadgeTrigger })
+ : '';
+
+ return tooltip ? (
+ {badgeComponent}
+ ) : (
+ badgeComponent
+ );
+ }),
[badges, embeddable]
);
diff --git a/src/plugins/embeddable/public/plugin.tsx b/src/plugins/embeddable/public/plugin.tsx
index d7af8f68817ea..5eb6473ddb930 100644
--- a/src/plugins/embeddable/public/plugin.tsx
+++ b/src/plugins/embeddable/public/plugin.tsx
@@ -146,10 +146,9 @@ export class EmbeddablePublicPlugin implements Plugin {
this.appList = appList;
@@ -168,13 +167,7 @@ export class EmbeddablePublicPlugin implements Plugin {
const assertTimeField = (fieldName: string, attributes: TypedLensByValueInput['attributes']) =>
expect(
(
- attributes.state.datasourceStates.formBased.layers[DATA_LAYER_ID].columns[
+ attributes.state.datasourceStates.formBased?.layers[DATA_LAYER_ID].columns[
DATE_HISTOGRAM_COLUMN_ID
] as FieldBasedIndexPatternColumn
).sourceField
diff --git a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts
index 7943b1d905b6a..f9e56ded409b9 100644
--- a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts
+++ b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts
@@ -146,7 +146,7 @@ export const getLensAttributes = (group: EventAnnotationGroupConfig, timeField:
export const getCurrentTimeField = (attributes: TypedLensByValueInput['attributes']) => {
return (
- attributes.state.datasourceStates.formBased.layers[DATA_LAYER_ID].columns[
+ attributes.state.datasourceStates?.formBased?.layers[DATA_LAYER_ID].columns[
DATE_HISTOGRAM_COLUMN_ID
] as FieldBasedIndexPatternColumn
).sourceField;
diff --git a/src/plugins/input_control_vis/kibana.jsonc b/src/plugins/input_control_vis/kibana.jsonc
index c4a0df59b8e15..129396f15ace6 100644
--- a/src/plugins/input_control_vis/kibana.jsonc
+++ b/src/plugins/input_control_vis/kibana.jsonc
@@ -12,10 +12,11 @@
"expressions",
"visDefaultEditor",
"visualizations",
- "unifiedSearch"
+ "unifiedSearch",
+ "uiActions"
],
"requiredBundles": [
- "kibanaReact"
+ "kibanaReact", "embeddable"
]
}
}
diff --git a/src/plugins/input_control_vis/public/deprecation_badge.ts b/src/plugins/input_control_vis/public/deprecation_badge.ts
new file mode 100644
index 0000000000000..5c65301066800
--- /dev/null
+++ b/src/plugins/input_control_vis/public/deprecation_badge.ts
@@ -0,0 +1,54 @@
+/*
+ * 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 { Action } from '@kbn/ui-actions-plugin/public';
+
+import { Embeddable, ViewMode } from '@kbn/embeddable-plugin/public';
+import { i18n } from '@kbn/i18n';
+import { VisualizeInput } from '@kbn/visualizations-plugin/public';
+
+export const ACTION_DEPRECATION_BADGE = 'ACTION_INPUT_CONTROL_DEPRECATION_BADGE';
+
+export interface DeprecationBadgeActionContext {
+ embeddable: Embeddable;
+}
+
+export class InputControlDeprecationBadge implements Action {
+ public id = ACTION_DEPRECATION_BADGE;
+ public type = ACTION_DEPRECATION_BADGE;
+ public disabled = true;
+
+ public getDisplayName() {
+ return i18n.translate('inputControl.deprecationBadgeAction.deprecationBadgeLabel', {
+ defaultMessage: 'Deprecated',
+ });
+ }
+
+ public getIconType() {
+ return 'warning';
+ }
+
+ public getDisplayNameTooltip() {
+ return i18n.translate('inputControl.deprecationBadgeAction.deprecationWarningDescription', {
+ defaultMessage:
+ 'Input controls are deprecated and will be removed in a future release. Use the new Controls to filter and interact with your dashboard data.',
+ });
+ }
+
+ public async isCompatible({ embeddable }: DeprecationBadgeActionContext) {
+ return (
+ embeddable.getInput().viewMode === ViewMode.EDIT &&
+ embeddable.getInput()?.savedVis?.type === 'input_control_vis'
+ );
+ }
+
+ public async execute() {
+ // do nothing
+ return;
+ }
+}
diff --git a/src/plugins/input_control_vis/public/plugin.ts b/src/plugins/input_control_vis/public/plugin.ts
index 07a71e450ac72..3cd54c2596a29 100644
--- a/src/plugins/input_control_vis/public/plugin.ts
+++ b/src/plugins/input_control_vis/public/plugin.ts
@@ -15,10 +15,13 @@ import {
} from '@kbn/unified-search-plugin/public';
import { Plugin as ExpressionsPublicPlugin } from '@kbn/expressions-plugin/public';
import { VisualizationsSetup, VisualizationsStart } from '@kbn/visualizations-plugin/public';
+import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import { PANEL_BADGE_TRIGGER } from '@kbn/embeddable-plugin/public';
import { createInputControlVisFn } from './input_control_fn';
import { getInputControlVisRenderer } from './input_control_vis_renderer';
import { createInputControlVisTypeDefinition } from './input_control_vis_type';
import { InputControlPublicConfig } from '../config';
+import { InputControlDeprecationBadge } from './deprecation_badge';
type InputControlVisCoreSetup = CoreSetup;
@@ -48,6 +51,7 @@ export interface InputControlVisPluginStartDependencies {
visualizations: VisualizationsStart;
data: DataPublicPluginStart;
unifiedSearch: UnifiedSearchPublicPluginStart;
+ uiActions: UiActionsStart;
}
/** @internal */
@@ -78,5 +82,12 @@ export class InputControlVisPlugin implements Plugin {
public start(core: CoreStart, deps: InputControlVisPluginStartDependencies) {
// nothing to do here
+ const { uiActions } = deps;
+
+ const deprecationBadge = new InputControlDeprecationBadge();
+
+ uiActions.addTriggerAction(PANEL_BADGE_TRIGGER, deprecationBadge);
+
+ return {};
}
}
diff --git a/src/plugins/input_control_vis/tsconfig.json b/src/plugins/input_control_vis/tsconfig.json
index dbe5d4e2f28d7..876a37b925391 100644
--- a/src/plugins/input_control_vis/tsconfig.json
+++ b/src/plugins/input_control_vis/tsconfig.json
@@ -23,6 +23,8 @@
"@kbn/i18n-react",
"@kbn/test-jest-helpers",
"@kbn/config-schema",
+ "@kbn/ui-actions-plugin",
+ "@kbn/embeddable-plugin",
],
"exclude": [
"target/**/*",
diff --git a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
index 454bd1917ffd1..d4621be61e73b 100644
--- a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
+++ b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
@@ -60,7 +60,7 @@ export class InspectorViewChooser extends Component {
this.closeSelector();
}}
toolTipContent={view.help}
- toolTipPosition="left"
+ toolTipProps={{ position: 'left' }}
data-test-subj={`inspectorViewChooser${view.title}`}
>
{view.title}
diff --git a/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx b/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
index 58f5dd44f3f11..eaae6ea26a3b5 100644
--- a/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
+++ b/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
@@ -17,7 +17,8 @@ import { i18n } from '@kbn/i18n';
import { XJsonLang } from '@kbn/monaco';
import { compressToEncodedURIComponent } from 'lz-string';
import React, { useCallback } from 'react';
-import { CodeEditor, useKibana } from '@kbn/kibana-react-plugin/public';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { CodeEditor } from '@kbn/code-editor';
import { InspectorPluginStartDeps } from '../../../../plugin';
interface RequestCodeViewerProps {
diff --git a/src/plugins/inspector/tsconfig.json b/src/plugins/inspector/tsconfig.json
index 9c5654be26249..8a3025cdad7dd 100644
--- a/src/plugins/inspector/tsconfig.json
+++ b/src/plugins/inspector/tsconfig.json
@@ -16,7 +16,8 @@
"@kbn/core-ui-settings-browser",
"@kbn/std",
"@kbn/es-types",
- "@kbn/ui-theme"
+ "@kbn/ui-theme",
+ "@kbn/code-editor"
],
"exclude": [
"target/**/*",
diff --git a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
index 656a59a6425f6..b2741eaf8d3a1 100644
--- a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
+++ b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
@@ -442,7 +442,7 @@ exports[`Overview renders correctly when there is no user data view 1`] = `
]
}
>
-
-
-
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+
`;
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index 0df0e583699f7..bdc8c9e0a755e 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -26,10 +26,6 @@ import {
} from '@kbn/kibana-react-plugin/public';
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
import { KibanaSolutionAvatar } from '@kbn/shared-ux-avatar-solution';
-import {
- AnalyticsNoDataPageKibanaProvider,
- AnalyticsNoDataPage,
-} from '@kbn/shared-ux-page-analytics-no-data';
import {
RedirectAppLinksContainer as RedirectAppLinks,
RedirectAppLinksKibanaProvider,
@@ -40,6 +36,7 @@ import {
FeatureCatalogueSolution,
FeatureCatalogueCategory,
} from '@kbn/home-plugin/public';
+import { withSuspense } from '@kbn/shared-ux-utility';
import { PLUGIN_ID, PLUGIN_PATH } from '../../../common';
import { AppPluginStartDependencies } from '../../types';
import { AddData } from '../add_data';
@@ -202,6 +199,22 @@ export const Overview: FC = ({ newsFetchResult, solutions, features }) =>
dataViewEditor,
};
+ const importPromise = import('@kbn/shared-ux-page-analytics-no-data');
+ const AnalyticsNoDataPageKibanaProvider = withSuspense(
+ React.lazy(() =>
+ importPromise.then(({ AnalyticsNoDataPageKibanaProvider: NoDataProvider }) => {
+ return { default: NoDataProvider };
+ })
+ )
+ );
+ const AnalyticsNoDataPage = withSuspense(
+ React.lazy(() =>
+ importPromise.then(({ AnalyticsNoDataPage: NoDataPage }) => {
+ return { default: NoDataPage };
+ })
+ )
+ );
+
return (
diff --git a/src/plugins/kibana_overview/tsconfig.json b/src/plugins/kibana_overview/tsconfig.json
index 976eed58d31aa..09e9d232901c4 100644
--- a/src/plugins/kibana_overview/tsconfig.json
+++ b/src/plugins/kibana_overview/tsconfig.json
@@ -26,6 +26,7 @@
"@kbn/shared-ux-link-redirect-app",
"@kbn/shared-ux-router",
"@kbn/shared-ux-avatar-solution",
+ "@kbn/shared-ux-utility",
],
"exclude": [
"target/**/*",
diff --git a/src/plugins/kibana_react/public/code_editor/README.md b/src/plugins/kibana_react/public/code_editor/README.md
deleted file mode 100644
index a7315f8a063ff..0000000000000
--- a/src/plugins/kibana_react/public/code_editor/README.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Code Editor Component
-
-This re-usable code editor component was built as a layer of abstraction on top of the [Monaco Code Editor](https://microsoft.github.io/monaco-editor/) (and the [React Monaco Editor component](https://github.com/react-monaco-editor/react-monaco-editor)). The goal of this component is to expose a set of the most-used, most-helpful features from Monaco in a way that's easy to use out of the box. If a use case requires additional features, this component still allows access to all other Monaco features.
-
-This editor component allows easy access to:
-
-- [Syntax highlighting (including custom language highlighting)](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages)
-- [Suggestion/autocompletion widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example)
-- Function signature widget
-- [Hover widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-hover-provider-example)
-
-The Monaco editor doesn't automatically resize the editor area on window or container resize so this component includes a [resize detector](https://github.com/maslianok/react-resize-detector) to cause the Monaco editor to re-layout and adjust its size when the window or container size changes
diff --git a/src/plugins/kibana_react/public/code_editor/code_editor_field.tsx b/src/plugins/kibana_react/public/code_editor/code_editor_field.tsx
deleted file mode 100644
index 4fe4b87d6d106..0000000000000
--- a/src/plugins/kibana_react/public/code_editor/code_editor_field.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * 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 from 'react';
-import { euiLightVars as lightTheme, euiDarkVars as darkTheme } from '@kbn/ui-theme';
-import { EuiFormControlLayout } from '@elastic/eui';
-import { CodeEditor, Props } from './code_editor';
-
-/**
- * Renders a Monaco code editor in the same style as other EUI form fields.
- */
-export const CodeEditorField: React.FunctionComponent = (props) => {
- const { width, height, options, fullWidth, useDarkTheme } = props;
- const theme = useDarkTheme ? darkTheme : lightTheme;
- const style = {
- width,
- height,
- backgroundColor: options?.readOnly
- ? theme.euiFormBackgroundReadOnlyColor
- : theme.euiFormBackgroundColor,
- };
-
- return (
- }
- style={style}
- readOnly={options?.readOnly}
- fullWidth={fullWidth}
- >
-
-
- );
-};
diff --git a/src/plugins/kibana_react/public/code_editor/index.tsx b/src/plugins/kibana_react/public/code_editor/index.tsx
deleted file mode 100644
index 39952a486f4ad..0000000000000
--- a/src/plugins/kibana_react/public/code_editor/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * 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 from 'react';
-import { EuiDelayRender, EuiErrorBoundary, EuiSkeletonText, useEuiTheme } from '@elastic/eui';
-
-import type { Props } from './code_editor';
-
-export * from '@kbn/code-editor/languages/constants';
-
-const LazyBaseEditor = React.lazy(() => import('./code_editor'));
-const LazyCodeEditorField = React.lazy(() =>
- import('./code_editor_field').then((m) => ({ default: m.CodeEditorField }))
-);
-
-const Fallback: React.FunctionComponent<{ height: Props['height'] }> = ({ height }) => {
- return (
- <>
- {/* when height is known, set minHeight to avoid layout shift */}
-
-
-
-
-
- >
- );
-};
-
-export type CodeEditorProps = Props;
-
-/**
- * Renders a Monaco code editor with EUI color theme.
- *
- * @see CodeEditorField to render a code editor in the same style as other EUI form fields.
- */
-export const CodeEditor: React.FunctionComponent = (props) => {
- const { colorMode } = useEuiTheme();
-
- return (
-
- }>
-
-
-
- );
-};
-
-/**
- * Renders a Monaco code editor in the same style as other EUI form fields.
- */
-export const CodeEditorField: React.FunctionComponent = (props) => {
- const { colorMode } = useEuiTheme();
-
- return (
-
-