From 967a582fc003a803451d452224cb139978f698cd Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvoborni@redhat.com>
Date: Tue, 14 May 2024 08:47:21 +0000
Subject: [PATCH] refactor: fix errors in browser console

1. issue in DomaiList where react complained that items in iterator/map don't have
   unique `key`.
2. two instances of:

```
Th: Table headers must have an accessible name. If the Th is intended to be
visually empty, pass in screenReaderText. If the Th contains only non-text,
interactive content such as a checkbox or expand toggle, pass in an aria-label
```

Signed-off-by: Petr Vobornik <pvoborni@redhat.com>
---
 src/Components/DomainList/DomainList.tsx      | 46 +++++++++----------
 .../DetailServers/DetailServers.tsx           |  8 ++--
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/Components/DomainList/DomainList.tsx b/src/Components/DomainList/DomainList.tsx
index 940f6b1..a049f01 100644
--- a/src/Components/DomainList/DomainList.tsx
+++ b/src/Components/DomainList/DomainList.tsx
@@ -242,7 +242,7 @@ export const DomainList = () => {
             <Th>UUID</Th>
             <Th>Type</Th>
             <Th sort={getSortParams(3)}>Domain auto-join on launch</Th>
-            <Th></Th>
+            <Th aria-label="Actions"></Th>
           </Tr>
         </Thead>
         <Tbody>
@@ -255,29 +255,27 @@ export const DomainList = () => {
             }
             let row = 1;
             return (
-              <>
-                <Tr key={domain.domain_id} ouiaId={'RowListDomain' + row++}>
-                  <Td>
-                    <Button
-                      variant="link"
-                      onClick={() => {
-                        onShowDetails(domain);
-                      }}
-                      ouiaId="LinkDomainListDetails"
-                    >
-                      {domain.title}
-                    </Button>
-                  </Td>
-                  <Td>{domain.domain_id}</Td>
-                  <Td>
-                    <DomainListFieldType domain_type={domain.domain_type} />
-                  </Td>
-                  <Td>{domain.auto_enrollment_enabled ? enabledText : disabledText}</Td>
-                  <Td isActionCell>
-                    <ActionsColumn items={rowActions} />
-                  </Td>
-                </Tr>
-              </>
+              <Tr key={domain.domain_id} ouiaId={'RowListDomain' + row++}>
+                <Td>
+                  <Button
+                    variant="link"
+                    onClick={() => {
+                      onShowDetails(domain);
+                    }}
+                    ouiaId="LinkDomainListDetails"
+                  >
+                    {domain.title}
+                  </Button>
+                </Td>
+                <Td>{domain.domain_id}</Td>
+                <Td>
+                  <DomainListFieldType domain_type={domain.domain_type} />
+                </Td>
+                <Td>{domain.auto_enrollment_enabled ? enabledText : disabledText}</Td>
+                <Td isActionCell>
+                  <ActionsColumn items={rowActions} />
+                </Td>
+              </Tr>
             );
           })}
         </Tbody>
diff --git a/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx b/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
index fc1ab5d..9ea6cd1 100644
--- a/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
+++ b/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
@@ -1,7 +1,7 @@
 import { Flex, FlexItem, Stack, StackItem, TextInputGroupUtilities } from '@patternfly/react-core';
 import React from 'react';
 import { Domain, DomainIpaServer } from '../../../../Api';
-import { Table /* data-codemods */, Tbody, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
 
 interface DetailServersProps {
   domain?: Domain;
@@ -129,9 +129,9 @@ export const DetailServers = (props: DetailServersProps) => {
             <Tbody>
               {servers.map((server) => (
                 <Tr key={server.subscription_manager_id} ouiaId={'RowDetailServer' + row++}>
-                  <Th>{server.fqdn}</Th>
-                  <Th>{server.location}</Th>
-                  <Th>{server.hcc_enrollment_server ? 'Yes' : 'No'}</Th>
+                  <Td>{server.fqdn}</Td>
+                  <Td>{server.location}</Td>
+                  <Td>{server.hcc_enrollment_server ? 'Yes' : 'No'}</Td>
                 </Tr>
               ))}
             </Tbody>