fix: improve unified settings (#3160)

This commit is contained in:
David Nguyen
2026-08-10 14:57:19 +10:00
committed by GitHub
parent fc95ee9ead
commit 797f5c0e79
24 changed files with 129 additions and 114 deletions
@@ -143,7 +143,7 @@ export default function DashboardPage() {
{canExecuteOrganisationAction('MANAGE_ORGANISATION', org.currentOrganisationRole) && (
<div className="absolute top-4 right-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<Link to={`/o/${org.url}/settings`}>
<Link to={`/o/${org.url}/settings/general`}>
<SettingsIcon className="h-4 w-4" />
</Link>
</div>
@@ -212,7 +212,7 @@ export default function DashboardPage() {
{canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
<div className="absolute top-4 right-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<Link to={`/t/${team.url}/settings`}>
<Link to={`/t/${team.url}/settings/general`}>
<SettingsIcon className="h-4 w-4" />
</Link>
</div>
@@ -115,7 +115,7 @@ export default function OrganisationSettingsTeamsPage() {
</div>
<Button asChild>
<Link to={`/o/${organisation.url}/settings`}>
<Link to={`/o/${organisation.url}/settings/general`}>
<Trans>Manage Organisation</Trans>
</Link>
</Button>
@@ -184,7 +184,7 @@ const TeamDropdownMenu = ({ team }: { team: TGetOrganisationSessionResponse[0]['
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to={`/t/${team.url}/settings`}>
<Link to={`/t/${team.url}/settings/general`}>
<SettingsIcon className="mr-2 h-4 w-4" />
<Trans>Settings</Trans>
</Link>
@@ -1,11 +0,0 @@
import { redirect } from 'react-router';
import type { Route } from './+types/_layout';
export function loader({ params }: Route.LoaderArgs) {
if (params.orgUrl) {
throw redirect(`/o/${params.orgUrl}/settings/general`);
}
throw redirect('/');
}
@@ -1,4 +1,5 @@
import { extractCookieFromHeaders } from '@documenso/auth/server/lib/utils/cookies';
import { extractCookieFromDocument } from '@documenso/lib/client-only/cookies';
import type { RouteHandle } from '@documenso/lib/client-only/hooks/use-child-route-flags';
import { PREFERRED_TEAM_URL_COOKIE } from '@documenso/lib/constants/cookies';
import { msg } from '@lingui/core/macro';
@@ -16,12 +17,29 @@ export const handle: RouteHandle = {
layoutMode: 'settings',
};
/**
* Only runs on the initial document request (SSR) so the first paint has the
* correct preferred team without a hydration mismatch.
*/
export function loader({ request }: Route.LoaderArgs) {
return {
preferredTeamUrl: extractCookieFromHeaders(PREFERRED_TEAM_URL_COOKIE, request.headers),
};
}
/**
* Runs instead of the server loader on client-side navigations, otherwise every
* settings page switch would trigger a `.data` round-trip to the server just to
* read this cookie.
*
* The cookie is not `HttpOnly` so it can be read straight from the document.
*/
export function clientLoader() {
return {
preferredTeamUrl: extractCookieFromDocument(PREFERRED_TEAM_URL_COOKIE),
};
}
export default function OrganisationSettingsLayout({ loaderData }: Route.ComponentProps) {
return <UnifiedSettingsLayout activeScope="organisation" preferredTeamUrl={loaderData.preferredTeamUrl} />;
}
@@ -1,7 +1,6 @@
import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
import { useSession } from '@documenso/lib/client-only/providers/session';
import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
import type { SanitizeBrandingCssWarning } from '@documenso/lib/utils/sanitize-branding-css';
import { trpc } from '@documenso/trpc/react';
import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -26,16 +25,12 @@ export function meta() {
}
export default function OrganisationSettingsBrandingPage() {
const { organisations } = useSession();
const organisation = useCurrentOrganisation();
const team = useOptionalCurrentTeam();
const { t } = useLingui();
const { toast } = useToast();
const isPersonalLayoutMode = isPersonalLayout(organisations);
const [cssWarnings, setCssWarnings] = useState<SanitizeBrandingCssWarning[]>([]);
const {
@@ -122,11 +117,9 @@ export default function OrganisationSettingsBrandingPage() {
const settingsHeaderText = t`Branding Preferences`;
const settingsHeaderSubtitle = isPersonalLayoutMode
? t`Here you can set your general branding preferences.`
: team
? t`Here you can set branding preferences for your team.`
: t`Here you can set branding preferences for your organisation. Teams will inherit these settings by default.`;
const settingsHeaderSubtitle = team
? t`Here you can set branding preferences for your team.`
: t`Here you can set branding preferences for your organisation. Teams will inherit these settings by default.`;
return (
<div>
@@ -181,7 +174,7 @@ export default function OrganisationSettingsBrandingPage() {
{canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
<Button asChild variant="outline">
<Link to={isPersonalLayoutMode ? '/settings/billing' : `/o/${organisation.url}/settings/billing`}>
<Link to={`/o/${organisation.url}/settings/billing`}>
<Trans>Update Billing</Trans>
</Link>
</Button>
@@ -1,14 +1,10 @@
import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
import { useSession } from '@documenso/lib/client-only/providers/session';
import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
import { DocumentSignatureType } from '@documenso/lib/constants/document';
import { isPersonalLayout } from '@documenso/lib/utils/organisations';
import { trpc } from '@documenso/trpc/react';
import { useToast } from '@documenso/ui/primitives/use-toast';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react/macro';
import { Loader } from 'lucide-react';
import { useLoaderData } from 'react-router';
import {
DocumentPreferencesForm,
@@ -21,23 +17,12 @@ export function meta() {
return appMetaTags(msg`Document Preferences`);
}
export const loader = () => {
return {
isAiFeaturesConfigured: IS_AI_FEATURES_CONFIGURED(),
};
};
export default function OrganisationSettingsDocumentPage() {
const { isAiFeaturesConfigured } = useLoaderData<typeof loader>();
const { organisations } = useSession();
const organisation = useCurrentOrganisation();
const { t } = useLingui();
const { toast } = useToast();
const isPersonalLayoutMode = isPersonalLayout(organisations);
const { data: organisationWithSettings, isLoading: isLoadingOrganisation } = trpc.organisation.get.useQuery({
organisationReference: organisation.url,
});
@@ -106,9 +91,7 @@ export default function OrganisationSettingsDocumentPage() {
}
const settingsHeaderText = t`Document Preferences`;
const settingsHeaderSubtitle = isPersonalLayoutMode
? t`Here you can set your general document preferences.`
: t`Here you can set document preferences for your organisation. Teams will inherit these settings by default.`;
const settingsHeaderSubtitle = t`Here you can set document preferences for your organisation. Teams will inherit these settings by default.`;
return (
<div>
@@ -117,7 +100,6 @@ export default function OrganisationSettingsDocumentPage() {
<section>
<DocumentPreferencesForm
canInherit={false}
isAiFeaturesConfigured={isAiFeaturesConfigured}
settings={organisationWithSettings.organisationGlobalSettings}
onFormSubmit={onDocumentPreferencesFormSubmit}
/>
@@ -1,5 +0,0 @@
import { redirect } from 'react-router';
export function loader() {
throw redirect('/settings/profile');
}
@@ -1,4 +1,5 @@
import { extractCookieFromHeaders } from '@documenso/auth/server/lib/utils/cookies';
import { extractCookieFromDocument } from '@documenso/lib/client-only/cookies';
import type { RouteHandle } from '@documenso/lib/client-only/hooks/use-child-route-flags';
import { PREFERRED_TEAM_URL_COOKIE } from '@documenso/lib/constants/cookies';
import { msg } from '@lingui/core/macro';
@@ -16,12 +17,29 @@ export const handle: RouteHandle = {
layoutMode: 'settings',
};
/**
* Only runs on the initial document request (SSR) so the first paint has the
* correct preferred team without a hydration mismatch.
*/
export function loader({ request }: Route.LoaderArgs) {
return {
preferredTeamUrl: extractCookieFromHeaders(PREFERRED_TEAM_URL_COOKIE, request.headers),
};
}
/**
* Runs instead of the server loader on client-side navigations, otherwise every
* settings page switch would trigger a `.data` round-trip to the server just to
* read this cookie.
*
* The cookie is not `HttpOnly` so it can be read straight from the document.
*/
export function clientLoader() {
return {
preferredTeamUrl: extractCookieFromDocument(PREFERRED_TEAM_URL_COOKIE),
};
}
export default function SettingsLayout({ loaderData }: Route.ComponentProps) {
return <UnifiedSettingsLayout activeScope="account" preferredTeamUrl={loaderData.preferredTeamUrl} />;
}
@@ -1,11 +0,0 @@
import { redirect } from 'react-router';
import type { Route } from './+types/settings._index';
export function loader({ params }: Route.LoaderArgs) {
if (params.teamUrl) {
throw redirect(`/t/${params.teamUrl}/settings/general`);
}
throw redirect('/');
}
@@ -1,10 +1,8 @@
import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
import { DocumentSignatureType } from '@documenso/lib/constants/document';
import { trpc } from '@documenso/trpc/react';
import { useToast } from '@documenso/ui/primitives/use-toast';
import { useLingui } from '@lingui/react/macro';
import { Loader } from 'lucide-react';
import { useLoaderData } from 'react-router';
import {
DocumentPreferencesForm,
@@ -13,15 +11,7 @@ import {
import { SettingsHeader } from '~/components/general/settings-header';
import { useCurrentTeam } from '~/providers/team';
export const loader = () => {
return {
isAiFeaturesConfigured: IS_AI_FEATURES_CONFIGURED(),
};
};
export default function TeamsSettingsPage() {
const { isAiFeaturesConfigured } = useLoaderData<typeof loader>();
const team = useCurrentTeam();
const { t } = useLingui();
@@ -103,7 +93,6 @@ export default function TeamsSettingsPage() {
<section>
<DocumentPreferencesForm
canInherit={true}
isAiFeaturesConfigured={isAiFeaturesConfigured}
settings={teamWithSettings.teamSettings}
onFormSubmit={onDocumentPreferencesSubmit}
/>