fix: added help text link support

splunk · May 11, 2021 · 6c94df9 · 6c94df9
1 parent 69eb050
commit 6c94df9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/ui/src/main/webapp/components/BaseFormView.jsx b/ui/src/main/webapp/components/BaseFormView.jsx
@@ -888,6 +888,7 @@ class BaseFormView extends PureComponent {
                                         serviceName={this.props.serviceName}
                                         mode={this.props.mode}
                                         disabled={temState.disabled}
+                                        markDownMessage={temState.markDownMessage}
                                         dependencyValues={temState.dependencyValues || null}
                                     />
                                 );
@@ -957,6 +958,7 @@ class BaseFormView extends PureComponent {
                                 serviceName={this.props.serviceName}
                                 mode={this.props.mode}
                                 disabled={temState.disabled}
+                                markDownMessage={temState.markDownMessage}
                                 dependencyValues={temState.dependencyValues || null}
                             />
                         );

diff --git a/ui/src/main/webapp/components/ControlWrapper.jsx b/ui/src/main/webapp/components/ControlWrapper.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import ControlGroup from '@splunk/react-ui/ControlGroup';
 import styled from 'styled-components';
 
+import MarkDownMessage from './MarkDownMessage';
 import CONTROL_TYPE_MAP from '../constants/ControlTypeMap';
 
 const CustomElement = styled.div`
@@ -21,6 +22,7 @@ const ControlGroupWrapper = styled(ControlGroup).attrs((props) => ({
         }
         &:nth-child(3) {
             margin-left: 270px !important;
+            width: 320px;
         }
     }
 `;
@@ -40,6 +42,7 @@ 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 || {};
         let rowView;
         if (this.props.entity.type === 'custom') {
             const data = {
@@ -73,11 +76,22 @@ class ControlWrapper extends React.PureComponent {
                 : `No View Found for ${type} type`;
         }
 
+        let helpText = (
+            <>
+                <MarkDownMessage
+                    text={ text || '' }
+                    link={ link || '' }
+                    color={ color || ''}
+                />
+                {help}
+            </>
+        )
+
         return (
             this.props.display && (
                 <ControlGroupWrapper
                     label={label}
-                    help={help}
+                    help={helpText}
                     tooltip={tooltip}
                     error={this.props.error}
                     dataName={field}
@@ -97,6 +111,7 @@ ControlWrapper.propTypes = {
     error: PropTypes.bool,
     entity: PropTypes.object,
     disabled: PropTypes.bool,
+    markDownMessage: PropTypes.object,
     serviceName: PropTypes.string,
     dependencyValues: PropTypes.object,
 };

diff --git a/ui/src/main/webapp/components/MarkDownMessage.jsx b/ui/src/main/webapp/components/MarkDownMessage.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Link from '@splunk/react-ui/Link';
+
+
+const MarkdownWrapper = styled.div`
+    color: ${props => props.color};
+`;
+
+function MarkDownMessage(props) {
+    return (
+        <>
+            {props.link !== '' ?
+                <Link to={props.link} >
+                    {props.text}
+                </Link>
+                :
+                <MarkdownWrapper color={props.color}>{props.text}</MarkdownWrapper>
+            }
+        </>
+    );
+}
+
+
+MarkDownMessage.propTypes = {
+    text: PropTypes.string,
+    link: PropTypes.string,
+    color: PropTypes.string
+};
+
+export default MarkDownMessage;