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

LandingPage / ImagesTable: Set max width for the ImagesTable

Browse source 
Fixes #933

This applies `isWidthLimited` to the section containing ImagesTable, ensuring the table doesn't get stretched out too much.

The were also two sets of empty tags around ImagesTable return, this removes one of them.
This commit is contained in:
regexowl 2024-05-07 10:15:38 +02:00 • committed by Lucas Garfield
parent de96902f94
commit a6ff016662
2 changed files with 56 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

112
src/Components/ImagesTable/ImagesTable.tsx
View file

@ -180,66 +180,64 @@ const ImagesTable = () => {
return (
<>
<>
<ImagesTableToolbar
itemCount={itemCount}
perPage={perPage}
page={page}
setPage={setPage}
onPerPageSelect={onPerPageSelect}
/>
<Table variant="compact" data-testid="images-table">
<Thead>
<ImagesTableToolbar
itemCount={itemCount}
perPage={perPage}
page={page}
setPage={setPage}
onPerPageSelect={onPerPageSelect}
/>
<Table variant="compact" data-testid="images-table">
<Thead>
<Tr>
<Th style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }} />
<Th>Name</Th>
<Th>Updated</Th>
<Th>OS</Th>
<Th>Target</Th>
{experimentalFlag && <Th>Version</Th>}
<Th>Status</Th>
<Th>Instance</Th>
<Th />
</Tr>
</Thead>
{itemCount === 0 && (
<Tbody>
<Tr>
<Th style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }} />
<Th>Name</Th>
<Th>Updated</Th>
<Th>OS</Th>
<Th>Target</Th>
{experimentalFlag && <Th>Version</Th>}
<Th>Status</Th>
<Th>Instance</Th>
<Th />
<Td colSpan={12}>
<ImagesEmptyState selectedBlueprint={selectedBlueprintId} />
</Td>
</Tr>
</Thead>
{itemCount === 0 && (
<Tbody>
<Tr>
<Td colSpan={12}>
<ImagesEmptyState selectedBlueprint={selectedBlueprintId} />
</Td>
</Tr>
</Tbody>
)}
</Tbody>
)}
{composes?.map((compose, rowIndex) => {
return (
<ImagesTableRow
compose={compose}
rowIndex={rowIndex}
key={compose.id}
/>
);
})}
</Table>
<Toolbar className="pf-u-mb-xl">
<ToolbarContent>
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
<Pagination
variant={PaginationVariant.bottom}
itemCount={itemCount}
perPage={perPage}
page={page}
onSetPage={onSetPage}
onPerPageSelect={onPerPageSelect}
widgetId="compose-pagination-bottom"
data-testid="images-pagination-bottom"
isCompact
/>
</ToolbarItem>
</ToolbarContent>
</Toolbar>
</>
{composes?.map((compose, rowIndex) => {
return (
<ImagesTableRow
compose={compose}
rowIndex={rowIndex}
key={compose.id}
/>
);
})}
</Table>
<Toolbar className="pf-u-mb-xl">
<ToolbarContent>
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
<Pagination
variant={PaginationVariant.bottom}
itemCount={itemCount}
perPage={perPage}
page={page}
onSetPage={onSetPage}
onPerPageSelect={onPerPageSelect}
widgetId="compose-pagination-bottom"
data-testid="images-pagination-bottom"
isCompact
/>
</ToolbarItem>
</ToolbarContent>
</Toolbar>
</>
);
};

2
src/Components/LandingPage/LandingPage.tsx
View file

@ -73,7 +73,7 @@ export const LandingPage = () => {
const experimentalImageList = (
<>
<PageSection>
<PageSection isWidthLimited>
{showAlert && <NewAlert setShowAlert={setShowAlert} />}
<Sidebar hasBorder className="pf-v5-u-background-color-100">
<SidebarPanel