github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

6
src/app/(main)/settings/teams/TeamsHeader.tsx
View File

@@ -1,5 +1,5 @@
import { Row } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { PageHeader } from '@/components/common/PageHeader';
import { ROLES } from '@/lib/constants';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { TeamsJoinButton } from './TeamsJoinButton';
@@ -11,11 +11,11 @@ export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
const cloudMode = !!process.env.cloudMode;
return (
<SectionHeader title={formatMessage(labels.teams)}>
<PageHeader title={formatMessage(labels.teams)}>
<Row gap="3">
{!cloudMode && <TeamsJoinButton />}
{allowCreate && user.role !== ROLES.viewOnly && <TeamsAddButton />}
</Row>
</SectionHeader>
</PageHeader>
);
}

7
src/app/(main)/settings/teams/TeamsSettingsPage.tsx
View File

@@ -2,12 +2,15 @@
import { TeamsDataTable } from './TeamsDataTable';
import { TeamsHeader } from './TeamsHeader';
import { Column } from '@umami/react-zen';
import { Panel } from '@/components/common/Panel';
export function TeamsSettingsPage() {
return (
<Column gap>
<Column gap="6">
<TeamsHeader />
<TeamsDataTable />
<Panel>
<TeamsDataTable />
</Panel>
</Column>
);
}

6
src/app/(main)/settings/teams/TeamsTable.tsx
View File

@@ -7,7 +7,7 @@ import Link from 'next/link';
export function TeamsTable({
data = [],
showActions = true,
showActions = false,
}: {
data: any[];
allowEdit?: boolean;
@@ -29,7 +29,7 @@ export function TeamsTable({
<DataColumn id="members" label={formatMessage(labels.members)}>
{(row: any) => row._count.teamUser}
</DataColumn>
{showActions && (
{showActions ? (
<DataColumn id="action" label=" " align="end">
{(row: any) => {
const { id } = row;
@@ -56,7 +56,7 @@ export function TeamsTable({
);
}}
</DataColumn>
)}
) : null}
</DataTable>
);
}

54
src/app/(main)/settings/teams/[teamId]/TeamDetails.tsx
View File

@@ -1,8 +1,8 @@
import { useContext, useState } from 'react';
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import { SectionHeader } from '@/components/common/SectionHeader';
import { ROLES } from '@/lib/constants';
import { Users } from '@/components/icons';
import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
@@ -10,6 +10,8 @@ import { TeamManage } from './TeamManage';
import { TeamEditForm } from './TeamEditForm';
import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
import { TeamMembersDataTable } from './TeamMembersDataTable';
import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
export function TeamDetails({ teamId }: { teamId: string }) {
const team = useContext(TeamContext);
@@ -33,30 +35,32 @@ export function TeamDetails({ teamId }: { teamId: string }) {
user.role !== ROLES.viewOnly);
return (
<Column gap>
<SectionHeader title={team?.name} icon={<Users />}>
<Column gap="6">
<PageHeader title={team?.name} icon={<Users />}>
{!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
</SectionHeader>
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="members">{formatMessage(labels.members)}</Tab>
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
</TabList>
<TabPanel id="details" style={{ width: 500 }}>
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
</TabPanel>
<TabPanel id="members">
<TeamMembersDataTable teamId={teamId} allowEdit />
</TabPanel>
<TabPanel id="websites">
<TeamWebsitesDataTable teamId={teamId} allowEdit />
</TabPanel>
<TabPanel id="manage">
<TeamManage teamId={teamId} />
</TabPanel>
</Tabs>
</PageHeader>
<Panel>
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="members">{formatMessage(labels.members)}</Tab>
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
</TabList>
<TabPanel id="details" style={{ width: 500 }}>
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
</TabPanel>
<TabPanel id="members">
<TeamMembersDataTable teamId={teamId} allowEdit />
</TabPanel>
<TabPanel id="websites">
<TeamWebsitesDataTable teamId={teamId} allowEdit />
</TabPanel>
<TabPanel id="manage">
<TeamManage teamId={teamId} />
</TabPanel>
</Tabs>
</Panel>
</Column>
);
}

2
src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx
View File

@@ -10,7 +10,7 @@ import {
import { getRandomChars } from '@/lib/crypto';
import { useContext } from 'react';
import { useApi, useMessages, useModified } from '@/components/hooks';
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
const generateId = () => `team_${getRandomChars(16)}`;

38
src/app/(main)/settings/teams/[teamId]/TeamMemberEditButton.tsx
View File

@@ -1,6 +1,7 @@
import { useMessages, useModified } from '@/components/hooks';
import { Row, Button, Icon, Modal, DialogTrigger, Dialog, useToast } from '@umami/react-zen';
import { Dialog, useToast } from '@umami/react-zen';
import { TeamMemberEditForm } from './TeamMemberEditForm';
import { ActionButton } from '@/components/input/ActionButton';
import { Edit } from '@/components/icons';
export function TeamMemberEditButton({
@@ -25,27 +26,18 @@ export function TeamMemberEditButton({
};
return (
<DialogTrigger>
<Button variant="quiet">
<Row alignItems="center" gap>
<Icon>
<Edit />
</Icon>
</Row>
</Button>
<Modal>
<Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
{({ close }) => (
<TeamMemberEditForm
teamId={teamId}
userId={userId}
role={role}
onSave={handleSave}
onClose={close}
/>
)}
</Dialog>
</Modal>
</DialogTrigger>
<ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
{({ close }) => (
<TeamMemberEditForm
teamId={teamId}
userId={userId}
role={role}
onSave={handleSave}
onClose={close}
/>
)}
</Dialog>
</ActionButton>
);
}

44
src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx
View File

@@ -2,7 +2,8 @@ import { ConfirmationForm } from '@/components/common/ConfirmationForm';
import { useApi, useMessages, useModified } from '@/components/hooks';
import { messages } from '@/components/messages';
import { Trash } from '@/components/icons';
import { Button, Icon, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
import { Dialog } from '@umami/react-zen';
import { ActionButton } from '@/components/input/ActionButton';
export function TeamMemberRemoveButton({
teamId,
@@ -34,29 +35,22 @@ export function TeamMemberRemoveButton({
};
return (
<DialogTrigger>
<Button variant="quiet">
<Icon>
<Trash />
</Icon>
</Button>
<Modal>
<Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, {
target: userName,
})}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.remove)}
buttonVariant="danger"
/>
)}
</Dialog>
</Modal>
</DialogTrigger>
<ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
<Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, {
target: userName,
})}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.remove)}
buttonVariant="danger"
/>
)}
</Dialog>
</ActionButton>
);
}

