groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add no result found UI on apps

Browse Source
This commit is contained in:
Ali BARIN
2022-08-12 18:14:30 +02:00
parent 77d7260698
commit a5f391d2dc
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/locales/en.json
View File

@@ -25,6 +25,7 @@
"apps.addConnection": "Add connection",
"apps.addNewAppConnection": "Add a new app connection",
"apps.searchApp": "Search for app",
"apps.noConnections": "You don't have any connections yet.",
"addAppConnection.submit": "Submit",
"connection.flowCount": "{count} flows",
"connection.viewFlows": "View flows",

22
packages/web/src/pages/Applications/index.tsx
View File

@@ -4,9 +4,12 @@ import type { LinkProps } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Divider from '@mui/material/Divider';
import CircularProgress from '@mui/material/CircularProgress';
import AddIcon from '@mui/icons-material/Add';
import type { IApp } from '@automatisch/types';
import NoResultFound from 'components/NoResultFound';
import ConditionalIconButton from 'components/ConditionalIconButton';
import Container from 'components/Container';
import AddNewAppConnection from 'components/AddNewAppConnection';
@@ -21,7 +24,10 @@ export default function Applications(): React.ReactElement {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [appName, setAppName] = React.useState(null);
const { data } = useQuery(GET_CONNECTED_APPS, { variables: {name: appName } });
const { data, loading } = useQuery(GET_CONNECTED_APPS, { variables: {name: appName } });
const apps: IApp[] = data?.getConnectedApps;
const hasApps = apps?.length;
const onSearchChange = React.useCallback((event) => {
setAppName(event.target.value);
@@ -45,7 +51,7 @@ export default function Applications(): React.ReactElement {
return (
<Box sx={{ py: 3 }}>
<Container>
<Grid container sx={{ mb: [2, 5] }} columnSpacing={1.5} rowSpacing={3}>
<Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
<Grid container item xs sm alignItems="center" order={{ xs: 0 }}>
<PageTitle>{formatMessage('apps.title')}</PageTitle>
</Grid>
@@ -69,7 +75,17 @@ export default function Applications(): React.ReactElement {
</Grid>
</Grid>
{data?.getConnectedApps?.map((app: IApp) => (
<Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
{!loading && !hasApps && (<NoResultFound
text={formatMessage('apps.noConnections')}
to={URLS.NEW_APP_CONNECTION}
/>)}
{!loading && apps?.map((app: IApp) => (
<AppRow key={app.name} application={app} />
))}