[Fix] tabs and breadcrumbs error

lowcoder-org · FalkWolsky · May 29, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025
commit 55ff3e55af6643a044111e712adbc79facb85ad7
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -34,7 +34,6 @@ import EnvironmentHeader from "./components/EnvironmentHeader";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import { getEnvironmentTagColor } from "./utils/environmentUtils";
 import ErrorComponent from './components/ErrorComponent';
-const { TabPane } = Tabs;
 
 /**
  * Environment Detail Page Component
@@ -140,6 +139,27 @@ const EnvironmentDetail: React.FC = () => {
     }
   ];
 
+  const tabItems = [
+    {
+      key: 'workspaces',
+      label: (
+        <span>
+          <AppstoreOutlined /> Workspaces
+        </span>
+      ),
+      children: <WorkspacesTab environment={environment} />
+    },
+    {
+      key: 'userGroups',
+      label: (
+        <span>
+          <UsergroupAddOutlined /> User Groups
+        </span>
+      ),
+      children: <UserGroupsTab environment={environment} />
+    }
+  ];
+
   return (
     <div
       className="environment-detail-container"
@@ -227,29 +247,8 @@ const EnvironmentDetail: React.FC = () => {
         onChange={setActiveTab}
         className="modern-tabs"
         type="line"
-      >
-        <TabPane 
-          tab={
-            <span>
-              <AppstoreOutlined /> Workspaces
-            </span>
-          } 
-          key="workspaces"
-        >
-          <WorkspacesTab environment={environment} />
-        </TabPane>
-
-        <TabPane
-          tab={
-            <span>
-              <UsergroupAddOutlined /> User Groups
-            </span>
-          }
-          key="userGroups"
-        >
-          <UserGroupsTab environment={environment} />
-        </TabPane>
-      </Tabs>
+        items={tabItems}
+      />
 
       {/* Edit Environment Modal */}
       {environment && (

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -27,15 +27,12 @@ import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import WorkspaceHeader from "./components/WorkspaceHeader";
 import ErrorComponent from "./components/ErrorComponent";
 
-const { TabPane } = Tabs;
-
 const WorkspaceDetail: React.FC = () => {
   // Use the context hooks
   const { environment } = useSingleEnvironmentContext();
   const { workspace, isLoading, error, toggleManagedStatus } = useWorkspaceContext();
   const { openDeployModal } = useDeployModal();
 
-
   const [isToggling, setIsToggling] = useState(false);
 
   // Handle toggle managed status
@@ -58,7 +55,17 @@ const WorkspaceDetail: React.FC = () => {
   if (isLoading) {
     return (
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
-        <Spin size="large" tip="Loading workspace details..." style={{ display: 'block', textAlign: 'center' }} />
+        <Spin size="large" spinning={true}>
+          <div style={{ 
+            display: 'block', 
+            textAlign: 'center', 
+            padding: '20px',
+            color: '#8c8c8c',
+            fontSize: '14px'
+          }}>
+            Loading workspace details...
+          </div>
+        </Spin>
       </div>
     );
   }
@@ -98,6 +105,51 @@ const WorkspaceDetail: React.FC = () => {
     }
   ];
 
+  const tabItems = [
+    {
+      key: 'apps',
+      label: (
+        <span>
+          <AppstoreOutlined /> Apps
+        </span>
+      ),
+      children: (
+        <AppsTab
+          environment={environment}
+          workspaceId={workspace.id}
+        />
+      )
+    },
+    {
+      key: 'dataSources',
+      label: (
+        <span>
+          <DatabaseOutlined /> Data Sources
+        </span>
+      ),
+      children: (
+        <DataSourcesTab
+          environment={environment}
+          workspaceId={workspace.id}
+        />
+      )
+    },
+    {
+      key: 'queries',
+      label: (
+        <span>
+          <CodeOutlined /> Queries
+        </span>
+      ),
+      children: (
+        <QueriesTab
+          environment={environment}
+          workspaceId={workspace.id}
+        />
+      )
+    }
+  ];
+
   return (
     <div className="workspace-detail-container" style={{ 
       padding: "24px", 
@@ -122,28 +174,8 @@ const WorkspaceDetail: React.FC = () => {
         defaultActiveKey="apps" 
         className="modern-tabs" 
         type="line"
-      >
-        <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
-          <AppsTab
-            environment={environment}
-            workspaceId={workspace.id}
-          />
-        </TabPane>
-
-        <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
-          <DataSourcesTab
-            environment={environment}
-            workspaceId={workspace.id}
-          />
-        </TabPane>
-        <TabPane tab={<span><CodeOutlined /> Queries</span>} key="queries">
-          <QueriesTab
-            environment={environment}
-            workspaceId={workspace.id}
-          />
-        </TabPane>
-
-      </Tabs>
+        items={tabItems}
+      />
     </div>
   );
 };

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { Breadcrumb } from 'antd';
 import { BreadcrumbProps } from 'antd/lib/breadcrumb';
 
-interface ModernBreadcrumbsProps extends BreadcrumbProps {
+interface ModernBreadcrumbsProps extends Omit<BreadcrumbProps, 'items'> {
   /**
    * Items to display in the breadcrumb
    */
@@ -17,6 +17,25 @@ interface ModernBreadcrumbsProps extends BreadcrumbProps {
  * Modern styled breadcrumb component with consistent styling
  */
 const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
+  // Convert custom items format to Antd's expected format
+  const breadcrumbItems = items.map(item => ({
+    key: item.key,
+    title: item.onClick ? (
+      <span
+        style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
+        onClick={item.onClick}
+        onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
+        onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
+      >
+        {item.title}
+      </span>
+    ) : (
+      <span style={{ color: '#595959', fontWeight: '500' }}>
+        {item.title}
+      </span>
+    )
+  }));
+
   return (
     <div className="modern-breadcrumb" style={{
       background: '#e6f7ff',
@@ -27,26 +46,7 @@ const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...pr
       display: 'flex',
       alignItems: 'center'
     }}>
-      <Breadcrumb {...props} separator="/">
-        {items.map(item => (
-          <Breadcrumb.Item key={item.key}>
-            {item.onClick ? (
-              <span
-                style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
-                onClick={item.onClick}
-                onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
-                onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
-              >
-                {item.title}
-              </span>
-            ) : (
-              <span style={{ color: '#595959', fontWeight: '500' }}>
-                {item.title}
-              </span>
-            )}
-          </Breadcrumb.Item>
-        ))}
-      </Breadcrumb>
+      <Breadcrumb {...props} separator="/" items={breadcrumbItems} />
     </div>
   );
 };