Init

fhlavac · fhlavac · commit e5aa919b478a · 2024-09-20T15:49:14.000+02:00
diff --git a/cypress/component/SkeletonTable.cy.tsx b/cypress/component/SkeletonTable.cy.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Th } from '@patternfly/react-table';
+import { Th, RowSelectVariant } from '@patternfly/react-table';
 import SkeletonTable from '../../packages/module/dist/dynamic/SkeletonTable';
 
 describe('SkeletonTable', () => {
@@ -15,7 +15,7 @@ describe('SkeletonTable', () => {
   });
 
   it ('can be used without passing columns', () => {
-    const SkeletonTableExample = <SkeletonTable rows={10} numberOfColumns={2} />;
+    const SkeletonTableExample = <SkeletonTable rows={10} columnsCount={2} />;
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
     cy.get('table thead tr').should('have.text', '');
@@ -38,7 +38,7 @@ describe('SkeletonTable', () => {
   });
 
   it('can be passed a selectVariant to render radio buttons', () => {
-    const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isSelectable selectVariant="radio" />;
+    const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isSelectable selectVariant={RowSelectVariant.radio} />;
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
     cy.get('table thead tr').should('have.text', 'firstsecond');
diff --git a/cypress/component/SkeletonTableBody.cy.tsx b/cypress/component/SkeletonTableBody.cy.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { RowSelectVariant } from '@patternfly/react-table';
+import SkeletonTableBody from '../../packages/module/dist/dynamic/SkeletonTableBody';
+
+describe('SkeletonTableBody', () => {
+  beforeEach(() => {
+    cy.viewport(1600, 800);
+  });
+
+  it('renders SkeletonTableBody', () => {
+    const SkeletonTableExample = <SkeletonTableBody rowsCount={10} columnsCount={2} />;
+    cy.mount(SkeletonTableExample);
+    cy.get('div[class="pf-v5-c-skeleton"]').should('have.length', 20);
+  });
+
+  it('contains checkboxes when passed isSelectable', () => {
+    cy.mount(<SkeletonTableBody rowsCount={10} columnsCount={2} isSelectable />);
+    cy.get('input[type="checkbox"]').should('have.length', 10);
+  });
+
+  it('is expandable when passed isExpandable', () => {
+    cy.mount(<SkeletonTableBody rowsCount={10} columnsCount={2} isExpandable />);
+    cy.get('.pf-v5-c-table__toggle-icon').should('have.length', 10);
+  });
+
+  it('can be passed a selectVariant to render radio buttons', () => {
+    cy.mount(<SkeletonTableBody rowsCount={10} columnsCount={2} isSelectable selectVariant={RowSelectVariant.radio} />);
+    cy.get('input[type="radio"]').should('have.length', 10);
+  });
+});
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableCompactExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableCompactExample.tsx
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExpandableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExpandableExample.tsx
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableSelectableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableSelectableExample.tsx
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md
@@ -10,10 +10,12 @@ id: Skeleton table
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: ['SkeletonTable']
-sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md
+propComponents: ['SkeletonTable', 'SkeletonTableBody']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md
 ---
+import { RowSelectVariant, TableVariant, Table } from '@patternfly/react-table';
 import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
+import SkeletonTableBody from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody';
 
 The **skeleton table** component is used to display placeholder "skeletons" within a table as its contents load.
 
@@ -69,3 +71,11 @@ To simulate this loading process, select the `Reload table` button and wait for
 ```js file="./SkeletonTableLoadingExample.tsx"
 
 ```
+
+### Skeleton table body
+
+You can also render only the `<Tbody>` part of the skeleton table by using the `<SkeletonTableBody/>` instead of `<SkeletonTable/>`. This can be especially useful for usage inside the data view extension.
+
+```js file="./SkeletonTableBodyExample.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableBodyExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableBodyExample.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Table } from '@patternfly/react-table';
+import SkeletonTableBody from "@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody";
+
+export const SkeletonTableBodyExample: React.FC = () => (
+  <Table>
+    <SkeletonTableBody isSelectable rowsCount={5} columnsCount={2} />
+  </Table>
+);
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCompactExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCompactExample.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";
+import { TableVariant } from '@patternfly/react-table';
+
+export const SkeletonTableExample: React.FC = () => <SkeletonTable rowsCount={10} columns={[ 'first', 'second' ]} variant={TableVariant.compact} borders={false} />;
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCustomExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCustomExample.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import SkeletonTable from '@patternfly/react-core/dist/js/components/Skeleton/SkeletonTable';
-import { Th } from '@patternfly/react-table';
+import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";import { Th } from '@patternfly/react-table';
 
 export const SkeletonTableExample: React.FC = () => (
   <SkeletonTable
-    rowSize={10}
+    rowsCount={10}
     columns={[
       <Th key="1" sort={{ columnIndex: 0, sortBy: {} }}>
         first
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExample.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";
+
+export const SkeletonTableExample: React.FC = () => <SkeletonTable rowsCount={10} columns={[ 'first', 'second' ]} />
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExpandableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExpandableExample.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";
+
+export const SkeletonTableExample: React.FC = () => <SkeletonTable rowsCount={10} columns={[ 'first', 'second' ]} isExpandable />;
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableLoadingExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableLoadingExample.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import SkeletonTable from '@patternfly/react-core/dist/js/components/Skeleton/SkeletonTable';
+import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";
 import { Table, Tbody, Td, Th, Tr, Thead } from '@patternfly/react-table';
 import { Button, Stack, StackItem } from '@patternfly/react-core';
 
@@ -44,7 +44,7 @@ export const SkeletonTableExample: React.FC = () => {
   if (!isLoaded) {
     table = (
       <SkeletonTable
-        rows={3}
+        rowsCount={3}
         columns={[
           columnNames.name,
           columnNames.branches,
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableSelectableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableSelectableExample.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";
+import { RowSelectVariant } from '@patternfly/react-table';
+
+export const SkeletonTableExample: React.FC = () => (
+  <SkeletonTable rowsCount={10} columns={[ 'first', 'second' ]} isSelectable selectVariant={RowSelectVariant.radio} />
+);
diff --git a/packages/module/src/SkeletonTable/SkeletonTable.test.tsx b/packages/module/src/SkeletonTable/SkeletonTable.test.tsx
@@ -8,6 +8,6 @@ describe('SkeletonTable component', () => {
   });
 
   it('should render correctly with rows', () => {
-    expect(render(<SkeletonTable columns={[ 'first', 'second' ]} rows={5} />)).toMatchSnapshot();
+    expect(render(<SkeletonTable columns={[ 'first', 'second' ]} rows={10} />)).toMatchSnapshot();
   });
 });
diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx
@@ -4,22 +4,21 @@ import {
   Table,
   TableProps,
   TableVariant,
-  Tbody,
-  Td,
   Th,
   Thead,
   Tr,
   RowSelectVariant
 } from '@patternfly/react-table';
 import { Skeleton } from '@patternfly/react-core';
+import SkeletonTableBody, { SkeletonTableBodyProps } from '../SkeletonTableBody';
 
-export interface SkeletonTableProps extends Omit<TableProps, 'ref'> {
+export interface SkeletonTableProps extends Omit<TableProps, 'ref'>, Omit<SkeletonTableBodyProps, 'columnsCount'> {
   /** Indicates the table variant */
   variant?: TableVariant;
   /** Flag indicating if the table should have borders */
   borders?: boolean;
   /** The number of rows the skeleton table should contain */
-  rows?: number;
+  numberOfRows?: number;
   /** Any captions that should be added to the table */
   caption?: React.ReactNode;
   /** Custom OUIA ID */
@@ -33,55 +32,24 @@ export interface SkeletonTableProps extends Omit<TableProps, 'ref'> {
   /** Custom columns for the table */
   columns?: string[] | React.ReactElement<typeof Th>[];
   /** Number of columns in the table */
-  numberOfColumns?: number;
+  columnsCount?: number;
 }
 
 const SkeletonTable: React.FunctionComponent<SkeletonTableProps> = ({
   variant,
   borders = true,
-  rows = 5,
+  rowsCount = 5,
   caption,
   ouiaId = 'SkeletonTable',
   isSelectable,
   isExpandable,
   selectVariant = RowSelectVariant.checkbox,
   columns,
-  numberOfColumns,
+  columnsCount,
   ...rest
 }: SkeletonTableProps) => {
   const hasCustomColumns = Array.isArray(columns);
-  const rowCells = hasCustomColumns ? columns?.length ?? 0 : numberOfColumns;
-  const rowArray = [ ...new Array(rowCells) ];
-
-  const bodyRows = [ ...new Array(rows) ].map((_, rowIndex) => (
-    <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
-      {isExpandable && (
-        <Td
-          data-ouia-component-id={`${ouiaId}-td-expand-${rowIndex}`}
-          expand={{
-            rowIndex,
-            isExpanded: false
-          }}
-        />
-      )}
-      {isSelectable && (
-        <Td
-          data-ouia-component-id={`${ouiaId}-td-select-${rowIndex}`}
-          select={{
-            rowIndex,
-            isSelected: false,
-            isDisabled: true,
-            variant: selectVariant
-          }}
-        />
-      )}
-      {rowArray.map((_, colIndex) => (
-        <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>
-          <Skeleton />
-        </Td>
-      ))}
-    </Tr>
-  ));
+  const rowCellsCount = hasCustomColumns ? columns.length : columnsCount;
 
   return (
     <Table aria-label="Loading" variant={variant} borders={borders} ouiaId={ouiaId} {...rest}>
@@ -100,14 +68,21 @@ const SkeletonTable: React.FunctionComponent<SkeletonTableProps> = ({
                 React.cloneElement(c, { key: index, 'data-ouia-component-id': `${ouiaId}-th-${index}` })
               )
             )
-            : rowArray.map((_, index) => (
+            : Array(rowCellsCount).map((_, index) => (
               <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>
                 <Skeleton />
               </Th>
             ))}
         </Tr>
       </Thead>
-      <Tbody data-ouia-component-id={`${ouiaId}-tbody`}>{bodyRows}</Tbody>
+      <SkeletonTableBody 
+        columnsCount={rowCellsCount ?? 0}
+        rowsCount={rowsCount}
+        isSelectable={isSelectable}
+        isExpandable={isExpandable}
+        selectVariant={selectVariant}
+        ouiaId={ouiaId}
+      />
     </Table>
   );
 };
diff --git a/packages/module/src/SkeletonTableBody/SkeletonTableBody.test.tsx b/packages/module/src/SkeletonTableBody/SkeletonTableBody.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SkeletonTableBody from './SkeletonTableBody';
+
+describe('SkeletonTableBody component', () => {
+  it('should render correctly', () => {
+    expect(render(<SkeletonTableBody columnsCount={2} />)).toMatchSnapshot();
+  });
+});
diff --git a/packages/module/src/SkeletonTableBody/SkeletonTableBody.tsx b/packages/module/src/SkeletonTableBody/SkeletonTableBody.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import {
+  Tbody,
+  Td,
+  Tr,
+  RowSelectVariant
+} from '@patternfly/react-table';
+import { Skeleton } from '@patternfly/react-core';
+
+export interface SkeletonTableBodyProps {
+  /** Number of columns in the table */
+  columnsCount: number;
+  /** Number of rows in the table */
+  rowsCount?: number;
+  /** Custom OUIA ID */
+  ouiaId?: string | number;
+  /** Flag indicating if the table is selectable */
+  isSelectable?: boolean;
+  /** Flag indicating if the table is expandable */
+  isExpandable?: boolean;
+  /** Determines if the row selection variant (radio/checkbox) */
+  selectVariant?: RowSelectVariant;
+}
+
+const SkeletonTableBody: React.FunctionComponent<SkeletonTableBodyProps> = ({
+  rowsCount = 5,
+  ouiaId = 'SkeletonTableBody',
+  isSelectable,
+  isExpandable,
+  selectVariant = RowSelectVariant.checkbox,
+  columnsCount,
+}: SkeletonTableBodyProps) => {
+  const bodyRows = [ ...Array(rowsCount) ].map((_, rowIndex) => (
+    <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+      {isExpandable && (
+        <Td
+          data-ouia-component-id={`${ouiaId}-td-expand-${rowIndex}`}
+          expand={{
+            rowIndex,
+            isExpanded: false
+          }}
+        />
+      )}
+      {isSelectable && (
+        <Td
+          data-ouia-component-id={`${ouiaId}-td-select-${rowIndex}`}
+          select={{
+            rowIndex,
+            isSelected: false,
+            isDisabled: true,
+            variant: selectVariant
+          }}
+        />
+      )}
+      {[ ...Array(columnsCount) ].map((_, colIndex) => (
+        <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>
+          <Skeleton />
+        </Td>
+      ))}
+    </Tr>
+  ));
+
+  return (
+    <Tbody data-ouia-component-id={`${ouiaId}-tbody`}>{bodyRows}</Tbody>
+  );
+};
+
+export default SkeletonTableBody;
diff --git a/packages/module/src/SkeletonTableBody/__snapshots__/SkeletonTable.test.tsx.snap b/packages/module/src/SkeletonTableBody/__snapshots__/SkeletonTable.test.tsx.snap
diff --git a/packages/module/src/SkeletonTableBody/index.ts b/packages/module/src/SkeletonTableBody/index.ts
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
