fix: updated changes and added text with link support

splunk · May 12, 2021 · e14c940 · e14c940
1 parent 6c94df9
commit e14c940
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/ui/src/main/webapp/components/ControlWrapper.jsx b/ui/src/main/webapp/components/ControlWrapper.jsx
@@ -42,7 +42,9 @@ class ControlWrapper extends React.PureComponent {
     render() {
         const { field, options, type, label, tooltip, help, encrypted = false } = this.props.entity;
         const { handleChange, addCustomValidator, utilCustomFunctions } = this.props.utilityFuncts;
-        const { text, link, color } = this.props.markDownMessage || {};
+        // We have to put empty object because markDownMessage prop can be undefined 
+        // because we are not explicitly setting it but expecting it from custom hooks only.
+        const { text, link, color, markdownType, token, linkText } = this.props.markDownMessage || {};
         let rowView;
         if (this.props.entity.type === 'custom') {
             const data = {
@@ -82,6 +84,9 @@ class ControlWrapper extends React.PureComponent {
                     text={ text || '' }
                     link={ link || '' }
                     color={ color || ''}
+                    markdownType={ markdownType || '' }
+                    token={ token || '' }
+                    linkText={ linkText || '' }
                 />
                 {help}
             </>

diff --git a/ui/src/main/webapp/components/MarkDownMessage.jsx b/ui/src/main/webapp/components/MarkDownMessage.jsx
@@ -9,14 +9,36 @@ const MarkdownWrapper = styled.div`
 `;
 
 function MarkDownMessage(props) {
+
+    function flatMap(array, fn) {
+        var markdownText = [];
+        for (var i = 0; i < array.length; i++) {
+          var mapping = fn(array[i]);
+          markdownText = markdownText.concat(mapping);
+        }
+        return markdownText;
+    }
+
+    var markdownText = props.text;
+    markdownText = flatMap(markdownText.split(props.token), function (part) {
+      return [part, <Link data-test="msg-markdown" key= {part} to={props.link}>{props.linkText}</Link>];
+    });
+
+    markdownText.pop();
+
     return (
         <>
-            {props.link !== '' ?
-                <Link to={props.link} >
+            {props.markdownType === 'link' ?
+                <Link data-test="msg-markdown" to={props.link}>
                     {props.text}
                 </Link>
                 :
-                <MarkdownWrapper color={props.color}>{props.text}</MarkdownWrapper>
+                props.markdownType === 'hybrid' ?
+                    markdownText
+                :
+                <MarkdownWrapper color={props.color} data-test="msg-markdown">
+                    {props.text}
+                </MarkdownWrapper>
             }
         </>
     );
@@ -26,7 +48,10 @@ function MarkDownMessage(props) {
 MarkDownMessage.propTypes = {
     text: PropTypes.string,
     link: PropTypes.string,
-    color: PropTypes.string
+    color: PropTypes.string,
+    markdownType: PropTypes.string,
+    token: PropTypes.string,
+    linkText: PropTypes.string
 };
 
 export default MarkDownMessage;