From 5acc8ad3e2acbbc2754b1dd9a4d91d0d32a01e8f Mon Sep 17 00:00:00 2001
From: GraysonNull <graysonnull@me.com>
Date: Fri, 6 Mar 2020 18:52:05 +0000
Subject: [PATCH] help_text renders markdown

---
 .../src/components/config_render/ConfigCheckbox.jsx | 13 ++++++++++++-
 .../src/components/config_render/ConfigInput.jsx    | 13 ++++++++++++-
 .../components/config_render/ConfigSelectOne.jsx    | 13 ++++++++++++-
 .../src/components/config_render/ConfigTextarea.jsx | 13 ++++++++++++-
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/web/init/src/components/config_render/ConfigCheckbox.jsx b/web/init/src/components/config_render/ConfigCheckbox.jsx
index f48b73fea..e6840300c 100644
--- 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
index 1058feb5f..7645b3991 100644
--- 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
index ca08f8ea8..284fbd216 100644
--- 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
index cdfcdbac3..b8aed336f 100644
--- 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}