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

LandingPage: Adds empty state when no images

Browse source
This commit is contained in:
Jenn Giardino 2020-12-17 11:43:43 -05:00 • committed by GitHub
parent 4cbd745ec5
commit 9c1125cf37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/SmartComponents/ImagesTable/ImagesTable.js
View file

@ -5,7 +5,8 @@ import { actions } from '../redux';
import { Link } from 'react-router-dom';
import { Table, TableHeader, TableBody, classNames, Visibility } from '@patternfly/react-table';
import { TableToolbar } from '@redhat-cloud-services/frontend-components';
import { ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
import { ToolbarGroup, ToolbarItem, EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody, Title } from '@patternfly/react-core';
import { PlusCircleIcon } from '@patternfly/react-icons';
import ImageBuildStatus from '../../PresentationalComponents/ImageBuildStatus/ImageBuildStatus';
import Release from '../../PresentationalComponents/Release/Release';
@ -77,23 +78,41 @@ class ImagesTable extends Component {
});
return (
<React.Fragment>
<TableToolbar>
<ToolbarGroup>
<ToolbarItem>
<Link to="/imagewizard" className="pf-c-button pf-m-primary" data-testid="create-image-action">
Create image
</Link>
</ToolbarItem>
</ToolbarGroup>
</TableToolbar>
<Table
aria-label="Images"
rows={ rows }
cells={ this.state.columns }
data-testid="images-table">
<TableHeader />
<TableBody />
</Table>
{ Object.keys(composes).length === 0 && (
<EmptyState variant={ EmptyStateVariant.large } data-testid="empty-state">
<EmptyStateIcon icon={ PlusCircleIcon } />
<Title headingLevel="h4" size="lg">
Create an image
</Title>
<EmptyStateBody>
Create RHEL OS images for deployment in Amazon Web Services. Images can include
an activation key to automate the registration process.
</EmptyStateBody>
<Link to="/imagewizard" className="pf-c-button pf-m-primary" data-testid="create-image-action">
Create image
</Link>
</EmptyState>
) || (
<React.Fragment>
<TableToolbar>
<ToolbarGroup>
<ToolbarItem>
<Link to="/imagewizard" className="pf-c-button pf-m-primary" data-testid="create-image-action">
Create image
</Link>
</ToolbarItem>
</ToolbarGroup>
</TableToolbar>
<Table
aria-label="Images"
rows={ rows }
cells={ this.state.columns }
data-testid="images-table">
<TableHeader />
<TableBody />
</Table>
</React.Fragment>
)}
</React.Fragment>
);
}

4
src/test/SmartComponents/ImagesTable/ImagesTable.test.js
View file

@ -37,6 +37,10 @@ describe('Images Table', () => {
// check action loads
screen.getByTestId('create-image-action');
// make sure the empty-state message isn't present
const emptyState = screen.queryByTestId('empty-state');
expect(emptyState).toBeNull();
// check table
const table = screen.getByTestId('images-table');
expect(table.rows).toHaveLength(4);

4
src/test/SmartComponents/LandingPage/LandingPage.test.js
View file

@ -11,10 +11,10 @@ describe('Landing Page', () => {
// check heading
screen.getByRole('heading', { name: /images/i });
});
test('renders ImagesTable child component', () => {
test('renders EmptyState child component', () => {
// check action loads
screen.getByTestId('create-image-action');
// check table loads
screen.getByTestId('images-table');
screen.getByTestId('empty-state');
});
});