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

V2Wizard: Add a specific empty state for "Other" toggle

Browse source 
This adds an empty state specific for "Other repos" toggle.
This commit is contained in:
regexowl 2024-04-24 09:36:24 +02:00 • committed by Lucas Garfield
parent 8dd9d32475
commit c0459cb975
1 changed files with 69 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx
View file

@ -288,30 +288,65 @@ const Packages = () => {
const NoResultsFound = () => {
const { isBeta } = useGetEnvironment();
return (
<Tr>
<Td colSpan={5}>
<Bullseye>
<EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader icon={<EmptyStateIcon icon={SearchIcon} />} />
<EmptyStateHeader
titleText="No results found"
headingLevel="h4"
/>
<EmptyStateBody>
Adjust your search and try again, or search from your
repositories and popular repositories
</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>
<Button
variant="primary"
onClick={() => setToggleSourceRepos('toggle-other-repos')}
>
Search other repositories
</Button>
</EmptyStateActions>
<EmptyStateActions>
if (toggleSourceRepos === 'toggle-included-repos') {
return (
<Tr>
<Td colSpan={5}>
<Bullseye>
<EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader icon={<EmptyStateIcon icon={SearchIcon} />} />
<EmptyStateHeader
titleText="No results found"
headingLevel="h4"
/>
<EmptyStateBody>
Adjust your search and try again, or search from your
repositories and popular repositories
</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>
<Button
variant="primary"
onClick={() => setToggleSourceRepos('toggle-other-repos')}
>
Search other repositories
</Button>
</EmptyStateActions>
<EmptyStateActions>
<Button
variant="link"
isInline
component="a"
target="_blank"
href={
isBeta()
? '/preview/insights/content'
: '/insights/content'
}
>
View other repositories
</Button>
</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
</Bullseye>
</Td>
</Tr>
);
} else {
return (
<Tr>
<Td colSpan={5}>
<Bullseye>
<EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader icon={<EmptyStateIcon icon={SearchIcon} />} />
<EmptyStateHeader
titleText="No results found"
headingLevel="h4"
/>
<EmptyStateBody>
No packages found in known repositories. If you know of a
repository containing this packages, add it to{' '}
<Button
variant="link"
isInline
@ -323,15 +358,16 @@ const Packages = () => {
: '/insights/content'
}
>
View other repositories
</Button>
</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
</Bullseye>
</Td>
</Tr>
);
your repositories
</Button>{' '}
and try searching for it again.
</EmptyStateBody>
</EmptyState>
</Bullseye>
</Td>
</Tr>
);
}
};
const RepositoryModal = () => {