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

feat: introduce application auth clients tab in the admin panel (#1423)

Browse Source 
* feat: introduce application auth clients tab in the admin panel

* feat: introduce improvements

* feat: use loading state returned from useMutation

* feat: use error returned by useMutation hook
This commit is contained in:
kattoczko
2023-11-10 13:09:23 +00:00
committed by GitHub
parent 878fab347a
commit c461cc4878
14 changed files with 580 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
packages/web/src/pages/AdminApplication/index.tsx
View File

@@ -7,6 +7,7 @@ import {
Routes,
useParams,
useMatch,
useNavigate,
} from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
@@ -23,6 +24,9 @@ import AppIcon from 'components/AppIcon';
import Container from 'components/Container';
import PageTitle from 'components/PageTitle';
import AdminApplicationSettings from 'components/AdminApplicationSettings';
import AdminApplicationAuthClients from 'components/AdminApplicationAuthClients';
import AdminApplicationCreateAuthClient from 'components/AdminApplicationCreateAuthClient';
import AdminApplicationUpdateAuthClient from 'components/AdminApplicationUpdateAuthClient';
type AdminApplicationParams = {
appKey: string;
@@ -32,6 +36,7 @@ export default function AdminApplication(): React.ReactElement | null {
const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
const formatMessage = useFormatMessage();
const navigate = useNavigate();
const connectionsPathMatch = useMatch({
path: URLS.ADMIN_APP_CONNECTIONS_PATTERN,
@@ -51,79 +56,104 @@ export default function AdminApplication(): React.ReactElement | null {
const app = data?.getApp || {};
const goToAuthClientsPage = () => navigate('auth-clients');
if (loading) return null;
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={10} md={9}>
<Grid container sx={{ mb: 3 }} alignItems="center">
<Grid item xs="auto" sx={{ mr: 3 }}>
<AppIcon
url={app.iconUrl}
color={app.primaryColor}
name={app.name}
/>
<>
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={10} md={9}>
<Grid container sx={{ mb: 3 }} alignItems="center">
<Grid item xs="auto" sx={{ mr: 3 }}>
<AppIcon
url={app.iconUrl}
color={app.primaryColor}
name={app.name}
/>
</Grid>
<Grid item xs>
<PageTitle>{app.name}</PageTitle>
</Grid>
</Grid>
<Grid item xs>
<PageTitle>{app.name}</PageTitle>
</Grid>
</Grid>
<Grid container>
<Grid item xs>
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
<Tabs
variant={matchSmallScreens ? 'fullWidth' : undefined}
value={
settingsPathMatch?.pattern?.path ||
connectionsPathMatch?.pattern?.path ||
authClientsPathMatch?.pattern?.path
}
>
<Tab
label={formatMessage('adminApps.settings')}
to={URLS.ADMIN_APP_SETTINGS(appKey)}
value={URLS.ADMIN_APP_SETTINGS_PATTERN}
component={Link}
/>
<Tab
label={formatMessage('adminApps.authClients')}
to={URLS.ADMIN_APP_AUTH_CLIENTS(appKey)}
value={URLS.ADMIN_APP_AUTH_CLIENTS_PATTERN}
component={Link}
/>
<Tab
label={formatMessage('adminApps.connections')}
to={URLS.ADMIN_APP_CONNECTIONS(appKey)}
value={URLS.ADMIN_APP_CONNECTIONS_PATTERN}
disabled={!app.supportsConnections}
component={Link}
/>
</Tabs>
</Box>
<Grid container>
<Grid item xs>
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
<Tabs
variant={matchSmallScreens ? 'fullWidth' : undefined}
value={
settingsPathMatch?.pattern?.path ||
connectionsPathMatch?.pattern?.path ||
authClientsPathMatch?.pattern?.path
}
>
<Tab
label={formatMessage('adminApps.settings')}
to={URLS.ADMIN_APP_SETTINGS(appKey)}
value={URLS.ADMIN_APP_SETTINGS_PATTERN}
component={Link}
/>
<Tab
label={formatMessage('adminApps.authClients')}
to={URLS.ADMIN_APP_AUTH_CLIENTS(appKey)}
value={URLS.ADMIN_APP_AUTH_CLIENTS_PATTERN}
component={Link}
/>
<Tab
label={formatMessage('adminApps.connections')}
to={URLS.ADMIN_APP_CONNECTIONS(appKey)}
value={URLS.ADMIN_APP_CONNECTIONS_PATTERN}
disabled={!app.supportsConnections}
component={Link}
/>
</Tabs>
</Box>
<Routes>
<Route
path={`/settings/*`}
element={<AdminApplicationSettings appKey={appKey} />}
/>
<Route
path={`/auth-clients/*`}
element={<div>Auth clients</div>}
/>
<Route
path={`/connections/*`}
element={<div>App connections</div>}
/>
<Route
path="/"
element={
<Navigate to={URLS.ADMIN_APP_SETTINGS(appKey)} replace />
}
/>
</Routes>
<Routes>
<Route
path={`/settings/*`}
element={<AdminApplicationSettings appKey={appKey} />}
/>
<Route
path={`/auth-clients/*`}
element={<AdminApplicationAuthClients appKey={appKey} />}
/>
<Route
path={`/connections/*`}
element={<div>App connections</div>}
/>
<Route
path="/"
element={
<Navigate to={URLS.ADMIN_APP_SETTINGS(appKey)} replace />
}
/>
</Routes>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
</Container>
<Routes>
<Route
path="/auth-clients/create"
element={
<AdminApplicationCreateAuthClient
application={app}
onClose={goToAuthClientsPage}
appKey={appKey}
/>
}
/>
<Route
path="/auth-clients/:clientId"
element={
<AdminApplicationUpdateAuthClient
application={app}
onClose={goToAuthClientsPage}
/>
}
/>
</Routes>
</>
);
}