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

Pixel/links development. New validations folder. More refactoring.

Browse source
This commit is contained in:
Mike Cao 2025-08-14 23:48:11 -07:00
parent 88639dfe83
commit 247e14646b
136 changed files with 1395 additions and 516 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/app/(main)/settings/teams/TeamsDataTable.tsx
View file

@ -1,24 +0,0 @@
import { DataGrid } from '@/components/common/DataGrid';
import { TeamsTable } from '@/app/(main)/settings/teams/TeamsTable';
import { useLoginQuery, useUserTeamsQuery } from '@/components/hooks';
import { ReactNode } from 'react';
export function TeamsDataTable({
allowEdit,
showActions,
}: {
allowEdit?: boolean;
showActions?: boolean;
children?: ReactNode;
}) {
const { user } = useLoginQuery();
const query = useUserTeamsQuery(user.id);
return (
<DataGrid query={query}>
{({ data }) => {
return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
}}
</DataGrid>
);
}

62
src/app/(main)/settings/teams/TeamsTable.tsx
View file

@ -1,62 +0,0 @@
import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { Eye, Edit } from '@/components/icons';
import { ROLES } from '@/lib/constants';
import { MenuButton } from '@/components/input/MenuButton';
import Link from 'next/link';
export function TeamsTable({
data = [],
showActions = false,
}: {
data: any[];
allowEdit?: boolean;
showActions?: boolean;
}) {
const { formatMessage, labels } = useMessages();
return (
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)}>
{(row: any) => <Link href={`/settings/teams/${row.id}`}>{row.name}</Link>}
</DataColumn>
<DataColumn id="owner" label={formatMessage(labels.owner)}>
{(row: any) => row.users.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
</DataColumn>
<DataColumn id="websites" label={formatMessage(labels.websites)} align="end">
{(row: any) => row._count.websites}
</DataColumn>
<DataColumn id="members" label={formatMessage(labels.members)} align="end">
{(row: any) => row._count.users}
</DataColumn>
{showActions ? (
<DataColumn id="action" label=" " align="end">
{(row: any) => {
const { id } = row;
return (
<MenuButton>
<MenuItem href={`/teams/${id}`}>
<Row alignItems="center" gap>
<Icon>
<Eye />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Row>
</MenuItem>
<MenuItem href={`/settings/teams/${id}`}>
<Row alignItems="center" gap>
<Icon>
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
</MenuButton>
);
}}
</DataColumn>
) : null}
</DataTable>
);
}

2
src/app/(main)/settings/teams/[teamId]/TeamMemberEditButton.tsx
View file

@ -26,7 +26,7 @@ export function TeamMemberEditButton({
};
return (
<ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
<ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
{({ close }) => (
<TeamMemberEditForm

2
src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx
View file

@ -35,7 +35,7 @@ export function TeamMemberRemoveButton({
};
return (
<ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
<ActionButton title={formatMessage(labels.delete)} icon={<Trash />}>
<Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm

32
src/app/(main)/settings/websites/WebsiteAddButton.tsx
View file

@ -1,32 +0,0 @@
import { useMessages, useModified } from '@/components/hooks';
import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
import { Plus } from '@/components/icons';
import { WebsiteAddForm } from './WebsiteAddForm';
export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages();
const { toast } = useToast();
const { touch } = useModified();
const handleSave = async () => {
toast(formatMessage(messages.saved));
touch('websites');
onSave?.();
};
return (
<DialogTrigger>
<Button data-test="button-website-add" variant="primary">
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.addWebsite)} style={{ width: 400 }}>
{({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
</Dialog>
</Modal>
</DialogTrigger>
);
}

64
src/app/(main)/settings/websites/WebsiteAddForm.tsx
View file

@ -1,64 +0,0 @@
import { Form, FormField, FormSubmitButton, Row, TextField, Button } from '@umami/react-zen';
import { useApi } from '@/components/hooks';
import { DOMAIN_REGEX } from '@/lib/constants';
import { useMessages } from '@/components/hooks';
export function WebsiteAddForm({
teamId,
onSave,
onClose,
}: {
teamId?: string;
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) => post('/websites', { ...data, teamId }),
});
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
onSave?.();
onClose?.();
},
});
};
return (
<Form onSubmit={handleSubmit} error={error?.message}>
<FormField
label={formatMessage(labels.name)}
data-test="input-name"
name="name"
rules={{ required: formatMessage(labels.required) }}
>
<TextField autoComplete="off" />
</FormField>
<FormField
label={formatMessage(labels.domain)}
data-test="input-domain"
name="domain"
rules={{
required: formatMessage(labels.required),
pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
}}
>
<TextField autoComplete="off" />
</FormField>
<Row justifyContent="flex-end" paddingTop="3" gap="3">
{onClose && (
<Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)}
</Button>
)}
<FormSubmitButton data-test="button-submit" isDisabled={false}>
{formatMessage(labels.save)}
</FormSubmitButton>
</Row>
</Form>
);
}

11
src/app/(main)/settings/websites/Websites.module.css
View file

