mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-09-22 19:53:48 +08:00
chore: remove deprecated admin panel (#8120)
This commit is contained in:
JimmFly
@@ -1,76 +0,0 @@
|
|||||||
import { Button, useConfirmModal } from '@affine/component';
|
|
||||||
import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
|
|
||||||
import { ArrowRightBigIcon, Logo1Icon } from '@blocksuite/icons/rc';
|
|
||||||
import { useCallback } from 'react';
|
|
||||||
|
|
||||||
import * as styles from './index.css';
|
|
||||||
|
|
||||||
export type ModifiedValues = {
|
|
||||||
id: string;
|
|
||||||
expiredValue: any;
|
|
||||||
newValue: any;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const AdminPanelHeader = ({
|
|
||||||
modifiedValues,
|
|
||||||
onConfirm,
|
|
||||||
}: {
|
|
||||||
modifiedValues: ModifiedValues[];
|
|
||||||
onConfirm: () => void;
|
|
||||||
}) => {
|
|
||||||
const { openConfirmModal } = useConfirmModal();
|
|
||||||
const { jumpToIndex } = useNavigateHelper();
|
|
||||||
|
|
||||||
const handleJumpToIndex = useCallback(() => jumpToIndex(), [jumpToIndex]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.header}>
|
|
||||||
<Logo1Icon className={styles.logo} onClick={handleJumpToIndex} />
|
|
||||||
<div className={styles.title}>
|
|
||||||
<span>After editing, please click the Save button on the right.</span>
|
|
||||||
<ArrowRightBigIcon />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
disabled={modifiedValues.length === 0}
|
|
||||||
onClick={() => {
|
|
||||||
openConfirmModal({
|
|
||||||
title: 'Save Runtime Configurations ?',
|
|
||||||
description:
|
|
||||||
'Are you sure you want to save the following changes?',
|
|
||||||
confirmText: 'Save',
|
|
||||||
confirmButtonOptions: {
|
|
||||||
variant: 'primary',
|
|
||||||
},
|
|
||||||
onConfirm: onConfirm,
|
|
||||||
children:
|
|
||||||
modifiedValues.length > 0 ? (
|
|
||||||
<pre className={styles.changedValues}>
|
|
||||||
<p>{'{'}</p>
|
|
||||||
{modifiedValues.map(({ id, expiredValue, newValue }) => (
|
|
||||||
<p key={id}>
|
|
||||||
{' '} {id}:{' '}
|
|
||||||
<span className={styles.expiredValue}>
|
|
||||||
{JSON.stringify(expiredValue)}
|
|
||||||
</span>
|
|
||||||
<span className={styles.newValue}>
|
|
||||||
{JSON.stringify(newValue)}
|
|
||||||
</span>
|
|
||||||
,
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
<p>{'}'}</p>
|
|
||||||
</pre>
|
|
||||||
) : (
|
|
||||||
'There is no change.'
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
|
|
||||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
|
||||||
import { useCallback, useState } from 'react';
|
|
||||||
|
|
||||||
import * as styles from './index.css';
|
|
||||||
|
|
||||||
export const CollapsibleItem = ({
|
|
||||||
items,
|
|
||||||
initialOpen = false,
|
|
||||||
title,
|
|
||||||
currentModule,
|
|
||||||
changeModule,
|
|
||||||
}: {
|
|
||||||
title: string;
|
|
||||||
items: string[];
|
|
||||||
initialOpen?: boolean;
|
|
||||||
currentModule?: string;
|
|
||||||
changeModule?: (module: string) => void;
|
|
||||||
}) => {
|
|
||||||
const [open, setOpen] = useState(initialOpen);
|
|
||||||
|
|
||||||
const handleClick = useCallback(
|
|
||||||
(id: string, event?: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
|
|
||||||
event?.preventDefault();
|
|
||||||
const targetElement = document.getElementById(id);
|
|
||||||
if (targetElement) {
|
|
||||||
targetElement.scrollIntoView({
|
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'center',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
changeModule?.(title);
|
|
||||||
},
|
|
||||||
[changeModule, title]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Collapsible.Root
|
|
||||||
className={styles.outLine}
|
|
||||||
open={open}
|
|
||||||
onOpenChange={setOpen}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={styles.outLineHeader}
|
|
||||||
data-active={title === currentModule}
|
|
||||||
>
|
|
||||||
<Collapsible.Trigger className={styles.arrowIcon} data-open={open}>
|
|
||||||
<ArrowDownSmallIcon />
|
|
||||||
</Collapsible.Trigger>
|
|
||||||
<a
|
|
||||||
className={styles.navText}
|
|
||||||
href={`#${title}`}
|
|
||||||
onClick={e => handleClick(title, e)}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.collapsibleContainer}>
|
|
||||||
{items.map((item, index) => (
|
|
||||||
<Collapsible.Content
|
|
||||||
className={styles.outLineContent}
|
|
||||||
key={index}
|
|
||||||
onClick={() => handleClick(item)}
|
|
||||||
>
|
|
||||||
<a className={styles.navText} href={`#${item}`}>
|
|
||||||
{item}
|
|
||||||
</a>
|
|
||||||
</Collapsible.Content>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Collapsible.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,179 +0,0 @@
|
|||||||
import { cssVar } from '@toeverything/theme';
|
|
||||||
import { style } from '@vanilla-extract/css';
|
|
||||||
|
|
||||||
export const header = style({
|
|
||||||
width: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: '12px 16px',
|
|
||||||
borderBottom: `1px solid ${cssVar('borderColor')}`,
|
|
||||||
gap: 8,
|
|
||||||
position: 'sticky',
|
|
||||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
|
||||||
zIndex: 2,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const logo = style({
|
|
||||||
fontSize: 32,
|
|
||||||
cursor: 'pointer',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const title = style({
|
|
||||||
fontSize: cssVar('fontH3'),
|
|
||||||
fontWeight: 'bold',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 8,
|
|
||||||
whiteSpace: 'pre-wrap',
|
|
||||||
textAlign: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const outLine = style({
|
|
||||||
width: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const outLineHeader = style({
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
cursor: 'pointer',
|
|
||||||
alignItems: 'center',
|
|
||||||
wordBreak: 'break-all',
|
|
||||||
wordWrap: 'break-word',
|
|
||||||
fontSize: cssVar('fontBase'),
|
|
||||||
fontWeight: 'bold',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
':hover': {
|
|
||||||
backgroundColor: cssVar('hoverColor'),
|
|
||||||
},
|
|
||||||
selectors: {
|
|
||||||
'&[data-active=true]': {
|
|
||||||
background: cssVar('hoverColor'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
borderRadius: 4,
|
|
||||||
padding: 4,
|
|
||||||
marginBottom: 4,
|
|
||||||
':visited': {
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const arrowIcon = style({
|
|
||||||
transform: 'rotate(-90deg)',
|
|
||||||
selectors: {
|
|
||||||
'&[data-open=true]': {
|
|
||||||
transform: 'rotate(0deg) translateY(3px) translateX(-3px)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
transition: 'transform 0.2s',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const collapsibleContainer = style({
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
flexDirection: 'column',
|
|
||||||
wordBreak: 'break-all',
|
|
||||||
wordWrap: 'break-word',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const outLineContent = style({
|
|
||||||
fontSize: cssVar('fontSm'),
|
|
||||||
cursor: 'pointer',
|
|
||||||
borderRadius: 4,
|
|
||||||
padding: '4px 18px',
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
':hover': {
|
|
||||||
backgroundColor: cssVar('hoverColor'),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const navText = style({
|
|
||||||
width: '100%',
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
padding: '4px 0px',
|
|
||||||
':visited': {
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const settingItem = style({
|
|
||||||
maxWidth: '960px',
|
|
||||||
minHeight: '100px',
|
|
||||||
display: 'flex',
|
|
||||||
gap: 8,
|
|
||||||
padding: '16px 0',
|
|
||||||
borderBottom: `0.5px solid ${cssVar('borderColor')}`,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const LeftItem = style({
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: 4,
|
|
||||||
width: '60%',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const RightItem = style({
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: 8,
|
|
||||||
fontSize: cssVar('fontXs'),
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
width: '40%',
|
|
||||||
alignItems: 'flex-end',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const settingItemTitle = style({
|
|
||||||
fontSize: cssVar('fontBase'),
|
|
||||||
fontWeight: 'bold',
|
|
||||||
wordBreak: 'break-all',
|
|
||||||
wordWrap: 'break-word',
|
|
||||||
marginBottom: 6,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const settingItemId = style({
|
|
||||||
fontSize: cssVar('fontXs'),
|
|
||||||
color: cssVar('textSecondaryColor'),
|
|
||||||
borderRadius: 4,
|
|
||||||
borderColor: cssVar('borderColor'),
|
|
||||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
|
||||||
padding: '2px 4px',
|
|
||||||
wordBreak: 'keep-all',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const settingItemDescription = style({
|
|
||||||
fontSize: cssVar('fontXs'),
|
|
||||||
color: cssVar('textSecondaryColor'),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const changedValues = style({
|
|
||||||
background: cssVar('backgroundSecondaryColor'),
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: 4,
|
|
||||||
minHeight: '64px',
|
|
||||||
borderRadius: 4,
|
|
||||||
padding: '12px 16px 16px 12px',
|
|
||||||
marginTop: 8,
|
|
||||||
overflow: 'hidden',
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
fontSize: cssVar('fontSm'),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const expiredValue = style({
|
|
||||||
color: cssVar('textHighlightForegroundRed'),
|
|
||||||
background: cssVar('textHighlightRed'),
|
|
||||||
textDecoration: 'line-through',
|
|
||||||
marginRight: 2,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const newValue = style({
|
|
||||||
color: cssVar('textHighlightForegroundGreen'),
|
|
||||||
background: cssVar('textHighlightGreen'),
|
|
||||||
});
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export * from './admin-panel-header';
|
|
||||||
export * from './collapsible-item';
|
|
||||||
export * from './runtime-setting-row';
|
|
||||||
export * from './use-get-server-runtime-config';
|
|
||||||
export * from './utils';
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import { type ReactNode } from 'react';
|
|
||||||
|
|
||||||
import * as styles from './index.css';
|
|
||||||
|
|
||||||
export const RuntimeSettingRow = ({
|
|
||||||
id,
|
|
||||||
description,
|
|
||||||
lastUpdatedTime,
|
|
||||||
operation,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
id: string;
|
|
||||||
description: string;
|
|
||||||
lastUpdatedTime: string;
|
|
||||||
operation: ReactNode;
|
|
||||||
children: ReactNode;
|
|
||||||
}) => {
|
|
||||||
const formatTime = new Date(lastUpdatedTime).toLocaleString();
|
|
||||||
return (
|
|
||||||
<div id={id} className={styles.settingItem}>
|
|
||||||
<div className={styles.LeftItem}>
|
|
||||||
<div className={styles.settingItemTitle}>{description}</div>
|
|
||||||
<div>
|
|
||||||
<code className={styles.settingItemId}>{id}</code>
|
|
||||||
</div>
|
|
||||||
<div className={styles.settingItemDescription}>
|
|
||||||
last updated at: {formatTime}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.RightItem}>
|
|
||||||
{operation}
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { useQuery } from '@affine/core/hooks/use-query';
|
|
||||||
import { getServerRuntimeConfigQuery } from '@affine/graphql';
|
|
||||||
import { useMemo } from 'react';
|
|
||||||
|
|
||||||
export const useGetServerRuntimeConfig = () => {
|
|
||||||
const { data } = useQuery({
|
|
||||||
query: getServerRuntimeConfigQuery,
|
|
||||||
});
|
|
||||||
|
|
||||||
const serverRuntimeConfig = useMemo(
|
|
||||||
() =>
|
|
||||||
data?.serverRuntimeConfig.sort((a, b) => a.id.localeCompare(b.id)) ?? [],
|
|
||||||
[data]
|
|
||||||
);
|
|
||||||
|
|
||||||
// collect all the modules and config keys in each module
|
|
||||||
const moduleList = useMemo(() => {
|
|
||||||
const moduleMap: { [key: string]: string[] } = {};
|
|
||||||
|
|
||||||
serverRuntimeConfig.forEach(config => {
|
|
||||||
if (!moduleMap[config.module]) {
|
|
||||||
moduleMap[config.module] = [];
|
|
||||||
}
|
|
||||||
moduleMap[config.module].push(config.key);
|
|
||||||
});
|
|
||||||
|
|
||||||
return Object.keys(moduleMap)
|
|
||||||
.sort((a, b) => a.localeCompare(b))
|
|
||||||
.map(moduleName => ({
|
|
||||||
moduleName,
|
|
||||||
keys: moduleMap[moduleName].sort((a, b) => a.localeCompare(b)),
|
|
||||||
}));
|
|
||||||
}, [serverRuntimeConfig]);
|
|
||||||
|
|
||||||
// group config by module name
|
|
||||||
const configGroup = useMemo(() => {
|
|
||||||
const configMap = new Map<string, typeof serverRuntimeConfig>();
|
|
||||||
|
|
||||||
serverRuntimeConfig.forEach(config => {
|
|
||||||
if (!configMap.has(config.module)) {
|
|
||||||
configMap.set(config.module, []);
|
|
||||||
}
|
|
||||||
configMap.get(config.module)?.push(config);
|
|
||||||
});
|
|
||||||
|
|
||||||
return Array.from(configMap.entries()).map(([moduleName, configs]) => ({
|
|
||||||
moduleName,
|
|
||||||
configs,
|
|
||||||
}));
|
|
||||||
}, [serverRuntimeConfig]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
serverRuntimeConfig,
|
|
||||||
moduleList,
|
|
||||||
configGroup,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { notify } from '@affine/component';
|
|
||||||
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
|
|
||||||
import {
|
|
||||||
useMutateQueryResource,
|
|
||||||
useMutation,
|
|
||||||
} from '@affine/core/hooks/use-mutation';
|
|
||||||
import {
|
|
||||||
getServerRuntimeConfigQuery,
|
|
||||||
updateServerRuntimeConfigsMutation,
|
|
||||||
} from '@affine/graphql';
|
|
||||||
|
|
||||||
export const useUpdateServerRuntimeConfigs = () => {
|
|
||||||
const { trigger, isMutating } = useMutation({
|
|
||||||
mutation: updateServerRuntimeConfigsMutation,
|
|
||||||
});
|
|
||||||
const revalidate = useMutateQueryResource();
|
|
||||||
|
|
||||||
return {
|
|
||||||
trigger: useAsyncCallback(
|
|
||||||
async (values: any) => {
|
|
||||||
try {
|
|
||||||
await trigger(values);
|
|
||||||
await revalidate(getServerRuntimeConfigQuery);
|
|
||||||
notify.success({
|
|
||||||
title: 'Saved successfully',
|
|
||||||
message: 'Runtime configurations have been saved successfully.',
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
notify.error({
|
|
||||||
title: 'Failed to save',
|
|
||||||
message:
|
|
||||||
'Failed to save runtime configurations, please try again later.',
|
|
||||||
});
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[revalidate, trigger]
|
|
||||||
),
|
|
||||||
isMutating,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
import { Input, Switch } from '@affine/component';
|
|
||||||
import type { RuntimeConfigType } from '@affine/graphql';
|
|
||||||
|
|
||||||
export const renderInput = (
|
|
||||||
type: RuntimeConfigType,
|
|
||||||
value: any,
|
|
||||||
onChange: (value?: any) => void
|
|
||||||
) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'Boolean':
|
|
||||||
return <Switch checked={value} onChange={onChange} />;
|
|
||||||
case 'String':
|
|
||||||
return (
|
|
||||||
<Input type="text" minLength={1} value={value} onChange={onChange} />
|
|
||||||
);
|
|
||||||
case 'Number':
|
|
||||||
return (
|
|
||||||
<div style={{ width: '100%' }}>
|
|
||||||
<Input type="number" value={value} onChange={onChange} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
// TODO(@JimmFly): add more types
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const isEqual = (a: any, b: any) => {
|
|
||||||
if (typeof a !== typeof b) return false;
|
|
||||||
if (typeof a === 'object') return JSON.stringify(a) === JSON.stringify(b);
|
|
||||||
return a === b;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const formatValue = (value: any) => {
|
|
||||||
if (typeof value === 'object') return JSON.stringify(value);
|
|
||||||
return value.toString();
|
|
||||||
};
|
|
||||||
|
|
||||||
export const formatValueForInput = (value: any, type: RuntimeConfigType) => {
|
|
||||||
let newValue = null;
|
|
||||||
switch (type) {
|
|
||||||
case 'Boolean':
|
|
||||||
newValue = !!value;
|
|
||||||
break;
|
|
||||||
case 'String':
|
|
||||||
newValue = value;
|
|
||||||
break;
|
|
||||||
case 'Number':
|
|
||||||
newValue = Number(value);
|
|
||||||
break;
|
|
||||||
case 'Array':
|
|
||||||
newValue = value.split(',');
|
|
||||||
break;
|
|
||||||
case 'Object':
|
|
||||||
newValue = JSON.parse(value);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return newValue;
|
|
||||||
};
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import { cssVar } from '@toeverything/theme';
|
|
||||||
import { style } from '@vanilla-extract/css';
|
|
||||||
export const root = style({
|
|
||||||
height: '100vh',
|
|
||||||
width: '100vw',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
fontSize: cssVar('fontBase'),
|
|
||||||
position: 'relative',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const container = style({
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const sideBar = style({
|
|
||||||
width: '300px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
borderRight: `1px solid ${cssVar('borderColor')}`,
|
|
||||||
padding: '12px 8px',
|
|
||||||
height: '100%',
|
|
||||||
background: cssVar('backgroundPrimaryColor'),
|
|
||||||
zIndex: 3,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const scrollArea = style({
|
|
||||||
padding: '24px 0 160px',
|
|
||||||
background: cssVar('backgroundPrimaryColor'),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const main = style({
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
flexDirection: 'column',
|
|
||||||
overflow: 'auto',
|
|
||||||
alignItems: 'center',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const moduleContainer = style({
|
|
||||||
width: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
padding: '16px',
|
|
||||||
maxWidth: '960px',
|
|
||||||
margin: 'auto',
|
|
||||||
gap: 16,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const module = style({
|
|
||||||
fontSize: cssVar('fontH5'),
|
|
||||||
fontWeight: 'bold',
|
|
||||||
marginBottom: 8,
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
padding: '16px 0',
|
|
||||||
borderBottom: `0.5px solid ${cssVar('borderColor')}`,
|
|
||||||
});
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
import { Scrollable } from '@affine/component';
|
|
||||||
import type { RuntimeConfigType } from '@affine/graphql';
|
|
||||||
import { FeatureType, getUserFeaturesQuery } from '@affine/graphql';
|
|
||||||
import { useCallback, useMemo, useState } from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
AdminPanelHeader,
|
|
||||||
CollapsibleItem,
|
|
||||||
formatValue,
|
|
||||||
formatValueForInput,
|
|
||||||
isEqual,
|
|
||||||
type ModifiedValues,
|
|
||||||
renderInput,
|
|
||||||
RuntimeSettingRow,
|
|
||||||
useGetServerRuntimeConfig,
|
|
||||||
} from '../components/admin-panel';
|
|
||||||
import { useUpdateServerRuntimeConfigs } from '../components/admin-panel/use-update-server-runtime-config';
|
|
||||||
import { useNavigateHelper } from '../hooks/use-navigate-helper';
|
|
||||||
import { useQuery } from '../hooks/use-query';
|
|
||||||
import * as styles from './admin-panel.css';
|
|
||||||
|
|
||||||
export const AdminPanel = () => {
|
|
||||||
const { serverRuntimeConfig, moduleList, configGroup } =
|
|
||||||
useGetServerRuntimeConfig();
|
|
||||||
|
|
||||||
const [currentModule, setCurrentModule] = useState<string>(
|
|
||||||
moduleList[0].moduleName
|
|
||||||
);
|
|
||||||
|
|
||||||
const { trigger } = useUpdateServerRuntimeConfigs();
|
|
||||||
|
|
||||||
const [configValues, setConfigValues] = useState(
|
|
||||||
serverRuntimeConfig.reduce(
|
|
||||||
(acc, config) => {
|
|
||||||
acc[config.id] = config.value;
|
|
||||||
return acc;
|
|
||||||
},
|
|
||||||
{} as Record<string, any>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleInputChange = useCallback(
|
|
||||||
(key: string, value: any, type: RuntimeConfigType) => {
|
|
||||||
const newValue = formatValueForInput(value, type);
|
|
||||||
setConfigValues(prevValues => ({
|
|
||||||
...prevValues,
|
|
||||||
[key]: newValue,
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const modifiedValues: ModifiedValues[] = useMemo(() => {
|
|
||||||
return serverRuntimeConfig
|
|
||||||
.filter(config => !isEqual(config.value, configValues[config.id]))
|
|
||||||
.map(config => ({
|
|
||||||
id: config.id,
|
|
||||||
key: config.key,
|
|
||||||
expiredValue: config.value,
|
|
||||||
newValue: configValues[config.id],
|
|
||||||
}));
|
|
||||||
}, [configValues, serverRuntimeConfig]);
|
|
||||||
|
|
||||||
const handleSave = useCallback(() => {
|
|
||||||
// post value example: { "key1": "newValue1","key2": "newValue2"}
|
|
||||||
const updates: Record<string, any> = {};
|
|
||||||
|
|
||||||
modifiedValues.forEach(item => {
|
|
||||||
if (item.id && item.newValue !== undefined) {
|
|
||||||
updates[item.id] = item.newValue;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
trigger({ updates });
|
|
||||||
}, [modifiedValues, trigger]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.root}>
|
|
||||||
<div className={styles.container}>
|
|
||||||
<div className={styles.sideBar}>
|
|
||||||
{moduleList.map(module => (
|
|
||||||
<CollapsibleItem
|
|
||||||
key={module.moduleName}
|
|
||||||
items={module.keys}
|
|
||||||
title={module.moduleName}
|
|
||||||
currentModule={currentModule}
|
|
||||||
changeModule={setCurrentModule}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className={styles.main}>
|
|
||||||
<AdminPanelHeader
|
|
||||||
modifiedValues={modifiedValues}
|
|
||||||
onConfirm={handleSave}
|
|
||||||
/>
|
|
||||||
<Scrollable.Root>
|
|
||||||
<Scrollable.Viewport>
|
|
||||||
<div className={styles.scrollArea}>
|
|
||||||
{configGroup
|
|
||||||
.filter(group => group.moduleName === currentModule)
|
|
||||||
.map(group => {
|
|
||||||
const { moduleName, configs } = group;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
id={moduleName}
|
|
||||||
className={styles.moduleContainer}
|
|
||||||
key={moduleName}
|
|
||||||
>
|
|
||||||
<div className={styles.module}>{moduleName}</div>
|
|
||||||
{configs?.map(config => {
|
|
||||||
const { id, type, description, updatedAt } = config;
|
|
||||||
const isValueEqual = isEqual(
|
|
||||||
config.value,
|
|
||||||
configValues[id]
|
|
||||||
);
|
|
||||||
const formatServerValue = formatValue(config.value);
|
|
||||||
const formatCurrentValue = formatValue(
|
|
||||||
configValues[id]
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<RuntimeSettingRow
|
|
||||||
key={id}
|
|
||||||
id={id}
|
|
||||||
description={description}
|
|
||||||
lastUpdatedTime={updatedAt}
|
|
||||||
operation={renderInput(
|
|
||||||
type,
|
|
||||||
configValues[id],
|
|
||||||
value => handleInputChange(id, value, type)
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div style={{ opacity: isValueEqual ? 0 : 1 }}>
|
|
||||||
{formatServerValue} => {formatCurrentValue}
|
|
||||||
</div>
|
|
||||||
</RuntimeSettingRow>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</Scrollable.Viewport>
|
|
||||||
<Scrollable.Scrollbar />
|
|
||||||
</Scrollable.Root>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Component = () => {
|
|
||||||
const { data } = useQuery({
|
|
||||||
query: getUserFeaturesQuery,
|
|
||||||
});
|
|
||||||
const { jumpTo404 } = useNavigateHelper();
|
|
||||||
const userFeatures = data?.currentUser?.features;
|
|
||||||
if (!userFeatures || !userFeatures.includes(FeatureType.Admin)) {
|
|
||||||
jumpTo404();
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <AdminPanel />;
|
|
||||||
};
|
|
||||||
@@ -50,10 +50,6 @@ export const topLevelRoutes = [
|
|||||||
path: '/404',
|
path: '/404',
|
||||||
lazy: () => import('./pages/404'),
|
lazy: () => import('./pages/404'),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/admin-panel',
|
|
||||||
lazy: () => import('./pages/admin-panel'),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/expired',
|
path: '/expired',
|
||||||
lazy: () => import('./pages/expired'),
|
lazy: () => import('./pages/expired'),
|
||||||
|
|||||||
Reference in New Issue
Block a user