feat(core): adjust admin panel style (#7116)

packages/backend/server/src/fundamentals/config/runtime/service.ts

@@ -18,7 +18,13 @@ function validateConfigType<K extends keyof FlattenedAppRuntimeConfig>(
   key: K,
   value: any
 ) {
-  const want = defaultRuntimeConfig[key].type;
+  const config = defaultRuntimeConfig[key];
+
+  if (!config) {
+    throw new BadRequestException(`Unknown runtime config key '${key}'`);
+  }
+
+  const want = config.type;
   const get = runtimeConfigType(value);
   if (get !== want) {
     throw new BadRequestException(

packages/frontend/core/src/components/admin-panel/admin-panel-header.tsx

@@ -4,11 +4,9 @@ import { ArrowRightBigIcon, Logo1Icon } from '@blocksuite/icons';
 import { useCallback } from 'react';
 
 import * as styles from './index.css';
-import { formatValue } from './utils';
 
 export type ModifiedValues = {
   id: string;
-  key: string;
   expiredValue: any;
   newValue: any;
 };
@@ -46,19 +44,26 @@ export const AdminPanelHeader = ({
                 type: 'primary',
               },
               onConfirm: onConfirm,
-              children: (
-                <div className={styles.changedValues}>
-                  {modifiedValues.length > 0
-                    ? modifiedValues.map(
-                        ({ id, key, expiredValue, newValue }) => (
-                          <div key={id}>
-                            {key}: {formatValue(expiredValue)} =&gt;{' '}
-                            {formatValue(newValue)}
-                          </div>
-                        )
-                      )
-                    : 'There is no change.'}
-                </div>
+              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.'
                 ),
             });
           }}

packages/frontend/core/src/components/admin-panel/index.css.ts

@@ -104,7 +104,7 @@ export const navText = style({
 });
 
 export const settingItem = style({
-  maxWidth: '800px',
+  maxWidth: '960px',
   minHeight: '100px',
   display: 'flex',
   gap: 8,
@@ -134,7 +134,17 @@ export const settingItemTitle = style({
   fontWeight: 'bold',
   wordBreak: 'break-all',
   wordWrap: 'break-word',
-  marginBottom: 8,
+  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({
@@ -155,3 +165,15 @@ export const changedValues = style({
   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'),
+});

packages/frontend/core/src/components/admin-panel/runtime-setting-row.tsx

@@ -4,14 +4,12 @@ import * as styles from './index.css';
 
 export const RuntimeSettingRow = ({
   id,
-  title,
   description,
   lastUpdatedTime,
   operation,
   children,
 }: {
   id: string;
-  title: string;
   description: string;
   lastUpdatedTime: string;
   operation: ReactNode;
@@ -21,8 +19,10 @@ export const RuntimeSettingRow = ({
   return (
     <div id={id} className={styles.settingItem}>
       <div className={styles.LeftItem}>
-        <div className={styles.settingItemTitle}>{title}</div>
-        <div className={styles.settingItemDescription}>{description}</div>
+        <div className={styles.settingItemTitle}>{description}</div>
+        <div>
+          <code className={styles.settingItemId}>{id}</code>
+        </div>
         <div className={styles.settingItemDescription}>
           last updated at: {formatTime}
         </div>

packages/frontend/core/src/pages/admin-panel.css.ts

@@ -44,7 +44,7 @@ export const moduleContainer = style({
   display: 'flex',
   flexDirection: 'column',
   padding: '16px',
-  maxWidth: '800px',
+  maxWidth: '960px',
   margin: 'auto',
   gap: 16,
 });

packages/frontend/core/src/pages/admin-panel.tsx

@@ -107,9 +107,7 @@ export const AdminPanel = () => {
                       >
                         <div className={styles.module}>{moduleName}</div>
                         {configs?.map(config => {
-                          const { id, key, type, description, updatedAt } =
-                            config;
-                          const title = `${key} (${id})`;
+                          const { id, type, description, updatedAt } = config;
                           const isValueEqual = isEqual(
                             config.value,
                             configValues[id]
@@ -121,8 +119,7 @@ export const AdminPanel = () => {
                           return (
                             <RuntimeSettingRow
                               key={id}
-                              id={key}
-                              title={title}
+                              id={id}
                               description={description}
                               lastUpdatedTime={updatedAt}
                               operation={renderInput(