fix: keep color picker popup above dropdown (#2983)

packages/base/src/hooks/useDbService/index.tsx

@@ -2,10 +2,62 @@ import React, { useCallback, useMemo } from 'react';
 import { useBoolean } from 'ahooks';
 import { Select } from 'antd';
 import { useDbServiceDriver } from '@actiontech/shared/lib/features';
-import { IListDBServiceTipItem } from '@actiontech/shared/lib/api/base/service/common';
+import {
+  IListDBServiceTipItem,
+  IListDBServiceV2
+} from '@actiontech/shared/lib/api/base/service/common';
 import { DatabaseTypeLogo, ResponseCode } from '@actiontech/dms-kit';
+import { EnvironmentTag } from '@actiontech/shared';
 import DBService from '@actiontech/shared/lib/api/base/service/DBService';
 import { IListDBServiceTipsParams } from '@actiontech/shared/lib/api/base/service/DBService/index.d';
+
+const getDbServiceDisplayLabel = (dbService: IListDBServiceTipItem) => {
+  return !!dbService.host && !!dbService.port
+    ? `${dbService.name} (${dbService.host}:${dbService.port})`
+    : dbService.name;
+};
+
+const renderDbServiceOptionLabel = (dbService: IListDBServiceTipItem) => {
+  return (
+    <span
+      className="db-service-option-label"
+      style={{ display: 'inline-flex', alignItems: 'center' }}
+    >
+      <EnvironmentTag
+        name={dbService.environment_tag?.name}
+        color={dbService.environment_tag?.color}
+        size="small"
+        style={{ marginRight: 6 }}
+      />
+      <span>{getDbServiceDisplayLabel(dbService)}</span>
+    </span>
+  );
+};
+
+const mergeDbServiceEnvironmentTag = (
+  tips: IListDBServiceTipItem[],
+  dbServices: IListDBServiceV2[]
+) => {
+  if (dbServices.length === 0) {
+    return tips;
+  }
+
+  return tips.map((tip) => {
+    const dbService = dbServices.find(
+      (item) => item.uid === tip.id || item.name === tip.name
+    );
+
+    if (!dbService?.environment_tag) {
+      return tip;
+    }
+
+    return {
+      ...tip,
+      environment_tag: dbService.environment_tag
+    };
+  });
+};
+
 const useDbService = () => {
   const [dbServiceList, setDbServiceList] = React.useState<
     IListDBServiceTipItem[]
@@ -16,9 +68,28 @@ const useDbService = () => {
     (params: IListDBServiceTipsParams) => {
       setTrue();
       DBService.ListDBServiceTips(params)
-        .then((res) => {
+        .then(async (res) => {
           if (res.data.code === ResponseCode.SUCCESS) {
-            setDbServiceList(res.data?.data ?? []);
+            const tips = res.data?.data ?? [];
+            if (!params.project_uid || tips.length === 0) {
+              setDbServiceList(tips);
+              return;
+            }
+
+            const dbServicesRes = await DBService.ListDBServicesV2({
+              project_uid: params.project_uid,
+              page_index: 1,
+              page_size: 999
+            });
+
+            setDbServiceList(
+              mergeDbServiceEnvironmentTag(
+                tips,
+                dbServicesRes.data.code === ResponseCode.SUCCESS
+                  ? dbServicesRes.data?.data ?? []
+                  : []
+              )
+            );
           } else {
             setDbServiceList([]);
           }
@@ -54,17 +125,14 @@ const useDbService = () => {
               .map((db) => {
                 const id = db.id ?? '';
                 const name = db.name ?? '';
-                const label =
-                  !!db.host && !!db.port
-                    ? `${db.name} (${db.host}:${db.port})`
-                    : db.name;
+                const label = getDbServiceDisplayLabel(db);
                 return (
                   <Select.Option
                     key={db.id}
                     value={valueType === 'id' ? id : name}
                     label={label}
                   >
-                    {label}
+                    {renderDbServiceOptionLabel(db)}
                   </Select.Option>
                 );
               })}
@@ -97,10 +165,8 @@ const useDbService = () => {
           .filter((db) => db.db_type === type)
           .map((db) => ({
             value: valueType === 'id' ? db?.id : db?.name,
-            label:
-              !!db.host && !!db.port
-                ? `${db.name} (${db.host}:${db.port})`
-                : db.name
+            text: getDbServiceDisplayLabel(db),
+            label: renderDbServiceOptionLabel(db)
           }))
       }));
     },

packages/base/src/page/DataExportManagement/Create/components/CreateTask/ExportSourceForm/ExportSourceFormItem.tsx

@@ -169,6 +169,8 @@ const ExportSourceFormItem: React.FC<
       >
         <BasicSelect
           onChange={dbServiceChangeHandle}
+          optionFilterProp="label"
+          optionLabelProp="children"
           placeholder={t('common.form.placeholder.select', {
             name: t('dmsDataExport.create.form.source.dbService')
           })}

packages/base/src/page/DataSource/components/Form/EnvironmentField/index.tsx

@@ -1,5 +1,8 @@
 import { EditableSelect } from '@actiontech/dms-kit';
-import { EditableSelectProps, EditableSelectOption } from '@actiontech/dms-kit';
+import type {
+  EditableSelectProps,
+  EditableSelectOption
+} from '@actiontech/dms-kit/es/components/EditableSelect/EditableSelect.types';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DmsApi } from '@actiontech/shared/lib/api';
@@ -8,6 +11,16 @@ import { useRequest } from 'ahooks';
 import { ResponseCode } from '@actiontech/dms-kit';
 import { IListDBServiceV2 } from '@actiontech/shared/lib/api/base/service/common';
 import { useBoolean } from 'ahooks';
+
+const ENVIRONMENT_TAG_PRESET_COLORS = [
+  '#F5222D',
+  '#FA8C16',
+  '#52C41A',
+  '#1677FF',
+  '#722ED1',
+  '#8C8C8C'
+];
+
 interface EnvironmentFieldProps extends Omit<EditableSelectProps, 'options'> {
   projectID?: string;
 }
@@ -36,7 +49,8 @@ const EnvironmentField: React.FC<EnvironmentFieldProps> = ({
         if (res.data.code === ResponseCode.SUCCESS) {
           return res.data.data?.map((item) => ({
             value: item.uid || '',
-            label: item.name || ''
+            label: item.name || '',
+            color: item.color || undefined
           }));
         }
       }),
@@ -45,10 +59,11 @@ const EnvironmentField: React.FC<EnvironmentFieldProps> = ({
       ready: !!projectID
     }
   );
-  const onAdd = (v: string) => {
+  const onAdd = (v: string, color?: string) => {
     startOperationLoading();
     DmsApi.ProjectService.CreateEnvironmentTag({
       environment_name: v,
+      color: color ?? '',
       project_uid: projectID ?? ''
     })
       .then((res) => {
@@ -105,6 +120,7 @@ const EnvironmentField: React.FC<EnvironmentFieldProps> = ({
     DmsApi.ProjectService.UpdateEnvironmentTag({
       environment_tag_uid: item.value.toString(),
       environment_name: item.label,
+      color: item.color ?? '',
       project_uid: projectID ?? ''
     })
       .then((res) => {
@@ -134,6 +150,8 @@ const EnvironmentField: React.FC<EnvironmentFieldProps> = ({
         onDelete={onDelete}
         onUpdate={onUpdate}
         onAdd={onAdd}
+        colorable
+        presetColors={ENVIRONMENT_TAG_PRESET_COLORS}
         loading={operationLoading || loading}
         errorMessage={
           boundServices.length > 0

packages/base/src/page/DataSource/components/List/columns.tsx

@@ -4,8 +4,8 @@ import { t } from '../../../../locale';
 import { IListDBServiceV2 } from '@actiontech/shared/lib/api/base/service/common';
 import { ActiontechTableColumn } from '@actiontech/dms-kit/es/components/ActiontechTable';
 import { IListDBServicesV2Params } from '@actiontech/shared/lib/api/base/service/DBService/index.d';
-import { DatabaseTypeLogo, BasicTag } from '@actiontech/dms-kit';
-import { BasicTypographyEllipsis } from '@actiontech/shared';
+import { DatabaseTypeLogo } from '@actiontech/dms-kit';
+import { BasicTypographyEllipsis, EnvironmentTag } from '@actiontech/shared';
 import ScanTypeTagsCell from 'sqle/src/page/SqlManagementConf/List/ScanTypeTagsCell';
 import ConnectionResultColumn from './ConnectionResultColumn';
 
@@ -113,7 +113,9 @@ export const dataSourceColumns = (
         if (!environment?.name) {
           return '-';
         }
-        return <BasicTag>{environment?.name}</BasicTag>;
+        return (
+          <EnvironmentTag name={environment?.name} color={environment?.color} />
+        );
       },
       filterCustomType: 'select',
       filterKey: 'filter_by_environment_tag_uid'

packages/base/src/page/GlobalDataSource/List/columns.tsx

@@ -7,8 +7,8 @@ import {
   PageInfoWithoutIndexAndSize
 } from '@actiontech/dms-kit/es/components/ActiontechTable';
 import { IListGlobalDBServicesV2Params } from '@actiontech/shared/lib/api/base/service/DBService/index.d';
-import { DatabaseTypeLogo, BasicTag } from '@actiontech/dms-kit';
-import { BasicTypographyEllipsis } from '@actiontech/shared';
+import { DatabaseTypeLogo } from '@actiontech/dms-kit';
+import { BasicTypographyEllipsis, EnvironmentTag } from '@actiontech/shared';
 import ConnectionResultColumn from '../../DataSource/components/List/ConnectionResultColumn';
 import { ListDBServiceV2LastConnectionTestStatusEnum } from '@actiontech/shared/lib/api/base/service/common.enum';
 
@@ -42,7 +42,9 @@ export const GlobalDataSourceColumns = (
         if (!environment?.name) {
           return '-';
         }
-        return <BasicTag>{environment?.name}</BasicTag>;
+        return (
+          <EnvironmentTag name={environment?.name} color={environment?.color} />
+        );
       },
       filterCustomType: 'select',
       filterKey: 'filter_by_environment_tag_uid'

packages/base/src/page/Nav/SideMenu/ProjectSelector/index.tsx

@@ -125,7 +125,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
       }}
       allowClear={false}
       dropdownRender={renderDropdown}
-      onDropdownVisibleChange={(visible) => {
+      onDropdownVisibleChange={(visible: boolean) => {
         setOpen(visible);
         if (!visible) {
           setSearchValue('');

packages/base/src/page/Project/Drawer/ProjectForm/BusinessField/index.tsx

@@ -1,5 +1,8 @@
 import { EditableSelect } from '@actiontech/dms-kit';
-import { EditableSelectValue, EditableSelectOption } from '@actiontech/dms-kit';
+import type {
+  EditableSelectValue,
+  EditableSelectOption
+} from '@actiontech/dms-kit/es/components/EditableSelect/EditableSelect.types';
 import { useTranslation } from 'react-i18next';
 import { DmsApi } from '@actiontech/shared/lib/api';
 import { useRequest } from 'ahooks';

packages/base/src/page/ResourceOverview/components/ResourceDetail/columns.tsx

@@ -6,6 +6,7 @@ import { DatabaseTypeLogo, BasicToolTip } from '@actiontech/dms-kit';
 import { TableColumnWithIconStyleWrapper } from '@actiontech/dms-kit';
 import { FlagFilled, DatabaseSchemaFilled } from '@actiontech/icons';
 import { ResourceOverviewTheme } from '../../../../theme/type';
+import { EnvironmentTag } from '@actiontech/shared';
 export const ResourceDetailListColumns = (
   getLogoUrlByDbType: (dbType: string) => string,
   theme: ResourceOverviewTheme
@@ -66,7 +67,16 @@ export const ResourceDetailListColumns = (
       dataIndex: 'environment_tag',
       title: t('resourceOverview.resourceList.environment'),
       render: (environmentTag) => {
-        return environmentTag?.name ?? '-';
+        if (!environmentTag?.name) {
+          return '-';
+        }
+
+        return (
+          <EnvironmentTag
+            name={environmentTag.name}
+            color={environmentTag.color}
+          />
+        );
       },
       filterCustomType: 'select',
       filterKey: 'filter_by_environment_tag_uid'

packages/base/src/scripts/version.ts

@@ -1 +1 @@
-export const UI_VERSION = 'sync/data-masking   417b194dd';
+export const UI_VERSION = 'main   6fdc83ce';

packages/dms-kit/src/components/CustomSelect/CustomSelect.tsx

@@ -41,6 +41,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
         typeof option.label === 'string'
           ? option.label
           : option.text ?? option.value;
+      const displayLabel =
+        typeof option.label === 'string' ? showLabel : option.label;
 
       if (
         !showLabel.toLowerCase().includes(innerSearchValue?.toLowerCase() ?? '')
@@ -52,7 +54,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
         optionLabel: !!props.mode ? (
           showLabel
         ) : (
-          <CustomOptionLabel prefix={valuePrefix} label={showLabel} />
+          <CustomOptionLabel prefix={valuePrefix} label={displayLabel} />
         )
       };
     };