fix: updated review changes

ui/src/main/webapp/components/BaseFormView.jsx

@@ -888,7 +888,7 @@ class BaseFormView extends PureComponent {
                                         serviceName={this.props.serviceName}
                                         mode={this.props.mode}
                                         disabled={temState.disabled}
-                                        markDownMessage={temState.markDownMessage}
+                                        markdownMessage={temState.markdownMessage}
                                         dependencyValues={temState.dependencyValues || null}
                                     />
                                 );
@@ -958,7 +958,7 @@ class BaseFormView extends PureComponent {
                                 serviceName={this.props.serviceName}
                                 mode={this.props.mode}
                                 disabled={temState.disabled}
-                                markDownMessage={temState.markDownMessage}
+                                markdownMessage={temState.markdownMessage}
                                 dependencyValues={temState.dependencyValues || null}
                             />
                         );

ui/src/main/webapp/components/ControlWrapper.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ControlGroup from '@splunk/react-ui/ControlGroup';
 import styled from 'styled-components';
 
-import MarkDownMessage from './MarkDownMessage';
+import MarkdownMessage from './MarkdownMessage';
 import CONTROL_TYPE_MAP from '../constants/ControlTypeMap';
 
 const CustomElement = styled.div`
@@ -44,7 +44,7 @@ class ControlWrapper extends React.PureComponent {
         const { handleChange, addCustomValidator, utilCustomFunctions } = this.props.utilityFuncts;
         // 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 || {};
+        const { text, link, color, markdownType, token, linkText } = this.props.markdownMessage || {};
         let rowView;
         if (this.props.entity.type === 'custom') {
             const data = {
@@ -80,7 +80,7 @@ class ControlWrapper extends React.PureComponent {
 
         let helpText = (
             <>
-                <MarkDownMessage
+                <MarkdownMessage
                     text={ text || '' }
                     link={ link || '' }
                     color={ color || ''}
@@ -116,7 +116,7 @@ ControlWrapper.propTypes = {
     error: PropTypes.bool,
     entity: PropTypes.object,
     disabled: PropTypes.bool,
-    markDownMessage: PropTypes.object,
+    markdownMessage: PropTypes.object,
     serviceName: PropTypes.string,
     dependencyValues: PropTypes.object,
 };

ui/src/main/webapp/components/MarkdownMessage.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Link from '@splunk/react-ui/Link';
+
+
+const MarkdownWrapper = styled.span`
+    color: ${props => props.color};
+`;
+
+function MarkdownMessage(props) {
+    // flatMap adds the link to the part of text that has been split from text
+    // and returns a new array formed by applying a given function to each element of the array,
+    // and then flattening the result by one level
+    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;
+    }
+
+    function getMarkdownText(){
+        var markdownText = props.text;
+        if (props.markdownType === 'link') {
+            markdownText = <Link to={props.link}>{props.text}</Link>
+        } else if (props.markdownType === 'hybrid') {
+            // markdownType hybrid is for support of both text and link
+            markdownText = flatMap(markdownText.split(props.token), function (part) {
+            return [part, <Link key= {part} to={props.link}>{props.linkText}</Link>];
+            });
+            markdownText.pop();
+        } else if (props.markdownType === 'text'){
+            markdownText = <MarkdownWrapper color={props.color}>{props.text}</MarkdownWrapper>
+        }
+
+        return markdownText;
+    }
+
+    return (
+        <div data-test="msg-markdown">
+            {getMarkdownText()}
+        </div>
+    );
+}
+
+
+MarkdownMessage.propTypes = {
+    text: PropTypes.string,
+    link: PropTypes.string,
+    color: PropTypes.string,
+    markdownType: PropTypes.string,
+    token: PropTypes.string,
+    linkText: PropTypes.string
+};
+
+export default React.memo(MarkdownMessage);