[Canvas] Adds argument to open all links in new tab within markdown element (#57017) (#58149)

* Adds toggle to open links in new tab within markdown element

* Updating test for markdown function

* Switch to using Markdown Component

* Update ui.ts

Update to change toggle verbiage per Ryan's request, and reuse the Kibana Markdown per Corey's help and recommendation. Still working on updating the styles (consulting Ryan)

* Update toggle.js

Update to prevent text for "Open links in new tab from wrapping" - the example from the horizontal bar chart is quite differently, and reads from "axisConfig" - when I changed the argType to "axisConfig", the layout was the same, but I'll need some input on which specific styles to add to the "ToggleArgInput" - I think this is where the style updates need to occur to get the toggle to stay on the same line, but may be wrong.

* Update ui.ts

Update to original message string per Ryan's feedback, now that there is no wrapping

* Update to UI styles per Ryan's feedback

* updating message per Ryan's request

* Update ui.ts

update to fix internationalization issues

Co-authored-by: Corey Robertson <crob611@gmail.com>

Co-authored-by: Corey Robertson <crob611@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: 3 people

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js

@@ -19,7 +19,7 @@ describe('markdown', () => {
   });
 
   describe('args', () => {
-    describe('expression', () => {
+    describe('content', () => {
       it('sets the content to all strings in expression concatenated', () => {
         const result = fn(null, {
           content: ['# this ', 'is ', 'some ', 'markdown'],
@@ -54,5 +54,32 @@ describe('markdown', () => {
       // TODO: write test when using an instance of the interpreter
       // it("defaults to the expression '{font}'", () => {});
     });
+    describe('openLinksInNewTab', () => {
+      it('sets the value of openLinksInNewTab to true ', () => {
+        const result = fn(null, {
+          content: ['some ', 'markdown'],
+          openLinksInNewTab: true,
+        });
+
+        expect(result.value).toHaveProperty('openLinksInNewTab', true);
+      });
+
+      it('sets the value of openLinksInNewTab to false ', () => {
+        const result = fn(null, {
+          content: ['some ', 'markdown'],
+          openLinksInNewTab: false,
+        });
+
+        expect(result.value).toHaveProperty('openLinksInNewTab', false);
+      });
+
+      it('defaults the value of openLinksInNewTab to false ', () => {
+        const result = fn(null, {
+          content: ['some ', 'markdown'],
+        });
+
+        expect(result.value).toHaveProperty('openLinksInNewTab', false);
+      });
+    });
   });
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts

@@ -19,11 +19,13 @@ type Context = Datatable | null;
 interface Arguments {
   content: string[];
   font: Style;
+  openLinksInNewTab: boolean;
 }
 
 interface Return {
   content: string;
   font: Style;
+  openLinksInNewTab: boolean;
 }
 
 export function markdown(): ExpressionFunctionDefinition<
@@ -53,6 +55,11 @@ export function markdown(): ExpressionFunctionDefinition<
         help: argHelp.font,
         default: '{font}',
       },
+      openLinksInNewTab: {
+        types: ['boolean'],
+        help: argHelp.openLinksInNewTab,
+        default: false,
+      },
     },
     fn: (input, args) => {
       const compileFunctions = args.content.map(str =>
@@ -71,6 +78,7 @@ export function markdown(): ExpressionFunctionDefinition<
         value: {
           content: compileFunctions.map(fn => fn(ctx)).join(''),
           font: args.font,
+          openLinksInNewTab: args.openLinksInNewTab,
         },
       };
     },

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/markdown/index.js

@@ -6,33 +6,29 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Markdown from 'markdown-it';
 import { RendererStrings } from '../../../i18n';
+import { Markdown } from '../../../../../../../src/legacy/core_plugins/kibana_react/public';
 
 const { markdown: strings } = RendererStrings;
 
-const md = new Markdown();
-
 export const markdown = () => ({
   name: 'markdown',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),
   reuseDomNode: true,
   render(domNode, config, handlers) {
-    const html = { __html: md.render(String(config.content)) };
     const fontStyle = config.font ? config.font.spec : {};
 
-    /* eslint-disable react/no-danger */
     ReactDOM.render(
-      <div
-        className="kbnMarkdown__body canvasMarkdown"
+      <Markdown
+        className="canvasMarkdown"
         style={fontStyle}
-        dangerouslySetInnerHTML={html}
+        markdown={config.content}
+        openLinksInNewTab={config.openLinksInNewTab}
       />,
       domNode,
       () => handlers.done()
     );
-    /* eslint-enable */
 
     handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
   },

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js

@@ -19,32 +19,37 @@ const ToggleArgInput = ({ onValueChange, argValue, argId, renderError, typeInsta
     return null;
   }
   return (
-    <EuiFormRow display="columnCompressedSwitch">
-      <EuiSwitch
-        compressed
-        id={argId}
-        checked={argValue}
-        onChange={handleChange}
-        className="canvasArg__switch"
-        aria-label={typeInstance.displayName}
-        label=""
-        showLabel={false}
-      />
-    </EuiFormRow>
+    <div>
+      <EuiFormRow display="rowCompressed">
+        <EuiSwitch
+          compressed
+          id={argId}
+          checked={argValue}
+          onChange={handleChange}
+          className="canvasArg__form"
+          aria-label={typeInstance.displayName}
+          resize="none"
+          label={typeInstance.options.labelValue}
+          showLabel
+        />
+      </EuiFormRow>
+    </div>
   );
 };
 
 ToggleArgInput.propTypes = {
   onValueChange: PropTypes.func.isRequired,
   argValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]).isRequired,
   argId: PropTypes.string.isRequired,
+  labelValue: PropTypes.string,
+  showLabelValue: PropTypes.bool,
   renderError: PropTypes.func.isRequired,
 };
 
 export const toggle = () => ({
   name: 'toggle',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  simpleTemplate: templateFromReactComponent(ToggleArgInput),
+  template: templateFromReactComponent(ToggleArgInput),
   default: 'false',
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/markdown.js

@@ -29,5 +29,16 @@ export const markdown = () => ({
       name: 'font',
       argType: 'font',
     },
+    {
+      name: 'openLinksInNewTab',
+      displayName: strings.getOpenLinksInNewTabDisplayName(),
+      help: strings.getOpenLinksInNewTabHelp(),
+      label: strings.getOpenLinksInNewTabLabelName(),
+      argType: 'toggle',
+      default: false,
+      options: {
+        labelValue: 'Open all links in a new tab',
+      },
+    },
   ],
 });

x-pack/legacy/plugins/canvas/i18n/functions/dict/markdown.ts

@@ -37,5 +37,9 @@ export const help: FunctionHelp<FunctionFactory<typeof markdown>> = {
         fontWeight: 'font-weight',
       },
     }),
+    openLinksInNewTab: i18n.translate('xpack.canvas.functions.markdown.args.openLinkHelpText', {
+      defaultMessage:
+        'A true/false value for opening links in a new tab. Default value is false. Setting to true will open all links in a new tab.',
+    }),
   },
 };

x-pack/legacy/plugins/canvas/i18n/ui.ts

@@ -628,6 +628,18 @@ export const ViewStrings = {
           markdown: MARKDOWN,
         },
       }),
+    getOpenLinksInNewTabDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.views.openLinksInNewTabTitle', {
+        defaultMessage: 'Markdown link settings',
+      }),
+    getOpenLinksInNewTabLabelName: () =>
+      i18n.translate('xpack.canvas.uis.views.openLinksInNewTabLabel', {
+        defaultMessage: 'Open all links in a new tab',
+      }),
+    getOpenLinksInNewTabHelp: () =>
+      i18n.translate('xpack.canvas.uis.views.openLinksInNewTabHelpLabel', {
+        defaultMessage: 'Set links to open in new tab',
+      }),
   },
   Metric: {
     getDisplayName: () =>