Updated edit permissions on settings components.

This commit is contained in:
Mike Cao 2025-09-19 17:58:52 -07:00
parent ffc8f6faae
commit 7effa16f00
15 changed files with 128 additions and 148 deletions

View file

@ -5,7 +5,7 @@ import { DOMAIN_REGEX } from '@/lib/constants';
export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
const website = useWebsite();
const { formatMessage, labels, messages, getErrorMessage } = useMessages();
const { mutate, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
const { mutate, error, touch, toast, isPending } = useUpdateQuery(`/websites/${websiteId}`);
const handleSubmit = async (data: any) => {
mutate(data, {
@ -45,7 +45,12 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
<TextField />
</FormField>
<FormButtons>
<FormSubmitButton data-test="button-submit" variant="primary">
<FormSubmitButton
data-test="button-submit"
variant="primary"
isLoading={isPending}
isDisabled={isPending}
>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons>

View file

@ -1,34 +1,28 @@
import { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { useMessages, useWebsite } from '@/components/hooks';
import { Column } from '@umami/react-zen';
import { useWebsite } from '@/components/hooks';
import { WebsiteShareForm } from './WebsiteShareForm';
import { WebsiteTrackingCode } from './WebsiteTrackingCode';
import { WebsiteData } from './WebsiteData';
import { WebsiteEditForm } from './WebsiteEditForm';
import { Panel } from '@/components/common/Panel';
export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
const website = useWebsite();
const { formatMessage, labels } = useMessages();
return (
<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 }}>
<Column gap="6">
<Panel>
<WebsiteEditForm websiteId={websiteId} />
</TabPanel>
<TabPanel id="tracking">
</Panel>
<Panel>
<WebsiteTrackingCode websiteId={websiteId} />
</TabPanel>
<TabPanel id="share" style={{ width: 500 }}>
</Panel>
<Panel>
<WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
</TabPanel>
<TabPanel id="manage">
</Panel>
<Panel>
<WebsiteData websiteId={websiteId} />
</TabPanel>
</Tabs>
</Panel>
</Column>
);
}

View file

@ -1,4 +1,4 @@
import { TextField, Text, Column } from '@umami/react-zen';
import { TextField, Text, Column, Label } from '@umami/react-zen';
import { useMessages, useConfig } from '@/components/hooks';
const SCRIPT_NAME = 'script.js';
@ -10,7 +10,7 @@ export function WebsiteTrackingCode({
websiteId: string;
hostUrl?: string;
}) {
const { formatMessage, messages } = useMessages();
const { formatMessage, messages, labels } = useMessages();
const config = useConfig();
const trackerScriptName =
@ -26,7 +26,8 @@ export function WebsiteTrackingCode({
return (
<Column gap>
<Text>{formatMessage(messages.trackingCode)}</Text>
<Label>{formatMessage(labels.trackingCode)}</Label>
<Text color="muted">{formatMessage(messages.trackingCode)}</Text>
<TextField value={code} isReadOnly allowCopy asTextArea resize="none" />
</Column>
);