help_text renders markdown

replicatedhq · Mar 6, 2020 · 5acc8ad · 5acc8ad
1 parent 05f2156
commit 5acc8ad
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 4 deletions.
diff --git a/web/init/src/components/config_render/ConfigCheckbox.jsx b/web/init/src/components/config_render/ConfigCheckbox.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Markdown from "react-remarkable";
 
 export default class ConfigCheckbox extends React.Component {
 
@@ -44,7 +45,17 @@ export default class ConfigCheckbox extends React.Component {
                     <span className="field-label recommended">Recommended</span> :
                     null}
             </label>
-            {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">{this.props.help_text}</p> : null}
+            {this.props.help_text !== "" ? 
+              <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">
+                <Markdown
+                  options={{
+                    linkTarget: "_blank",
+                    linkify: true,
+                  }}>
+                  {this.props.help_text}
+                </Markdown>
+              </p>
+            : null}
           </div>
         </div>
       </div>

diff --git a/web/init/src/components/config_render/ConfigInput.jsx b/web/init/src/components/config_render/ConfigInput.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import ConfigItemTitle from "./ConfigItemTitle";
+import Markdown from "react-remarkable";
 
 export default class ConfigInput extends React.Component {
 
@@ -58,7 +59,17 @@ export default class ConfigInput extends React.Component {
             error={this.props.error}
           />
           : null}
-        {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal">{this.props.help_text}</p> : null}
+        {this.props.help_text !== "" ? 
+          <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">
+            <Markdown
+              options={{
+                linkTarget: "_blank",
+                linkify: true,
+              }}>
+              {this.props.help_text}
+            </Markdown>
+          </p>
+        : null}
         <div className="field-input-wrapper u-marginTop--15">
           <input
             ref={this.inputRef}

diff --git a/web/init/src/components/config_render/ConfigSelectOne.jsx b/web/init/src/components/config_render/ConfigSelectOne.jsx
@@ -4,6 +4,7 @@ import isEmpty from "lodash/isEmpty";
 
 import ConfigItemTitle from "./ConfigItemTitle";
 import ConfigRadio from "./ConfigRadio";
+import Markdown from "react-remarkable";
 
 export default class ConfigSelectOne extends React.Component {
 
@@ -45,7 +46,17 @@ export default class ConfigSelectOne extends React.Component {
             error={this.props.error}
           />
           : null}
-        {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal">{this.props.help_text}</p> : null}
+        {this.props.help_text !== "" ? 
+          <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">
+            <Markdown
+              options={{
+                linkTarget: "_blank",
+                linkify: true,
+              }}>
+              {this.props.help_text}
+            </Markdown>
+          </p>
+        : null}
         <div className="field-input-wrapper u-marginTop--15 flex flexWrap--wrap">
           {options}
         </div>

diff --git a/web/init/src/components/config_render/ConfigTextarea.jsx b/web/init/src/components/config_render/ConfigTextarea.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import ConfigItemTitle from "./ConfigItemTitle";
+import Markdown from "react-remarkable";
 
 export default class ConfigTextarea extends React.Component {
 
@@ -46,7 +47,17 @@ export default class ConfigTextarea extends React.Component {
             error={this.props.error}
           />
           : null}
-        {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal">{this.props.help_text}</p> : null}
+        {this.props.help_text !== "" ?
+          <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">
+            <Markdown
+              options={{
+                linkTarget: "_blank",
+                linkify: true,
+              }}>
+              {this.props.help_text}
+            </Markdown>
+          </p>
+         : null}
         <div className="field-input-wrapper u-marginTop--15">
           <textarea
             ref={this.textareaRef}