F #3951: Add templates description at markdown ext (#827)

share/oneprovision/provisions/hybrid+/description.md

@@ -1,5 +1,3 @@
 These templates deploy an infrastructure in a remote provider.
 
-They follow our elastic architecture specification, you can check more information here:
-
-    https://opennebula.io/get-true-hybrid-cloud-architecture/
+They follow our elastic architecture specification, you can check more information [here](https://opennebula.io/get-true-hybrid-cloud-architecture).

src/fireedge/package-lock.json

@@ -5793,6 +5793,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.0.tgz",
+      "integrity": "sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

src/fireedge/package.json

@@ -89,6 +89,7 @@
     "jwt-simple": "^0.5.6",
     "lockfile": "^1.0.4",
     "luxon": "^1.25.0",
+    "marked": "2.0.0",
     "morgan": "^1.10.0",
     "node-pre-gyp": "^0.15.0",
     "notistack": "^1.0.1",

src/fireedge/src/client/containers/Providers/Form/Create/Steps/Template/index.js

@@ -1,11 +1,12 @@
 import React, { useCallback } from 'react'
-import { Divider, Select, Breadcrumbs, Link } from '@material-ui/core'
+import { Divider, Select, Breadcrumbs } from '@material-ui/core'
 import ArrowIcon from '@material-ui/icons/ArrowForwardIosRounded'
+import Marked from 'marked'
 
 import { useProvision, useListForm } from 'client/hooks'
 import { ListCards } from 'client/components/List'
 import { EmptyCard, ProvisionTemplateCard } from 'client/components/Cards'
-import { isExternalURL, sanitize } from 'client/utils'
+import { sanitize } from 'client/utils'
 import * as ProviderTemplateModel from 'client/models/ProviderTemplate'
 import { T } from 'client/constants'
 
@@ -65,13 +66,17 @@ const Template = () => ({
         <option key={option} value={option}>{option}</option>
       ))
 
-      const RenderDescription = ({ description = '' }) => (
-        <p>{(sanitize`${description}`)?.split(' ').map((string, idx) =>
-          isExternalURL(string)
-            ? <Link key={`link-${idx}`} color='textPrimary' target='_blank' href={string}>{string}</Link>
-            : ` ${string}`
-        )}</p>
-      )
+      const RenderDescription = ({ description = '' }) => {
+        const renderer = new Marked.Renderer()
+
+        renderer.link = (href, title, text) => (
+          `<a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorSecondary"
+            target="_blank" rel="nofollow" title='${title}' href='${href}' >${text}</a>`
+        )
+
+        const html = Marked(sanitize`${description}`, { renderer })
+        return <div dangerouslySetInnerHTML={{ __html: html }} />
+      }
 
       return (
         <>

src/fireedge/src/server/routes/api/provision/provision-functions.js

@@ -214,7 +214,7 @@ const getProvisionDefaults = (res = {}, next = () => undefined, params = {}, use
       if (directory.filename && directory.path) {
         // description
         existsFile(
-          `${directory.path}/description.txt`,
+          `${directory.path}/description.md`,
           fillDescription
         )