[improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. (#404)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceBasicForm.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Form, Input, Spin, Select, message } from 'antd';
 import type { FormInstance } from 'antd/lib/form';
 import { getDbNames, getTables } from '../../service';
+import SqlEditor from '@/components/SqlEditor';
 import { ISemantic } from '../../data';
 
 const FormItem = Form.Item;
@@ -123,6 +124,13 @@ const DataSourceBasicForm: React.FC<Props> = ({ isEdit, databaseConfigList, mode
       <FormItem name="description" label="数据源描述">
         <TextArea placeholder="请输入数据源描述" />
       </FormItem>
+      {/* <FormItem
+        name="filterSql"
+        label="过滤SQL"
+        tooltip="主要用于词典导入场景, 对维度值进行过滤 格式: field1 = 'xxx' and field2 = 'yyy'"
+      >
+        <SqlEditor height={'150px'} />
+      </FormItem> */}
     </Spin>
   );
 };

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx

@@ -24,7 +24,7 @@ export type CreateFormProps = {
   basicInfoFormMode?: 'normal' | 'fast';
   onDataBaseTableChange?: (tableName: string) => void;
   onDataSourceBtnClick?: () => void;
-  // modalSolt: ReactNode;
+  onOpenDataSourceEdit?: () => void;
 };
 const { Step } = Steps;
 
@@ -45,6 +45,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   databaseId,
   basicInfoFormMode,
   onDataSourceBtnClick,
+  onOpenDataSourceEdit,
   children,
 }) => {
   const isEdit = !!dataSourceItem?.id;
@@ -59,7 +60,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   const updateFormVal = (val: any) => {
     formValRef.current = val;
   };
-
+  const [sqlFilter, setSqlFilter] = useState<string>('');
   useEffect(() => {
     const hasEmpty = fields.some((item) => {
       const { name, isCreateDimension, isCreateMetric } = item;
@@ -170,6 +171,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
         queryType: basicInfoFormMode === 'fast' ? 'table_query' : 'sql_query',
         tableQuery: dbName && tableName ? `${dbName}.${tableName}` : '',
         modelId: isEdit ? dataSourceItem.modelId : modelId,
+        filterSql: sqlFilter,
       };
       const queryDatasource = isEdit ? updateDatasource : createDatasource;
       const { code, msg, data } = await queryDatasource(queryParams);
@@ -221,7 +223,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   const initData = async () => {
     const { queryType, tableQuery } = dataSourceItem.datasourceDetail;
     let tableQueryInitValue = {};
-    let columns = fieldColumns;
+    let columns = fieldColumns || [];
     if (queryType === 'table_query') {
       const tableQueryString = tableQuery || '';
       const [dbName, tableName] = tableQueryString.split('.');
@@ -235,7 +237,8 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   };
 
   const formatterInitData = (columns: any[], extendParams: Record<string, any> = {}) => {
-    const { id, name, bizName, description, datasourceDetail, databaseId } = dataSourceItem as any;
+    const { id, name, bizName, description, datasourceDetail, databaseId, filterSql } =
+      dataSourceItem as any;
     const { dimensions, identifiers, measures } = datasourceDetail;
     const initValue = {
       id,
@@ -243,6 +246,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       bizName,
       description,
       databaseId,
+      filterSql,
       ...extendParams,
       // ...tableQueryInitValue,
     };
@@ -250,6 +254,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       ...formValRef.current,
       ...initValue,
     };
+    setSqlFilter(filterSql);
     updateFormVal(editInitFormVal);
     form.setFieldsValue(initValue);
     const formatFields = [
@@ -261,10 +266,24 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   };
 
   useEffect(() => {
-    if (isEdit) {
-      initData();
-    } else {
-      initFields([], fieldColumns);
+    const { queryType } = dataSourceItem?.datasourceDetail || {};
+    if (queryType === 'table_query') {
+      if (isEdit) {
+        initData();
+      } else {
+        initFields([], fieldColumns);
+      }
+    }
+  }, [dataSourceItem]);
+
+  useEffect(() => {
+    const { queryType } = dataSourceItem?.datasourceDetail || {};
+    if (queryType !== 'table_query') {
+      if (isEdit) {
+        initData();
+      } else {
+        initFields([], fieldColumns);
+      }
     }
   }, [dataSourceItem, fieldColumns]);
 
@@ -306,7 +325,14 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
     return (
       <>
         <div style={{ display: currentStep === 1 ? 'block' : 'none' }}>
-          <FieldForm fields={fields} onFieldChange={handleFieldChange} />
+          <FieldForm
+            fields={fields}
+            onFieldChange={handleFieldChange}
+            onSqlChange={(sql) => {
+              setSqlFilter(sql);
+            }}
+            sql={sqlFilter}
+          />
         </div>
         <div style={{ display: currentStep !== 1 ? 'block' : 'none' }}>
           <DataSourceBasicForm
@@ -357,6 +383,9 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
           type="primary"
           onClick={() => {
             handleNext();
+            if (!isEdit && Array.isArray(fields) && fields.length === 0) {
+              onOpenDataSourceEdit?.();
+            }
           }}
         >
           下一步
@@ -381,7 +410,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
     <Modal
       forceRender
       width={1300}
-      bodyStyle={{ padding: '32px 40px 48px' }}
+      styles={{ padding: '32px 40px 48px' }}
       destroyOnClose
       title={`${isEdit ? '编辑' : '新建'}数据源`}
       maskClosable={false}

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Table, Select, Checkbox, Input, Alert, Space, Tooltip } from 'antd';
+import { Table, Select, Checkbox, Input, Alert, Space, Tooltip, Form } from 'antd';
 import TableTitleTooltips from '../../components/TableTitleTooltips';
 import { isUndefined } from 'lodash';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import Marquee from 'react-fast-marquee';
+import SqlEditor from '@/components/SqlEditor';
 import {
   TYPE_OPTIONS,
   DATE_FORMATTER,
@@ -24,7 +24,11 @@ type FieldItem = {
   timeGranularity?: string;
 };
 
+const FormItem = Form.Item;
+
 type Props = {
+  onSqlChange: (sql: string) => void;
+  sql: string;
   fields: FieldItem[];
   onFieldChange: (fieldName: string, data: Partial<FieldItem>) => void;
 };
@@ -41,7 +45,7 @@ const getCreateFieldName = (type: EnumDataSourceType) => {
   // const editState = !isUndefined(record[isCreateName]) ? !!record[isCreateName] : true;
 };
 
-const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
+const FieldForm: React.FC<Props> = ({ fields, sql, onFieldChange, onSqlChange }) => {
   const handleFieldChange = (record: FieldItem, fieldName: string, value: any) => {
     onFieldChange(record.bizName, {
       ...record,
@@ -271,6 +275,14 @@ const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
         pagination={false}
         scroll={{ y: 500 }}
       />
+      <FormItem
+        style={{ marginTop: 40, marginBottom: 60 }}
+        name="filterSql"
+        label={<span style={{ fontSize: 14 }}>过滤SQL</span>}
+        tooltip="主要用于词典导入场景, 对维度值进行过滤 格式: field1 = 'xxx' and field2 = 'yyy'"
+      >
+        <SqlEditor height={'150px'} value={sql} onChange={onSqlChange} />
+      </FormItem>
     </>
   );
 };