feat(layout): Clean the code

Author: fhlavac

cypress/component/DataView.cy.tsx

@@ -11,9 +11,9 @@ describe('DataView', () => {
   it('renders the data view with toolbar, data section and footer', () => {
     cy.mount(
       <DataView>
-        <DataViewToolbar page={1} perPage={10} />
+        <DataViewToolbar pagination={{ page: 1, perPage: 10 }} />
         <>Data section</>
-        <DataViewToolbar page={1} perPage={10} isBottom />
+        <DataViewToolbar pagination={{ page: 1, perPage: 10 }} isBottom />
       </DataView>
     );
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');

cypress/component/DataViewToolbar.cy.tsx

@@ -3,13 +3,13 @@ import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar'
 
 describe('DataViewToolbar', () => {
   it('renders the data view toolbar', () => {
-    cy.mount(<DataViewToolbar page={1} perPage={10} />)
+    cy.mount(<DataViewToolbar pagination={{ page: 1, perPage: 10 }} />)
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination-bottom"]').should('not.exist');
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
   });
 
   it('renders the data view bottom toolbar', () => {
-    cy.mount(<DataViewToolbar page={1} perPage={10} isBottom />)
+    cy.mount(<DataViewToolbar pagination={{ page: 1, perPage: 10 }} isBottom />)
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('not.exist');
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination-bottom"]').should('exist');
   });

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewPredefinedLayoutExample.tsx

@@ -9,13 +9,15 @@ const layoutItemStyling = {
   border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
 };
 
-const PAGE = 1;
-const PER_PAGE = 10;
+const PAGINATION = {
+  page: 1,
+  perPage: 1
+}
 
 export const BasicExample: React.FunctionComponent = () => (
   <DataView>
-    <DataViewToolbar page={PAGE} perPage={PER_PAGE} />
+    <DataViewToolbar pagination={PAGINATION} />
     <div style={layoutItemStyling}>Data representation</div>
-    <DataViewToolbar page={PAGE} perPage={PER_PAGE} isBottom />
+    <DataViewToolbar pagination={PAGINATION} isBottom />
   </DataView>
 )

packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarBottomExample.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
 export const BasicExample: React.FunctionComponent = () => (
-  <DataViewToolbar page={1} perPage={10} isBottom />
+  <DataViewToolbar pagination={{ page: 1, perPage: 10 }} isBottom />
 )

packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarExample.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
 export const BasicExample: React.FunctionComponent = () => (
-  <DataViewToolbar page={1} perPage={10} />
+  <DataViewToolbar pagination={{ page: 1, perPage: 10 }} />
 )

packages/module/src/DataView/DataView.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
-import { DataViewPaginationProps } from '../Hooks';
-
-export interface DataViewProps extends DataViewPaginationProps {
+export interface DataViewProps {
   /** Content rendered inside the data view */
-  children?: React.ReactNode;
+  children: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -14,11 +12,9 @@ export const DataView: React.FC<DataViewProps> = ({
 }: DataViewProps) => (
   <Stack data-ouia-component-id={`${ouiaId}-stack}`}>
     {React.Children.map(children, (child, index) => (
-      React.isValidElement(child) ? (
-        <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
-          {child}
-        </StackItem>
-      ) : null
+      <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
+        {child}
+      </StackItem>
     ))} 
   </Stack>
 )

packages/module/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
-import { Pagination, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
+import { Pagination, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
 import { DataViewPaginationProps } from '../Hooks';
 
-export interface DataViewToolbarProps extends DataViewPaginationProps {
+export interface DataViewToolbarProps {
   /** Toolbar className */
   className?: string;
   /** Flag indicating that toolbar is used below the data part */
   isBottom?: boolean;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** Props to display pagination in the toolbar */
+  pagination: DataViewPaginationProps;
 }
 
-export const DataViewToolbar: React.FunctionComponent<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', page, perPage, isBottom }: DataViewToolbarProps) => (
+export const DataViewToolbar: React.FunctionComponent<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', pagination, isBottom }: DataViewToolbarProps) => (
   <Toolbar ouiaId={ouiaId} className={className}>
     <ToolbarContent>
-      {page && perPage && (
-        <ToolbarItem align={{ default: 'alignRight' }}>
+      {pagination.page && (
+        <ToolbarItem variant={ToolbarItemVariant.pagination}>
           { /* TO DO: Make the pagination work later */ }
-          <Pagination page={page} perPage={perPage} isCompact={isBottom} ouiaId={`${ouiaId}-pagination${isBottom ? '-bottom' : ''}`}/>
+          <Pagination page={pagination.page} perPage={pagination.perPage} isCompact={isBottom} ouiaId={`${ouiaId}-pagination${isBottom ? '-bottom' : ''}`}/>
         </ToolbarItem>
       )}
     </ToolbarContent>

packages/module/src/Hooks/useDataViewPagination.ts

@@ -1,4 +1,4 @@
 export interface DataViewPaginationProps {
-    page?: number;
-    perPage?: number;
+    page: number;
+    perPage: number;
 }