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 <maurocassani1978@gmail.com>
matecat · Feb 20, 2024 · 91b236b · 91b236b
1 parent 2f8e8c6
commit 91b236b
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 38 deletions.
diff --git 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
diff --git a/plugins/uber b/plugins/uber
diff --git 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
@@ -66,16 +66,21 @@ 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;
   flex-wrap: wrap;
   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
@@ -1,20 +1,11 @@
-import showdown from 'showdown'
 import React from 'react'
-
 import CommonUtils from '../../utils/commonUtils'
 import TextUtils from '../../utils/textUtils'
 
 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, '<br>\n'))
+    return text
   }
 
   componentDidMount() {
@@ -123,7 +114,7 @@ class JobMetadataModal extends React.Component {
               {this.props.files &&
                 this.props.files.find((file) => file.metadata.instructions) && (
                   <div>
-                    <h2>Files instructions</h2>
+                    <h2>File instructions</h2>
                     <div
                       className="ui styled fluid accordion"
                       ref={(acc) => {

diff --git 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
@@ -15,39 +15,40 @@ 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 ? (
+              <a key={index} href={content.link} target="_blank">
+                {content.link}
+              </a>
+            ) : (
+              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 ? (
-                <a key={index} href={content.link} target="_blank">
-                  {content.link}
-                </a>
-              ) : (
-                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
           }
           let note = item.note
           let html = (
             <div className="note" key={'note-' + index}>
               <span className="note-label">Note: </span>
-              <span>{getNoteContentStructure(note)}</span>
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: this.getNoteContentStructure(note),
+                }}
+              />
             </div>
           )
           notesHtml.push(html)