Fix broken ids due to dots in action identifiers

kausaltech · Oct 9, 2023 · a8e4cdb · a8e4cdb
1 parent 67f5078
commit a8e4cdb
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/components/dashboard/ActionTableRow.tsx b/components/dashboard/ActionTableRow.tsx
@@ -119,28 +119,29 @@ const ActionTableRow = ({ columns, action, plan, planViewUrl }: Props) => {
           columnConfig;
         const hasTooltip = !!renderTooltipContent;
         const content = renderCell(action, plan, planViewUrl);
-        const id = `${action.identifier}-${i}`;
+        const id = `row-${action.id}-${i}`;
         const className = `${cellClassName} ${
           hasTooltip ? 'has-tooltip' : ''
         } ${rowHeader ? 'row-title' : ''}`;
+        const tooltip = hasTooltip && (
+          <UncontrolledTooltip container={rowEl ?? undefined} target={id}>
+            {renderTooltipContent(action, plan)}
+          </UncontrolledTooltip>
+        );
 
         if (rowHeader) {
           return (
             <th key={i} id={id} scope="row" className={className}>
               {content}
+              {tooltip}
             </th>
           );
         }
 
         return (
           <td key={i} id={id} className={className}>
             {content}
-
-            {hasTooltip && (
-              <UncontrolledTooltip container={rowEl ?? undefined} target={id}>
-                {renderTooltipContent(action, plan)}
-              </UncontrolledTooltip>
-            )}
+            {tooltip}
           </td>
         );
       })}