Remove table column headings when empty

opendatahub-io · Aug 9, 2024 · 4640991 · 4640991
1 parent 4bf3a1b
commit 4640991
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTable.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTable.tsx
@@ -8,10 +8,22 @@ import {
   EmptyStateVariant,
 } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
-import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th } from '@patternfly/react-table';
 import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
 import { CreateConnectionTypeFieldsTableRow } from './CreateConnectionTypeFieldsTableRow';
 
+const EmptyFieldsTable: React.FC = () => (
+  <Bullseye>
+    <EmptyState variant={EmptyStateVariant.sm}>
+      <EmptyStateHeader icon={<EmptyStateIcon icon={PlusCircleIcon} />} titleText="No fields" />
+      <EmptyStateBody>
+        Add fields to prompt users to input information, and optionally assign default values to
+        those fields. Connection name and description fields are included by default.
+      </EmptyStateBody>
+    </EmptyState>
+  </Bullseye>
+);
+
 type CreateConnectionTypeFieldsTableProps = {
   fields: ConnectionTypeField[];
 };
@@ -29,36 +41,24 @@ export const CreateConnectionTypeFieldsTable: React.FC<CreateConnectionTypeField
 
   return (
     <Table data-testid="connection-type-fields-table">
-      <Thead>
-        <Tr>
-          {columns.map((column, columnIndex) => (
-            <Th key={columnIndex}>{column}</Th>
-          ))}
-        </Tr>
-      </Thead>
-      <Tbody>
-        {fields.length > 0 ? (
-          fields.map((row, index) => <CreateConnectionTypeFieldsTableRow key={index} row={row} />)
-        ) : (
-          <Tr>
-            <Td colSpan={columns.length}>
-              <Bullseye>
-                <EmptyState variant={EmptyStateVariant.sm}>
-                  <EmptyStateHeader
-                    icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-                    titleText="No fields"
-                  />
-                  <EmptyStateBody>
-                    Add fields to prompt users to input information, and optionally assign default
-                    values to those fields. Connection name and description fields are included by
-                    default.
-                  </EmptyStateBody>
-                </EmptyState>
-              </Bullseye>
-            </Td>
-          </Tr>
-        )}
-      </Tbody>
+      {fields.length > 0 ? (
+        <>
+          <Thead>
+            <Tr>
+              {columns.map((column, columnIndex) => (
+                <Th key={columnIndex}>{column}</Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {fields.map((row, index) => (
+              <CreateConnectionTypeFieldsTableRow key={index} row={row} />
+            ))}
+          </Tbody>
+        </>
+      ) : (
+        <EmptyFieldsTable />
+      )}
     </Table>
   );
 };
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypePage.tsx
@@ -6,6 +6,8 @@ import {
   FormGroup,
   FormSection,
   PageSection,
+  Text,
+  TextVariants,
 } from '@patternfly/react-core';
 import { OpenDrawerRightIcon } from '@patternfly/react-icons';
 import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
@@ -101,6 +103,10 @@ export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> =
               </FormGroup>
             </FormSection>
             <FormSection title="Fields">
+              <Text component={TextVariants.p}>
+                Add fields to prompt users to input information, and optionally assign default
+                values to those fields.
+              </Text>
               <FormGroup>
                 <CreateConnectionTypeFieldsTable fields={connectionFields} />
               </FormGroup>