Add markdown support and preserve line breaks in config item title

replicatedhq · Feb 13, 2020 · fa1ec4b · fa1ec4b
1 parent 5d4ba5e
commit fa1ec4b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 11 deletions.
diff --git a/web/init/package.json b/web/init/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@replicatedhq/ship-init",
-  "version": "1.6.14",
+  "version": "1.6.15",
   "description": "Shared component that contains the Ship Init app",
   "author": "Replicated, Inc.",
   "license": "Apache-2.0",

diff --git a/web/init/src/components/config_only/ConfigOnly.jsx b/web/init/src/components/config_only/ConfigOnly.jsx
@@ -148,8 +148,10 @@ export default class ConfigOnly extends React.Component {
       // TODO: Refactor to pass errors down instead of manipulating
       // the DOM
       const el = document.getElementById(`${err.fieldName}-errblock`);
-      el.innerHTML = err.message;
-      el.classList.add("visible");
+      if (el) {
+        el.innerHTML = err.message;
+        el.classList.add("visible");
+      }
     })
   }
 

diff --git a/web/init/src/components/config_render/ConfigItemTitle.jsx b/web/init/src/components/config_render/ConfigItemTitle.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Markdown from "react-remarkable";
 
 export default class ConfigItemTitle extends React.Component {
 
@@ -11,16 +12,34 @@ export default class ConfigItemTitle extends React.Component {
       when
     } = this.props;
 
-    var isHidden = hidden || when === "false";
+    var isHidden = hidden || when === "false" || (!title && !required && !recommended);
+
+    if (isHidden) {
+      return null;
+    }
 
     return (
-      <h4 className={`sub-header-color field-section-sub-header ${isHidden ? "hidden" : ""}`}>{title} {
-        required ? 
-          <span className="field-label required">Required</span> :
-          recommended ? 
-            <span className="field-label recommended">Recommended</span> :
-            null}
-      <span className="u-marginLeft--10 config-errblock" id={`${this.props.name}-errblock`}></span>
+      <h4 className="sub-header-color field-section-sub-header" style={title ? { marginBottom: -18 } : {}}>
+        {title &&
+          <div className="u-display--inlineBlock u-verticalAlign--top u-marginRight--small">
+            <Markdown
+              options={{
+                linkTarget: "_blank",
+                linkify: true,
+              }}
+            >
+              {title}
+            </Markdown>
+          </div>
+        }
+        <div className="u-display--inlineBlock u-verticalAlign--top">
+          {required ? 
+            <span className="field-label required">Required</span> :
+              recommended ? 
+                <span className="field-label recommended">Recommended</span> :
+                  null}
+          <span className="u-marginLeft--small config-errblock" id={`${this.props.name}-errblock`}></span>
+        </div>
       </h4>
     );
   }

diff --git a/web/init/src/scss/utilities/ship-init-base.scss b/web/init/src/scss/utilities/ship-init-base.scss
@@ -43,6 +43,7 @@ a {
   font-size: 14px;
   line-height: 18px;
   font-weight: 500;
+  white-space: pre-line;
 }
 .field.hidden {
   display: none;

diff --git a/web/init/src/scss/utilities/utilities.scss b/web/init/src/scss/utilities/utilities.scss
@@ -81,6 +81,7 @@
 .u-display--block { display: block; }
 .u-display--inlineBlock { display: inline-block; }
 .u-visibility--hidden { visibility: hidden; }
+.u-verticalAlign--top { vertical-align: top; }
 
 /* Border classes */