diff --git a/src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx b/src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx index 0223e731..adfa6652 100644 --- a/src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx +++ b/src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx @@ -3,9 +3,11 @@ import React, { useState } from 'react'; import { Dropdown, DropdownItem, - DropdownToggle, - DropdownToggleCheckbox, -} from '@patternfly/react-core/deprecated'; + DropdownList, + MenuToggle, + MenuToggleCheckbox, + MenuToggleElement, +} from '@patternfly/react-core'; import { ApiRepositoryResponseRead } from '../../../../../store/contentSourcesApi'; @@ -42,26 +44,31 @@ export function BulkSelect({ return ( ) => ( + , - ]} - onToggle={toggleDropdown} + splitButtonOptions={{ + items: [ + , + ], + }} + onClick={toggleDropdown} > {someChecked ? `${selected.size} selected` : null} - - } + + )} isOpen={dropdownIsOpen} - dropdownItems={[ + > + {`Clear all (${selected.size} items)`}, + >{`Clear all (${selected.size} items)`} {`${allChecked ? 'Remove' : 'Select'} page (${ perPage > contentList.length ? contentList.length : perPage - } items)`}, - ]} - /> + } items)`} + + ); } diff --git a/src/test/Components/CreateImageWizard/steps/Repositories/Repositories.test.tsx b/src/test/Components/CreateImageWizard/steps/Repositories/Repositories.test.tsx index 58c22310..c065c166 100644 --- a/src/test/Components/CreateImageWizard/steps/Repositories/Repositories.test.tsx +++ b/src/test/Components/CreateImageWizard/steps/Repositories/Repositories.test.tsx @@ -148,10 +148,7 @@ describe('Step Custom repositories', () => { test('correct number of repositories is fetched', async () => { await renderCreateMode(); await goToRepositoriesStep(); - - const select = await screen.findByRole('button', { - name: /^select$/i, - }); + const select = await screen.findByTestId('bulk-select-toggle'); user.click(select); await screen.findByText(/select page \(10 items\)/i); });