add breadcrumbs component and fix tabs styling

iamfaran · iamfaran · commit 933878e27334 · 2025-05-16T18:50:10.000+05:00
diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -6,7 +6,6 @@ import {
   Card, 
   Tabs, 
   Button,
-  Breadcrumb,
   Space,
   Tag,
   Switch, 
@@ -32,6 +31,7 @@ import { workspaceConfig } from "./config/workspace.config";
 import AppsTab from "./components/AppsTab";
 import DataSourcesTab from "./components/DataSourcesTab";
 import QueriesTab from "./components/QueriesTab";
+import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
@@ -79,25 +79,35 @@ const WorkspaceDetail: React.FC = () => {
     );
   }
 
+  const breadcrumbItems = [
+    {
+      key: 'environments',
+      title: (
+        <span>
+          <HomeOutlined /> Environments
+        </span>
+      ),
+      onClick: () => history.push("/setting/environments")
+    },
+    {
+      key: 'environment',
+      title: (
+        <span>
+          <TeamOutlined /> {environment.environmentName}
+        </span>
+      ),
+      onClick: () => history.push(`/setting/environments/${environment.environmentId}`)
+    },
+    {
+      key: 'workspace',
+      title: workspace.name
+    }
+  ];
+
   return (
     <div className="workspace-detail-container" style={{ padding: "24px", flex: 1 }}>
-      {/* Breadcrumb navigation */}
-      <Breadcrumb style={{ marginBottom: "16px" }}>
-        <Breadcrumb.Item>
-          <span style={{ cursor: "pointer" }} onClick={() => history.push("/setting/environments")}>
-            <HomeOutlined /> Environments
-          </span>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>
-          <span
-            style={{ cursor: "pointer" }}
-            onClick={() => history.push(`/setting/environments/${environment.environmentId}`)}
-          >
-            <TeamOutlined /> {environment.environmentName}
-          </span>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>{workspace.name}</Breadcrumb.Item>
-      </Breadcrumb>
+      {/* Modern Breadcrumbs navigation */}
+      <ModernBreadcrumbs items={breadcrumbItems} />
 
       {/* Workspace header with details and actions */}
       <Card style={{ marginBottom: "24px" }} bodyStyle={{ padding: "16px 24px" }}>
@@ -158,14 +168,13 @@ const WorkspaceDetail: React.FC = () => {
       </Card>
 
       {/* Tabs for Apps, Data Sources, and Queries */}
-      <Tabs defaultActiveKey="apps">
-      // Replace the Apps TabPane in WorkspaceDetail.tsx with this:
-          <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
-            <AppsTab
-              environment={environment}
-              workspace={workspace}
-            />
-          </TabPane>
+      <Tabs defaultActiveKey="apps" className="modern-tabs" type="card">
+        <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
+          <AppsTab
+            environment={environment}
+            workspace={workspace}
+          />
+        </TabPane>
 
         <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
           <DataSourcesTab
