From 91b236be7007eba19de9cf68aa33d83fedb1a907 Mon Sep 17 00:00:00 2001 From: Federico Ricciuti Date: Tue, 20 Feb 2024 14:58:22 +0100 Subject: [PATCH] Parse markdown in file instructions and segment notes (#3102) * Parse markdown in file instructions and segment notes * Update Submodule * Update submodule * Update submodule * Update submodule * Change modal label * dependencies --------- Co-authored-by: Mauro Cassani --- package.json | 1 - plugins/translated | 2 +- plugins/uber | 2 +- public/css/sass/modals/instructionsModal.scss | 5 +++ public/css/sass/segment-notes.scss | 11 +++-- .../es6/components/modals/JobMetadataModal.js | 13 +----- .../es6/components/segments/SegmentFooter.js | 1 + .../segments/SegmentFooterTabMessages.js | 43 ++++++++++--------- 8 files changed, 40 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 250abbf004..6340122911 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "react-tagsinput": "^3.19.0", "react-transition-group": "^4.2.2", "react-virtual": "^2.10.4", - "showdown": "^2.0.0", "sprintf-js": "^1.1.2" }, "devDependencies": { diff --git a/plugins/translated b/plugins/translated index ba1cc38fec..b28b4f25e8 160000 --- a/plugins/translated +++ b/plugins/translated @@ -1 +1 @@ -Subproject commit ba1cc38fecc281263117e5a21f5660aa28956fbf +Subproject commit b28b4f25e829b5df1a25dfa265f573e471c66445 diff --git a/plugins/uber b/plugins/uber index c5f7e78dc4..dd644fbe9c 160000 --- a/plugins/uber +++ b/plugins/uber @@ -1 +1 @@ -Subproject commit c5f7e78dc474a7b33c07a659544c3fc14587ab44 +Subproject commit dd644fbe9c6d01fba235c2e9b6f0b80a355f1d4d diff --git a/public/css/sass/modals/instructionsModal.scss b/public/css/sass/modals/instructionsModal.scss index 4c75a947cb..64fd14afdd 100644 --- a/public/css/sass/modals/instructionsModal.scss +++ b/public/css/sass/modals/instructionsModal.scss @@ -60,6 +60,11 @@ line-height: 26px; word-break: break-all; } + blockquote { + border-left: 5px solid #ccc; + margin: 1.5em 10px; + padding: 0.5em 10px; + } } .description { diff --git a/public/css/sass/segment-notes.scss b/public/css/sass/segment-notes.scss index bd4c24ba99..ff0bc8435f 100644 --- a/public/css/sass/segment-notes.scss +++ b/public/css/sass/segment-notes.scss @@ -66,6 +66,8 @@ div.segment-notes ul.graysmall li span.note-label { font-size: 16px; word-break: break-word; white-space: pre-wrap; + display: flex; + align-content: center; } .segments-notes-container .metadata-notes { display: flex; @@ -73,9 +75,12 @@ div.segment-notes ul.graysmall li span.note-label { flex-direction: row; } -.segments-notes-container div.note p { - margin: 0; - line-height: 25px; +.segments-notes-container div.note { + p, + span { + margin: 0; + line-height: 20px; + } } .segments-notes-container div.note p a { diff --git a/public/js/cat_source/es6/components/modals/JobMetadataModal.js b/public/js/cat_source/es6/components/modals/JobMetadataModal.js index 827427c041..f6d3ab25e8 100644 --- a/public/js/cat_source/es6/components/modals/JobMetadataModal.js +++ b/public/js/cat_source/es6/components/modals/JobMetadataModal.js @@ -1,6 +1,4 @@ -import showdown from 'showdown' import React from 'react' - import CommonUtils from '../../utils/commonUtils' import TextUtils from '../../utils/textUtils' @@ -8,13 +6,6 @@ class JobMetadataModal extends React.Component { constructor(props) { super(props) this.state = {} - this.converter = new showdown.Converter() - this.converter.setOption('literalMidWordUnderscores', true) - // this.instructions = - // '**Client:** Product - Rider \n' + - // '**Domain:** UI \n' + - // '**Note:** Link to file a query: http://t.uber.com/riderq Rider \n' + - // ' Screen Search: https://docs.google.com/document/d/19Dk92t9NXdN.'; } createFileList() { const {currentFile, currentFilePart} = this.props @@ -89,7 +80,7 @@ class JobMetadataModal extends React.Component { } getHtml(text) { - return TextUtils.replaceUrl(text.replace(/[ ]*\n/g, '
\n')) + return text } componentDidMount() { @@ -123,7 +114,7 @@ class JobMetadataModal extends React.Component { {this.props.files && this.props.files.find((file) => file.metadata.instructions) && (
-

Files instructions

+

File instructions

{ diff --git a/public/js/cat_source/es6/components/segments/SegmentFooter.js b/public/js/cat_source/es6/components/segments/SegmentFooter.js index 2fddc6d374..3d39d4f4ac 100644 --- a/public/js/cat_source/es6/components/segments/SegmentFooter.js +++ b/public/js/cat_source/es6/components/segments/SegmentFooter.js @@ -145,6 +145,7 @@ function SegmentFooter() { getMetadataNoteTemplate: () => segment.metadata?.length > 0 ? segment.metadata : null, allowHTML: () => '', + getNoteContentStructure: (note) => note, } const notes = SegmentFooterTabMessages.prototype.getNotes.call(tabMessagesContext) diff --git a/public/js/cat_source/es6/components/segments/SegmentFooterTabMessages.js b/public/js/cat_source/es6/components/segments/SegmentFooterTabMessages.js index 737d566660..c78c83b29d 100644 --- a/public/js/cat_source/es6/components/segments/SegmentFooterTabMessages.js +++ b/public/js/cat_source/es6/components/segments/SegmentFooterTabMessages.js @@ -15,31 +15,28 @@ class SegmentFooterTabMessages extends React.Component { ({meta_key}) => meta_key !== 'sizeRestriction', ) } - + getNoteContentStructure(note) { + return TEXT_UTILS.getContentWithAllowedLinkRedirect(note).length > 1 + ? TEXT_UTILS.getContentWithAllowedLinkRedirect(note).map( + (content, index) => + typeof content === 'object' && content.isLink ? ( + + {content.link} + + ) : ( + content + ), + ) + : note + } getNotes() { let notesHtml = [] - let self = this - - const getNoteContentStructure = (note) => - TEXT_UTILS.getContentWithAllowedLinkRedirect(note).length > 1 - ? TEXT_UTILS.getContentWithAllowedLinkRedirect(note).map( - (content, index) => - typeof content === 'object' && content.isLink ? ( - - {content.link} - - ) : ( - content - ), - ) - : note - if (this.props.notes) { - this.props.notes.forEach(function (item, index) { + this.props.notes.forEach((item, index) => { if (item.note && item.note !== '') { if ( - self.excludeMatchingNotesRegExp && - self.excludeMatchingNotesRegExp.test(item.note) + this.excludeMatchingNotesRegExp && + this.excludeMatchingNotesRegExp.test(item.note) ) { return } @@ -47,7 +44,11 @@ class SegmentFooterTabMessages extends React.Component { let html = (
Note: - {getNoteContentStructure(note)} +
) notesHtml.push(html)