[ES|QL] Use the shared ux Markdown component (elastic#174320)

## Summary Part of elastic#174290 Part of elastic#173495 This PR: - uses the shared ux markdown component for ES|QL reference - this comes with a nice addition, the code block has a copy button - removes the sql documentation file, I plan to remove all the SQL related code in 8.14. As this transition to the new markdown needs some manual work I didn't want to do it for SQL as we removed it from the UI and we are going to remove it soonish from the code too <img width="1031" alt="image" src="https://github.com/elastic/kibana/assets/17003240/038c6ba6-143c-41d9-8186-3e91a2fb4c1d"> --------- Co-authored-by: kibanamachine <[email protected]>
fkanout · Mar 4, 2024 · 16c3a12 · 16c3a12
1 parent 5bef7a5
commit 16c3a12
Show file tree

Hide file tree

Showing 11 changed files with 219 additions and 1,498 deletions.
diff --git a/packages/kbn-language-documentation-popover/src/components/documentation_content.test.tsx b/packages/kbn-language-documentation-popover/src/components/documentation_content.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { mountWithIntl, findTestSubject } from '@kbn/test-jest-helpers';
 import { act } from 'react-dom/test-utils';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { LanguageDocumentationPopoverContent } from './documentation_content';
 
 describe('###Documentation popover content', () => {
@@ -25,11 +25,15 @@ describe('###Documentation popover content', () => {
         items: [
           {
             label: 'Section two item 1',
-            description: <Markdown markdown={`## Section two item 1 description `} />,
+            description: (
+              <Markdown readOnly markdownContent={`## Section two item 1 description `} />
+            ),
           },
           {
             label: 'Section two item 2',
-            description: <Markdown markdown={`## Section two item 2 description `} />,
+            description: (
+              <Markdown readOnly markdownContent={`## Section two item 2 description `} />
+            ),
           },
         ],
       },

diff --git a/packages/kbn-language-documentation-popover/src/utils/element_to_string.test.tsx b/packages/kbn-language-documentation-popover/src/utils/element_to_string.test.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { elementToString } from './element_to_string';
 
 describe('elementToString', () => {
@@ -21,15 +21,15 @@ describe('elementToString', () => {
   });
 
   test('Should convert to string if markdown is passed', () => {
-    const text = elementToString(<Markdown markdown={`## Markdown goes here `} />);
+    const text = elementToString(<Markdown markdownContent="## Markdown goes here " readOnly />);
     expect(text).toEqual('## Markdown goes here ');
   });
 
   test('Should convert to string if children with markdown are passed', () => {
     const text = elementToString(
       <>
         <h1>Meow</h1>
-        <Markdown markdown={`## Markdown goes here `} />
+        <Markdown markdownContent="## Markdown goes here " readOnly />
       </>
     );
     expect(text).toEqual('## Markdown goes here ');

diff --git a/packages/kbn-language-documentation-popover/src/utils/element_to_string.ts b/packages/kbn-language-documentation-popover/src/utils/element_to_string.ts
@@ -20,8 +20,8 @@ export function elementToString(element?: JSX.Element): string {
     return '';
   }
   const props = element.props;
-  if (props && 'markdown' in props) {
-    return String(props.markdown);
+  if (props && 'markdownContent' in props) {
+    return String(props.markdownContent);
   } else if (props && 'children' in props && Array.isArray(props.children)) {
     return props.children.reduce((text: string, child: React.ReactNode): string => {
       const validChildren = React.Children.toArray(child).filter(nonNullable);

diff --git a/packages/kbn-language-documentation-popover/tsconfig.json b/packages/kbn-language-documentation-popover/tsconfig.json
@@ -14,7 +14,7 @@
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/test-jest-helpers",
-    "@kbn/kibana-react-plugin",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",