From a8e4cdb1cba05ce5d6919192b562b4bbb8167188 Mon Sep 17 00:00:00 2001
From: Joe Smallwood <joe.smallwood@kausal.tech>
Date: Mon, 9 Oct 2023 09:54:55 +0300
Subject: [PATCH] Fix broken ids due to dots in action identifiers

---
 components/dashboard/ActionTableRow.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/dashboard/ActionTableRow.tsx b/components/dashboard/ActionTableRow.tsx
index 9edc5c7a..41c39281 100644
--- a/components/dashboard/ActionTableRow.tsx
+++ b/components/dashboard/ActionTableRow.tsx
@@ -119,15 +119,21 @@ 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>
           );
         }
@@ -135,12 +141,7 @@ const ActionTableRow = ({ columns, action, plan, planViewUrl }: Props) => {
         return (
           <td key={i} id={id} className={className}>
             {content}
-
-            {hasTooltip && (
-              <UncontrolledTooltip container={rowEl ?? undefined} target={id}>
-                {renderTooltipContent(action, plan)}
-              </UncontrolledTooltip>
-            )}
+            {tooltip}
           </td>
         );
       })}