Added lookup for cloud account. Added SessionModal component.

This commit is contained in:
Mike Cao 2025-10-05 23:15:36 -07:00
parent caf04015bb
commit f733690d38
7 changed files with 79 additions and 48 deletions

View file

@ -0,0 +1,49 @@
import { Dialog, Modal, ModalProps } from '@umami/react-zen';
import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
import { useNavigation } from '@/components/hooks';
export interface SessionModalProps extends ModalProps {
websiteId: string;
}
export function SessionModal({ websiteId, ...props }: SessionModalProps) {
const {
router,
query: { session },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ session: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ session: undefined }));
}
};
return (
<Modal isOpen={!!session} onOpenChange={handleOpenChange} isDismissable {...props}>
<Dialog
style={{
maxWidth: 1320,
width: '100vw',
minHeight: '300px',
height: 'calc(100vh - 40px)',
}}
>
{({ close }) => {
return (
<SessionProfile
websiteId={websiteId}
sessionId={session}
onClose={() => handleClose(close)}
/>
);
}}
</Dialog>
</Modal>
);
}

View file

@ -1,35 +1,19 @@
'use client';
import { Key, useState } from 'react';
import { TabList, Tab, Tabs, TabPanel, Column, Modal, Dialog } from '@umami/react-zen';
import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
import { SessionsDataTable } from './SessionsDataTable';
import { SessionProperties } from './SessionProperties';
import { useMessages, useNavigation } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { Panel } from '@/components/common/Panel';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { getItem, setItem } from '@/lib/storage';
import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal';
const KEY_NAME = 'umami.sessions.tab';
export function SessionsPage({ websiteId }) {
const [tab, setTab] = useState(getItem(KEY_NAME) || 'activity');
const { formatMessage, labels } = useMessages();
const {
router,
query: { session },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ session: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ session: undefined }));
}
};
const handleSelect = (value: Key) => {
setItem(KEY_NAME, value);
@ -53,26 +37,7 @@ export function SessionsPage({ websiteId }) {
</TabPanel>
</Tabs>
</Panel>
<Modal isOpen={!!session} onOpenChange={handleOpenChange} isDismissable>
<Dialog
style={{
maxWidth: 1320,
width: '100vw',
minHeight: '300px',
height: 'calc(100vh - 40px)',
}}
>
{({ close }) => {
return (
<SessionProfile
websiteId={websiteId}
sessionId={session}
onClose={() => handleClose(close)}
/>
);
}}
</Dialog>
</Modal>
<SessionModal websiteId={websiteId} />
</Column>
);
}