@ -1,11 +0,0 @@
.website {
padding-bottom: 30px;
border-bottom: 1px solid var(--base300);
margin-bottom: 30px;
align-self: stretch;
}
.website:last-child {
border-bottom: 0;
margin-bottom: 20px;
}

31
src/app/(main)/settings/websites/WebsitesDataTable.tsx
View file

@ -1,31 +0,0 @@
import { WebsitesTable } from './WebsitesTable';
import { DataGrid } from '@/components/common/DataGrid';
import { useUserWebsitesQuery } from '@/components/hooks';
export function WebsitesDataTable({
teamId,
allowEdit = true,
allowView = true,
showActions = true,
}: {
teamId?: string;
allowEdit?: boolean;
allowView?: boolean;
showActions?: boolean;
}) {
const queryResult = useUserWebsitesQuery({ teamId });
return (
<DataGrid query={queryResult} allowSearch allowPaging>
{({ data }) => (
<WebsitesTable
teamId={teamId}
data={data}
showActions={showActions}
allowEdit={allowEdit}
allowView={allowView}
/>
)}
</DataGrid>
);
}

18
src/app/(main)/settings/websites/WebsitesHeader.tsx
View file

@ -1,18 +0,0 @@
import { useMessages, useNavigation } from '@/components/hooks';
import { WebsiteAddButton } from './WebsiteAddButton';
import { PageHeader } from '@/components/common/PageHeader';
export interface WebsitesHeaderProps {
allowCreate?: boolean;
}
export function WebsitesHeader({ allowCreate = true }: WebsitesHeaderProps) {
const { formatMessage, labels } = useMessages();
const { teamId } = useNavigation();
return (
<PageHeader title={formatMessage(labels.websites)}>
{allowCreate && <WebsiteAddButton teamId={teamId} />}
</PageHeader>
);
}

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

@ -1,76 +0,0 @@
import { ReactNode } from 'react';
import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { MenuButton } from '@/components/input/MenuButton';
import { Eye, SquarePen } from '@/components/icons';
import Link from 'next/link';
export interface WebsitesTableProps {
data: Record<string, any>[];
showActions?: boolean;
allowEdit?: boolean;
allowView?: boolean;
teamId?: string;
children?: ReactNode;
}
export function WebsitesTable({
data = [],
showActions,
allowEdit,
allowView,
children,
}: WebsitesTableProps) {
const { formatMessage, labels } = useMessages();
const { renderUrl, pathname } = useNavigation();
const isSettings = pathname.includes('/settings');
if (!data?.length) {
return children;
}
return (
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)}>
{(row: any) => (
<Link href={renderUrl(`${isSettings ? '/settings' : ''}/websites/${row.id}`, false)}>
{row.name}
</Link>
)}
</DataColumn>
<DataColumn id="domain" label={formatMessage(labels.domain)} />
{showActions && (
<DataColumn id="action" label=" " align="end">
{(row: any) => {
const websiteId = row.id;
return (
<MenuButton>
{allowView && (
<MenuItem href={renderUrl(`/websites/${websiteId}`)}>
<Row alignItems="center" gap>
<Icon data-test="link-button-view">
<Eye />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Row>
</MenuItem>
)}
{allowEdit && (
<MenuItem href={renderUrl(`/websites/${websiteId}/settings`)}>
<Row alignItems="center" gap>
<Icon data-test="link-button-edit">
<SquarePen />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
)}
</MenuButton>
);
}}
</DataColumn>
)}
</DataTable>
);
}

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

@ -23,8 +23,8 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
const canTransferWebsite =
(
(!teamId &&
teams?.data?.filter(({ teamUser }) =>
teamUser.find(
teams?.data?.filter(({ members }) =>
members.find(
({ role, userId }) =>
[ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
),
@ -34,7 +34,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
(teamId &&
!!teams?.data
?.find(({ id }) => id === teamId)
?.teamUser.find(({ role, userId }) => role === ROLES.teamOwner && userId === user.id));
?.members.find(({ role, userId }) => role === ROLES.teamOwner && userId === user.id));
const handleSave = () => {
touch('websites');

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

@ -6,7 +6,6 @@ import { WebsiteShareForm } from './WebsiteShareForm';
import { WebsiteTrackingCode } from './WebsiteTrackingCode';
import { WebsiteData } from './WebsiteData';
import { WebsiteEditForm } from './WebsiteEditForm';
import { SegmentsDataTable } from '@/app/(main)/websites/[websiteId]/segments/SegmentsDataTable';
export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
const website = useContext(WebsiteContext);
@ -18,7 +17,6 @@ export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
<Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
<Tab id="segments"> {formatMessage(labels.segments)}</Tab>
<Tab id="manage">{formatMessage(labels.manage)}</Tab>
</TabList>
<TabPanel id="details" style={{ width: 500 }}>
@ -30,9 +28,6 @@ export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal
<TabPanel id="share" style={{ width: 500 }}>
<WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
</TabPanel>
<TabPanel id="segments">
<SegmentsDataTable websiteId={websiteId} />
</TabPanel>
<TabPanel id="manage">
<WebsiteData websiteId={websiteId} />
</TabPanel>