From 5c65d01a1e4435cb9478d18ffa90e3d094dc9b7c Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Fri, 2 Apr 2021 10:20:01 -0500 Subject: [PATCH 1/4] Replace `EuiPanel` with `EuiCard` when using beta badges In elastic/eui#4649 the `betaBadgeLabel` and related props have been removed from `EuiPanel` and it's now recommended to use an `EuiCard` instead. Replace these in APM and Observability plugins and update stories so examples can be viewed. --- .../components/app/ServiceMap/index.tsx | 2 +- .../CreateEditCustomLinkFlyout/index.tsx | 2 +- .../link_preview.stories.tsx | 39 ++++++++ .../link_preview.test.tsx | 2 +- .../{LinkPreview.tsx => link_preview.tsx} | 88 ++++++++++--------- .../Settings/CustomizeUI/CustomLink/index.tsx | 2 +- .../app/Settings/anomaly_detection/index.tsx | 2 +- .../components/app/correlations/index.tsx | 2 +- .../index.tsx | 8 +- .../license_prompt.stories.tsx} | 20 +++-- .../components/app/fleet_panel/index.tsx | 63 ++++++------- .../public/pages/landing/landing.stories.tsx | 41 +++++++++ 12 files changed, 179 insertions(+), 92 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx rename x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/{LinkPreview.tsx => link_preview.tsx} (71%) rename x-pack/plugins/apm/public/components/shared/{LicensePrompt => license_prompt}/index.tsx (92%) rename x-pack/plugins/apm/public/components/shared/{LicensePrompt/LicensePrompt.stories.tsx => license_prompt/license_prompt.stories.tsx} (61%) create mode 100644 x-pack/plugins/observability/public/pages/landing/landing.stories.tsx diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx index 7ef3cbca3ad2f..b338d1e4ab03d 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx @@ -19,7 +19,7 @@ import { useLicenseContext } from '../../../context/license/use_license_context' import { useTheme } from '../../../hooks/use_theme'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { DatePicker } from '../../shared/DatePicker'; -import { LicensePrompt } from '../../shared/LicensePrompt'; +import { LicensePrompt } from '../../shared/license_prompt'; import { Controls } from './Controls'; import { Cytoscape } from './Cytoscape'; import { getCytoscapeDivStyle } from './cytoscape_options'; diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx index ccd2b0d425743..dfe768735d19b 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx @@ -22,7 +22,7 @@ import { FiltersSection } from './FiltersSection'; import { FlyoutFooter } from './FlyoutFooter'; import { LinkSection } from './LinkSection'; import { saveCustomLink } from './saveCustomLink'; -import { LinkPreview } from './LinkPreview'; +import { LinkPreview } from './link_preview'; import { Documentation } from './Documentation'; interface Props { diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx new file mode 100644 index 0000000000000..3bf17a733bf8a --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx @@ -0,0 +1,39 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { ComponentProps } from 'react'; +import { CoreStart } from 'kibana/public'; +import { createCallApmApi } from '../../../../../../services/rest/createCallApmApi'; +import { LinkPreview } from './link_preview'; + +export default { + title: + 'app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview', + component: LinkPreview, +}; + +export function Example({ + filters, + label, + url, +}: ComponentProps) { + const coreMock = ({ + http: { + get: async () => ({ transaction: { id: '0' } }), + }, + uiSettings: { get: () => false }, + } as unknown) as CoreStart; + + createCallApmApi(coreMock); + + return ; +} +Example.args = { + filters: [], + label: 'Example label', + url: 'https://example.com', +} as ComponentProps; diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx index 6348157104287..6a6db40892e10 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { LinkPreview } from '../CreateEditCustomLinkFlyout/LinkPreview'; +import { LinkPreview } from '../CreateEditCustomLinkFlyout/link_preview'; import { render, getNodeText, diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx similarity index 71% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview.tsx rename to x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx index 0312b802df173..733f782e9ccb8 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx @@ -7,9 +7,8 @@ import React, { useEffect, useState } from 'react'; import { - EuiPanel, + EuiCard, EuiText, - EuiSpacer, EuiLink, EuiToolTip, EuiIcon, @@ -66,43 +65,52 @@ export function LinkPreview({ label, url, filters }: Props) { const { formattedUrl, error } = replaceTemplateVariables(url, transaction); return ( - - - {label - ? label - : i18n.translate( - 'xpack.apm.settings.customizeUI.customLink.default.label', - { defaultMessage: 'Elastic.co' } - )} - - - - {url ? ( - - {formattedUrl} - - ) : ( - i18n.translate( - 'xpack.apm.settings.customizeUI.customLink.default.url', - { defaultMessage: 'https://www.elastic.co' } - ) - )} - - + + {url ? ( + + {formattedUrl} + + ) : ( + i18n.translate( + 'xpack.apm.settings.customizeUI.customLink.default.url', + { defaultMessage: 'https://www.elastic.co' } + ) + )} + + } + paddingSize="l" + textAlign="left" + title={ + + {label + ? label + : i18n.translate( + 'xpack.apm.settings.customizeUI.customLink.default.label', + { defaultMessage: 'Elastic.co' } + )} + + } + > @@ -128,6 +136,6 @@ export function LinkPreview({ label, url, filters }: Props) { )} - + ); } diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx index 49fa3eab47862..ab18a31e76917 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx @@ -20,7 +20,7 @@ import { INVALID_LICENSE } from '../../../../../../common/custom_link'; import { CustomLink } from '../../../../../../common/custom_link/custom_link_types'; import { FETCH_STATUS, useFetcher } from '../../../../../hooks/use_fetcher'; import { useLicenseContext } from '../../../../../context/license/use_license_context'; -import { LicensePrompt } from '../../../../shared/LicensePrompt'; +import { LicensePrompt } from '../../../../shared/license_prompt'; import { CreateCustomLinkButton } from './CreateCustomLinkButton'; import { CreateEditCustomLinkFlyout } from './CreateEditCustomLinkFlyout'; import { CustomLinkTable } from './CustomLinkTable'; diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx index 72f0249f07bf6..62b39664cf63d 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx @@ -14,7 +14,7 @@ import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plug import { JobsList } from './jobs_list'; import { AddEnvironments } from './add_environments'; import { useFetcher } from '../../../../hooks/use_fetcher'; -import { LicensePrompt } from '../../../shared/LicensePrompt'; +import { LicensePrompt } from '../../../shared/license_prompt'; import { useLicenseContext } from '../../../../context/license/use_license_context'; import { APIReturnType } from '../../../../services/rest/createCallApmApi'; diff --git a/x-pack/plugins/apm/public/components/app/correlations/index.tsx b/x-pack/plugins/apm/public/components/app/correlations/index.tsx index e0651edbeb79b..62c547aa69e0d 100644 --- a/x-pack/plugins/apm/public/components/app/correlations/index.tsx +++ b/x-pack/plugins/apm/public/components/app/correlations/index.tsx @@ -34,7 +34,7 @@ import { } from '../../../../../observability/public'; import { isActivePlatinumLicense } from '../../../../common/license_check'; import { useLicenseContext } from '../../../context/license/use_license_context'; -import { LicensePrompt } from '../../shared/LicensePrompt'; +import { LicensePrompt } from '../../shared/license_prompt'; import { IUrlParams } from '../../../context/url_params_context/types'; const latencyTab = { diff --git a/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx similarity index 92% rename from x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx rename to x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx index 97a48a61e47cc..1bda4e7960190 100644 --- a/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui'; +import { EuiButton, EuiEmptyPrompt, EuiCard } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { useKibanaUrl } from '../../../hooks/useKibanaUrl'; @@ -43,7 +43,7 @@ export function LicensePrompt({ text, showBetaBadge = false }: Props) { ); const renderWithBetaBadge = ( - } + title={<>} > {renderLicenseBody} - + ); return <>{showBetaBadge ? renderWithBetaBadge : renderLicenseBody}; diff --git a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx b/x-pack/plugins/apm/public/components/shared/license_prompt/license_prompt.stories.tsx similarity index 61% rename from x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx rename to x-pack/plugins/apm/public/components/shared/license_prompt/license_prompt.stories.tsx index 57f782a020082..35e22b50306d9 100644 --- a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/license_prompt/license_prompt.stories.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { ComponentType } from 'react'; +import React, { ComponentProps, ComponentType } from 'react'; import { LicensePrompt } from '.'; import { ApmPluginContext, @@ -17,19 +17,25 @@ const contextMock = ({ } as unknown) as ApmPluginContextValue; export default { - title: 'app/LicensePrompt', + title: 'shared/LicensePrompt', component: LicensePrompt, decorators: [ (Story: ComponentType) => ( - {' '} + ), ], }; -export function Example() { - return ( - - ); +export function Example({ + showBetaBadge, + text, +}: ComponentProps) { + return ; } +Example.args = { + showBetaBadge: false, + text: + 'To create Feature name, you must be subscribed to an Elastic X license or above.', +} as ComponentProps; diff --git a/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx b/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx index b1ca3c614fc70..69f27951624da 100644 --- a/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx +++ b/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx @@ -5,53 +5,44 @@ * 2.0. */ -import React from 'react'; -import { EuiPanel } from '@elastic/eui'; -import { EuiFlexGroup } from '@elastic/eui'; -import { EuiFlexItem } from '@elastic/eui'; -import { EuiTitle } from '@elastic/eui'; +import { EuiCard, EuiLink, EuiText, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { EuiText } from '@elastic/eui'; -import { EuiLink } from '@elastic/eui'; +import React from 'react'; import { usePluginContext } from '../../../hooks/use_plugin_context'; export function FleetPanel() { const { core } = usePluginContext(); return ( - - - - -

