Fixes #38225 - Prevent empty tbody inside booted containers (#11318)

Katello · Feb 26, 2025 · d8dc262 · d8dc262
1 parent 83498c4
commit d8dc262
Showing 1 changed file with 29 additions and 27 deletions.
diff --git a/webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js b/webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js
@@ -134,40 +134,42 @@ const BootedContainerImagesPage = () => {
               </>
             </Tr>
           </Thead>
-          <Tbody>
-            {status === STATUS.PENDING && results.length === 0 && (
-              <Tr ouiaId="table-loading">
-                <Td colSpan={100}>
-                  <EmptyPage
-                    message={{
-                      type: 'loading',
-                      text: __('Loading...'),
-                    }}
-                  />
-                </Td>
-              </Tr>
-            )}
-            {!(status === STATUS.PENDING) &&
-              results.length === 0 &&
-              !errorMessage && (
-                <Tr ouiaId="table-empty">
+          {(results.length === 0 || errorMessage) && (
+            <Tbody>
+              {status === STATUS.PENDING && results.length === 0 && (
+                <Tr ouiaId="table-loading">
                   <Td colSpan={100}>
                     <EmptyPage
                       message={{
-                        type: 'empty',
+                        type: 'loading',
+                        text: __('Loading...'),
                       }}
                     />
                   </Td>
                 </Tr>
-            )}
-            {errorMessage && (
-              <Tr ouiaId="table-error">
-                <Td colSpan={100}>
-                  <EmptyPage message={{ type: 'error', text: errorMessage }} />
-                </Td>
-              </Tr>
-            )}
-          </Tbody>
+              )}
+              {!(status === STATUS.PENDING) &&
+                results.length === 0 &&
+                !errorMessage && (
+                  <Tr ouiaId="table-empty">
+                    <Td colSpan={100}>
+                      <EmptyPage
+                        message={{
+                          type: 'empty',
+                        }}
+                      />
+                    </Td>
+                  </Tr>
+              )}
+              {errorMessage && (
+                <Tr ouiaId="table-error">
+                  <Td colSpan={100}>
+                    <EmptyPage message={{ type: 'error', text: errorMessage }} />
+                  </Td>
+                </Tr>
+              )}
+            </Tbody>
+          )}
           {results?.map((result, rowIndex) => {
             const { bootc_booted_image: bootcBootedImage, digests } = result;
             const isExpanded = imageIsExpanded(bootcBootedImage);