particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CreateImageWizard: improve packages step

Browse source 
Update the text description and replace "options" with "packages". Also,
add styling to increase the size of the available and chosen packages
list.
This commit is contained in:
Jacob Kozol 2021-05-26 15:52:49 +02:00 • committed by Sanne Raymaekers
parent cea9808c91
commit 6cd58557c5
3 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/Components/CreateImageWizard/WizardStepPackages.js
View file

@ -6,6 +6,7 @@ import { Button, DualListSelector, Text, TextContent, Title } from '@patternfly/
import { actions } from '../../store/actions';
import api from '../../api.js';
import './WizardStepPackages.scss';
class WizardStepPackages extends Component {
constructor(props) {
super(props);
@ -86,14 +87,16 @@ class WizardStepPackages extends Component {
<>
<TextContent>
<Title headingLevel="h2" size="xl">Additional packages</Title>
<Text>Optionally add additional packages to your <strong>{this.props.release.distro}</strong> image</Text>
<Text>Add optional additional packages to your image by searching available packages.</Text>
</TextContent>
<DualListSelector
className="pf-u-mt-sm"
isSearchable
availableOptionsActions={ availableOptionsActions }
availableOptions={ this.state.packagesAvailableComponents }
availableOptionsTitle={ 'Available packages' }
chosenOptions={ this.state.packagesFilteredComponents }
chosenOptionsTitle={ 'Chosen packages' }
addSelected={ this.packageListChange }
removeSelected={ this.packageListChange }
addAll={ this.packageListChange }

3
src/Components/CreateImageWizard/WizardStepPackages.scss Normal file
View file

@ -0,0 +1,3 @@
.pf-c-dual-list-selector__menu {
--pf-c-dual-list-selector__menu--MinHeight: 20.5rem
}

6
src/test/Components/CreateImageWizard/CreateImageWizard.test.js
View file

@ -289,7 +289,7 @@ describe('Step Registration', () => {
const [ next, , ] = verifyButtons();
next.click();
screen.getByText('Optionally add additional packages to your image');
screen.getByText('Add optional additional packages to your image by searching available packages.');
});
test('clicking Back loads Upload to AWS', () => {
@ -426,7 +426,7 @@ describe('Step Review', () => {
const back = screen.getByRole('button', { name: /Back/ });
back.click();
screen.getByText('Optionally add additional packages to your image');
screen.getByText('Add optional additional packages to your image by searching available packages.');
});
test('clicking Cancel loads landing page', () => {
@ -488,7 +488,7 @@ describe('Click through all steps', () => {
});
});
screen.getByText('Optionally add additional packages to your image');
screen.getByText('Add optional additional packages to your image by searching available packages.');
userEvent.type(screen.getByRole('searchbox', { name: /Available search input/ }), 'test');
screen.getByTestId('search-pkgs-button').click();
await expect(getPackages).toHaveBeenCalledTimes(1);