fix(dbprovider): dataflow button issue

frontend/providers/dbprovider/public/locales/en/common.json

@@ -318,8 +318,8 @@
   "lost_file": "File Missing",
   "manage_all_resources": "Manage",
   "manage_data": "Manage Data",
-  "manage_data_disabled_not_running": "Run database first",
-  "manage_data_disabled_unsupported_type": "Type not supported",
+  "manage_data_disabled_not_running": "Database is not running",
+  "manage_data_disabled_unsupported_type": "Database is not supported",
   "manual_backup": "Manual Backup",
   "manual_backup_tip": "Tip: Backup during off-peak hours. Avoid DDL operations to prevent locking. Be patient if data size is large. Backup starts 1 min after confirmation.",
   "max_replicas": "Max Replicas: ",

frontend/providers/dbprovider/public/locales/zh/common.json

@@ -303,8 +303,8 @@
   "lost_file": "缺少文件",
   "manage_all_resources": "管理所有资源",
   "manage_data": "数据管理",
-  "manage_data_disabled_not_running": "需先运行数据库",
-  "manage_data_disabled_unsupported_type": "不支持该类型",
+  "manage_data_disabled_not_running": "数据库未运行",
+  "manage_data_disabled_unsupported_type": "不支持该数据库",
   "manual_backup": "手动备份",
   "manual_backup_tip": "建议在业务低峰期备份实例。备份期间，请勿执行DDL操作，避免锁表导致备份失败。若数据量较大，花费的时问可能较长，请耐心等待。点击 [开始备份] 后，将在1分钟后开始备份。",
   "max_replicas": "实例数最大为: ",

frontend/providers/dbprovider/src/pages/db/detail/components/Header.tsx

@@ -5,7 +5,18 @@ import { defaultDBDetail } from '@/constants/db';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useDBOperation } from '@/hooks/useDBOperation';
 import type { DBDetailType } from '@/types/db';
-import { Box, Button, Flex, Skeleton, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Skeleton,
+  useDisclosure
+} from '@chakra-ui/react';
 import { useMessage } from '@sealos/ui';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
@@ -101,6 +112,48 @@ const Header = ({
     }
   }, [toast, t, db.dbName, db.dbType]);
 
+  const getManageDataDisabledReason = useCallback(() => {
+    if (!DATAFLOW_SUPPORTED_TYPES.has(db.dbType)) {
+      return t('manage_data_disabled_unsupported_type');
+    }
+    if (db.status.value !== 'Running') {
+      return t('manage_data_disabled_not_running');
+    }
+    return '';
+  }, [db.dbType, db.status.value, t]);
+
+  const manageDataDisabledReason = getManageDataDisabledReason();
+  const manageDataButton = (
+    <Button
+      display={'flex'}
+      height={'40px'}
+      padding={'8px 16px'}
+      justifyContent={'center'}
+      alignItems={'center'}
+      gap={'8px'}
+      borderRadius={'8px'}
+      border={'1px solid #E4E4E7'}
+      background={'#FFF'}
+      boxShadow={'0 1px 2px 0 rgba(0, 0, 0, 0.05)'}
+      isLoading={loading}
+      isDisabled={!!manageDataDisabledReason}
+      onClick={handleManageData}
+      leftIcon={<Settings size={16} color="#71717A" />}
+      color={'#18181B'}
+      fontFamily={'Geist, sans-serif'}
+      fontSize={'14px'}
+      fontWeight={'500'}
+      lineHeight={'20px'}
+      _hover={{
+        color: '#FFF',
+        bg: '#000',
+        '& svg': { color: '#FFF' }
+      }}
+    >
+      {t('manage_data')}
+    </Button>
+  );
+
   return (
     <Flex h={'60px'} alignItems={'center'}>
       {isLoading ? (
@@ -292,36 +345,32 @@ const Header = ({
             )}
           </Flex>
 
-          {config.dataflowEnabled && DATAFLOW_SUPPORTED_TYPES.has(db.dbType) && (
-            <Button
-              display={'flex'}
-              height={'40px'}
-              padding={'8px 16px'}
-              justifyContent={'center'}
-              alignItems={'center'}
-              gap={'8px'}
-              borderRadius={'8px'}
-              border={'1px solid #E4E4E7'}
-              background={'#FFF'}
-              boxShadow={'0 1px 2px 0 rgba(0, 0, 0, 0.05)'}
-              isLoading={loading}
-              isDisabled={db.status.value !== 'Running'}
-              onClick={handleManageData}
-              leftIcon={<Settings size={16} color="#71717A" />}
-              color={'#18181B'}
-              fontFamily={'Geist, sans-serif'}
-              fontSize={'14px'}
-              fontWeight={'500'}
-              lineHeight={'20px'}
-              _hover={{
-                color: '#FFF',
-                bg: '#000',
-                '& svg': { color: '#FFF' }
-              }}
-            >
-              {t('manage_data')}
-            </Button>
-          )}
+          {config.dataflowEnabled &&
+            (manageDataDisabledReason ? (
+              <Popover trigger="hover" placement="top" openDelay={200}>
+                <PopoverTrigger>
+                  <Box as="span" display="inline-flex">
+                    {manageDataButton}
+                  </Box>
+                </PopoverTrigger>
+                <PopoverContent
+                  w={'fit-content'}
+                  maxW={'240px'}
+                  px={'12px'}
+                  py={'8px'}
+                  borderRadius={'6px'}
+                  borderColor={'grayModern.200'}
+                  boxShadow={'0px 8px 24px rgba(17, 24, 36, 0.12)'}
+                  color={'grayModern.700'}
+                  fontSize={'12px'}
+                >
+                  <PopoverArrow />
+                  <PopoverBody p={0}>{manageDataDisabledReason}</PopoverBody>
+                </PopoverContent>
+              </Popover>
+            ) : (
+              manageDataButton
+            ))}
         </Flex>
       )}
 

frontend/providers/dbprovider/src/pages/dbs/components/dbList.tsx

@@ -413,7 +413,7 @@ const DBList = ({
           );
 
           return (
-            <Flex key={row.id} justifyContent={'flex-end'}>
+            <Flex key={row.id} justifyContent={'flex-start'}>
               {config.dataflowEnabled &&
                 (manageDataDisabledReason ? (
                   <Popover trigger="hover" placement="top" openDelay={200}>