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

Zen components conversion.

Browse source
This commit is contained in:
Mike Cao 2025-03-07 03:11:58 -08:00
parent aac1a12e51
commit 5999bf6256
142 changed files with 1235 additions and 1454 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
'use client';
import { createContext, ReactNode, useEffect } from 'react';
import { useTeam, useModified } from '@/components/hooks';
import { Loading } from 'react-basics';
import { Loading } from '@umami/react-zen';
export const TeamContext = createContext(null);

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

@ -1,5 +1,14 @@
import { useMessages, useModified } from '@/components/hooks';
import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
import {
Button,
Icon,
Icons,
Modal,
DialogTrigger,
Dialog,
Text,
useToast,
} from '@umami/react-zen';
import { TeamMemberEditForm } from './TeamMemberEditForm';
export function TeamMemberEditButton({
@ -14,34 +23,36 @@ export function TeamMemberEditButton({
onSave?: () => void;
}) {
const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts();
const { toast } = useToast();
const { touch } = useModified();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
toast(formatMessage(messages.saved));
touch('teams:members');
onSave?.();
};
return (
<ModalTrigger>
<DialogTrigger>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
<Modal title={formatMessage(labels.editMember)}>
{(close: () => void) => (
<TeamMemberEditForm
teamId={teamId}
userId={userId}
role={role}
onSave={handleSave}
onClose={close}
/>
)}
<Modal>
<Dialog title={formatMessage(labels.editMember)}>
{({ close }) => (
<TeamMemberEditForm
teamId={teamId}
userId={userId}
role={role}
onSave={handleSave}
onClose={close}
/>
)}
</Dialog>
</Modal>
</ModalTrigger>
</DialogTrigger>
);
}

57
src/app/(main)/teams/[teamId]/settings/members/TeamMemberEditForm.tsx
View file

@ -2,14 +2,13 @@ import { useApi, useMessages } from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import {
Button,
Dropdown,
Select,
Form,
FormButtons,
FormInput,
FormRow,
Item,
SubmitButton,
} from 'react-basics';
FormField,
ListItem,
FormSubmitButton,
} from '@umami/react-zen';
export function TeamMemberEditForm({
teamId,
@ -39,39 +38,25 @@ export function TeamMemberEditForm({
});
};
const renderValue = (value: string) => {
if (value === ROLES.teamManager) {
return formatMessage(labels.manager);
}
if (value === ROLES.teamMember) {
return formatMessage(labels.member);
}
if (value === ROLES.teamViewOnly) {
return formatMessage(labels.viewOnly);
}
};
return (
<Form onSubmit={handleSubmit} error={error} values={{ role }}>
<FormRow label={formatMessage(labels.role)}>
<FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
<Dropdown
renderValue={renderValue}
style={{
minWidth: '250px',
}}
>
<Item key={ROLES.teamManager}>{formatMessage(labels.manager)}</Item>
<Item key={ROLES.teamMember}>{formatMessage(labels.member)}</Item>
<Item key={ROLES.teamViewOnly}>{formatMessage(labels.viewOnly)}</Item>
</Dropdown>
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" disabled={false}>
<FormField
name="role"
rules={{ required: formatMessage(labels.required) }}
label={formatMessage(labels.role)}
>
<Select>
<ListItem id={ROLES.teamManager}>{formatMessage(labels.manager)}</ListItem>
<ListItem id={ROLES.teamMember}>{formatMessage(labels.member)}</ListItem>
<ListItem id={ROLES.teamViewOnly}>{formatMessage(labels.viewOnly)}</ListItem>
</Select>
</FormField>
<FormButtons>
<FormSubmitButton variant="primary" disabled={false}>
{formatMessage(labels.save)}
</SubmitButton>
<Button disabled={isPending} onClick={onClose}>
</FormSubmitButton>
<Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)}
</Button>
</FormButtons>

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

