Merge branch 'patternfly:main' into main

Author: wise-king-sullyman

.github/dependabot.yml

@@ -16,7 +16,9 @@ updates:
           - version-update:semver-major
     open-pull-requests-limit: 10
     reviewers:
-      - fhlavac
+      - aferd
+      - epwinchell
+      - InsaneZein
       - nicolethoen
       - dlabaj
 
@@ -36,6 +38,8 @@ updates:
           - version-update:semver-major
     open-pull-requests-limit: 10
     reviewers:
-      - fhlavac
+      - aferd
+      - epwinchell
+      - InsaneZein
       - nicolethoen
       - dlabaj

.github/workflows/pr-preview.yml

@@ -33,7 +33,7 @@ jobs:
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-npm-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
-      - run: npm install --frozen-lockfile
+      - run: npm install --frozen-lockfile --legacy-peer-deps
         if: steps.yarn-cache.outputs.cache-hit != 'true'
       - run: npm run build
         name: Build component groups

README.md

@@ -2,6 +2,17 @@
 
 This repo contains a set of opinionated react component groups used to standardize functionality and look and feel across products. The components are based on PatternFly with some additional functionality.
 
+### Branches
+`main` - PatternFly 6 implementation
+
+`v5` - PatternFly 5 implementation
+
+`do-not-delete` - do not delete
+
+> NOTE: If new features are not needed in `v5,` they should be added directly to the `main` branch. For bug fixes, it is preferred to fix the bug for both versions (fix in one branch and cherry-pick to another). Pulling new changes from 5 to 6 and vice versa is not recommended using `rebase`. Rather, always cherry-pick specific commits.
+
+---
+
 ### Migration from [RedHatInsights/frontend-components](https://github.com/RedHatInsights/frontend-components) to [patternfly/react-component-groups](https://github.com/patternfly/react-component-groups)
 Please see the [migration guide](./migration.md)
 

cypress/component/WarningModal.cy.tsx

@@ -37,29 +37,57 @@ const CheckboxModal: React.FunctionComponent = () => {
   </>
 };
 
+const TextConfirmationModal: React.FunctionComponent = () => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  return <>
+    <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+    <WarningModal
+      isOpen={isOpen}
+      title='Delete item?'
+      confirmButtonLabel='Yes'
+      cancelButtonLabel='No'
+      onClose={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}
+      textConfirmation={{ type: 'text', isRequired: true }}
+      deleteName='Item1'>
+      The item will be deleted.
+    </WarningModal>
+  </>
+};
+
 describe('WarningModal', () => {
   it('renders WarningModal', () => {
-    cy.mount(<BasicModal />)
+    cy.mount(<BasicModal />);
     cy.get('button').click();
     cy.get('[data-ouia-component-id="WarningModal"]').should('exist');
     cy.get('[data-ouia-component-id="WarningModal"]').contains('Unsaved changes');
     cy.get('[data-ouia-component-id="WarningModal"]').contains('Your page contains unsaved changes. Do you want to leave?');
   });
 
   it('confirm button should be disabled if checkbox is not checked', () => {
-    cy.mount(<CheckboxModal />)
+    cy.mount(<CheckboxModal />);
     cy.get('button').click();
-    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled')
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
     cy.get('[data-ouia-component-id="WarningModal-confirm-checkbox"').click();
-    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled')
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled');
   });
 
   it('should reset the confirmation checkbox once reopened', () => {
-    cy.mount(<CheckboxModal />)
+    cy.mount(<CheckboxModal />);
     cy.get('button').click();
     cy.get('[data-ouia-component-id="WarningModal-confirm-checkbox"').click();
     cy.get('[data-ouia-component-id="WarningModal-confirm-button"').click();
     cy.get('button').click();
-    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled')
-  })
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
+  });
+
+  it('confirm button should be enabled only when confirmation text matches the item name', () => {
+    cy.mount(<TextConfirmationModal />);
+    cy.get('button').click();
+    cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').type('abcd');
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
+    cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').clear();
+    cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').type('Item1');
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled');
+  });
 });