add err component and fix errors

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx

@@ -27,7 +27,7 @@ import UserGroupsTab from "./components/UserGroupsTab";
 import EnvironmentHeader from "./components/EnvironmentHeader";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import { getEnvironmentTagColor } from "./utils/environmentUtils";
-const { Title, Text } = Typography;
+import ErrorComponent from './components/ErrorComponent';
 const { TabPane } = Tabs;
 
 /**
@@ -80,50 +80,18 @@ const EnvironmentDetail: React.FC = () => {
   if (isLoading) {
     return (
       <div style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}>
-        <Spin size="large" tip="Loading environment..." />
+        <Spin size="large" tip="Loading environment..." style={{ display: 'block', textAlign: 'center' }} />
       </div>
     );
   }
 
   if (error || !environment) {
-    const errorItems = [
-      {
-        key: 'environments',
-        title: (
-          <span>
-            <HomeOutlined /> Environments
-          </span>
-        ),
-        onClick: () => history.push("/setting/environments")
-      },
-      {
-        key: 'notFound',
-        title: 'Not Found'
-      }
-    ];
-
     return (
-      <div style={{ padding: "24px", flex: 1 }}>
-        <ModernBreadcrumbs items={errorItems} />
-        
-        <Card style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
-          <div style={{ textAlign: "center", padding: "40px 0" }}>
-            <Title level={3} style={{ color: "#ff4d4f" }}>
-              Environment Not Found
-            </Title>
-            <Text type="secondary" style={{ display: "block", margin: "16px 0" }}>
-              {error || "The environment you're looking for doesn't exist or you don't have permission to view it."}
-            </Text>
-            <Button 
-              type="primary"
-              onClick={() => history.push("/setting/environments")}
-              style={{ marginTop: "16px" }}
-            >
-              Return to Environments List
-            </Button>
-          </div>
-        </Card>
-      </div>
+      <ErrorComponent 
+        errorMessage={"Environment Not Found"}
+        returnPath="/setting/environments"
+        returnLabel="Return to Environments List"
+      />
     );
   }
 

client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx

@@ -139,10 +139,7 @@ const EnvironmentsList: React.FC = () => {
                 borderRadius: '12px', 
                 boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
               }}
-              headStyle={{ 
-                borderBottom: '1px solid #f0f0f0',
-                padding: '16px 24px'
-              }}
+              styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' } }}
               bodyStyle={{ padding: '24px' }}
             >
               <Row gutter={[32, 16]} justify="space-around">
@@ -191,10 +188,7 @@ const EnvironmentsList: React.FC = () => {
           borderRadius: '12px', 
           boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
         }}
-        headStyle={{ 
-          borderBottom: '1px solid #f0f0f0',
-          padding: '16px 24px'
-        }}
+        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' } }}
         bodyStyle={{ padding: '24px' }}
         extra={
           <Input

client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx

@@ -25,6 +25,7 @@ import DataSourcesTab from "./components/DataSourcesTab";
 import QueriesTab from "./components/QueriesTab";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import WorkspaceHeader from "./components/WorkspaceHeader";
+import ErrorComponent from "./components/ErrorComponent";
 
 const { TabPane } = Tabs;
 
@@ -57,18 +58,18 @@ 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..." />
+        <Spin size="large" tip="Loading workspace details..." style={{ display: 'block', textAlign: 'center' }} />
       </div>
     );
   }
 
   if (error || !environment || !workspace) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
-        <Typography.Title level={3}>
-          {error || "Workspace not found"}
-        </Typography.Title>
-      </div>  
+      <ErrorComponent 
+        errorMessage={"Workspace not found"}
+        returnPath="/setting/environments"
+        returnLabel="Return to Environments List"
+      />
     );
   }
 

client/packages/lowcoder/src/pages/setting/environments/components/ErrorComponent.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Card, Button, Typography } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import history from '@lowcoder-ee/util/history';
+
+const { Title, Text } = Typography;
+
+interface ErrorComponentProps {
+  errorMessage: string;
+  returnPath: string;
+  returnLabel: string;
+}
+
+const ErrorComponent: React.FC<ErrorComponentProps> = ({ errorMessage, returnPath, returnLabel }) => {
+  return (
+    <div style={{ padding: '24px', flex: 1 }}>
+      <Card style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
+        <div style={{ textAlign: 'center', padding: '40px 0' }}>
+          <Title level={3} style={{ color: '#ff4d4f' }}>
+            {errorMessage}
+          </Title>
+          <Text type="secondary" style={{ display: 'block', margin: '16px 0' }}>
+            The item you're looking for doesn't exist or you don't have permission to view it.
+          </Text>
+          <Button 
+            type="primary"
+            onClick={() => history.push(returnPath)}
+            style={{ marginTop: '16px' }}
+          >
+            <HomeOutlined /> {returnLabel}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default ErrorComponent;