@ -1,7 +1,7 @@
import { ConfirmationForm } from '@/components/common/ConfirmationForm';
import { useApi, useMessages, useModified } from '@/components/hooks';
import { messages } from '@/components/messages';
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
export function TeamMemberRemoveButton({
teamId,
@ -33,25 +33,29 @@ export function TeamMemberRemoveButton({
};
return (
<ModalTrigger>
<DialogTrigger>
<Button>
<Icon>
<Icons.Close />
</Icon>
<Text>{formatMessage(labels.remove)}</Text>
</Button>
<Modal title={formatMessage(labels.removeMember)}>
{(close: () => void) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, { target: <b>{userName}</b> })}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.remove)}
/>
)}
<Modal>
<Dialog title={formatMessage(labels.removeMember)}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, {
target: <b key="username">{userName}</b>,
})}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.remove)}
/>
)}
</Dialog>
</Modal>
</ModalTrigger>
</DialogTrigger>
);
}

24
src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable } from 'react-basics';
import { DataColumn, DataTable } from '@umami/react-zen';
import { useMessages, useLogin } from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
@ -24,15 +24,15 @@ export function TeamMembersTable({
};
return (
<GridTable data={data}>
<GridColumn name="username" label={formatMessage(labels.username)}>
{row => row?.user?.username}
</GridColumn>
<GridColumn name="role" label={formatMessage(labels.role)}>
{row => roles[row?.role]}
</GridColumn>
<GridColumn name="action" label=" " alignment="end">
{row => {
<DataTable data={data}>
<DataColumn id="username" label={formatMessage(labels.username)}>
{(row: any) => row?.user?.username}
</DataColumn>
<DataColumn id="role" label={formatMessage(labels.role)}>
{(row: any) => roles[row?.role]}
</DataColumn>
<DataColumn id="action" align="end">
{(row: any) => {
return (
allowEdit &&
row?.role !== ROLES.teamOwner &&
@ -48,7 +48,7 @@ export function TeamMembersTable({
)
);
}}
</GridColumn>
</GridTable>
</DataColumn>
</DataTable>
);
}

22
src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
View file

@ -4,7 +4,7 @@ import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader';
import { ROLES } from '@/lib/constants';
import { useContext, useState } from 'react';
import { Flexbox, Item, Tabs } from 'react-basics';
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
import { TeamManage } from './TeamManage';
import { TeamEditForm } from './TeamEditForm';
@ -26,16 +26,22 @@ export function TeamDetails({ teamId }: { teamId: string }) {
) && user.role !== ROLES.viewOnly;
return (
<Flexbox direction="column">
<Column>
<PageHeader title={team?.name} icon={<Icons.Users />}>
{!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
</PageHeader>
<Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
<Item key="details">{formatMessage(labels.details)}</Item>
{isTeamOwner && <Item key="manage">{formatMessage(labels.manage)}</Item>}
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
</TabList>
<TabPanel id="details">
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
</TabPanel>
<TabPanel id="manage">
<TeamManage teamId={teamId} />
</TabPanel>
</Tabs>
{tab === 'details' && <TeamEditForm teamId={teamId} allowEdit={canEdit} />}
{tab === 'manage' && <TeamManage teamId={teamId} />}
</Flexbox>
</Column>
);
}

67
src/app/(main)/teams/[teamId]/settings/team/TeamEditForm.tsx
View file

@ -1,20 +1,18 @@
import {
SubmitButton,
Form,
FormInput,
FormRow,
FormField,
FormButtons,
FormSubmitButton,
TextField,
Button,
Flexbox,
useToasts,
} from 'react-basics';
useToast,
} from '@umami/react-zen';
import { getRandomChars } from '@/lib/crypto';
import { useContext, useRef, useState } from 'react';
import { useContext, useState } from 'react';
import { useApi, useMessages, useModified } from '@/components/hooks';
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
const generateId = () => getRandomChars(16);
const generateId = () => `team_${getRandomChars(16)}`;
export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?: boolean }) {
const team = useContext(TeamContext);
@ -23,57 +21,48 @@ export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/teams/${teamId}`, data),
});
const ref = useRef(null);
const [accessCode, setAccessCode] = useState(team.accessCode);
const { showToast } = useToasts();
const { toast } = useToast();
const { touch } = useModified();
const cloudMode = !!process.env.cloudMode;
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
ref.current.reset(data);
touch('teams');
showToast({ message: formatMessage(messages.saved), variant: 'success' });
toast(formatMessage(messages.saved));
},
});
};
const handleRegenerate = () => {
const code = generateId();
ref.current.setValue('accessCode', code, {
shouldValidate: true,
shouldDirty: true,
});
setAccessCode(code);
setAccessCode(generateId());
};
return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={team}>
<FormRow label={formatMessage(labels.teamId)}>
<TextField value={teamId} readOnly allowCopy />
</FormRow>
<FormRow label={formatMessage(labels.name)}>
{allowEdit && (
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField />
</FormInput>
)}
<Form onSubmit={handleSubmit} error={error} values={{ ...team, accessCode }}>
<FormField name="id" label={formatMessage(labels.teamId)}>
<TextField isReadOnly allowCopy />
</FormField>
<FormField
name="name"
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
{allowEdit && <TextField />}
{!allowEdit && team.name}
</FormRow>
</FormField>
{!cloudMode && allowEdit && (
<FormRow label={formatMessage(labels.accessCode)}>
<Flexbox gap={10}>
<TextField value={accessCode} readOnly allowCopy />
{allowEdit && (
<Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
)}
</Flexbox>
</FormRow>
<FormField name="accessCode" label={formatMessage(labels.accessCode)}>
<TextField isReadOnly allowCopy />
</FormField>
)}
{allowEdit && (
<FormButtons>
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
<FormButtons justifyContent="space-between">
{allowEdit && (
<Button onPress={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
)}
<FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
</FormButtons>
)}
</Form>

15
src/app/(main)/teams/[teamId]/settings/team/TeamManage.tsx
View file

@ -1,6 +1,7 @@
import { useMessages, useModified } from '@/components/hooks';
import { useRouter } from 'next/navigation';
import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
import { Button, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
import { ActionForm } from '@/components/layout/ActionForm';
import { TeamDeleteForm } from './TeamDeleteForm';
export function TeamManage({ teamId }: { teamId: string }) {
@ -18,14 +19,14 @@ export function TeamManage({ teamId }: { teamId: string }) {
label={formatMessage(labels.deleteTeam)}
description={formatMessage(messages.deleteTeamWarning)}
>
<ModalTrigger>
<DialogTrigger>
<Button variant="danger">{formatMessage(labels.delete)}</Button>
<Modal title={formatMessage(labels.deleteTeam)}>
{(close: () => void) => (
<TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />
)}
<Modal>
<Dialog title={formatMessage(labels.deleteTeam)}>
{({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
</Dialog>
</Modal>
</ModalTrigger>
</DialogTrigger>
</ActionForm>
);
}

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

@ -1,5 +1,5 @@
import { useApi, useMessages } from '@/components/hooks';
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
import { Icon, Icons, LoadingButton, Text } from '@umami/react-zen';
export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
const { formatMessage, labels } = useMessages();

24
src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable, Icon, Text } from 'react-basics';
import { DataColumn, DataTable, Icon, Text } from '@umami/react-zen';
import { useLogin, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { LinkButton } from '@/components/common/LinkButton';
@ -16,14 +16,14 @@ export function TeamWebsitesTable({
const { formatMessage, labels } = useMessages();
return (
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
<GridColumn name="createdBy" label={formatMessage(labels.createdBy)}>
{row => row?.createUser?.username}
</GridColumn>
<GridColumn name="action" label=" " alignment="end">
{row => {
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)} />
<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 (
<>
@ -37,14 +37,14 @@ export function TeamWebsitesTable({
)}
<LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
<Icon>
<Icons.ArrowRight />
<Icons.Arrow />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
</>
);
}}
</GridColumn>
</GridTable>
</DataColumn>
</DataTable>
);
}

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

@ -1,4 +1,4 @@
import { Page } from '@/app/(main)/settings/websites/[websiteId]/page';
import Page from '@/app/(main)/settings/websites/[websiteId]/page';
export default function ({ params }) {
return <Page params={params} />;