[Security Solution][All] Replace old markdown renderer with the new one #80301

cnasikas · 2020-10-13T09:02:47Z

Summary

This PR introduced the new EuiMarkdownEditor for cases. Some components in the Security Solution app still uses the old markdown editor. This PR removes the old markdown and replace it with the new one.

Note: Markdown URLs are enabled on the case widget on the overview page. Before this PR there were not enabled (rendered).

Checklist

Delete any items that are not applicable to this PR.

Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2020-10-13T09:02:50Z

Pinging @elastic/siem (Team:SIEM)

yctercero · 2020-10-13T16:01:51Z

...ugins/security_solution/public/detections/components/rules/step_about_rule_details/index.tsx

@@ -136,7 +136,7 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
                  maxHeight={aboutPanelHeight}
                  className="eui-yScrollWithShadows"
                >
-                  <Markdown raw={stepDataDetails.note} />
+                  <MarkdownRenderer>{stepDataDetails.note}</MarkdownRenderer>


👍 thank you!

...s/security_solution/public/timelines/components/open_timeline/note_previews/note_preview.tsx

yctercero

LGTM (Note - just focused on use in rules, not cases)! Pulled down and tested markdown on rule creation, made sure it shows up in rule details and that a new note is appended to a timeline opened from an alert where the rule has an investigation guide 👍 Thanks for updating this!

stephmilovic

Code review and manual testing both LGTM. Thanks @cnasikas !!

x-pack/plugins/security_solution/public/overview/components/recent_cases/recent_cases.tsx

x-pack/plugins/security_solution/public/common/components/markdown/index.test.tsx

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/index.ts

cnasikas · 2020-10-19T07:24:18Z

@elasticmachine merge upstream

x-pack/plugins/security_solution/public/common/components/markdown_editor/markdown_link.tsx

kibanamachine · 2020-10-20T19:09:51Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 68143c4

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`securitySolution`	2057	2060	+3

async chunks size

id	before	after	diff
`securitySolution`	8.1MB	8.1MB	-2.7KB

History

💚 Build #82796 succeeded a73e977
💚 Build #82689 succeeded 718630e
💚 Build #82348 succeeded 4a5b30c
💚 Build #81867 succeeded 9fc87dd
💚 Build #81352 succeeded 6173f6e

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

andrew-goldstein · 2020-10-20T20:38:20Z

x-pack/plugins/security_solution/public/common/components/markdown_editor/markdown_link.tsx

+    <EuiLink
+      href={disableLinks ? undefined : href}
+      data-test-subj="markdown-link"
+      rel={`${REL_NOFOLLOW}`}


nit: consider dropping the extraneous template, i.e.

rel={REL_NOFOLLOW}

andrew-goldstein

Thanks for migrating the rest of the Security solution to the EUI Markdown formatter and renderer @cnasikas! 🙏

Desk tested:

global timeline notes
inline timeline notes
case notes
rendering case descriptions w/links in the Overview
external link rendering
timeline link rendering
timeline Analyze event-link rendering
x-browser markdown formatting (the example below is from FF):

LGTM 🚀 📓 ✏️

