PS-600 session exp modal

.env

@@ -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}
@@ -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

configurator/config/services.yaml

@@ -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

dashboard/client/config-compiler.js

@@ -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',
@@ -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,
     };
 });

dashboard/client/package.json

@@ -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",

dashboard/client/src/Dashboard.tsx

@@ -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>
+    );
+}

dashboard/client/src/DashboardBar.tsx

@@ -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>
+    );
+}