Inline markdown-style link for PackageAuthor

frontend/src/Components/Markdown/InlineMarkdown.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+
+class InlineMarkdown extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      data
+    } = this.props;
+
+    // For now only replace links
+    const markdownBlocks = [];
+    if (data) {
+      const matches = data.matchAll(/\[(.+?)\]\((.+?)\)/g);
+      let endIndex = 0;
+
+      for (const match of matches) {
+        if (match.index > endIndex) {
+          markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
+        }
+        markdownBlocks.push(<Link key={match.index} to={match[2]}>{match[1]}</Link>);
+        endIndex = match.index + match[0].length;
+      }
+
+      if (endIndex !== data.length) {
+        markdownBlocks.push(data.substr(endIndex, data.length - endIndex));
+      }
+    }
+
+    return <span className={className}>{markdownBlocks}</span>;
+  }
+}
+
+InlineMarkdown.propTypes = {
+  className: PropTypes.string,
+  data: PropTypes.string
+};
+
+export default InlineMarkdown;

frontend/src/System/Status/About/About.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import titleCase from 'Utilities/String/titleCase';
 import FieldSet from 'Components/FieldSet';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import StartTime from './StartTime';
@@ -42,7 +43,7 @@ class About extends Component {
             packageVersion &&
               <DescriptionListItem
                 title="Package Version"
-                data={(packageAuthor ? `${packageVersion} by ${packageAuthor}` : packageVersion)}
+                data={(packageAuthor ? <span> {packageVersion} {' by '} <InlineMarkdown data={packageAuthor} /> </span> : packageVersion)}
               />
           }