fix(alerting): DetailsRow trying to use ReactNode for data-cy [R8S-1120] (#3199)

app/react/components/DetailsTable/DetailsRow.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ReactNode } from 'react';
+import { slugify } from 'markdown-to-jsx';
 
 interface Props {
   children: ReactNode;
@@ -18,11 +19,14 @@ export function DetailsRow({
   columns,
   ariaLabel,
 }: Props) {
-  const labelString = typeof label === 'string' ? label : undefined;
+  const labelString = typeof label === 'string' ? label : ariaLabel;
   return (
-    <tr className={className} aria-label={ariaLabel ?? labelString}>
+    <tr className={className} aria-label={labelString}>
       <td className={clsx(colClassName, '!break-normal')}>{label}</td>
-      <td className={colClassName} data-cy={`detailsTable-${label}Value`}>
+      <td
+        className={colClassName}
+        data-cy={`detailsTable-${slugify(labelString || 'unlabelled')}Value`}
+      >
         {children}
       </td>
       {columns?.map((column, index) => (

app/react/kubernetes/configs/secrets/ItemView/LinkedServiceAccountsRow.tsx

@@ -80,6 +80,7 @@ export function LinkedServiceAccountsRow({
 
   return (
     <DetailsRow
+      ariaLabel="Linked service accounts"
       label={
         <span className="flex items-center">
           Linked service accounts

app/react/kubernetes/more-resources/ServiceAccountsView/ItemView/ImagePullSecretsRow.tsx

@@ -89,6 +89,7 @@ export function ImagePullSecretsRow({
 
   return (
     <DetailsRow
+      ariaLabel="Image pull secrets"
       label={
         <span className="flex items-center">
           Image pull secrets

app/react/kubernetes/more-resources/ServiceAccountsView/ItemView/ServiceAccountDetailsWidget.tsx

@@ -48,6 +48,7 @@ export function ServiceAccountDetailsWidget({ namespace, name }: Props) {
                   : '-'}
               </DetailsRow>
               <DetailsRow
+                ariaLabel="Automount token"
                 label={
                   <>
                     Automount token