20
src/app/(main)/settings/teams/[teamId]/TeamProvider.tsx Normal file
View File

@@ -0,0 +1,20 @@
'use client';
import { createContext, ReactNode } from 'react';
import { useTeamQuery } from '@/components/hooks';
import { Loading } from '@umami/react-zen';
export const TeamContext = createContext(null);
export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
const { data: team, isLoading, isFetching } = useTeamQuery(teamId);
if (isFetching && isLoading) {
return <Loading position="page" />;
}
if (!team) {
return null;
}
return <TeamContext.Provider value={team}>{children}</TeamContext.Provider>;
}

2
src/app/(main)/settings/teams/[teamId]/TeamSettingsPage.tsx
View File

@@ -1,5 +1,5 @@
'use client';
import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { TeamProvider } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
export function TeamSettingsPage({ teamId }: { teamId: string }) {

47
src/app/(main)/settings/teams/[teamId]/TeamWebsitesTable.tsx
View File

@@ -1,58 +1,19 @@
import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { Eye, Edit } from '@/components/icons';
import { MenuButton } from '@/components/input/MenuButton';
import { DataColumn, DataTable } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import Link from 'next/link';
export function TeamWebsitesTable({
teamId,
data = [],
allowEdit = false,
}: {
teamId: string;
data: any[];
allowEdit?: boolean;
}) {
const { user } = useLoginQuery();
export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data: any[] }) {
const { formatMessage, labels } = useMessages();
return (
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)}>
{(row: any) => <Link href={`/settings/websites/${row.id}`}>{row.name}</Link>}
{(row: any) => <Link href={`/teams/${teamId}/websites/${row.id}`}>{row.name}</Link>}
</DataColumn>
<DataColumn id="domain" label={formatMessage(labels.domain)} />
<DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
{(row: any) => row?.createUser?.username}
</DataColumn>
<DataColumn id="action" label=" " align="end">
{(row: any) => {
const { id: websiteId } = row;
return (
<MenuButton>
<MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
<Row alignItems="center" gap>
<Icon>
<Eye />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Row>
</MenuItem>
{allowEdit && (teamId || user?.isAdmin) && (
<MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
<Row alignItems="center" gap>
<Icon>
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
)}
</MenuButton>
);
}}
</DataColumn>
</DataTable>
);
}