Merge pull request #157 from mercedes-benz/TryOut

link out feature

Author: m-o-n-i-s-h

src/chart/parameter/component/NodePropertyParameterSelect.tsx

@@ -171,6 +171,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
     <div className={'n-flex n-flex-row n-flex-wrap n-items-center'}>
       <Autocomplete
         id='autocomplete'
+        autoHighlight
         multiple={multiSelector}
         options={options}
         disabled={disabled}

src/chart/table/TableChart.tsx

@@ -496,6 +496,21 @@ export const NeoTableChart = (props: ChartProps) => {
           }
           onCellDoubleClick={(e) => {
             let rules = getRule(e, actionsRules, 'doubleClick');
+            let ruleCellCopy = getRule(e, actionsRules, 'ruleCellCopy');
+
+            if (ruleCellCopy?.length > 0) {
+              const fieldDetails = ruleCellCopy.find((rule) => rule.field === e.field);
+              if (fieldDetails) {
+                const regex = new RegExp(fieldDetails?.customizationValue, 'g');
+                setNotificationOpen(true);
+                navigator.clipboard.writeText(e.value.replace(regex, ''));
+              } else {
+                setNotificationOpen(true);
+                navigator.clipboard.writeText(e.value);
+              }
+              return;
+            }
+
             if (rules !== null) {
               rules.forEach((rule) => executeActionRule(rule, e, { ...props, pageNames: pageNames }, 'table'));
             } else {

src/extensions/actions/ActionsRuleCreationModal.tsx

@@ -55,6 +55,12 @@ const RULE_CONDITIONS = {
       disableFieldSelection: true,
       multiple: true,
     },
+    {
+      value: 'ruleCellCopy',
+      label: 'Cell Copy',
+      disableFieldSelection: true,
+      multiple: true,
+    },
   ],
   bar: [
     {
@@ -375,7 +381,7 @@ export const NeoCustomReportActionsModal = ({
   const td2Styling = (type) => ({ width: type === 'bar' ? '15%' : '30%' });
   const td2DropdownClassname = (type) => `n-align-middle n-pr-1 ${type === 'bar' ? 'n-w-full' : 'n-w-2/5'}`;
   const td2Autocomplete = (type, index, rule) =>
-    (type !== 'bar' && rule.condition !== 'rowCheck' ? (
+    type !== 'bar' && rule.condition !== 'rowCheck' ? (
       <Autocomplete
         className='n-align-middle n-inline-block n-w-/5'
         disableClearable={true}
@@ -406,7 +412,7 @@ export const NeoCustomReportActionsModal = ({
       />
     ) : (
       <></>
-    ));
+    );
   const td4Styling = (type) => ({ width: type === 'bar' ? '45%' : '40%' });
   const td4DropdownClassname = 'n-align-middle, n-w-1/3';
   const td6Styling = (type) => ({ width: type === 'bar' ? '30%' : '20%' });

src/index.pcss

@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+.anchor {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+  text-decoration-color: blue;
+  color: blue;
+}
+
 /* Create CSS class based components */
 /* https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply */
 @layer components {

src/report/ReportRecordProcessing.tsx

@@ -284,6 +284,11 @@ function RenderArray(value, transposedTable = false) {
 
 export function RenderString(value) {
   const str = value?.toString() || '';
+
+  if (str.startsWith('<a href=')) {
+    return <div dangerouslySetInnerHTML={{ __html: str }} className='anchor' />;
+  }
+
   if (str.startsWith('http') || str.startsWith('https')) {
     return (
       <TextLink key={value} externalLink target='_blank' href={str}>