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

CreateImageWizard: Show previously selected packages

Browse source 
This should fix the bug where chosen packages would disappear from the
ui when switching steps and returning to the packages step.
This commit is contained in:
Sanne Raymaekers 2021-04-27 19:20:31 +02:00
parent 49ff7eaaa0
commit 106f867e97
3 changed files with 35 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Components/CreateImageWizard/CreateImageWizard.js
View file

@ -116,7 +116,7 @@ class CreateImageWizard extends Component {
this.setState({ isSaveInProgress: true });
let customizations = {
packages: this.props.selectedPackages,
packages: this.props.selectedPackages.map(p => p.name),
};
if (this.props.subscribeNow) {
customizations.subscription = {

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

@ -16,11 +16,11 @@ class WizardStepPackages extends Component {
this.packageListChange = this.packageListChange.bind(this);
this.mapPackagesToComponent = this.mapPackagesToComponent.bind(this);
const comps = this.mapPackagesToComponent(this.props.selectedPackages);
this.state = {
packagesAvailableComponents: [],
packagesSelectedComponents: [],
packagesFilteredComponents: [],
packagesSelectedNames: [],
packagesSelectedComponents: comps,
packagesFilteredComponents: comps,
packagesSearchName: '',
};
}
@ -38,9 +38,9 @@ class WizardStepPackages extends Component {
);
}
// this digs into the component properties to extract the package name
mapComponentToPackageName(component) {
return component.props.children[0].props.children;
// this digs into the component properties to extract the package
mapComponentToPackage(component) {
return { name: component.props.children[0].props.children, summary: component.props.children[1].props.children };
}
handlePackagesSearch() {
@ -54,8 +54,7 @@ class WizardStepPackages extends Component {
handlePackagesFilter(filter) {
const filteredPackages = this.state.packagesSelectedComponents.filter(component => {
const name = this.mapComponentToPackageName(component);
return name.includes(filter);
return this.mapComponentToPackage(component).name.includes(filter);
});
this.setState({
packagesFilteredComponents: filteredPackages
@ -63,14 +62,14 @@ class WizardStepPackages extends Component {
}
packageListChange(newAvailablePackages, newChosenPackages) {
const chosenNames = newChosenPackages.map(component => this.mapComponentToPackageName(component));
const chosenPkgs = newChosenPackages.map(component => this.mapComponentToPackage(component));
this.setState({
packagesAvailableComponents: newAvailablePackages,
packagesSelectedComponents: newChosenPackages,
packagesFilteredComponents: newChosenPackages,
});
this.props.setSelectedPackages(chosenNames);
this.props.setSelectedPackages(chosenPkgs);
}
render() {
@ -78,6 +77,7 @@ class WizardStepPackages extends Component {
<Button
aria-label="Search button for available packages"
key="availableSearchButton"
data-testid="search-pkgs-button"
onClick={ this.handlePackagesSearch }>
Search
</Button>

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

@ -472,7 +472,28 @@ describe('Click through all steps', () => {
next.click();
// packages
const getPackages = jest
.spyOn(api, 'getPackages')
.mockImplementation(() => {
return Promise.resolve({
meta: { count: 100 },
links: { first: '', last: '' },
data: [
{
name: 'testPkg',
summary: 'test package summary',
version: '1.0',
}
],
});
});
screen.getByText('Optionally add additional packages to your image');
userEvent.type(screen.getByRole('searchbox', { name: /Available search input/ }), 'test');
screen.getByTestId('search-pkgs-button').click();
await expect(getPackages).toHaveBeenCalledTimes(1);
screen.getByRole('button', { name: /testPkg test package summary/ }).click();
screen.getByRole('button', { name: /Add selected/ }).click();
next.click();
// review
@ -502,7 +523,7 @@ describe('Click through all steps', () => {
},
}],
customizations: {
packages: [],
packages: [ 'testPkg' ],
subscription: {
'activation-key': '1234567890',
insights: true,
@ -526,7 +547,7 @@ describe('Click through all steps', () => {
},
}],
customizations: {
packages: [],
packages: [ 'testPkg' ],
subscription: {
'activation-key': '1234567890',
insights: true,
@ -552,7 +573,7 @@ describe('Click through all steps', () => {
},
}],
customizations: {
packages: [],
packages: [ 'testPkg' ],
subscription: {
'activation-key': '1234567890',
insights: true,