Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-13 08:06:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(admin): adapt new config system (#11360)

Browse Source 
feat(server): add test mail api

feat(admin): adapt new config system
This commit is contained in:
forehalo
2025-04-01 15:00:10 +00:00
parent 8427293d36
commit dad858014f
29 changed files with 718 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/server/src/__tests__/__snapshots__/mails.spec.ts.md
+43
View File
@@ -6,6 +6,49 @@ Generated by [AVA](https://avajs.dev).
## should render emails
> Test Email from AFFiNE
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">␊
<!--$-->␊
<table␊
align="center"␊
width="100%"␊
border="0"␊
cellpadding="0"␊
cellspacing="0"␊
role="presentation">␊
<tbody>␊
<tr>␊
<td>␊
<p␊
style="font-size:20px;line-height:28px;margin-bottom:0;margin-top:24px;font-weight:600;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414">␊
Test Email from AFFiNE␊
</p>␊
</td>␊
</tr>␊
</tbody>␊
</table>␊
<table␊
align="center"␊
width="100%"␊
border="0"␊
cellpadding="0"␊
cellspacing="0"␊
role="presentation">␊
<tbody>␊
<tr>␊
<td>␊
<p␊
style="font-size:15px;line-height:24px;margin-bottom:0;margin-top:24px;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414">␊
This is a test email from your AFFiNE instance.␊
</p>␊
</td>␊
</tr>␊
</tbody>␊
</table>␊
<!--/$-->␊
`
> Sign in to AFFiNE
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">␊
packages/backend/server/src/__tests__/__snapshots__/mails.spec.ts.snap
BIN
View File
Binary file not shown.
packages/backend/server/src/base/graphql/config.ts
+1 -6
View File
@@ -14,13 +14,8 @@ defineModuleConfig('graphql', {
apolloDriverConfig: {
desc: 'The config for underlying nestjs GraphQL and apollo driver engine.',
default: {
buildSchemaOptions: {
numberScalarMode: 'integer',
},
useGlobalPrefix: true,
playground: true,
// @TODO(@forehalo): need a flag to tell user `Restart Required` configs
introspection: true,
sortSchema: true,
},
link: 'https://docs.nestjs.com/graphql/quick-start',
},
packages/backend/server/src/base/graphql/index.ts
+6
View File
@@ -26,6 +26,12 @@ export type GraphqlContext = {
useFactory: (config: Config) => {
return {
...config.graphql.apolloDriverConfig,
buildSchemaOptions: {
numberScalarMode: 'integer',
},
useGlobalPrefix: true,
playground: true,
sortSchema: true,
autoSchemaFile: join(
env.projectRoot,
env.testing
packages/backend/server/src/core/mail/index.ts
+2 -1
View File
@@ -6,11 +6,12 @@ import { DocStorageModule } from '../doc';
import { StorageModule } from '../storage';
import { MailJob } from './job';
import { Mailer } from './mailer';
import { MailResolver } from './resolver';
import { MailSender } from './sender';
@Module({
imports: [DocStorageModule, StorageModule],
providers: [MailSender, Mailer, MailJob],
providers: [MailSender, Mailer, MailJob, MailResolver],
exports: [Mailer],
})
export class MailModule {}
packages/backend/server/src/core/mail/resolver.ts
+49
View File
@@ -0,0 +1,49 @@
import { Args, Mutation, Resolver } from '@nestjs/graphql';
import { GraphQLJSONObject } from 'graphql-scalars';
import { BadRequest } from '../../base';
import { Renderers } from '../../mails';
import { CurrentUser } from '../auth/session';
import { Admin } from '../common';
import { MailSender } from './sender';
@Admin()
@Resolver(() => Boolean)
export class MailResolver {
@Mutation(() => Boolean)
async sendTestEmail(
@CurrentUser() user: CurrentUser,
@Args('config', { type: () => GraphQLJSONObject })
config: AppConfig['mailer']['SMTP']
) {
const smtp = MailSender.create(config);
using _disposable = {
[Symbol.dispose]: () => {
smtp.close();
},
};
try {
await smtp.verify();
} catch (e) {
throw new BadRequest(
`Failed to verify your SMTP configuration. Cause: ${(e as Error).message}`
);
}
try {
await smtp.sendMail({
from: config.sender,
to: user.email,
...(await Renderers.TestMail({})),
});
} catch (e) {
throw new BadRequest(
`Failed to send test email. Cause: ${(e as Error).message}`
);
}
return true;
}
}
packages/backend/server/src/core/mail/sender.ts
+21 -11
View File
@@ -16,6 +16,22 @@ export type SendOptions = Omit<SendMailOptions, 'to' | 'subject' | 'html'> & {
html: string;
};
function configToSMTPOptions(
config: AppConfig['mailer']['SMTP']
): SMTPTransport.Options {
return {
host: config.host,
port: config.port,
tls: {
rejectUnauthorized: !config.ignoreTLS,
},
auth: {
user: config.username,
pass: config.password,
},
};
}
@Injectable()
export class MailSender {
private readonly logger = new Logger(MailSender.name);
@@ -23,6 +39,10 @@ export class MailSender {
private usingTestAccount = false;
constructor(private readonly config: Config) {}
static create(config: Config['mailer']['SMTP']) {
return createTransport(configToSMTPOptions(config));
}
@OnEvent('config.init')
onConfigInit() {
this.setup();
@@ -43,17 +63,7 @@ export class MailSender {
return;
}
const opts: SMTPTransport.Options = {
host: SMTP.host,
port: SMTP.port,
tls: {
rejectUnauthorized: !SMTP.ignoreTLS,
},
auth: {
user: SMTP.username,
pass: SMTP.password,
},
};
const opts = configToSMTPOptions(SMTP);
if (SMTP.host) {
this.smtp = createTransport(opts);
packages/backend/server/src/mails/components/template.tsx
+1 -1
View File
@@ -195,7 +195,7 @@ export function Template(props: PropsWithChildren) {
</>
);
if (env.testing) {
if (globalThis.env?.testing) {
return content;
}
packages/backend/server/src/mails/index.tsx
+6 -1
View File
@@ -12,6 +12,7 @@ import {
TeamWorkspaceDeleted,
TeamWorkspaceUpgraded,
} from './teams';
import TestMail from './test-mail';
import {
ChangeEmail,
ChangeEmailNotification,
@@ -45,7 +46,7 @@ function render(component: React.ReactElement) {
});
}
type Props<T> = T extends React.FC<infer P> ? P : never;
type Props<T> = T extends React.ComponentType<infer P> ? P : never;
export type EmailRenderer<Props> = (props: Props) => Promise<EmailContent>;
function make<T extends React.ComponentType<any>>(
@@ -65,6 +66,10 @@ function make<T extends React.ComponentType<any>>(
}
export const Renderers = {
//#region Test
TestMail: make(TestMail, 'Test Email from AFFiNE'),
//#endregion
//#region User
SignIn: make(SignIn, 'Sign in to AFFiNE'),
SignUp: make(SignUp, 'Your AFFiNE account is waiting for you!'),
packages/backend/server/src/mails/test-mail.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Content, P, Template, Title } from './components';
export default function TestMail() {
return (
<Template>
<Title>Test Email from AFFiNE</Title>
<Content>
<P>This is a test email from your AFFiNE instance.</P>
</Content>
</Template>
);
}
packages/backend/server/src/schema.gql
+1
View File
@@ -998,6 +998,7 @@ type Mutation {
sendChangeEmail(callbackUrl: String!, email: String): Boolean!
sendChangePasswordEmail(callbackUrl: String!, email: String @deprecated(reason: "fetched from signed in user")): Boolean!
sendSetPasswordEmail(callbackUrl: String!, email: String @deprecated(reason: "fetched from signed in user")): Boolean!
sendTestEmail(config: JSONObject!): Boolean!
sendVerifyChangeEmail(callbackUrl: String!, email: String!, token: String!): Boolean!
sendVerifyEmail(callbackUrl: String!): Boolean!
setBlob(blob: Upload!, workspaceId: String!): String!
packages/common/graphql/src/graphql/admin/send-test-email.gql
+10
View File
@@ -0,0 +1,10 @@
mutation sendTestEmail($host: String!, $port: Int!, $sender: String!, $username: String!, $password: String!, $ignoreTLS: Boolean!) {
sendTestEmail(config: {
host: $host,
port: $port,
sender: $sender,
username: $username,
password: $password,
ignoreTLS: $ignoreTLS,
})
}
packages/common/graphql/src/graphql/index.ts
+10
View File
@@ -220,6 +220,16 @@ export const listUsersQuery = {
}`,
};
export const sendTestEmailMutation = {
id: 'sendTestEmailMutation' as const,
op: 'sendTestEmail',
query: `mutation sendTestEmail($host: String!, $port: Int!, $sender: String!, $username: String!, $password: String!, $ignoreTLS: Boolean!) {
sendTestEmail(
config: {host: $host, port: $port, sender: $sender, username: $username, password: $password, ignoreTLS: $ignoreTLS}
)
}`,
};
export const updateAccountFeaturesMutation = {
id: 'updateAccountFeaturesMutation' as const,
op: 'updateAccountFeatures',
packages/common/graphql/src/schema.ts
+24
View File
@@ -1111,6 +1111,7 @@ export interface Mutation {
sendChangeEmail: Scalars['Boolean']['output'];
sendChangePasswordEmail: Scalars['Boolean']['output'];
sendSetPasswordEmail: Scalars['Boolean']['output'];
sendTestEmail: Scalars['Boolean']['output'];
sendVerifyChangeEmail: Scalars['Boolean']['output'];
sendVerifyEmail: Scalars['Boolean']['output'];
setBlob: Scalars['String']['output'];
@@ -1404,6 +1405,10 @@ export interface MutationSendSetPasswordEmailArgs {
email?: InputMaybe<Scalars['String']['input']>;
}
export interface MutationSendTestEmailArgs {
config: Scalars['JSONObject']['input'];
}
export interface MutationSendVerifyChangeEmailArgs {
callbackUrl: Scalars['String']['input'];
email: Scalars['String']['input'];
@@ -2509,6 +2514,20 @@ export type ListUsersQuery = {
}>;
};
export type SendTestEmailMutationVariables = Exact<{
host: Scalars['String']['input'];
port: Scalars['Int']['input'];
sender: Scalars['String']['input'];
username: Scalars['String']['input'];
password: Scalars['String']['input'];
ignoreTLS: Scalars['Boolean']['input'];
}>;
export type SendTestEmailMutation = {
__typename?: 'Mutation';
sendTestEmail: boolean;
};
export type UpdateAccountFeaturesMutationVariables = Exact<{
userId: Scalars['String']['input'];
features: Array<FeatureType> | FeatureType;
@@ -4587,6 +4606,11 @@ export type Mutations =
variables: ImportUsersMutationVariables;
response: ImportUsersMutation;
}
| {
name: 'sendTestEmailMutation';
variables: SendTestEmailMutationVariables;
response: SendTestEmailMutation;
}
| {
name: 'updateAccountFeaturesMutation';
variables: UpdateAccountFeaturesMutationVariables;
packages/frontend/admin/src/app.tsx
+2 -2
View File
@@ -85,8 +85,8 @@ export const router = _createBrowserRouter(
lazy: () => import('./modules/ai'),
},
{
path: 'config',
lazy: () => import('./modules/config'),
path: 'about',
lazy: () => import('./modules/about'),
},
{
path: 'settings',
packages/frontend/admin/src/modules/config/about.tsx → packages/frontend/admin/src/modules/about/about.tsx
View File
packages/frontend/admin/src/modules/config/index.tsx → packages/frontend/admin/src/modules/about/index.tsx
View File
packages/frontend/admin/src/modules/layout.tsx
+2 -2
View File
@@ -39,8 +39,8 @@ export function Layout({ children }: PropsWithChildren) {
const leftPanelRef = useRef<ImperativePanelHandle>(null);
const [activeTab, setActiveTab] = useState('');
const [activeSubTab, setActiveSubTab] = useState('auth');
const [currentModule, setCurrentModule] = useState('auth');
const [activeSubTab, setActiveSubTab] = useState('server');
const [currentModule, setCurrentModule] = useState('server');
const handleLeftExpand = useCallback(() => {
if (leftPanelRef.current?.getSize() === 0) {
packages/frontend/admin/src/modules/nav/collapsible-item.tsx
+5 -69
View File
@@ -1,62 +1,25 @@
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@affine/admin/components/ui/accordion';
import { useCallback } from 'react';
import { NavLink } from 'react-router-dom';
import { buttonVariants } from '../../components/ui/button';
import { cn } from '../../utils';
export const CollapsibleItem = ({
title,
changeModule,
}: {
title: string;
changeModule?: (module: string) => void;
}) => {
const handleClick = useCallback(() => {
changeModule?.(title);
}, [changeModule, title]);
return (
<Accordion type="multiple" className="w-full">
<AccordionItem value="item-1" className="border-b-0 ml-7">
<NavLink
to={`/admin/settings/${title}`}
className={({ isActive }) => {
return isActive
? 'w-full bg-zinc-100 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
: '';
}}
>
<AccordionTrigger
onClick={handleClick}
className="py-2 px-2 rounded [&[data-state=closed]>svg]:rotate-270 [&[data-state=open]>svg]:rotate-360"
>
{title}
</AccordionTrigger>
</NavLink>
</AccordionItem>
</Accordion>
);
};
export const NormalSubItem = ({
module,
title,
changeModule,
}: {
module: string;
title: string;
changeModule?: (module: string) => void;
}) => {
const handleClick = useCallback(() => {
changeModule?.(title);
}, [changeModule, title]);
changeModule?.(module);
}, [changeModule, module]);
return (
<div className="w-full flex">
<NavLink
to={`/admin/settings/${title}`}
to={`/admin/settings/${module}`}
onClick={handleClick}
className={({ isActive }) => {
return cn(
@@ -72,30 +35,3 @@ export const NormalSubItem = ({
</div>
);
};
export const OtherModules = ({
moduleList,
changeModule,
}: {
moduleList: string[];
changeModule?: (module: string) => void;
}) => {
return (
<Accordion type="multiple" className="w-full">
<AccordionItem value="item-1" className="border-b-0">
<AccordionTrigger className="ml-8 py-2 px-2 rounded [&[data-state=closed]>svg]:rotate-270 [&[data-state=open]>svg]:rotate-360">
Other
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-1 py-1">
{moduleList.map(module => (
<NormalSubItem
key={module}
title={module}
changeModule={changeModule}
/>
))}
</AccordionContent>
</AccordionItem>
</Accordion>
);
};
packages/frontend/admin/src/modules/nav/nav.tsx
+2 -2
View File
@@ -98,9 +98,9 @@ export function Nav({ isCollapsed = false }: NavProps) {
/>
<SettingsItem isCollapsed={isCollapsed} />
<NavItem
to="/admin/config"
to="/admin/about"
icon={<SelfhostIcon fontSize={20} />}
label="Server"
label="About"
isCollapsed={isCollapsed}
/>
</nav>
packages/frontend/admin/src/modules/nav/settings-item.tsx
+35 -27
View File
@@ -12,15 +12,10 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { cssVarV2 } from '@toeverything/theme/v2';
import { NavLink } from 'react-router-dom';
import { ALL_CONFIGURABLE_MODULES } from '../settings/config';
import { NormalSubItem, OtherModules } from './collapsible-item';
import { KNOWN_CONFIG_GROUPS, UNKNOWN_CONFIG_GROUPS } from '../settings/config';
import { NormalSubItem } from './collapsible-item';
import { useNav } from './context';
const authModule = ALL_CONFIGURABLE_MODULES.find(module => module === 'auth');
const otherModules = ALL_CONFIGURABLE_MODULES.filter(
module => module !== 'auth'
);
export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
const { setCurrentModule } = useNav();
@@ -59,10 +54,10 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
borderColor: cssVarV2('layer/insideBorder/blackBorder'),
}}
>
{authModule ? (
<li key={authModule} className="flex">
{KNOWN_CONFIG_GROUPS.map(group => (
<li key={group.module} className="flex">
<NavLink
to={`/admin/settings/${authModule}`}
to={`/admin/settings/${group.module}`}
className={cn(
buttonVariants({
variant: 'ghost',
@@ -75,16 +70,16 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
? cssVarV2('selfhost/button/sidebarButton/bg/select')
: undefined,
})}
onClick={() => setCurrentModule?.(authModule)}
onClick={() => setCurrentModule?.(group.module)}
>
{authModule}
{group.name}
</NavLink>
</li>
) : null}
{otherModules.map(module => (
<li key={module} className="flex">
))}
{UNKNOWN_CONFIG_GROUPS.map(group => (
<li key={group.module} className="flex">
<NavLink
to={`/admin/settings/${module}`}
to={`/admin/settings/${group.module}`}
className={cn(
buttonVariants({
variant: 'ghost',
@@ -97,9 +92,9 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
? cssVarV2('selfhost/button/sidebarButton/bg/select')
: undefined,
})}
onClick={() => setCurrentModule?.(module)}
onClick={() => setCurrentModule?.(group.module)}
>
{module}
{group.name}
</NavLink>
</li>
))}
@@ -151,18 +146,31 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
className={cn('relative overflow-hidden w-full h-full')}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>div]:!block">
{authModule && (
{KNOWN_CONFIG_GROUPS.map(group => (
<NormalSubItem
title={authModule}
key={group.module}
module={group.module}
title={group.name}
changeModule={setCurrentModule}
/>
)}
{otherModules.length > 0 && (
<OtherModules
moduleList={otherModules}
changeModule={setCurrentModule}
/>
)}
))}
<Accordion type="multiple" className="w-full">
<AccordionItem value="item-1" className="border-b-0">
<AccordionTrigger className="ml-8 py-2 px-2 rounded [&[data-state=closed]>svg]:rotate-270 [&[data-state=open]>svg]:rotate-360">
Experimental
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-1 py-1">
{UNKNOWN_CONFIG_GROUPS.map(group => (
<NormalSubItem
key={group.module}
module={group.module}
title={group.name}
changeModule={setCurrentModule}
/>
))}
</AccordionContent>
</AccordionItem>
</Accordion>
</ScrollAreaPrimitive.Viewport>
<ScrollAreaPrimitive.ScrollAreaScrollbar
className={cn(
packages/frontend/admin/src/modules/settings/config-input-row.tsx
+170
View File
@@ -0,0 +1,170 @@
import { Input } from '@affine/admin/components/ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@affine/admin/components/ui/select';
import { Switch } from '@affine/admin/components/ui/switch';
import { useCallback, useState } from 'react';
import { Textarea } from '../../components/ui/textarea';
import { isEqual } from './utils';
export type ConfigInputProps = {
field: string;
desc: string;
defaultValue: any;
onChange: (key: string, value: any) => void;
} & (
| {
type: 'String' | 'Number' | 'Boolean' | 'JSON';
}
| {
type: 'Enum';
options: string[];
}
);
const Inputs: Record<
ConfigInputProps['type'],
React.ComponentType<{
defaultValue: any;
onChange: (value?: any) => void;
options?: string[];
}>
> = {
Boolean: function SwitchInput({ defaultValue, onChange }) {
const handleSwitchChange = (checked: boolean) => {
onChange(checked);
};
return (
<Switch
defaultChecked={defaultValue}
onCheckedChange={handleSwitchChange}
/>
);
},
String: function StringInput({ defaultValue, onChange }) {
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
};
return (
<Input
type="text"
minLength={1}
defaultValue={defaultValue}
onChange={handleInputChange}
/>
);
},
Number: function NumberInput({ defaultValue, onChange }) {
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange(parseInt(e.target.value));
};
return (
<Input
type="number"
defaultValue={defaultValue}
onChange={handleInputChange}
/>
);
},
JSON: function ObjectInput({ defaultValue, onChange }) {
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
try {
const value = JSON.parse(e.target.value);
onChange(value);
} catch {}
};
return (
<Textarea
defaultValue={JSON.stringify(defaultValue)}
onChange={handleInputChange}
className="w-full"
/>
);
},
Enum: function EnumInput({ defaultValue, onChange, options }) {
return (
<Select defaultValue={defaultValue} onValueChange={onChange}>
<SelectTrigger>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
{options?.map(option => (
<SelectItem key={option} value={option}>
{option}
</SelectItem>
))}
</SelectContent>
</Select>
);
},
};
export const ConfigRow = ({
field,
desc,
type,
defaultValue,
onChange,
...props
}: ConfigInputProps) => {
const [value, setValue] = useState(defaultValue);
const isValueChanged = !isEqual(value, defaultValue);
const onValueChange = useCallback(
(value?: any) => {
onChange(field, value);
setValue(value);
},
[field, onChange]
);
const Input = Inputs[type] ?? Inputs.JSON;
return (
<div
className={`flex justify-between flex-grow space-y-[10px]
${type === 'Boolean' ? 'flex-row' : 'flex-col'}`}
>
<div className="text-base font-bold flex-3">{desc}</div>
<div className="flex flex-col items-end relative flex-1">
<Input
defaultValue={defaultValue}
onChange={onValueChange}
{...props}
/>
{isValueChanged && (
<div className="absolute bottom-[-25px] text-sm right-0 break-words">
<span
className="line-through"
style={{
color: 'rgba(198, 34, 34, 1)',
backgroundColor: 'rgba(254, 213, 213, 1)',
}}
>
{JSON.stringify(defaultValue)}
</span>{' '}
=&gt;{' '}
<span
style={{
color: 'rgba(20, 147, 67, 1)',
backgroundColor: 'rgba(225, 250, 177, 1)',
}}
>
{JSON.stringify(value)}
</span>
</div>
)}
</div>
</div>
);
};
packages/frontend/admin/src/modules/settings/config-input.tsx
-132
View File
@@ -1,132 +0,0 @@
import { Input } from '@affine/admin/components/ui/input';
import { Switch } from '@affine/admin/components/ui/switch';
import { useCallback, useState } from 'react';
import { Textarea } from '../../components/ui/textarea';
import { isEqual } from './utils';
interface ConfigInputProps {
module: string;
field: string;
type: string;
defaultValue: any;
onChange: (module: string, field: string, value: any) => void;
}
const Inputs: Record<
string,
React.ComponentType<{
defaultValue: any;
onChange: (value?: any) => void;
}>
> = {
Boolean: function SwitchInput({ defaultValue, onChange }) {
const handleSwitchChange = (checked: boolean) => {
onChange(checked);
};
return (
<Switch
defaultChecked={defaultValue}
onCheckedChange={handleSwitchChange}
/>
);
},
String: function StringInput({ defaultValue, onChange }) {
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
};
return (
<Input
type="text"
minLength={1}
defaultValue={defaultValue}
onChange={handleInputChange}
/>
);
},
Number: function NumberInput({ defaultValue, onChange }) {
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange(parseInt(e.target.value));
};
return (
<Input
type="number"
defaultValue={defaultValue}
onChange={handleInputChange}
/>
);
},
JSON: function ObjectInput({ defaultValue, onChange }) {
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
try {
const value = JSON.parse(e.target.value);
onChange(value);
} catch {}
};
return (
<Textarea
defaultValue={JSON.stringify(defaultValue)}
onChange={handleInputChange}
className="w-full"
/>
);
},
};
export const ConfigInput = ({
module,
field,
type,
defaultValue,
onChange,
}: ConfigInputProps) => {
const [value, setValue] = useState(defaultValue);
const onValueChange = useCallback(
(value?: any) => {
onChange(module, field, value);
setValue(value);
},
[module, field, onChange]
);
const Input = Inputs[type] ?? Inputs.JSON;
const isValueEqual = isEqual(value, defaultValue);
return (
<div className="flex flex-col items-end gap-2 w-full">
<Input defaultValue={defaultValue} onChange={onValueChange} />
<div
className="w-full break-words"
style={{
opacity: isValueEqual ? 0 : 1,
height: isValueEqual ? 0 : 'auto',
}}
>
<span
className="line-through"
style={{
color: 'rgba(198, 34, 34, 1)',
backgroundColor: 'rgba(254, 213, 213, 1)',
}}
>
{JSON.stringify(defaultValue)}
</span>{' '}
=&gt;{' '}
<span
style={{
color: 'rgba(20, 147, 67, 1)',
backgroundColor: 'rgba(225, 250, 177, 1)',
}}
>
{JSON.stringify(value)}
</span>
</div>
</div>
);
};
packages/frontend/admin/src/modules/settings/config.ts
+143 -13
View File
@@ -1,23 +1,43 @@
import CONFIG from '../../config.json';
import { upperFirst } from 'lodash-es';
import type { ComponentType } from 'react';
export type ConfigDescriptor = {
import CONFIG_DESCRIPTORS from '../../config.json';
import type { ConfigInputProps } from './config-input-row';
import { SendTestEmail } from './operations/send-test-email';
export type ConfigType = 'String' | 'Number' | 'Boolean' | 'JSON' | 'Enum';
type ConfigDescriptor = {
desc: string;
type: 'String' | 'Number' | 'Boolean' | 'Array' | 'Object';
type: ConfigType;
env?: string;
link?: string;
};
export type AppConfig = typeof CONFIG;
export type AvailableConfig = {
[K in keyof AppConfig]: {
module: K;
fields: Array<keyof AppConfig[K]>;
};
}[keyof AppConfig];
export type AppConfig = Record<string, Record<string, any>>;
type AppConfigDescriptors = typeof CONFIG_DESCRIPTORS;
type AppConfigModule = keyof AppConfigDescriptors;
type ModuleConfigDescriptors<M extends AppConfigModule> =
AppConfigDescriptors[M];
type ConfigGroup<T extends AppConfigModule> = {
name: string;
module: T;
fields: Array<
| keyof ModuleConfigDescriptors<T>
| ({
key: keyof ModuleConfigDescriptors<T>;
sub?: string;
desc?: string;
} & Partial<ConfigInputProps>)
>;
operations?: ComponentType<{
appConfig: AppConfig;
}>[];
};
const IGNORED_MODULES: (keyof AppConfig)[] = [
'db',
'redis',
'graphql',
'copilot', // not ready
];
@@ -25,7 +45,117 @@ if (!environment.isSelfHosted) {
IGNORED_MODULES.push('payment');
}
export { CONFIG as ALL_CONFIG };
export const ALL_CONFIGURABLE_MODULES = Object.keys(CONFIG).filter(
const ALL_CONFIGURABLE_MODULES = Object.keys(CONFIG_DESCRIPTORS).filter(
key => !IGNORED_MODULES.includes(key as keyof AppConfig)
) as (keyof AppConfig)[];
);
export const KNOWN_CONFIG_GROUPS = [
{
name: 'Server',
module: 'server',
fields: ['externalUrl', 'name'],
} as ConfigGroup<'server'>,
{
name: 'Auth',
module: 'auth',
fields: [
'allowSignup',
// nested json object
{
key: 'passwordRequirements',
sub: 'min',
type: 'Number',
desc: 'Minimum length requirement of password',
},
{
key: 'passwordRequirements',
sub: 'max',
type: 'Number',
desc: 'Maximum length requirement of password',
},
],
} as ConfigGroup<'auth'>,
{
name: 'Notification',
module: 'mailer',
fields: [
'enabled',
'SMTP.host',
'SMTP.port',
'SMTP.username',
'SMTP.password',
'SMTP.ignoreTLS',
'SMTP.sender',
],
operations: [SendTestEmail],
} as ConfigGroup<'mailer'>,
{
name: 'Storage',
module: 'storages',
fields: [
{
key: 'blob.storage',
desc: 'The storage provider for user uploaded blobs',
sub: 'provider',
type: 'Enum',
options: ['fs', 'aws-s3', 'cloudflare-r2'],
},
{
key: 'blob.storage',
sub: 'bucket',
type: 'String',
desc: 'The bucket name for user uploaded blobs storage',
},
{
key: 'blob.storage',
sub: 'config',
type: 'JSON',
desc: 'The config passed directly to the storage provider(e.g. aws-sdk)',
},
{
key: 'avatar.storage',
desc: 'The storage provider for user avatars',
sub: 'provider',
type: 'Enum',
options: ['fs', 'aws-s3', 'cloudflare-r2'],
},
{
key: 'avatar.storage',
sub: 'bucket',
type: 'String',
desc: 'The bucket name for user avatars storage',
},
{
key: 'avatar.storage',
sub: 'config',
type: 'JSON',
desc: 'The config passed directly to the storage provider(e.g. aws-sdk)',
},
],
} as ConfigGroup<'storages'>,
{
name: 'OAuth',
module: 'oauth',
fields: ['providers.google', 'providers.github', 'providers.oidc'],
} as ConfigGroup<'oauth'>,
];
export const UNKNOWN_CONFIG_GROUPS = ALL_CONFIGURABLE_MODULES.filter(
module => !KNOWN_CONFIG_GROUPS.some(group => group.module === module)
).map(module => ({
name: upperFirst(module),
module,
// @ts-expect-error allow
fields: Object.keys(CONFIG_DESCRIPTORS[module]),
operations: undefined,
}));
export const ALL_SETTING_GROUPS = [
...KNOWN_CONFIG_GROUPS,
...UNKNOWN_CONFIG_GROUPS,
];
export const ALL_CONFIG_DESCRIPTORS = CONFIG_DESCRIPTORS as Record<
string,
Record<string, ConfigDescriptor>
>;
packages/frontend/admin/src/modules/settings/confirm-changes.tsx
+3 -1
View File
@@ -9,13 +9,15 @@ import {
} from '@affine/admin/components/ui/dialog';
import { useCallback } from 'react';
import type { AppConfig } from './config';
export const ConfirmChanges = ({
updates,
open,
onOpenChange,
onConfirm,
}: {
updates: Record<string, { from: any; to: any }>;
updates: AppConfig;
open: boolean;
onOpenChange: (open: boolean) => void;
onConfirm: () => void;
packages/frontend/admin/src/modules/settings/index.tsx
+66 -66
View File
@@ -1,6 +1,5 @@
import { Button } from '@affine/admin/components/ui/button';
import { ScrollArea } from '@affine/admin/components/ui/scroll-area';
import { Separator } from '@affine/admin/components/ui/separator';
import { get } from 'lodash-es';
import { CheckIcon } from 'lucide-react';
import { useCallback, useState } from 'react';
@@ -8,17 +7,16 @@ import { useCallback, useState } from 'react';
import { Header } from '../header';
import { useNav } from '../nav/context';
import {
ALL_CONFIG,
ALL_CONFIGURABLE_MODULES,
type ConfigDescriptor,
ALL_CONFIG_DESCRIPTORS,
ALL_SETTING_GROUPS,
type AppConfig,
} from './config';
import { ConfigInput } from './config-input';
import { type ConfigInputProps, ConfigRow } from './config-input-row';
import { ConfirmChanges } from './confirm-changes';
import { RuntimeSettingRow } from './runtime-setting-row';
import { useAppConfig } from './use-app-config';
export function SettingsPage() {
const { appConfig, update, save, updates } = useAppConfig();
const { appConfig, update, save, patchedAppConfig, updates } = useAppConfig();
const [open, setOpen] = useState(false);
const onOpen = useCallback(() => setOpen(true), [setOpen]);
@@ -28,22 +26,12 @@ export function SettingsPage() {
if (disableSave) {
return;
}
save(
Object.entries(updates).map(([key, { to }]) => {
const splitAt = key.indexOf('.');
const [module, field] = [key.slice(0, splitAt), key.slice(splitAt + 1)];
return {
module,
key: field,
value: to,
};
})
);
save();
setOpen(false);
}, [save, disableSave, updates]);
}, [save, disableSave]);
return (
<div className=" h-screen flex-1 flex-col flex">
<div className="h-screen flex-1 flex-col flex">
<Header
title="Settings"
endFix={
@@ -59,7 +47,11 @@ export function SettingsPage() {
</Button>
}
/>
<AdminPanel onUpdate={update} appConfig={appConfig} />
<AdminPanel
onUpdate={update}
appConfig={appConfig}
patchedAppConfig={patchedAppConfig}
/>
<ConfirmChanges
updates={updates}
open={open}
@@ -72,58 +64,66 @@ export function SettingsPage() {
export const AdminPanel = ({
appConfig,
patchedAppConfig,
onUpdate,
}: {
appConfig: Record<string, any>;
onUpdate: (module: string, field: string, value: any) => void;
appConfig: AppConfig;
patchedAppConfig: AppConfig;
onUpdate: (path: string, value: any) => void;
}) => {
const { currentModule } = useNav();
const group = ALL_SETTING_GROUPS.find(
group => group.module === currentModule
);
if (!group) {
return null;
}
const { name, module, fields, operations } = group;
return (
<ScrollArea>
<div className="flex flex-col h-full gap-3 py-5 px-6 w-full max-w-[800px] mx-auto">
{ALL_CONFIGURABLE_MODULES.filter(
module => module === currentModule
).map(module => {
const fields = Object.keys(ALL_CONFIG[module]);
return (
<div
className="flex flex-col gap-5"
id={`config-module-${module}`}
key={module}
>
<div className="text-xl font-semibold">{module}</div>
{fields.map((field, index) => {
// @ts-expect-error allow
const { desc, type } = ALL_CONFIG[module][
field
] as ConfigDescriptor;
<ScrollArea className="h-full">
<div className="flex flex-col h-full gap-5 py-5 px-6 w-full max-w-[800px] mx-auto">
<div className="text-2xl font-semibold">{name}</div>
<div className="flex flex-col gap-10" id={`config-module-${module}`}>
{fields.map(field => {
let desc: string;
let props: ConfigInputProps;
if (typeof field === 'string') {
const descriptor = ALL_CONFIG_DESCRIPTORS[module][field];
desc = descriptor.desc;
props = {
type: descriptor.type,
defaultValue: get(appConfig[module], field),
field: `${module}/${field}`,
desc,
onChange: onUpdate,
options: [],
};
} else {
const descriptor = ALL_CONFIG_DESCRIPTORS[module][field.key];
return (
<div key={field} className="flex flex-col gap-10">
{index !== 0 && <Separator />}
<RuntimeSettingRow
key={field}
id={field}
description={desc}
orientation={
type === 'Boolean' ? 'horizontal' : 'vertical'
}
>
<ConfigInput
module={module}
field={field}
type={type}
defaultValue={get(appConfig[module], field)}
onChange={onUpdate}
/>
</RuntimeSettingRow>
</div>
);
})}
</div>
);
})}
props = {
desc: field.desc ?? descriptor.desc,
type: field.type ?? descriptor.type,
// @ts-expect-error for enum type
options: field.options,
defaultValue: get(
appConfig[module],
field.key + (field.sub ? '.' + field.sub : '')
),
field: `${module}/${field.key}${field.sub ? `/${field.sub}` : ''}`,
onChange: onUpdate,
};
}
return <ConfigRow key={props.field} {...props} />;
})}
{operations?.map(Operation => (
<Operation key={Operation.name} appConfig={patchedAppConfig} />
))}
</div>
</div>
</ScrollArea>
);
packages/frontend/admin/src/modules/settings/operations/send-test-email.tsx
+32
View File
@@ -0,0 +1,32 @@
import { Button } from '@affine/admin/components/ui/button';
import { useMutation } from '@affine/admin/use-mutation';
import { notify } from '@affine/component';
import type { UserFriendlyError } from '@affine/error';
import { sendTestEmailMutation } from '@affine/graphql';
import { useCallback } from 'react';
import type { AppConfig } from '../config';
export function SendTestEmail({ appConfig }: { appConfig: AppConfig }) {
const { trigger } = useMutation({
mutation: sendTestEmailMutation,
});
const onClick = useCallback(() => {
trigger(appConfig.mailer.SMTP)
.then(() => {
notify.success({
title: 'Test email sent',
message: 'The test email has been successfully sent.',
});
})
.catch((err: UserFriendlyError) => {
notify.error({
title: 'Failed to send test email',
message: err.message,
});
});
}, [appConfig, trigger]);
return <Button onClick={onClick}>Send Test Email</Button>;
}
packages/frontend/admin/src/modules/settings/runtime-setting-row.tsx
-30
View File
@@ -1,30 +0,0 @@
import { type ReactNode } from 'react';
export const RuntimeSettingRow = ({
id,
description,
orientation = 'horizontal',
children,
}: {
id: string;
description: string;
orientation?: 'horizontal' | 'vertical';
children: ReactNode;
}) => {
return (
<div
className={`flex justify-between flex-grow space-y-[10px] gap-5 ${orientation === 'vertical' ? 'flex-col' : 'flex-row'}`}
id={id}
>
<div className="flex flex-col gap-1">
<div className="text-base font-bold">{description}</div>
<div className="">
<code className="text-xs bg-zinc-100 text-gray-500 px-[4px] py-[2px] rounded">
{id}
</code>
</div>
</div>
<div className="flex flex-col items-end gap-2 mr-1">{children}</div>
</div>
);
};
packages/frontend/admin/src/modules/settings/use-app-config.ts
+72 -36
View File
@@ -8,11 +8,15 @@ import {
type UpdateAppConfigInput,
updateAppConfigMutation,
} from '@affine/graphql';
import { get, merge } from 'lodash-es';
import { cloneDeep, get, merge, set } from 'lodash-es';
import { useCallback, useState } from 'react';
import type { AppConfig } from './config';
export { type UpdateAppConfigInput };
export type AppConfigUpdates = Record<string, { from: any; to: any }>;
export const useAppConfig = () => {
const {
data: { appConfig },
@@ -25,49 +29,81 @@ export const useAppConfig = () => {
mutation: updateAppConfigMutation,
});
const [updates, setUpdates] = useState<
Record<string, { from: any; to: any }>
>({});
const save = useAsyncCallback(
async (updates: UpdateAppConfigInput[]) => {
try {
const savedUpdates = await trigger({
updates,
});
await mutate({ appConfig: merge({}, appConfig, savedUpdates) });
setUpdates({});
notify.success({
title: 'Saved successfully',
message: 'Runtime configurations have been saved successfully.',
});
} catch (e) {
const error = UserFriendlyError.fromAny(e);
notify.error({
title: 'Failed to save',
message: error.message,
});
console.error(e);
}
},
[appConfig, mutate, trigger]
const [updates, setUpdates] = useState<AppConfigUpdates>({});
const [patchedAppConfig, setPatchedAppConfig] = useState<AppConfig>(() =>
cloneDeep(appConfig)
);
const save = useAsyncCallback(async () => {
const updateInputs: UpdateAppConfigInput[] = Object.entries(updates).map(
([key, value]) => {
const splitIndex = key.indexOf('.');
const module = key.slice(0, splitIndex);
const field = key.slice(splitIndex + 1);
return {
module,
key: field,
value: value.to,
};
}
);
try {
const savedUpdates = await trigger({
updates: updateInputs,
});
await mutate(prev => {
return { appConfig: merge({}, prev, savedUpdates) };
});
setUpdates({});
notify.success({
title: 'Saved',
message: 'Settings have been saved successfully.',
});
} catch (e) {
const error = UserFriendlyError.fromAny(e);
notify.error({
title: 'Failed to save',
message: error.message,
});
console.error(e);
}
}, [updates, mutate, trigger]);
const update = useCallback(
(module: string, field: string, value: any) => {
setUpdates(prev => ({
...prev,
[`${module}.${field}`]: {
from: get(appConfig, `${module}.${field}`),
to: value,
},
}));
(path: string, value: any) => {
const [module, field, subField] = path.split('/');
const key = `${module}.${field}`;
const from = get(appConfig, key);
setUpdates(prev => {
const to = subField
? set(prev[key]?.to ?? { ...from }, subField, value)
: value;
return {
...prev,
[key]: {
from,
to,
},
};
});
setPatchedAppConfig(prev => {
return set(
prev,
`${module}.${field}${subField ? `.${subField}` : ''}`,
value
);
});
},
[appConfig]
);
return {
appConfig,
appConfig: appConfig as AppConfig,
patchedAppConfig,
update,
save,
updates,