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 <[email protected]>
podengo-project · May 15, 2024 · 967a582 · 967a582
1 parent d50f648
commit 967a582
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git 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
@@ -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>