Skip to content

Commit

Permalink
PS-600 session exp modal (#403)
Browse files Browse the repository at this point in the history
* PS-600 add session expiration modal

* upgrade liform-react

* PS-598 fix indexer rendition definition duplicates
  • Loading branch information
4rthem authored Dec 21, 2023
1 parent 269e210 commit 11a44dc
Show file tree
Hide file tree
Showing 133 changed files with 3,355 additions and 1,174 deletions.
4 changes: 3 additions & 1 deletion .env
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ LETS_ENCRYPT_PROVIDER=
LETS_ENCRYPT_CA_SERVER=https://acme-staging-v02.api.letsencrypt.org/directory

PHRASEA_DOMAIN="${PHRASEA_DOMAIN:-phrasea.local}"
DASHBOARD_URL=https://dashboard.${PHRASEA_DOMAIN}${HTTPS_PORT_PREFIX}
DASHBOARD_CLIENT_URL=https://dashboard.${PHRASEA_DOMAIN}${HTTPS_PORT_PREFIX}
S3_ENDPOINT=https://minio.${PHRASEA_DOMAIN}${HTTPS_PORT_PREFIX}
UPLOADER_API_URL=https://api-uploader.${PHRASEA_DOMAIN}${HTTPS_PORT_PREFIX}
EXPOSE_API_URL=https://api-expose.${PHRASEA_DOMAIN}${HTTPS_PORT_PREFIX}
Expand Down Expand Up @@ -51,6 +51,8 @@ APP_ENV=prod
# Enables some features for debugging applications
DEV_MODE=false

# Dashboard
DASHBOARD_CLIENT_ID=dashboard-app
DISPLAY_SERVICES_MENU=true

# Minio
Expand Down
1 change: 1 addition & 0 deletions configurator/config/services.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ services:
- databox
- expose
- uploader
- dashboard

# makes classes in src/ available to be used as services
# this creates a service per class whose id is the fully-qualified class name
Expand Down
39 changes: 39 additions & 0 deletions dashboard/client/config-compiler.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
(function (config, env) {
config = config || {};

const analytics = {};

if (env.MATOMO_URL) {
analytics.matomo = {
baseUrl: env.MATOMO_URL,
siteId: env.MATOMO_SITE_ID,
};
}

const whiteList = [
'DATABOX_API_URL',
'DATABOX_CLIENT_URL',
Expand Down Expand Up @@ -33,8 +44,36 @@
}
});

function castBoolean(value) {
if (typeof value === 'boolean') {
return value;
}

if (typeof value === 'string') {
return ['true', '1', 'on', 'y', 'yes'].includes(
value.toLowerCase()
);
}

return false;
}


return {
locales: config.available_locales,
autoConnectIdP: env.AUTO_CONNECT_IDP,
baseUrl: env.DASHBOARD_CLIENT_URL,
keycloakUrl: env.KEYCLOAK_URL,
realmName: env.KEYCLOAK_REALM_NAME,
clientId: env.CLIENT_ID,
devMode: castBoolean(env.DEV_MODE),
displayServicesMenu: castBoolean(env.DISPLAY_SERVICES_MENU),
dashboardBaseUrl: env.DASHBOARD_CLIENT_URL,
analytics,
appId: env.APP_ID || 'dashboard',
sentryDsn: env.SENTRY_DSN,
sentryEnvironment: env.SENTRY_ENVIRONMENT,
sentryRelease: env.SENTRY_RELEASE,
env: e,
};
});
10 changes: 8 additions & 2 deletions dashboard/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,19 @@
"preview": "vite preview"
},
"dependencies": {
"@alchemy/api": "workspace:*",
"@alchemy/auth": "workspace:*",
"@alchemy/core": "workspace:*",
"@alchemy/react-auth": "workspace:*",
"@alchemy/theme-editor": "workspace:*",
"@mui/material": "^5.15.0",
"@alchemy/phrasea-ui": "workspace:*",
"@mui/material": "^5.15.1",
"@mui/icons-material": "^5.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-google-font-loader": "^1.1.0",
"vite-plugin-svgr": "^4.2.0"
"vite-plugin-svgr": "^4.2.0",
"react-i18next": "^13.5.0"
},
"devDependencies": {
"@types/node": "^18.8.5",
Expand Down
136 changes: 136 additions & 0 deletions dashboard/client/src/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import {Alert, Chip, Container, Grid, Typography, useMediaQuery, useTheme,} from '@mui/material';
import Service from './Service';
import ClientApp from './ClientApp.tsx';
import config from './config.ts';
import ApiIcon from '@mui/icons-material/Api';
import SellIcon from '@mui/icons-material/Sell';
import keycloakImg from './images/keycloak.png';
import databoxImg from './images/databox.png';
import uploaderImg from './images/uploader.png';
import exposeImg from './images/expose.png';
import notifyImg from './images/notify.png';
import DashboardBar from "./DashboardBar";
import {useKeycloakUser} from '@alchemy/react-auth'
import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";

type Props = {};

export default function Dashboard({}: Props) {
const theme = useTheme();
const isLarge = useMediaQuery(theme.breakpoints.up('sm'));
const {user} = useKeycloakUser();

const {
DATABOX_API_URL,
EXPOSE_API_URL,
UPLOADER_API_URL,
NOTIFY_API_URL,
DATABOX_CLIENT_URL,
EXPOSE_CLIENT_URL,
UPLOADER_CLIENT_URL,
STACK_NAME,
DEV_MODE,
STACK_VERSION,
} = config.env;

console.debug('config', config);

return (
<Container>
{isLarge && (
<DashboardBar>
<Typography
variant={'h1'}
sx={{
'.MuiChip-root': {
ml: 2,
},
}}
>
{STACK_NAME}
{user && <Chip
icon={<SellIcon/>}
label={STACK_VERSION}
color={'info'}
/>}
</Typography>
</DashboardBar>
)}

{user && isLarge && DEV_MODE && (
<Alert
sx={{
mt: 2,
}}
severity={'info'}
>
Developer Mode is enabled
</Alert>
)}

<Grid
sx={{
pt: 2,
}}
container
spacing={2}
>
<Service
mainUrl={`${config.keycloakUrl}/admin/${config.realmName}/console`}
title={`Identity Manager`}
description={`Keycloak IAM`}
logo={keycloakImg}
links={[
{
icon: <AdminPanelSettingsIcon />,
href: `${config.keycloakUrl}/admin/master/console`,
title: `Master Admin`,
},
]}
/>
{DATABOX_API_URL && (
<ClientApp
apiUrl={DATABOX_API_URL}
clientUrl={DATABOX_CLIENT_URL}
title={`Databox`}
description={`Your DAM`}
logo={databoxImg}
/>
)}
{EXPOSE_API_URL && (
<ClientApp
apiUrl={EXPOSE_API_URL}
clientUrl={EXPOSE_CLIENT_URL}
title={`Expose`}
description={`Share Publications`}
logo={exposeImg}
/>
)}
{UPLOADER_API_URL && (
<ClientApp
apiUrl={UPLOADER_API_URL}
clientUrl={UPLOADER_CLIENT_URL}
title={`Uploader`}
description={`Standalone Asset deposit`}
logo={uploaderImg}
/>
)}
{NOTIFY_API_URL && (
<Service
mainUrl={`${NOTIFY_API_URL}/admin`}
title={`Notify Admin`}
description={`Mail Sender`}
logo={notifyImg}
links={[
{
icon: <ApiIcon/>,
href: NOTIFY_API_URL,
title: `API documentation of Notify`,
},
]}
/>
)}
</Grid>
</Container>
);
}
53 changes: 53 additions & 0 deletions dashboard/client/src/DashboardBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {PropsWithChildren} from "react";
import {useKeycloakUrls, useKeycloakUser} from '@alchemy/react-auth';
import config from "./config.ts";
import {keycloakClient} from "./lib/apiClient.ts";
import MenuItem from "@mui/material/MenuItem";
import Box from "@mui/material/Box";
import {UserMenu} from '@alchemy/phrasea-ui';
import {useTranslation} from "react-i18next";

type Props = PropsWithChildren<{}>;

export default function DashboardBar({
children
}: Props) {
const menuHeight = 42;
const {t} = useTranslation();
const {getLoginUrl, getAccountUrl} = useKeycloakUrls({
autoConnectIdP: config.autoConnectIdP,
keycloakClient,
});

const {user, logout} = useKeycloakUser();

return (
<AppBar position="sticky">
<Toolbar>
<div style={{
flexGrow: 1
}}>
{children}
</div>


<Box sx={{flexGrow: 0}}>
{!user ? (
<MenuItem component={'a'} href={getLoginUrl()}>
{t('menu.sign_in', 'Sign in')}
</MenuItem>
) : (
<UserMenu
menuHeight={menuHeight}
username={user?.username}
accountUrl={getAccountUrl()}
onLogout={logout}
/>
)}
</Box>
</Toolbar>
</AppBar>
);
}
Loading

0 comments on commit 11a44dc

Please sign in to comment.