Merge pull request #1694 from iamfaran/fix/environments-new

Add error component on invalid URL and managed-obj endpoint

Author: dragonpoo

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;
 
@@ -34,7 +35,6 @@ const WorkspaceDetail: React.FC = () => {
   const { workspace, isLoading, error, toggleManagedStatus } = useWorkspaceContext();
   const { openDeployModal } = useDeployModal();
 
-  console.log("workspace render", workspace);  
 
   const [isToggling, setIsToggling] = useState(false);
 
@@ -58,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;

client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx

@@ -50,6 +50,7 @@ export const appsConfig: DeployableItemConfig = {
         publishOnTarget: values.publishOnTarget,
         publicToAll: values.publicToAll,
         publicToMarketplace: values.publicToMarketplace,
+        applicationGid: item.applicationGid,
       };
     },
     execute: (params: any) => deployApp(params)

client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx

@@ -23,7 +23,8 @@ export const dataSourcesConfig: DeployableItemConfig = {
         envId: sourceEnv.environmentId,
         targetEnvId: targetEnv.environmentId,
         datasourceId: item.id,
-        updateDependenciesIfNeeded: values.updateDependenciesIfNeeded
+        updateDependenciesIfNeeded: values.updateDependenciesIfNeeded,
+        datasourceGid: item.gid
       };
     },
     execute: (params: any) => deployDataSource(params)

client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx

@@ -24,7 +24,8 @@ export const queryConfig: DeployableItemConfig = {
         envId: sourceEnv.environmentId,
         targetEnvId: targetEnv.environmentId,
         queryId: item.id,
-        updateDependenciesIfNeeded: values.updateDependenciesIfNeeded
+        updateDependenciesIfNeeded: values.updateDependenciesIfNeeded,
+        queryGid: item.gid,
       };
     },
     execute: (params: any) => deployQuery(params)

client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts

@@ -18,6 +18,7 @@ export interface DeployAppParams {
   envId: string;
   targetEnvId: string;
   applicationId: string;
+  applicationGid: string;
   updateDependenciesIfNeeded?: boolean;
   publishOnTarget?: boolean;
   publicToAll?: boolean;
@@ -79,7 +80,7 @@ export async function getMergedWorkspaceApps(
     // Fetch managed objects instead of managed apps
     let managedObjects: ManagedObject[] = [];
     try {
-      managedObjects = await getManagedObjects(environmentId);
+      managedObjects = await getManagedObjects(environmentId, ManagedObjectType.APP);
     } catch (error) {
       console.error("Failed to fetch managed objects:", error);
       // Continue with empty managed list
@@ -125,7 +126,7 @@ export const deployApp = async (params: DeployAppParams): Promise<boolean> => {
 
     if (response.status === 200) {
       await transferManagedObject(
-        params.applicationId,
+        params.applicationGid,
         params.envId,
         params.targetEnvId,
         ManagedObjectType.APP

client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts

@@ -20,7 +20,9 @@ export interface DeployDataSourceParams {
   envId: string;
   targetEnvId: string;
   datasourceId: string;
+  datasourceGid: string;
   updateDependenciesIfNeeded?: boolean;
+ 
 }
 // Get data sources for a workspace - using your correct implementation
 export async function getWorkspaceDataSources(
@@ -54,7 +56,6 @@ export async function getWorkspaceDataSources(
         orgId: workspaceId
       }
     });
-    console.log("data source response",response);
 
     // Check if response is valid
     if (!response.data) {
@@ -157,12 +158,12 @@ export async function deployDataSource(params: DeployDataSourceParams): Promise<
         envId: params.envId,
         targetEnvId: params.targetEnvId,
         datasourceId: params.datasourceId,
-        updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false
+        updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false,
       }
     });
     if (response.status === 200) {
       await transferManagedObject(
-        params.datasourceId,
+        params.datasourceGid,
         params.envId,
         params.targetEnvId,
         ManagedObjectType.DATASOURCE

client/packages/lowcoder/src/pages/setting/environments/services/enterprise.service.ts

@@ -204,7 +204,6 @@ export async function getManagedQueries(environmentId: string): Promise<Query[]>
         environmentId
       }
     });
-    console.log("Managed queries response function:", response.data);
 
     if (!response.data.data || !Array.isArray(response.data.data)) {
       return [];