From ae45318e5baafea7ccd05d391ea4cb779db3c7be Mon Sep 17 00:00:00 2001
From: Zzm0809 <934230207@qq.com>
Date: Sat, 7 Sep 2024 23:30:30 +0800
Subject: [PATCH] perf: Introduction and layout of configuration items in the
 optimization configuration center (#3789)

Signed-off-by: Zzm0809 <934230207@qq.com>
Co-authored-by: Zzm0809 <Zzm0809@users.noreply.github.com>
---
 .../src/components/Typography/MoreInfo.tsx    | 61 +++++++++++++++++++
 .../SettingOverView/GeneralConfig.tsx         |  5 +-
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 dinky-web/src/components/Typography/MoreInfo.tsx

diff --git a/dinky-web/src/components/Typography/MoreInfo.tsx b/dinky-web/src/components/Typography/MoreInfo.tsx
new file mode 100644
index 0000000000..f0ef18c6eb
--- /dev/null
+++ b/dinky-web/src/components/Typography/MoreInfo.tsx
@@ -0,0 +1,61 @@
+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import { Flex, Typography } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+const { Text } = Typography;
+
+type MoreInfoProps = {
+  maxRows: number;
+  children: string;
+  type?: 'secondary' | 'success' | 'warning' | 'danger';
+};
+
+const MoreInfo: React.FC<MoreInfoProps> = (props) => {
+  const { maxRows, children, type = 'secondary' } = props;
+
+  const [expanded, setExpanded] = useState(false);
+  const [rows, setRows] = useState(maxRows);
+
+  useEffect(() => {
+    if (expanded) {
+      setRows(10);
+    }
+  }, [expanded]);
+
+  return (
+    <Flex gap={16} vertical>
+      <Typography.Paragraph
+        type={type}
+        ellipsis={{
+          tooltip: children,
+          rows,
+          expandable: true,
+          expanded,
+          onExpand: (_, info) => setExpanded(info.expanded)
+        }}
+      >
+        {children}
+      </Typography.Paragraph>
+    </Flex>
+  );
+};
+
+export default MoreInfo;
diff --git a/dinky-web/src/pages/SettingCenter/GlobalSetting/SettingOverView/GeneralConfig.tsx b/dinky-web/src/pages/SettingCenter/GlobalSetting/SettingOverView/GeneralConfig.tsx
index 33bb13d1b4..478237b7eb 100644
--- a/dinky-web/src/pages/SettingCenter/GlobalSetting/SettingOverView/GeneralConfig.tsx
+++ b/dinky-web/src/pages/SettingCenter/GlobalSetting/SettingOverView/GeneralConfig.tsx
@@ -30,6 +30,7 @@ import { ProListMetas, ProListProps } from '@ant-design/pro-list';
 import { ActionType } from '@ant-design/pro-table';
 import { Descriptions, Input, Radio, RadioChangeEvent, Space, Switch } from 'antd';
 import React, { useRef } from 'react';
+import MoreInfo from '@/components/Typography/MoreInfo';
 
 type GeneralConfigProps = {
   data: BaseConfigProperties[];
@@ -127,7 +128,9 @@ const GeneralConfig: React.FC<GeneralConfigProps> = (props) => {
     },
     description: {
       editable: false,
-      render: (dom: any, entity: BaseConfigProperties) => <>{entity.note}</>
+      render: (dom: any, entity: BaseConfigProperties) => (
+        <MoreInfo maxRows={1}>{entity.note}</MoreInfo>
+      )
     },
     content: {
       dataIndex: 'value',