From f0eedaeeeb210d0101a2d5c3cc3014da2d1d67cf Mon Sep 17 00:00:00 2001
From: Boris Kirov <borisasenovkirov@gmail.com>
Date: Fri, 1 Apr 2022 13:48:39 +0200
Subject: [PATCH 1/3] [APM] Convert DB statement code box to EuiCode Closes
 #76849

---
 .../waterfall/span_flyout/span_db.tsx         | 48 ++-----------------
 .../shared/metadata_table/index.tsx           | 24 +++++-----
 2 files changed, 17 insertions(+), 55 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
index 0d9af40888192..a7f7e7cead2e3 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
@@ -5,47 +5,24 @@
  * 2.0.
  */
 
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiCodeBlock } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { tint } from 'polished';
 import React, { Fragment } from 'react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
-import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
-import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
-import { useTheme } from '../../../../../../../hooks/use_theme';
-import { TruncateHeightSection } from './truncate_height_section';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 
-const DatabaseStatement = euiStyled.div`
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m}`};
-  background: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)};
-  border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall};
-  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
-  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
-  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
-`;
-
 interface Props {
   spanDb?: NonNullable<Span['span']>['db'];
 }
 
 export function SpanDatabase({ spanDb }: Props) {
-  const theme = useTheme();
-  const dbSyntaxLineHeight = theme.eui.euiSizeL;
-  const previewHeight = 240; // 10 * dbSyntaxLineHeight
-
   if (!spanDb || !spanDb.statement) {
     return null;
   }
 
-  if (spanDb.type !== 'sql') {
-    return <DatabaseStatement>{spanDb.statement}</DatabaseStatement>;
-  }
-
   return (
     <Fragment>
       <EuiTitle size="xs">
@@ -58,26 +35,11 @@ export function SpanDatabase({ spanDb }: Props) {
           )}
         </h3>
       </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiCodeBlock language="sql" fontSize="m" paddingSize="m">
+        {spanDb.statement}
+      </EuiCodeBlock>
       <EuiSpacer size="m" />
-      <DatabaseStatement>
-        <TruncateHeightSection previewHeight={previewHeight}>
-          <SyntaxHighlighter
-            language={'sql'}
-            style={xcode}
-            customStyle={{
-              color: null,
-              background: null,
-              padding: null,
-              lineHeight: dbSyntaxLineHeight,
-              whiteSpace: 'pre-wrap',
-              overflowX: 'scroll',
-            }}
-          >
-            {spanDb.statement}
-          </SyntaxHighlighter>
-        </TruncateHeightSection>
-      </DatabaseStatement>
-      <EuiSpacer size="l" />
     </Fragment>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx b/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
index ab6c132c61e13..a8dcbaff08521 100644
--- a/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
@@ -58,28 +58,28 @@ export function MetadataTable({ sections, isLoading }: Props) {
   const noResultFound = Boolean(searchTerm) && isEmpty(filteredSections);
   return (
     <React.Fragment>
-      <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiLink href={docLinks.links.apm.metaData}>
-            <EuiText size="s">
-              <EuiIcon type="help" /> How to add labels and other data
-            </EuiText>
-          </EuiLink>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
           <EuiFieldSearch
             onChange={onSearchChange}
             placeholder={i18n.translate('xpack.apm.searchInput.filter', {
               defaultMessage: 'Filter...',
             })}
-            style={{
-              width: 400,
-            }}
             isInvalid={noResultFound}
             value={searchTerm}
+            fullWidth={true}
           />
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiLink href={docLinks.links.apm.metaData}>
+            <EuiText size="s">
+              <EuiIcon type="help" /> How to add labels and other data
+            </EuiText>
+          </EuiLink>
+        </EuiFlexItem>
       </EuiFlexGroup>
+      <EuiSpacer size="m" />
       {isLoading && (
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>

From 23ddc02d15cb3f453a30aecd2934d6bc7f5e8151 Mon Sep 17 00:00:00 2001
From: Boris Kirov <borisasenovkirov@gmail.com>
Date: Fri, 1 Apr 2022 15:04:15 +0200
Subject: [PATCH 2/3] added a target_blank attribute to the link

---
 .../apm/public/components/shared/metadata_table/index.tsx   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx b/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
index a8dcbaff08521..c7e5cf77dd220 100644
--- a/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
@@ -72,10 +72,8 @@ export function MetadataTable({ sections, isLoading }: Props) {
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiLink href={docLinks.links.apm.metaData}>
-            <EuiText size="s">
-              <EuiIcon type="help" /> How to add labels and other data
-            </EuiText>
+          <EuiLink href={docLinks.links.apm.metaData} target="_blank">
+            <EuiIcon type="help" /> How to add labels and other data
           </EuiLink>
         </EuiFlexItem>
       </EuiFlexGroup>

From 9281917b9a3bf248d15058d4805ca7b280231c92 Mon Sep 17 00:00:00 2001
From: Boris Kirov <borisasenovkirov@gmail.com>
Date: Fri, 1 Apr 2022 15:20:41 +0200
Subject: [PATCH 3/3] added target attribute and removed more code from the db
 statement

---
 .../waterfall_container/waterfall/span_flyout/span_db.tsx     | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
index a7f7e7cead2e3..ff67baea99095 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
@@ -8,12 +8,8 @@
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 
-SyntaxHighlighter.registerLanguage('sql', sql);
-
 interface Props {
   spanDb?: NonNullable<Span['span']>['db'];
 }