WIP

alchemy-fr · Dec 20, 2023 · 0e9c31b · 0e9c31b
1 parent d336426
commit 0e9c31b
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 57 deletions.
diff --git a/dashboard/client/src/Dashboard.tsx b/dashboard/client/src/Dashboard.tsx
@@ -10,10 +10,16 @@ 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,
@@ -29,9 +35,6 @@ export default function Dashboard({}: Props) {
 
     console.debug('config', config);
 
-    const theme = useTheme();
-    const isLarge = useMediaQuery(theme.breakpoints.up('sm'));
-
     return (
         <Container>
             {isLarge && (
@@ -45,16 +48,16 @@ export default function Dashboard({}: Props) {
                         }}
                     >
                         {STACK_NAME}
-                        <Chip
+                        {user && <Chip
                             icon={<SellIcon/>}
                           label={STACK_VERSION}
                             color={'info'}
-                        />
+                        />}
                     </Typography>
                 </DashboardBar>
             )}
 
-            {isLarge && DEV_MODE && (
+            {user && isLarge && DEV_MODE && (
                 <Alert
                     sx={{
                         mt: 2,
@@ -73,15 +76,15 @@ export default function Dashboard({}: Props) {
                 spacing={2}
             >
                 <Service
-                    mainUrl={config.keycloakUrl}
+                    mainUrl={`${config.keycloakUrl}/admin/${config.realmName}/console`}
                     title={`Identity Manager`}
                     description={`Keycloak IAM`}
                     logo={keycloakImg}
                     links={[
                         {
-                            icon: <ApiIcon/>,
-                            href: config.keycloakUrl,
-                            title: `Keycloak Home`,
+                            icon: <AdminPanelSettingsIcon />,
+                            href: `${config.keycloakUrl}/admin/master/console`,
+                            title: `Master Admin`,
                         },
                     ]}
                 />

diff --git a/dashboard/client/src/Root.tsx b/dashboard/client/src/Root.tsx
@@ -1,12 +1,17 @@
 import {oauthClient} from './lib/apiClient';
 import {AuthenticationProvider, SessionExpireContainer, useAuthorizationCode} from '@alchemy/react-auth';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import Dashboard from "./Dashboard.tsx";
 
 type Props = {};
 
 export default function Root({}: Props) {
-    useAuthorizationCode({
+    const {
+        error,
+        hasCode,
+    } = useAuthorizationCode({
         oauthClient,
+        allowNoCode: true,
         navigate: (path, {replace} = {}) => {
             if (replace) {
                 document.location.replace(path);
@@ -17,8 +22,15 @@ export default function Root({}: Props) {
         successUri: '/'
     });
 
+    if (error) {
+        return <div>
+            {error.toString()}
+        </div>
+    }
+
     return (
         <AuthenticationProvider oauthClient={oauthClient}>
+            {hasCode && <FullPageLoader/>}
             <SessionExpireContainer/>
             <Dashboard />
         </AuthenticationProvider>

diff --git a/databox/client/src/components/Layout/MainAppBar.tsx b/databox/client/src/components/Layout/MainAppBar.tsx
@@ -136,8 +136,9 @@ export default function MainAppBar({onToggleLeftPanel}: Props) {
                                     username={username}
                                     accountUrl={getAccountUrl()}
                                     onLogout={logout}
-                                    actions={({closeMenu}) => <>
+                                    actions={({closeMenu}) => [
                                         <MenuItem
+                                            key={'change_theme'}
                                             onClick={() => {
                                                 openModal(ChangeTheme);
                                                 closeMenu();
@@ -152,8 +153,9 @@ export default function MainAppBar({onToggleLeftPanel}: Props) {
                                                     'Change theme'
                                                 )}
                                             />
-                                        </MenuItem>
+                                        </MenuItem>,
                                         <MenuItem
+                                            key={'theme_editor'}
                                             onClick={() => {
                                                 openModal(
                                                     ThemeEditor,
@@ -181,7 +183,7 @@ export default function MainAppBar({onToggleLeftPanel}: Props) {
                                                 )}
                                             />
                                         </MenuItem>
-                                    </>}
+                                    ]}
                                 />
                             )}
                         </Box>

diff --git a/lib/js/auth/src/client/OAuthClient.ts b/lib/js/auth/src/client/OAuthClient.ts
@@ -326,7 +326,11 @@ export default class OAuthClient {
 
         const t = this.storage.getItem(this.tokenStorageKey);
         if (t) {
-            return this.tokensCache = JSON.parse(t) as AuthTokens;
+            const tokens = JSON.parse(t) as AuthTokens;
+
+            this.handleSessionTimeout(tokens)
+
+            return this.tokensCache = tokens;
         }
     }
 

diff --git a/lib/js/phrasea-ui/index.ts b/lib/js/phrasea-ui/index.ts
@@ -2,10 +2,12 @@ import NotFoundPage from "./src/components/Error/NotFoundPage";
 import ErrorPage from "./src/components/Error/ErrorPage";
 import ErrorLayout from "./src/components/Error/ErrorLayout";
 import UserMenu from "./src/components/UserMenu";
+import FullPageLoader from "./src/components/FullPageLoader";
 
 export {
     NotFoundPage,
     ErrorPage,
     ErrorLayout,
     UserMenu,
+    FullPageLoader,
 };
diff --git a/lib/js/phrasea-ui/src/components/FullPageLoader.tsx b/lib/js/phrasea-ui/src/components/FullPageLoader.tsx
@@ -0,0 +1,17 @@
+import {CircularProgress} from "@mui/material";
+
+type Props = {};
+
+export default function FullPageLoader({}: Props) {
+    return <div style={{
+        background: 'rgba(0,0,0,0.3)',
+        position: 'absolute',
+        height: '100vh',
+        width: '100vw',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }}>
+        <CircularProgress/>
+    </div>
+}
diff --git a/lib/js/phrasea-ui/src/components/UserMenu.tsx b/lib/js/phrasea-ui/src/components/UserMenu.tsx
@@ -12,7 +12,7 @@ import {useTranslation} from 'react-i18next';
 type Props = {
     actions?: (props: {
         closeMenu: () => void,
-    }) => ReactNode;
+    }) => ReactNode[];
     accountUrl?: string;
     onLogout?: () => void;
     menuHeight: number;
@@ -39,6 +39,48 @@ export default function UserMenu({
         setAnchorElUser(null);
     };
 
+    let menuItems: ReactNode[] = [];
+    if (accountUrl) {
+        menuItems.push(<MenuItem
+            component={'a'}
+            href={accountUrl}
+            key={'account'}
+        >
+            <ListItemIcon>
+                <AccountBoxIcon/>
+            </ListItemIcon>
+            <ListItemText
+                primary={t(
+                    'ui:menu.account',
+                    'My account'
+                )}
+                secondary={username}
+            />
+        </MenuItem>)
+    }
+    if (actions) {
+        menuItems = menuItems.concat(actions({
+            closeMenu: handleCloseUserMenu,
+        }));
+    }
+    if (onLogout) {
+        menuItems.push(<Divider key={'logout_div'} light/>);
+        menuItems.push(<MenuItem
+            key={'logout'}
+            onClick={onLogout}
+        >
+            <ListItemIcon>
+                <LogoutIcon/>
+            </ListItemIcon>
+            <ListItemText
+                primary={t(
+                    'ui:menu.logout',
+                    'Logout'
+                )}
+            />
+        </MenuItem>);
+    }
+
     return <>
         <Tooltip title="Open settings">
             <IconButton
@@ -75,41 +117,7 @@ export default function UserMenu({
             open={Boolean(anchorElUser)}
             onClose={handleCloseUserMenu}
         >
-            {accountUrl && <MenuItem
-                component={'a'}
-                href={accountUrl}
-            >
-                <ListItemIcon>
-                    <AccountBoxIcon/>
-                </ListItemIcon>
-                <ListItemText
-                    primary={t(
-                        'ui:menu.account',
-                        'My account'
-                    )}
-                    secondary={username}
-                />
-            </MenuItem>}
-            {actions && actions({
-                closeMenu: handleCloseUserMenu,
-            })}
-            {onLogout && <>
-                <Divider light/>
-                <MenuItem
-                    key={'logout'}
-                    onClick={onLogout}
-                >
-                    <ListItemIcon>
-                        <LogoutIcon/>
-                    </ListItemIcon>
-                    <ListItemText
-                        primary={t(
-                            'ui:menu.logout',
-                            'Logout'
-                        )}
-                    />
-                </MenuItem>
-            </>}
+            {menuItems}
         </Menu>
     </>
 }
diff --git a/lib/js/react-auth/src/components/AuthenticationProvider.tsx b/lib/js/react-auth/src/components/AuthenticationProvider.tsx
@@ -33,6 +33,7 @@ export default function AuthenticationProvider({
                 setTokens(undefined);
             }
         };
+
         const refreshTokenListener: AuthEventHandler<RefreshTokenEvent> = async (event) => {
             if (!event.preventDefault) {
                 setTokens(event.tokens);

diff --git a/lib/js/react-auth/src/hooks/useAuthorizationCode.ts b/lib/js/react-auth/src/hooks/useAuthorizationCode.ts
@@ -21,15 +21,21 @@ export function useAuthorizationCode({
     successUri,
     errorHandler,
     navigate,
-}: Props) {
+    allowNoCode,
+}: {
+    allowNoCode?: boolean;
+} & Props) {
     const {setTokens} = useAuth();
     const [error, setError] = React.useState<any>();
     const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
 
     useEffectOnce(() => {
         const code = urlParams.get('code');
         if (!code) {
-            setError(new Error(`Missing authorization code.`));
+            if (!allowNoCode) {
+                setError(new Error(`Missing authorization code.`));
+            }
 
             return;
         }
@@ -84,5 +90,6 @@ export function useAuthorizationCode({
 
     return {
         error,
+        hasCode: Boolean(code),
     }
 }
diff --git a/lib/js/react-hooks/src/useTimeout.ts b/lib/js/react-hooks/src/useTimeout.ts
@@ -9,7 +9,6 @@ export function useTimeout(handler: () => void | undefined, delay: number | unde
         }
 
         if (undefined !== delay && handler) {
-            console.log('setTimeout delay', delay);
             timeoutRef.current = setTimeout(handler, delay);
         }
 

diff --git a/lib/js/visual-workflow/src/stories/Updates.stories.tsx b/lib/js/visual-workflow/src/stories/Updates.stories.tsx
@@ -30,7 +30,6 @@ type Story = StoryObj<typeof WorkflowUpdater>;
 
 const rerun = async (jobId: string): Promise<void> => {
     return new Promise<void>((resolve) => {
-        console.log(`Rerunning job ${jobId}`);
         setTimeout(() => {
             resolve();
         }, 200);

diff --git a/lib/js/visual-workflow/src/stories/VisualWorkflow.stories.tsx b/lib/js/visual-workflow/src/stories/VisualWorkflow.stories.tsx
@@ -30,7 +30,6 @@ type Story = StoryObj<typeof VisualWorkflow>;
 
 const rerun = async (jobId: string): Promise<void> => {
     return new Promise<void>((resolve) => {
-        console.log(`Rerunning job ${jobId}`);
         setTimeout(() => {
             resolve();
         }, 1000);

diff --git a/lib/js/visual-workflow/src/stories/WorkflowHeader.stories.tsx b/lib/js/visual-workflow/src/stories/WorkflowHeader.stories.tsx
@@ -32,7 +32,6 @@ type Story = StoryObj<typeof WorkflowHeader>;
 
 const refresh = async (): Promise<void> => {
     return new Promise<void>((resolve) => {
-        console.log(`Refreshing workflow`);
         setTimeout(() => {
             resolve();
         }, 1000);
-Original file line number
+Diff line change
@@ Expand Up @@
             }
             if (undefined !== delay && handler) {
-                console.log('setTimeout delay', delay);
                 timeoutRef.current = setTimeout(handler, delay);
             }
@@ Expand Down @@