From 4f9b0af6ec7c7f477a812d17cb84d886c82a2446 Mon Sep 17 00:00:00 2001
From: Daniil <daniil_suleiman@epam.com>
Date: Tue, 5 Jan 2021 12:38:52 +0300
Subject: [PATCH] Remove extra external link in markdown editor (#86933)

* Remove extra external icon

* Add unit tests

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../markdown_options.test.tsx.snap            | 68 +++++++++++++++++++
 .../public/markdown_options.test.tsx          | 56 +++++++++++++++
 .../public/markdown_options.tsx               |  8 +--
 3 files changed, 127 insertions(+), 5 deletions(-)
 create mode 100644 src/plugins/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap
 create mode 100644 src/plugins/vis_type_markdown/public/markdown_options.test.tsx

diff --git a/src/plugins/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap b/src/plugins/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap
new file mode 100644
index 0000000000000..03431fe2437b7
--- /dev/null
+++ b/src/plugins/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MarkdownOptions should match snapshot 1`] = `
+<EuiPanel
+  paddingSize="s"
+>
+  <EuiFlexGroup
+    className="mkdEditor"
+    direction="column"
+    gutterSize="m"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiFlexGroup
+        alignItems="baseline"
+        gutterSize="none"
+        justifyContent="spaceBetween"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="xs"
+          >
+            <h2>
+              <label
+                htmlFor="markdownVisInput"
+              >
+                Markdown
+              </label>
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiText
+            size="xs"
+          >
+            <EuiLink
+              href="https://help.github.com/articles/github-flavored-markdown/"
+              target="_blank"
+            >
+              <FormattedMessage
+                defaultMessage="Help"
+                id="visTypeMarkdown.params.helpLinkLabel"
+                values={Object {}}
+              />
+            </EuiLink>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiTextArea
+        className="visEditor--markdown__textarea"
+        data-test-subj="markdownTextarea"
+        fullWidth={true}
+        id="markdownVisInput"
+        onChange={[Function]}
+        resize="none"
+        value="hello from 2020 🥳"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</EuiPanel>
+`;
diff --git a/src/plugins/vis_type_markdown/public/markdown_options.test.tsx b/src/plugins/vis_type_markdown/public/markdown_options.test.tsx
new file mode 100644
index 0000000000000..170dde7ee91e6
--- /dev/null
+++ b/src/plugins/vis_type_markdown/public/markdown_options.test.tsx
@@ -0,0 +1,56 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { MarkdownVisParams } from './types';
+import { MarkdownOptions } from './markdown_options';
+
+describe('MarkdownOptions', () => {
+  const props = ({
+    stateParams: {
+      fontSize: 12,
+      markdown: 'hello from 2020 🥳',
+      openLinksInNewTab: false,
+    },
+    setValue: jest.fn(),
+  } as unknown) as VisOptionsProps<MarkdownVisParams>;
+
+  it('should match snapshot', () => {
+    const comp = shallow(<MarkdownOptions {...props} />);
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should update markdown on change', () => {
+    const comp = shallow(<MarkdownOptions {...props} />);
+    const value = 'see you in 2021 😎';
+    const textArea = comp.find('EuiTextArea');
+    const onChange = textArea.prop('onChange');
+    onChange?.({
+      target: {
+        // @ts-expect-error
+        value,
+      },
+    });
+
+    expect(props.setValue).toHaveBeenCalledWith('markdown', value);
+  });
+});
diff --git a/src/plugins/vis_type_markdown/public/markdown_options.tsx b/src/plugins/vis_type_markdown/public/markdown_options.tsx
index a6349793619a0..674fbeb517510 100644
--- a/src/plugins/vis_type_markdown/public/markdown_options.tsx
+++ b/src/plugins/vis_type_markdown/public/markdown_options.tsx
@@ -22,7 +22,6 @@ import {
   EuiPanel,
   EuiTitle,
   EuiLink,
-  EuiIcon,
   EuiTextArea,
   EuiFlexGroup,
   EuiFlexItem,
@@ -35,7 +34,7 @@ import { MarkdownVisParams } from './types';
 
 function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisParams>) {
   const onMarkdownUpdate = useCallback(
-    (value: MarkdownVisParams['markdown']) => setValue('markdown', value),
+    ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) => setValue('markdown', value),
     [setValue]
   );
 
@@ -61,8 +60,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
                   <FormattedMessage
                     id="visTypeMarkdown.params.helpLinkLabel"
                     defaultMessage="Help"
-                  />{' '}
-                  <EuiIcon type="popout" size="s" />
+                  />
                 </EuiLink>
               </EuiText>
             </EuiFlexItem>
@@ -74,7 +72,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
             id="markdownVisInput"
             className="visEditor--markdown__textarea"
             value={stateParams.markdown}
-            onChange={({ target: { value } }) => onMarkdownUpdate(value)}
+            onChange={onMarkdownUpdate}
             fullWidth={true}
             data-test-subj="markdownTextarea"
             resize="none"