From ba9509ed33386469e2797fbedaa5cbcc42237374 Mon Sep 17 00:00:00 2001
From: Yara Tercero <yara.tercero@elastic.co>
Date: Tue, 9 Jun 2020 08:21:56 -0400
Subject: [PATCH 1/2] quick fix on rule reference urls not breaking and
 overflowing

---
 .../alerts/components/rules/description_step/helpers.tsx  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/helpers.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/helpers.tsx
index 091065eedfc22..a0d43c3abf5c1 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/helpers.tsx
@@ -225,6 +225,10 @@ export const buildSeverityDescription = (label: string, value: string): ListItem
   },
 ];
 
+const MyRefUrlLink = styled(EuiLink)`
+  word-break: break-word;
+`;
+
 export const buildUrlsDescription = (label: string, values: string[]): ListItems[] => {
   if (isNotEmptyArray(values)) {
     return [
@@ -237,9 +241,9 @@ export const buildUrlsDescription = (label: string, values: string[]): ListItems
                 .filter((v) => !isEmpty(v))
                 .map((val, index) => (
                   <li data-test-subj="urlsDescriptionReferenceLinkItem" key={`${index}-${val}`}>
-                    <EuiLink href={val} external target="_blank">
+                    <MyRefUrlLink href={val} external target="_blank">
                       {val}
-                    </EuiLink>
+                    </MyRefUrlLink>
                   </li>
                 ))}
             </ul>

From 01cc29d3286dd08faf7880e51ed89a5e1216c974 Mon Sep 17 00:00:00 2001
From: Yara Tercero <yara.tercero@elastic.co>
Date: Tue, 9 Jun 2020 10:33:17 -0400
Subject: [PATCH 2/2] updated tests, removed snapshots

---
 .../__snapshots__/index.test.tsx.snap         | 441 ------------------
 .../rules/description_step/index.test.tsx     |   9 +-
 2 files changed, 3 insertions(+), 447 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/alerts/components/rules/description_step/__snapshots__/index.test.tsx.snap

diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 31abea53462fa..0000000000000
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,441 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`description_step StepRuleDescriptionComponent renders correctly against snapshot when columns is "multi" 1`] = `
-<EuiFlexGroup>
-  <EuiFlexItem
-    data-test-subj="listItemColumnStepRuleDescription"
-    key="description-step-rule-0"
-  >
-    <EuiDescriptionList
-      listItems={
-        Array [
-          Object {
-            "description": "Query with rule-id",
-            "title": "Name",
-          },
-          Object {
-            "description": "24/7",
-            "title": "Description",
-          },
-          Object {
-            "description": <Memo(SeverityBadgeComponent)
-              value="low"
-            />,
-            "title": "Severity",
-          },
-          Object {
-            "description": 21,
-            "title": "Risk score",
-          },
-          Object {
-            "description": <EuiText
-              size="s"
-            >
-              <ul>
-                <li
-                  data-test-subj="urlsDescriptionReferenceLinkItem"
-                >
-                  <ForwardRef
-                    external={true}
-                    href="www.test.co"
-                    target="_blank"
-                  >
-                    www.test.co
-                  </ForwardRef>
-                </li>
-              </ul>
-            </EuiText>,
-            "title": "Reference URLs",
-          },
-        ]
-      }
-    />
-  </EuiFlexItem>
-  <EuiFlexItem
-    data-test-subj="listItemColumnStepRuleDescription"
-    key="description-step-rule-1"
-  >
-    <EuiDescriptionList
-      listItems={
-        Array [
-          Object {
-            "description": <EuiText
-              size="s"
-            >
-              <ul>
-                <li
-                  data-test-subj="unorderedListArrayDescriptionItem"
-                >
-                  test
-                </li>
-              </ul>
-            </EuiText>,
-            "title": "False positive examples",
-          },
-          Object {
-            "description": <ForwardRef(Styled(EuiFlexGroup))
-              direction="column"
-            >
-              <EuiFlexItem>
-                <ForwardRef
-                  data-test-subj="threatTacticLink"
-                  href="reference1"
-                  target="_blank"
-                >
-                  
-                </ForwardRef>
-                <ForwardRef
-                  alignItems="flexStart"
-                  direction="column"
-                  gutterSize="none"
-                >
-                  <EuiFlexItem>
-                    <ForwardRef(Styled(EuiButtonEmpty))
-                      data-test-subj="threatTechniqueLink"
-                      flush="left"
-                      href="technique reference"
-                      iconType="test-file-stub"
-                      size="xs"
-                      target="_blank"
-                    >
-                      
-                    </ForwardRef(Styled(EuiButtonEmpty))>
-                  </EuiFlexItem>
-                </ForwardRef>
-              </EuiFlexItem>
-              <EuiSpacer />
-            </ForwardRef(Styled(EuiFlexGroup))>,
-            "title": "MITRE ATT&CK™",
-          },
-          Object {
-            "description": <ForwardRef
-              gutterSize="xs"
-              responsive={false}
-              wrap={true}
-            >
-              <EuiFlexItem
-                grow={false}
-              >
-                <ForwardRef(Styled(EuiBadge))
-                  color="hollow"
-                  data-test-subj="stringArrayDescriptionBadgeItem"
-                >
-                  tag1
-                </ForwardRef(Styled(EuiBadge))>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                <ForwardRef(Styled(EuiBadge))
-                  color="hollow"
-                  data-test-subj="stringArrayDescriptionBadgeItem"
-                >
-                  tag2
-                </ForwardRef(Styled(EuiBadge))>
-              </EuiFlexItem>
-            </ForwardRef>,
-            "title": "Tags",
-          },
-          Object {
-            "description": <ForwardRef(Styled(EuiFlexItem))>
-              <div
-                className="eui-yScrollWithShadows"
-                data-test-subj="noteDescriptionItem"
-              >
-                # this is some markdown documentation
-              </div>
-            </ForwardRef(Styled(EuiFlexItem))>,
-            "title": "Investigation guide",
-          },
-        ]
-      }
-    />
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`description_step StepRuleDescriptionComponent renders correctly against snapshot when columns is "single" 1`] = `
-<EuiFlexGroup>
-  <EuiFlexItem
-    data-test-subj="listItemColumnStepRuleDescription"
-  >
-    <EuiDescriptionList
-      listItems={
-        Array [
-          Object {
-            "description": "Query with rule-id",
-            "title": "Name",
-          },
-          Object {
-            "description": "24/7",
-            "title": "Description",
-          },
-          Object {
-            "description": <Memo(SeverityBadgeComponent)
-              value="low"
-            />,
-            "title": "Severity",
-          },
-          Object {
-            "description": 21,
-            "title": "Risk score",
-          },
-          Object {
-            "description": <EuiText
-              size="s"
-            >
-              <ul>
-                <li
-                  data-test-subj="urlsDescriptionReferenceLinkItem"
-                >
-                  <ForwardRef
-                    external={true}
-                    href="www.test.co"
-                    target="_blank"
-                  >
-                    www.test.co
-                  </ForwardRef>
-                </li>
-              </ul>
-            </EuiText>,
-            "title": "Reference URLs",
-          },
-          Object {
-            "description": <EuiText
-              size="s"
-            >
-              <ul>
-                <li
-                  data-test-subj="unorderedListArrayDescriptionItem"
-                >
-                  test
-                </li>
-              </ul>
-            </EuiText>,
-            "title": "False positive examples",
-          },
-          Object {
-            "description": <ForwardRef(Styled(EuiFlexGroup))
-              direction="column"
-            >
-              <EuiFlexItem>
-                <ForwardRef
-                  data-test-subj="threatTacticLink"
-                  href="reference1"
-                  target="_blank"
-                >
-                  
-                </ForwardRef>
-                <ForwardRef
-                  alignItems="flexStart"
-                  direction="column"
-                  gutterSize="none"
-                >
-                  <EuiFlexItem>
-                    <ForwardRef(Styled(EuiButtonEmpty))
-                      data-test-subj="threatTechniqueLink"
-                      flush="left"
-                      href="technique reference"
-                      iconType="test-file-stub"
-                      size="xs"
-                      target="_blank"
-                    >
-                      
-                    </ForwardRef(Styled(EuiButtonEmpty))>
-                  </EuiFlexItem>
-                </ForwardRef>
-              </EuiFlexItem>
-              <EuiSpacer />
-            </ForwardRef(Styled(EuiFlexGroup))>,
-            "title": "MITRE ATT&CK™",
-          },
-          Object {
-            "description": <ForwardRef
-              gutterSize="xs"
-              responsive={false}
-              wrap={true}
-            >
-              <EuiFlexItem
-                grow={false}
-              >
-                <ForwardRef(Styled(EuiBadge))
-                  color="hollow"
-                  data-test-subj="stringArrayDescriptionBadgeItem"
-                >
-                  tag1
-                </ForwardRef(Styled(EuiBadge))>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                <ForwardRef(Styled(EuiBadge))
-                  color="hollow"
-                  data-test-subj="stringArrayDescriptionBadgeItem"
-                >
-                  tag2
-                </ForwardRef(Styled(EuiBadge))>
-              </EuiFlexItem>
-            </ForwardRef>,
-            "title": "Tags",
-          },
-          Object {
-            "description": <ForwardRef(Styled(EuiFlexItem))>
-              <div
-                className="eui-yScrollWithShadows"
-                data-test-subj="noteDescriptionItem"
-              >
-                # this is some markdown documentation
-              </div>
-            </ForwardRef(Styled(EuiFlexItem))>,
-            "title": "Investigation guide",
-          },
-        ]
-      }
-    />
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`description_step StepRuleDescriptionComponent renders correctly against snapshot when columns is "singleSplit 1`] = `
-<EuiFlexGroup>
-  <EuiFlexItem
-    data-test-subj="listItemColumnStepRuleDescription"
-  >
-    <Styled(EuiDescriptionList)
-      data-test-subj="singleSplitStepRuleDescriptionList"
-      listItems={
-        Array [
-          Object {
-            "description": "Query with rule-id",
-            "title": "Name",
-          },
-          Object {
-            "description": "24/7",
-            "title": "Description",
-          },
-          Object {
-            "description": <Memo(SeverityBadgeComponent)
-              value="low"
-            />,
-            "title": "Severity",
-          },
-          Object {
-            "description": 21,
-            "title": "Risk score",
-          },
-          Object {
-            "description": <EuiText
-              size="s"
-            >
-              <ul>
-                <li
-                  data-test-subj="urlsDescriptionReferenceLinkItem"
-                >
-                  <ForwardRef
-                    external={true}
-                    href="www.test.co"
-                    target="_blank"
-                  >
-                    www.test.co
-                  </ForwardRef>
-                </li>
-              </ul>
-            </EuiText>,
-            "title": "Reference URLs",
-          },
-          Object {
-            "description": <EuiText
-              size="s"
-            >
-              <ul>
-                <li
-                  data-test-subj="unorderedListArrayDescriptionItem"
-                >
-                  test
-                </li>
-              </ul>
-            </EuiText>,
-            "title": "False positive examples",
-          },
-          Object {
-            "description": <ForwardRef(Styled(EuiFlexGroup))
-              direction="column"
-            >
-              <EuiFlexItem>
-                <ForwardRef
-                  data-test-subj="threatTacticLink"
-                  href="reference1"
-                  target="_blank"
-                >
-                  
-                </ForwardRef>
-                <ForwardRef
-                  alignItems="flexStart"
-                  direction="column"
-                  gutterSize="none"
-                >
-                  <EuiFlexItem>
-                    <ForwardRef(Styled(EuiButtonEmpty))
-                      data-test-subj="threatTechniqueLink"
-                      flush="left"
-                      href="technique reference"
-                      iconType="test-file-stub"
-                      size="xs"
-                      target="_blank"
-                    >
-                      
-                    </ForwardRef(Styled(EuiButtonEmpty))>
-                  </EuiFlexItem>
-                </ForwardRef>
-              </EuiFlexItem>
-              <EuiSpacer />
-            </ForwardRef(Styled(EuiFlexGroup))>,
-            "title": "MITRE ATT&CK™",
-          },
-          Object {
-            "description": <ForwardRef
-              gutterSize="xs"
-              responsive={false}
-              wrap={true}
-            >
-              <EuiFlexItem
-                grow={false}
-              >
-                <ForwardRef(Styled(EuiBadge))
-                  color="hollow"
-                  data-test-subj="stringArrayDescriptionBadgeItem"
-                >
-                  tag1
-                </ForwardRef(Styled(EuiBadge))>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                <ForwardRef(Styled(EuiBadge))
-                  color="hollow"
-                  data-test-subj="stringArrayDescriptionBadgeItem"
-                >
-                  tag2
-                </ForwardRef(Styled(EuiBadge))>
-              </EuiFlexItem>
-            </ForwardRef>,
-            "title": "Tags",
-          },
-          Object {
-            "description": <ForwardRef(Styled(EuiFlexItem))>
-              <div
-                className="eui-yScrollWithShadows"
-                data-test-subj="noteDescriptionItem"
-              >
-                # this is some markdown documentation
-              </div>
-            </ForwardRef(Styled(EuiFlexItem))>,
-            "title": "Investigation guide",
-          },
-        ]
-      }
-      type="column"
-    />
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/index.test.tsx
index b8f81f6d7e5f7..2bd90f17daf0c 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/description_step/index.test.tsx
@@ -54,27 +54,24 @@ describe('description_step', () => {
   });
 
   describe('StepRuleDescriptionComponent', () => {
-    test('renders correctly against snapshot when columns is "multi"', () => {
+    test('renders tow columns when "columns" is "multi"', () => {
       const wrapper = shallow(
         <StepRuleDescriptionComponent columns="multi" data={mockAboutStep} schema={schema} />
       );
-      expect(wrapper).toMatchSnapshot();
       expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(2);
     });
 
-    test('renders correctly against snapshot when columns is "single"', () => {
+    test('renders single column when "columns" is "single"', () => {
       const wrapper = shallow(
         <StepRuleDescriptionComponent columns="single" data={mockAboutStep} schema={schema} />
       );
-      expect(wrapper).toMatchSnapshot();
       expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(1);
     });
 
-    test('renders correctly against snapshot when columns is "singleSplit', () => {
+    test('renders one column with title and description split when "columns" is "singleSplit', () => {
       const wrapper = shallow(
         <StepRuleDescriptionComponent columns="singleSplit" data={mockAboutStep} schema={schema} />
       );
-      expect(wrapper).toMatchSnapshot();
       expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(1);
       expect(
         wrapper.find('[data-test-subj="singleSplitStepRuleDescriptionList"]').at(0).prop('type')