[7.10] Bump highlight.js to v9.18.5 (#84296) (#85369)

package.json

@@ -86,6 +86,8 @@
     "**/minimist": "^1.2.5",
     "**/node-jose/node-forge": "^0.10.0",
     "**/prismjs": "1.22.0",
+    "**/react-syntax-highlighter": "^15.3.1",
+    "**/react-syntax-highlighter/**/highlight.js": "^10.4.1",
     "**/request": "^2.88.2",
     "**/trim": "0.0.3",
     "**/typescript": "4.0.2"

packages/kbn-ui-framework/package.json

@@ -46,7 +46,7 @@
     "grunt-babel": "^8.0.0",
     "grunt-contrib-clean": "^1.1.0",
     "grunt-contrib-copy": "^1.0.0",
-    "highlight.js": "9.15.10",
+    "highlight.js": "^9.18.5",
     "html": "1.0.0",
     "html-loader": "^0.5.5",
     "imports-loader": "^0.8.0",

x-pack/package.json

@@ -232,7 +232,7 @@
     "react-router": "^5.2.0",
     "react-shortcuts": "^2.0.0",
     "react-sticky": "^6.0.3",
-    "react-syntax-highlighter": "^5.7.0",
+    "react-syntax-highlighter": "^15.3.1",
     "react-test-renderer": "^16.12.0",
     "react-tiny-virtual-list": "^2.2.0",
     "react-use": "^13.27.0",

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx

@@ -8,14 +8,9 @@ import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { tint } from 'polished';
 import React, { Fragment } from 'react';
-// @ts-expect-error
-import sql from 'react-syntax-highlighter/dist/languages/sql';
-import SyntaxHighlighter, {
-  registerLanguage,
-  // @ts-expect-error
-} from 'react-syntax-highlighter/dist/light';
-// @ts-expect-error
-import { xcode } from 'react-syntax-highlighter/dist/styles';
+import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
+import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import styled from 'styled-components';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 import {
@@ -28,7 +23,7 @@ import {
 } from '../../../../../../../style/variables';
 import { TruncateHeightSection } from './TruncateHeightSection';
 
-registerLanguage('sql', sql);
+SyntaxHighlighter.registerLanguage('sql', sql);
 
 const DatabaseStatement = styled.div`
   padding: ${px(units.half)} ${px(unit)};

x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx

@@ -7,26 +7,18 @@
 import { size } from 'lodash';
 import { tint } from 'polished';
 import React from 'react';
-// TODO add dependency for @types/react-syntax-highlighter
-// @ts-expect-error
-import javascript from 'react-syntax-highlighter/dist/languages/javascript';
-// @ts-expect-error
-import python from 'react-syntax-highlighter/dist/languages/python';
-// @ts-expect-error
-import ruby from 'react-syntax-highlighter/dist/languages/ruby';
-// @ts-expect-error
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/light';
-// @ts-expect-error
-import { registerLanguage } from 'react-syntax-highlighter/dist/light';
-// @ts-expect-error
-import { xcode } from 'react-syntax-highlighter/dist/styles';
+import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
+import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
+import ruby from 'react-syntax-highlighter/dist/cjs/languages/hljs/ruby';
+import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import styled from 'styled-components';
 import { StackframeWithLineContext } from '../../../../typings/es_schemas/raw/fields/stackframe';
 import { borderRadius, px, unit, units } from '../../../style/variables';
 
-registerLanguage('javascript', javascript);
-registerLanguage('python', python);
-registerLanguage('ruby', ruby);
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('ruby', ruby);
 
 const ContextContainer = styled.div`
   position: relative;
@@ -106,7 +98,9 @@ function getStackframeLines(stackframe: StackframeWithLineContext) {
   const line = stackframe.line.context;
   const preLines = stackframe.context?.pre || [];
   const postLines = stackframe.context?.post || [];
-  return [...preLines, line, ...postLines];
+  return [...preLines, line, ...postLines].map(
+    (x) => (x.endsWith('\n') ? x.slice(0, -1) : x) || ' '
+  );
 }
 
 function getStartLineNumber(stackframe: StackframeWithLineContext) {
@@ -146,7 +140,7 @@ export function Context({ stackframe, codeLanguage, isLibraryFrame }: Props) {
             CodeTag={Code}
             customStyle={{ padding: null, overflowX: null }}
           >
-            {line || '\n'}
+            {line}
           </SyntaxHighlighter>
         ))}
       </LineContainer>

x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx → x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.test.tsx

@@ -6,10 +6,10 @@
 
 import React from 'react';
 import { ReactWrapper, shallow } from 'enzyme';
-import { Stackframe } from '../../../../../typings/es_schemas/raw/fields/stackframe';
-import { mountWithTheme } from '../../../../utils/testHelpers';
-import { Stackframe as StackframeComponent } from '../Stackframe';
-import stacktracesMock from './stacktraces.json';
+import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
+import { mountWithTheme } from '../../../utils/testHelpers';
+import { Stackframe as StackframeComponent } from './Stackframe';
+import stacktracesMock from './__fixtures__/stacktraces.json';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
   return {
@@ -27,8 +27,12 @@ describe('Stackframe', () => {
       );
     });
 
-    it('should render correctly', () => {
-      expect(wrapper).toMatchSnapshot();
+    it('renders', () => {
+      expect(() =>
+        mountWithTheme(
+          <StackframeComponent id="test" stackframe={stacktracesMock[0]} />
+        )
+      ).not.toThrowError();
     });
 
     it('should render FrameHeading, Context and Variables', () => {