Add support for links in table actions, as well as improved rendering of links in markdown

Author: nielsdejong

public/style.css

@@ -253,3 +253,7 @@
   display: none;
 }
 /* End Gantt chart workaround */
+
+.markdown-widget a {
+  text-decoration: underline;
+}

src/chart/ChartUtils.ts

@@ -219,7 +219,7 @@ export function replaceDashboardParameters(str, parameters) {
     let param = _.replace(`$`, '').trim();
     let val = parameters?.[param] || null;
     let type = getRecordType(val);
-    let valueRender = type === 'string' ? val : RenderSubValue(val);
+    let valueRender = type === 'string' || type == 'link' ? val : RenderSubValue(val);
     return valueRender;
   };
 

src/chart/markdown/MarkdownChart.tsx

@@ -19,7 +19,10 @@ const NeoMarkdownChart = (props: ChartProps) => {
   const modifiedMarkdown = replaceGlobalParameters ? replaceDashboardParameters(markdown, parameters) : markdown;
   // TODO: we should check if the gfm plugin has an impact on the standard security provided by ReactMarkdown
   return (
-    <div style={{ marginTop: '0px', marginLeft: '15px', marginRight: '15px', marginBottom: '0px' }}>
+    <div
+      className='markdown-widget'
+      style={{ marginTop: '0px', marginLeft: '15px', marginRight: '15px', marginBottom: '0px' }}
+    >
       <base target='_blank' /> <ReactMarkdown remarkPLugins={[gfm]} children={modifiedMarkdown} />
     </div>
   );

src/chart/table/TableChart.tsx

@@ -45,7 +45,7 @@ function renderAsButtonWrapper(renderer) {
         style={{ width: '100%', marginLeft: '5px', marginRight: '5px' }}
         variant='contained'
         color='primary'
-      >{`${renderer(value)}`}</Button>
+      >{`${renderer(value, true)}`}</Button>
     );
   };
 }

src/report/ReportRecordProcessing.tsx

@@ -269,7 +269,12 @@ function RenderString(value) {
   return str;
 }
 
-function RenderLink(value) {
+function RenderLink(value, disabled = false) {
+  // If the link is embedded in a button (disabled), it's not a hyperlink, so we just return the string.
+  if (disabled) {
+    return value;
+  }
+  // Else, it's a 'real' link, and return a React object
   return (
     <TextLink key={value} externalLink target='_blank' href={value}>
       {value}
@@ -389,7 +394,7 @@ export const rendererForType: any = {
   },
   link: {
     type: 'link',
-    renderValue: (c) => RenderLink(c.value),
+    renderValue: (c, disabled = false) => RenderLink(c.value, disabled),
   },
 };