- {i18n.translate('xpack.observability.fleet.title', { - defaultMessage: 'Have you seen our new Fleet?', - })} -

- - - - - {i18n.translate('xpack.observability.fleet.text', { - defaultMessage: - 'The Elastic Agent provides a simple, unified way to add monitoring for logs, metrics, and other types of data to your hosts. You no longer need to install multiple Beats and other agents, making it easier and faster to deploy configurations across your infrastructure.', - })} - - - - - {i18n.translate('xpack.observability.fleet.button', { - defaultMessage: 'Try Fleet Beta', + description={ + + {i18n.translate('xpack.observability.fleet.text', { + defaultMessage: + 'The Elastic Agent provides a simple, unified way to add monitoring for logs, metrics, and other types of data to your hosts. You no longer need to install multiple Beats and other agents, making it easier and faster to deploy configurations across your infrastructure.', + })} + + } + footer={ + + {i18n.translate('xpack.observability.fleet.button', { + defaultMessage: 'Try Fleet Beta', + })} + + } + title={ + +

+ {i18n.translate('xpack.observability.fleet.title', { + defaultMessage: 'Have you seen our new Fleet?', })} - - - - +

+ + } + /> ); } diff --git a/x-pack/plugins/observability/public/pages/landing/landing.stories.tsx b/x-pack/plugins/observability/public/pages/landing/landing.stories.tsx new file mode 100644 index 0000000000000..86922b045c742 --- /dev/null +++ b/x-pack/plugins/observability/public/pages/landing/landing.stories.tsx @@ -0,0 +1,41 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { ComponentType } from 'react'; +import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common'; +import { PluginContext, PluginContextValue } from '../../context/plugin_context'; +import { LandingPage } from './'; + +export default { + title: 'app/Landing', + component: LandingPage, + decorators: [ + (Story: ComponentType) => { + const pluginContextValue = ({ + appMountParameters: { setHeaderActionMenu: () => {} }, + core: { + http: { + basePath: { + prepend: () => '', + }, + }, + }, + } as unknown) as PluginContextValue; + return ( + + + + + + ); + }, + ], +}; + +export function Example() { + return ; +} From b27da6a5e9605fbfddfbcf165ca5d65247aa338e Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Wed, 7 Apr 2021 11:35:30 -0500 Subject: [PATCH 2/4] license prompt and fleet panel updates --- .../shared/license_prompt/index.tsx | 59 ++++++++----------- .../components/app/fleet_panel/index.tsx | 18 ++---- 2 files changed, 31 insertions(+), 46 deletions(-) diff --git a/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx index 1bda4e7960190..6ddea9551c7b7 100644 --- a/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiButton, EuiEmptyPrompt, EuiCard } from '@elastic/eui'; +import { EuiButton, EuiCard, EuiTextColor } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { useKibanaUrl } from '../../../hooks/useKibanaUrl'; @@ -20,19 +20,31 @@ export function LicensePrompt({ text, showBetaBadge = false }: Props) { '/app/management/stack/license_management' ); - const renderLicenseBody = ( - - {i18n.translate('xpack.apm.license.title', { - defaultMessage: 'Start free 30-day trial', - })} - + return ( + {text}

} - actions={ + title={i18n.translate('xpack.apm.license.title', { + defaultMessage: 'Start free 30-day trial', + })} + titleElement="h2" + description={{text}} + footer={ {i18n.translate('xpack.apm.license.button', { defaultMessage: 'Start trial', @@ -41,25 +53,4 @@ export function LicensePrompt({ text, showBetaBadge = false }: Props) { } /> ); - - const renderWithBetaBadge = ( - } - title={<>} - > - {renderLicenseBody} - - ); - - return <>{showBetaBadge ? renderWithBetaBadge : renderLicenseBody}; } diff --git a/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx b/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx index 69f27951624da..fce1cde38f587 100644 --- a/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx +++ b/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiCard, EuiLink, EuiText, EuiTitle } from '@elastic/eui'; +import { EuiCard, EuiLink, EuiTextColor } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { usePluginContext } from '../../../hooks/use_plugin_context'; @@ -20,12 +20,12 @@ export function FleetPanel() { defaultMessage: 'Beta', })} description={ - + {i18n.translate('xpack.observability.fleet.text', { defaultMessage: 'The Elastic Agent provides a simple, unified way to add monitoring for logs, metrics, and other types of data to your hosts. You no longer need to install multiple Beats and other agents, making it easier and faster to deploy configurations across your infrastructure.', })} - + } footer={ @@ -34,15 +34,9 @@ export function FleetPanel() { })} } - title={ - -

- {i18n.translate('xpack.observability.fleet.title', { - defaultMessage: 'Have you seen our new Fleet?', - })} -

- - } + title={i18n.translate('xpack.observability.fleet.title', { + defaultMessage: 'Have you seen our new Fleet?', + })} /> ); } From aec0582d1a286df2f612bb95b17422db46a5dcc4 Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Wed, 7 Apr 2021 12:25:52 -0500 Subject: [PATCH 3/4] Updates based on feedback --- .../link_preview.tsx | 106 +++++++++--------- 1 file changed, 56 insertions(+), 50 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx index 733f782e9ccb8..5d4d89004e058 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx @@ -7,13 +7,15 @@ import React, { useEffect, useState } from 'react'; import { - EuiCard, + EuiPanel, EuiText, + EuiSpacer, EuiLink, EuiToolTip, EuiIcon, EuiFlexGroup, EuiFlexItem, + EuiTitle, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { debounce } from 'lodash'; @@ -65,12 +67,33 @@ export function LinkPreview({ label, url, filters }: Props) { const { formattedUrl, error } = replaceTemplateVariables(url, transaction); return ( - + +

+ {i18n.translate( + 'xpack.apm.settings.customizeUI.customLink.previewSectionTitle', + { + defaultMessage: 'Preview', + } + )} +

+ + + + + {label + ? label + : i18n.translate( + 'xpack.apm.settings.customizeUI.customLink.default.label', + { defaultMessage: 'Elastic.co' } + )} + + - } - paddingSize="l" - textAlign="left" - title={ - - {label - ? label - : i18n.translate( - 'xpack.apm.settings.customizeUI.customLink.default.label', - { defaultMessage: 'Elastic.co' } + + + + + {i18n.translate( + 'xpack.apm.settings.customizeUI.customLink.linkPreview.descrition', + { + defaultMessage: + 'Test your link with values from an example transaction document based on the filters above.', + } )} - - } - > - - - - {i18n.translate( - 'xpack.apm.settings.customizeUI.customLink.linkPreview.descrition', - { - defaultMessage: - 'Test your link with values from an example transaction document based on the filters above.', - } - )} - - + + - - {error && ( - - - - )} - - - + + {error && ( + + + + )} + + + + ); } From 831421061ccce2d721d3c28b84566be7a9e63356 Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Wed, 7 Apr 2021 12:28:06 -0500 Subject: [PATCH 4/4] exports to fix types --- .../CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx | 4 ++-- .../apm/public/components/shared/license_prompt/index.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx index 5d4d89004e058..726d4ba0d65ee 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx @@ -24,7 +24,7 @@ import { Transaction } from '../../../../../../../typings/es_schemas/ui/transact import { callApmApi } from '../../../../../../services/rest/createCallApmApi'; import { replaceTemplateVariables, convertFiltersToQuery } from './helper'; -interface Props { +export interface LinkPreviewProps { label: string; url: string; filters: Filter[]; @@ -44,7 +44,7 @@ const fetchTransaction = debounce( const getTextColor = (value?: string) => (value ? 'default' : 'subdued'); -export function LinkPreview({ label, url, filters }: Props) { +export function LinkPreview({ label, url, filters }: LinkPreviewProps) { const [transaction, setTransaction] = useState(); useEffect(() => { diff --git a/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx index 6ddea9551c7b7..0950cff5127fc 100644 --- a/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx @@ -10,12 +10,15 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { useKibanaUrl } from '../../../hooks/useKibanaUrl'; -interface Props { +export interface LicensePromptProps { text: string; showBetaBadge?: boolean; } -export function LicensePrompt({ text, showBetaBadge = false }: Props) { +export function LicensePrompt({ + text, + showBetaBadge = false, +}: LicensePromptProps) { const licensePageUrl = useKibanaUrl( '/app/management/stack/license_management' );