watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 08:37:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

New settings layouts. Segment management screen.

Browse source
This commit is contained in:
Mike Cao 2025-08-07 05:14:35 -07:00
parent 2dbcf63eeb
commit eb7b6978d3
70 changed files with 762 additions and 499 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/settings/websites/WebsitesTable.tsx
View file

@ -57,7 +57,7 @@ export function WebsitesTable({
</MenuItem>
)}
{allowEdit && (
<MenuItem href={`/settings/websites/${websiteId}`}>
<MenuItem href={renderUrl(`/settings/websites/${websiteId}`)}>
<Row alignItems="center" gap>
<Icon data-test="link-button-edit">
<SquarePen />

37
src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
View file

@ -1,5 +1,4 @@
import { Button, Modal, DialogTrigger, Dialog, Column } from '@umami/react-zen';
import { useRouter } from 'next/navigation';
import {
useLoginQuery,
useMessages,
@ -17,9 +16,9 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
const { formatMessage, labels, messages } = useMessages();
const { user } = useLoginQuery();
const { touch } = useModified();
const { teamId, renderUrl } = useNavigation();
const router = useRouter();
const { router, pathname, teamId, renderUrl } = useNavigation();
const { data: teams } = useUserTeamsQuery(user.id);
const isAdmin = pathname.startsWith('/admin');
const canTransferWebsite =
(
@ -49,21 +48,23 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
return (
<Column gap="6">
<ActionForm
label={formatMessage(labels.transferWebsite)}
description={formatMessage(messages.transferWebsite)}
>
<DialogTrigger>
<Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
<Modal>
<Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
)}
</Dialog>
</Modal>
</DialogTrigger>
</ActionForm>
{!isAdmin && (
<ActionForm
label={formatMessage(labels.transferWebsite)}
description={formatMessage(messages.transferWebsite)}
>
<DialogTrigger>
<Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
<Modal>
<Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
)}
</Dialog>
</Modal>
</DialogTrigger>
</ActionForm>
)}
<ActionForm
label={formatMessage(labels.resetWebsite)}

63
src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx
View file

@ -1,55 +1,36 @@
import { useContext } from 'react';
import { Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
import { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { useMessages } from '@/components/hooks';
import { Globe, Eye } from '@/components/icons';
import { SectionHeader } from '@/components/common/SectionHeader';
import { WebsiteShareForm } from './WebsiteShareForm';
import { WebsiteTrackingCode } from './WebsiteTrackingCode';
import { WebsiteData } from './WebsiteData';
import { WebsiteEditForm } from './WebsiteEditForm';
import { LinkButton } from '@/components/common/LinkButton';
export function WebsiteSettings({
websiteId,
openExternal = false,
}: {
websiteId: string;
openExternal?: boolean;
}) {
export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
const website = useContext(WebsiteContext);
const { formatMessage, labels } = useMessages();
return (
<>
<SectionHeader title={website?.name} icon={<Globe />}>
<LinkButton href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
<Icon>
<Eye />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
</SectionHeader>
<Tabs>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
<Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
<Tab id="manage">{formatMessage(labels.manage)}</Tab>
</TabList>
<TabPanel id="details" style={{ width: 500 }}>
<WebsiteEditForm websiteId={websiteId} />
</TabPanel>
<TabPanel id="tracking">
<WebsiteTrackingCode websiteId={websiteId} />
</TabPanel>
<TabPanel id="share" style={{ width: 500 }}>
<WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
</TabPanel>
<TabPanel id="manage">
<WebsiteData websiteId={websiteId} />
</TabPanel>
</Tabs>
</>
<Tabs>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
<Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
<Tab id="manage">{formatMessage(labels.manage)}</Tab>
</TabList>
<TabPanel id="details" style={{ width: 500 }}>
<WebsiteEditForm websiteId={websiteId} />
</TabPanel>
<TabPanel id="tracking">
<WebsiteTrackingCode websiteId={websiteId} />
</TabPanel>
<TabPanel id="share" style={{ width: 500 }}>
<WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
</TabPanel>
<TabPanel id="manage">
<WebsiteData websiteId={websiteId} />
</TabPanel>
</Tabs>
);
}

10
src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsHeader.tsx Normal file
View file

@ -0,0 +1,10 @@
import { useContext } from 'react';
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { PageHeader } from '@/components/common/PageHeader';
import { Globe } from '@/components/icons';
export function WebsiteSettingsHeader() {
const website = useContext(WebsiteContext);
return <PageHeader title={website?.name} icon={<Globe />} />;
}

10
src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx
View file

@ -1,11 +1,19 @@
'use client';
import { Column } from '@umami/react-zen';
import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { WebsiteSettings } from './WebsiteSettings';
import { WebsiteSettingsHeader } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsHeader';
import { Panel } from '@/components/common/Panel';
export function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
return (
<WebsiteProvider websiteId={websiteId}>
<WebsiteSettings websiteId={websiteId} />
<Column gap="6">
<WebsiteSettingsHeader />
<Panel>
<WebsiteSettings websiteId={websiteId} />
</Panel>
</Column>
</WebsiteProvider>
);
}