Replace EuiPanel with EuiCard when using beta badges

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';

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 {

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<typeof LinkPreview>) {
+  const coreMock = ({
+    http: {
+      get: async () => ({ transaction: { id: '0' } }),
+    },
+    uiSettings: { get: () => false },
+  } as unknown) as CoreStart;
+
+  createCallApmApi(coreMock);
+
+  return <LinkPreview filters={filters} label={label} url={url} />;
+}
+Example.args = {
+  filters: [],
+  label: 'Example label',
+  url: 'https://example.com',
+} as ComponentProps<typeof LinkPreview>;

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,

x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx

@@ -0,0 +1,147 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import {
+  EuiPanel,
+  EuiText,
+  EuiSpacer,
+  EuiLink,
+  EuiToolTip,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { debounce } from 'lodash';
+import { Filter } from '../../../../../../../common/custom_link/custom_link_types';
+import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
+import { callApmApi } from '../../../../../../services/rest/createCallApmApi';
+import { replaceTemplateVariables, convertFiltersToQuery } from './helper';
+
+export interface LinkPreviewProps {
+  label: string;
+  url: string;
+  filters: Filter[];
+}
+
+const fetchTransaction = debounce(
+  async (filters: Filter[], callback: (transaction: Transaction) => void) => {
+    const transaction = await callApmApi({
+      signal: null,
+      endpoint: 'GET /api/apm/settings/custom_links/transaction',
+      params: { query: convertFiltersToQuery(filters) },
+    });
+    callback(transaction);
+  },
+  1000
+);
+
+const getTextColor = (value?: string) => (value ? 'default' : 'subdued');
+
+export function LinkPreview({ label, url, filters }: LinkPreviewProps) {
+  const [transaction, setTransaction] = useState<Transaction | undefined>();
+
+  useEffect(() => {
+    /*
+      React throwns "Can't perform a React state update on an unmounted component"
+      It happens when the Custom Link flyout is closed before the return of the api request.
+      To avoid such case, sets the isUnmounted to true when component unmount and check its value before update the transaction.
+    */
+    let isUnmounted = false;
+    fetchTransaction(filters, (_transaction: Transaction) => {
+      if (!isUnmounted) {
+        setTransaction(_transaction);
+      }
+    });
+    return () => {
+      isUnmounted = true;
+    };
+  }, [filters]);
+
+  const { formattedUrl, error } = replaceTemplateVariables(url, transaction);
+
+  return (
+    <>
+      <EuiTitle size="xs">
+        <h3>
+          {i18n.translate(
+            'xpack.apm.settings.customizeUI.customLink.previewSectionTitle',
+            {
+              defaultMessage: 'Preview',
+            }
+          )}
+        </h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiPanel paddingSize="l">
+        <EuiText
+          size="s"
+          color={getTextColor(label)}
+          className="eui-textBreakWord"
+          data-test-subj="preview-label"
+        >
+          {label
+            ? label
+            : i18n.translate(
+                'xpack.apm.settings.customizeUI.customLink.default.label',
+                { defaultMessage: 'Elastic.co' }
+              )}
+        </EuiText>
+
+        <EuiText
+          size="s"
+          color={getTextColor(url)}
+          className="eui-textBreakWord"
+          data-test-subj="preview-url"
+        >
+          {url ? (
+            <EuiLink
+              href={formattedUrl}
+              target="_blank"
+              data-test-subj="preview-link"
+            >
+              {formattedUrl}
+            </EuiLink>
+          ) : (
+            i18n.translate(
+              'xpack.apm.settings.customizeUI.customLink.default.url',
+              { defaultMessage: 'https://www.elastic.co' }
+            )
+          )}
+        </EuiText>
+        <EuiSpacer />
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" color="subdued">
+              {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.',
+                }
+              )}
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            {error && (
+              <EuiToolTip position="top" content={error}>
+                <EuiIcon
+                  type="alert"
+                  color="warning"
+                  data-test-subj="preview-warning"
+                />
+              </EuiToolTip>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </>
+  );
+}

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';

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';
 

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 = {