…ne (elastic#80301)

… new one (#80301) (#81280)

…arm-phase-to-formlib * 'master' of github.com:elastic/kibana: (55 commits) [UX] Fix map color variance and apply proper filter for extended stats (elastic#81106) [User Experience] Use EuiSelect for percentiles instead of SuperSelect (elastic#81082) [DOCS] Add link for monitoring ssl settings (elastic#81057) [test] Await loading indicator in monitoring test (elastic#81279) [ILM] Minor copy and link additions to cloud CTA for cold phase (elastic#80512) [Mappings editor] Add scaled_float and date_range comp integration tests (elastic#81287) [Discover] Deangularize context.app (elastic#80851) [O11y Overview] Add code to display/hide UX section when appropriate (elastic#80873) [Discover] Extend DiscoverNoResults component to show different message on error (elastic#79671) Fix tagcloud word overlapping (elastic#81161) [Security Solution] Fixes flaky test rules (elastic#81040) Changed the code to avoid tech debt with hacky solutions after receiving comments on EUI issue reported about this problem. (elastic#81183) [Security Solution][All] Replace old markdown renderer with the new one (elastic#80301) Add namespaced version of the API call (elastic#81278) [ML] Data Frame Analytics: Fix race condition and support for feature influence legacy format. (elastic#81123) [Fleet] Fix POLICY_CHANGE action creation for new policy (elastic#81236) [Security Solution][Endpoint][Admin] Malware user notification checkbox (elastic#78084) [SecuritySolution][Unit Tests] - fix flakey unit test (elastic#81239) skip flaky suite (elastic#81264) [Maps] fix top-level Map page is called 'Kibana' (elastic#81238) ... # Conflicts: # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/forcemerge_field.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/warm_phase.tsx

cnasikas added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.11.0 Team:Detections and Resp Security Detection Response Team Team:Threat Hunting Security Solution Threat Hunting Team labels Oct 13, 2020

cnasikas requested review from andrew-goldstein and yctercero October 13, 2020 09:02

cnasikas requested review from a team as code owners October 13, 2020 09:02

cnasikas self-assigned this Oct 13, 2020

cnasikas requested a review from stephmilovic October 13, 2020 09:05

yctercero reviewed Oct 13, 2020

View reviewed changes

...s/security_solution/public/timelines/components/open_timeline/note_previews/note_preview.tsx Outdated Show resolved Hide resolved

yctercero approved these changes Oct 13, 2020

View reviewed changes

stephmilovic approved these changes Oct 13, 2020

View reviewed changes

andrew-goldstein reviewed Oct 14, 2020

View reviewed changes

x-pack/plugins/security_solution/public/overview/components/recent_cases/recent_cases.tsx Outdated Show resolved Hide resolved

andrew-goldstein reviewed Oct 14, 2020

View reviewed changes

x-pack/plugins/security_solution/public/common/components/markdown/index.test.tsx Show resolved Hide resolved

andrew-goldstein reviewed Oct 15, 2020

View reviewed changes

x-pack/plugins/security_solution/public/common/components/markdown/index.test.tsx Show resolved Hide resolved

andrew-goldstein reviewed Oct 15, 2020

View reviewed changes

x-pack/plugins/security_solution/public/common/components/markdown/index.test.tsx Show resolved Hide resolved

andrew-goldstein reviewed Oct 15, 2020

View reviewed changes

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/index.ts Show resolved Hide resolved

cnasikas force-pushed the replace_markdown branch from 6173f6e to 9fc87dd Compare October 15, 2020 13:24

cnasikas added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Oct 16, 2020

cnasikas added 4 commits October 20, 2020 09:52

Replace old markdown renderer with the new one

175a41a

Remove timeline's add note tabs

af577db

Fix i18n

fb7ebd2

Fix integration tests

239688f

cnasikas force-pushed the replace_markdown branch from 4a5b30c to b1d01bd Compare October 20, 2020 08:06

cnasikas force-pushed the replace_markdown branch 2 times, most recently from 2ac9079 to 718630e Compare October 20, 2020 08:20

Open links in new tab & disable links if needed

a73e977

cnasikas force-pushed the replace_markdown branch from 718630e to a73e977 Compare October 20, 2020 14:26

andrew-goldstein reviewed Oct 20, 2020

View reviewed changes

x-pack/plugins/security_solution/public/common/components/markdown_editor/markdown_link.tsx Outdated Show resolved Hide resolved

Add tooltip around links

68143c4

andrew-goldstein reviewed Oct 20, 2020

View reviewed changes

andrew-goldstein approved these changes Oct 20, 2020

View reviewed changes

cnasikas merged commit ad2fe78 into elastic:master Oct 21, 2020

cnasikas deleted the replace_markdown branch October 21, 2020 07:32

cnasikas added a commit to cnasikas/kibana that referenced this pull request Oct 21, 2020

[Security Solution][All] Replace old markdown renderer with the new o…

07d5719

…ne (elastic#80301)

cnasikas mentioned this pull request Oct 21, 2020

[7.x] [Security Solution][All] Replace old markdown renderer with the new one (#80301) #81280

Merged

cnasikas added a commit that referenced this pull request Oct 21, 2020

[7.x] [Security Solution][All] Replace old markdown renderer with the…

2a09061

… new one (#80301) (#81280)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][All] Replace old markdown renderer with the new one #80301

[Security Solution][All] Replace old markdown renderer with the new one #80301

cnasikas commented Oct 13, 2020 •

edited

Loading

elasticmachine commented Oct 13, 2020

yctercero Oct 13, 2020

yctercero left a comment

stephmilovic left a comment

cnasikas commented Oct 19, 2020

kibanamachine commented Oct 20, 2020

andrew-goldstein Oct 20, 2020

andrew-goldstein left a comment

[Security Solution][All] Replace old markdown renderer with the new one #80301

[Security Solution][All] Replace old markdown renderer with the new one #80301

Conversation

cnasikas commented Oct 13, 2020 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Oct 13, 2020

yctercero Oct 13, 2020

Choose a reason for hiding this comment

yctercero left a comment

Choose a reason for hiding this comment

stephmilovic left a comment

Choose a reason for hiding this comment

cnasikas commented Oct 19, 2020

kibanamachine commented Oct 20, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

History

andrew-goldstein Oct 20, 2020

Choose a reason for hiding this comment

andrew-goldstein left a comment

Choose a reason for hiding this comment

cnasikas commented Oct 13, 2020 •

edited

Loading