fix: not exists data sourec (#3608)

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/BreadcumbTitle.tsx

@@ -1,7 +1,7 @@
 import { RightOutlined } from '@ant-design/icons';
 import { useApp, useCompile, useDataSourceManager } from '@nocobase/client';
 import { Breadcrumb, Space, Tag } from 'antd';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { DataSourceContext } from '../DatabaseConnectionProvider';
 import { NAMESPACE, lang } from '../locale';
@@ -14,14 +14,15 @@ export const BreadcumbTitle = () => {
   const dm = useDataSourceManager();
   const { displayName } = dm.getDataSource(name) || {};
   const { dataSource } = useContext(DataSourceContext);
-  const { status } = dataSource || dm.getDataSource(name);
+  const dataSourceValue = useMemo(() => dataSource || dm.getDataSource(name), [dataSource, name]);
+  const items = useMemo(() => {
+    const status = dataSourceValue?.status;
     const option = statusEnum.find((v) => v.value === status);
-  return (
-    <Breadcrumb
-      separator={<RightOutlined />}
-      items={[
+    const res = [
       { title: <Link to={app.pluginSettingsManager.getRoutePath(NAMESPACE)}>{lang('Data source manager')}</Link> },
-        {
+    ];
+    if (dataSourceValue) {
+      res.push({
         title: (
           <Space>
             <span>{compile(displayName)}</span>
@@ -32,8 +33,11 @@ export const BreadcumbTitle = () => {
             )}
           </Space>
         ),
-        },
-      ]}
-    />
-  );
+      });
+    }
+
+    return res;
+  }, [dataSourceValue]);
+
+  return <Breadcrumb separator={<RightOutlined />} items={items} />;
 };

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/ViewDatabaseConnectionAction.tsx

@@ -13,14 +13,15 @@ export const ViewDatabaseConnectionAction = () => {
   return (
     <div
       className={
-        !record.enabled &&
-        css`
+        !record.enabled
+          ? css`
               .ant-btn-link {
                 &:hover {
                   color: rgba(0, 0, 0, 0.25) !important;
                 }
               }
             `
+          : undefined
       }
     >
       <Button