Merge pull request #9 from fhlavac/selection

Add selection to DataView
patternfly · Jun 21, 2024 · 0973672 · 0973672
2 parents 5d3c5f6 + e3461eb
commit 0973672
Show file tree

Hide file tree

Showing 32 changed files with 2,149 additions and 1,261 deletions.
diff --git a/cypress/component/DataView.cy.tsx b/cypress/component/DataView.cy.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Pagination } from '@patternfly/react-core';
 import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import DataView from '../../packages/module/dist/dynamic/DataView';
-import DataViewToolbar from '../../packages/module/dist/esm/DataViewToolbar';
+import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar';
 
 interface Repository {
   name: string;
@@ -45,7 +46,21 @@ describe('DataView', () => {
 
     cy.mount(
       <DataView>
-        <DataViewToolbar pagination={<Pagination {...PAGINATION} ouiaId="DataViewToolbar-pagination" />} />
+        <DataViewToolbar 
+          ouiaId="DataViewToolbar" 
+          pagination={<Pagination {...PAGINATION} />} 
+          bulkSelect={
+            <BulkSelect
+              canSelectAll
+              pageCount={5}
+              totalCount={10}
+              selectedCount={2}
+              pageSelected={false}
+              pagePartiallySelected={true}
+              onSelect={() => null}
+            />
+          } 
+        />
         <Table aria-label="Repositories table" ouiaId={ouiaId}>
           <Thead data-ouia-component-id={`${ouiaId}-thead`}>
             <Tr ouiaId={`${ouiaId}-tr-head`}>
@@ -64,10 +79,11 @@ describe('DataView', () => {
             ))}
           </Tbody>
         </Table>
-        <DataViewToolbar pagination={<Pagination isCompact {...PAGINATION} ouiaId="DataViewFooter-pagination" />} ouiaId="DataViewFooter" />
+        <DataViewToolbar ouiaId="DataViewFooter" pagination={<Pagination isCompact {...PAGINATION} />} />
       </DataView>
     );
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
+    cy.get('[data-ouia-component-id="DataViewToolbar-bulk-select"]').should('exist');
 
     cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
     cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');

diff --git a/cypress/component/DataViewToolbar.cy.tsx b/cypress/component/DataViewToolbar.cy.tsx
@@ -1,11 +1,25 @@
 import React from 'react';
 import { Pagination } from '@patternfly/react-core';
+import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar';
 
 describe('DataViewToolbar', () => {
   it('renders the data view toolbar', () => {
-    cy.mount(<DataViewToolbar pagination={<Pagination page={1} perPage={10} ouiaId="DataViewToolbar-pagination" />} />)
+    cy.mount(<DataViewToolbar pagination={<Pagination page={1} perPage={10} />} 
+      bulkSelect={
+        <BulkSelect
+          canSelectAll
+          pageCount={5}
+          totalCount={10}
+          selectedCount={2}
+          pageSelected={false}
+          pagePartiallySelected={true}
+          onSelect={() => null}
+        />
+      }
+    />)
     cy.get('[data-ouia-component-id="DataViewToolbar"]').should('exist');
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
+    cy.get('[data-ouia-component-id="DataViewToolbar-bulk-select"]').should('exist');
   });
 });
diff --git a/cypress/e2e/DataView.spec.cy.ts b/cypress/e2e/DataView.spec.cy.ts
@@ -3,11 +3,13 @@ describe('Test the Data view docs page', () => {
   it('displays a layout with a table and paginates', () => {
     const ouiaId = 'LayoutExample';
 
-    cy.visit('http://localhost:8006/extensions/data-view/data-view-layout');
+    cy.visit('http://localhost:8006/extensions/data-view/layout');
 
     cy.get(`[data-ouia-component-id="${ouiaId}Header-pagination"]`).should('exist');
+    cy.get(`[data-ouia-component-id="${ouiaId}Header-bulk-select"]`).should('exist');
 
     cy.get(`[data-ouia-component-id="${ouiaId}Footer-pagination"]`).should('exist');
+    cy.get(`[data-ouia-component-id="${ouiaId}Footer-bulk-select"]`).should('not.exist');
 
     cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repositories');
     cy.get(`[data-ouia-component-id="${ouiaId}-th-4"]`).contains('Last commit');
@@ -23,5 +25,35 @@ describe('Test the Data view docs page', () => {
     // move to previous page
     cy.get(`[data-action="previous"`).eq(1).click({ force: true });
     cy.get(`[data-ouia-component-id="${ouiaId}-td-0-4"]`).contains('five');
+
+    // test bulk select
+    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
+
+    // page checkbox select
+    cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
+    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
+    cy.contains('5 selected').should('exist');
+
+    // select none
+    cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
+    cy.get(`[data-ouia-component-id="BulkSelect-select-none"`).first().click();
+    cy.contains('5 selected').should('not.exist');
+
+    // select all
+    cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
+    cy.get(`[data-ouia-component-id="BulkSelect-select-all"`).first().click();
+    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
+    cy.contains('6 selected').should('exist');
+
+    // page checkbox deselect
+    cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
+    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
+    cy.contains('1 selected').should('exist');
+
+    // select page
+    cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
+    cy.get(`[data-ouia-component-id="BulkSelect-select-page"`).first().click();
+    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
+    cy.contains('6 selected').should('exist');
   })
-})
+});
diff --git a/fed-mini-modules.js b/fed-mini-modules.js
@@ -1,14 +1,13 @@
 const fse = require('fs-extra');
-const glob = require('glob');
+const { globSync } = require('glob');
 const path = require('path');
 
 const root = process.cwd();
 
-const sourceFiles = glob
-  .sync(`${root}/src/*/`)
+const sourceFiles = globSync(`${root}/src/*/`)
   .map((name) => name.replace(/\/$/, ''));
 
-const indexTypings = glob.sync(`${root}/src/index.d.ts`);
+const indexTypings = globSync(`${root}/src/index.d.ts`);
 
 async function copyTypings(files, dest) {
   const cmds = [];
@@ -21,7 +20,7 @@ async function copyTypings(files, dest) {
 
 async function createPackage(file) {
   const fileName = file.split('/').pop();
-  const esmSource = glob.sync(`${root}/esm/${fileName}/**/index.js`)[0];
+  const esmSource = globSync(`${root}/esm/${fileName}/**/index.js`)[0];
   /**
    * Prevent creating package.json for directories with no JS files (like CSS directories)
    */
@@ -36,7 +35,7 @@ async function createPackage(file) {
     main: 'index.js',
     module: esmRelative,
   };
-  const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
+  const typings = globSync(`${root}/src/${fileName}/*.d.ts`);
   const cmds = [];
   content.typings = 'index.d.ts';
   cmds.push(copyTypings(typings, `${root}/${fileName}`));
@@ -56,6 +55,7 @@ async function run(files) {
       copyTypings(indexTypings, root);
     }
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error(error);
     process.exit(1);
   }