Add no plugins messaging

This commit is contained in:
Bill Thornton
2025-07-16 13:08:50 -04:00
parent 9fd0fcc175
commit 89e07f2f2b
3 changed files with 72 additions and 14 deletions
@@ -0,0 +1,51 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import React, { type FC } from 'react';
import globalize from 'lib/globalize';
interface NoPluginResultsProps {
isFiltered: boolean
onViewAll: () => void
query: string
}
const NoPluginResults: FC<NoPluginResultsProps> = ({
isFiltered,
onViewAll,
query
}) => {
return (
<Box
sx={{
textAlign: 'center'
}}
>
<Typography
component='div'
sx={{
marginTop: 2,
marginBottom: 1
}}
>
{
query ?
globalize.translate('SearchResultsEmpty', query) :
globalize.translate('NoSubtitleSearchResultsFound')
}
</Typography>
{isFiltered && (
<Button
variant='text'
onClick={onViewAll}
>
{globalize.translate('ViewAllPlugins')}
</Button>
)}
</Box>
);
};
export default NoPluginResults;
+20 -10
View File
@@ -12,9 +12,10 @@ import { Link } from 'react-router-dom';
import SearchInput from 'apps/dashboard/components/SearchInput';
import { usePluginDetails } from 'apps/dashboard/features/plugins/api/usePluginDetails';
import NoPluginResults from 'apps/dashboard/features/plugins/components/NoPluginResults';
import PluginCard from 'apps/dashboard/features/plugins/components/PluginCard';
import { PluginCategory } from 'apps/dashboard/features/plugins/constants/pluginCategory';
import { CATEGORY_LABELS } from 'apps/dashboard/features/plugins/constants/categoryLabels';
import { PluginCategory } from 'apps/dashboard/features/plugins/constants/pluginCategory';
import Loading from 'components/loading/LoadingComponent';
import Page from 'components/Page';
import globalize from 'lib/globalize';
@@ -178,15 +179,24 @@ export const Component = () => {
</Box>
<Box>
<Grid container spacing={2} columns={{ xs: 1, sm: 4, md: 9, lg: 8, xl: 10 }}>
{filteredPlugins.map(plugin => (
<Grid key={plugin.id} size={{ xs: 1, sm: 2, md: 3, lg: 2 }}>
<PluginCard
plugin={plugin}
/>
</Grid>
))}
</Grid>
{filteredPlugins.length > 0 ? (
<Grid container spacing={2} columns={{ xs: 1, sm: 4, md: 9, lg: 8, xl: 10 }}>
{filteredPlugins.map(plugin => (
<Grid key={plugin.id} size={{ xs: 1, sm: 2, md: 3, lg: 2 }}>
<PluginCard
plugin={plugin}
/>
</Grid>
))}
</Grid>
) : (
<NoPluginResults
isFiltered={!!category}
// eslint-disable-next-line react/jsx-no-bind
onViewAll={() => setCategory(undefined)}
query={searchQuery}
/>
)}
</Box>
</Stack>
)}