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 [];

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

@@ -195,7 +195,6 @@ export async function getEnvironmentUserGroups(
 
     // Make the API request to get user groups
     const response = await axios.get(`${apiServiceUrl}/api/groups/list`, { headers });
-    console.log(response);
 
     // Check if response is valid
     if (!response.data) {
@@ -359,8 +358,7 @@ export async function getWorkspaceDataSources(
         orgId: workspaceId
       }
     });
-    console.log("data source response",response);
-  
+    
     // Check if response is valid
     if (!response.data) {
       return [];
@@ -434,7 +432,7 @@ export async function getWorkspaceQueries(
     if (!response.data) {
       return { queries: [], total: 0 };
     }
-    console.log("RESPONSE DATA QUERIES",response.data.data);
+    
     // Map the response to include id field required by DeployableItem
     const queries = response.data.data.map(query => ({
       ...query,
@@ -444,8 +442,6 @@ export async function getWorkspaceQueries(
       managed: false // Default to unmanaged
     }));
 
-    console.log("queries",queries);
-    
     return { 
       queries, 
       total: response.data.total 

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

@@ -15,6 +15,7 @@ export interface MergedQueriesResult {
     targetEnvId: string;
     queryId: string;
     updateDependenciesIfNeeded?: boolean;
+    queryGid: string;
   }
 
 
@@ -28,19 +29,15 @@ export interface MergedQueriesResult {
       // Fetch regular queries
 
       const regularQueries = await getWorkspaceQueries(workspaceId, apiKey, apiServiceUrl);
-      console.log("Regular queries response:", regularQueries);
 
       const managedObjects = await getManagedObjects(environmentId, ManagedObjectType.QUERY);
-      console.log("Managed queries response:", managedObjects);
 
       // Create a set of managed query GIDs for quick lookup
       const managedQueryGids = new Set(managedObjects.map(obj => obj.objGid));
-      console.log("Managed query GIDs:", Array.from(managedQueryGids));
 
       // Mark regular queries as managed if they exist in managed queries
       const mergedQueries = regularQueries.queries.map((query: Query) => {
         const isManaged = managedQueryGids.has(query.gid);
-        console.log(`Query ${query.name} (gid: ${query.gid}) is ${isManaged ? "managed" : "not managed"}`);
 
         return {
           ...query,
@@ -51,11 +48,6 @@ export interface MergedQueriesResult {
       // Calculate stats
       const total = mergedQueries.length;
       const managed = mergedQueries.filter(query => query.managed).length;
-      console.log("Generated stats:", {
-        total,
-        managed,
-        unmanaged: total - managed
-      });
 
       return {
         queries: mergedQueries,
@@ -84,7 +76,7 @@ export interface MergedQueriesResult {
       });
       if (response.status === 200) {
         await transferManagedObject(
-          params.queryId,
+          params.queryGid,
           params.envId,
           params.targetEnvId,
           ManagedObjectType.QUERY

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

@@ -99,7 +99,7 @@ export async function deployWorkspace(params: {
     // After successful deployment, set the managed object in target environment
     if (response.status === 200) {
       await transferManagedObject(
-        params.workspaceId,
+        params.workspaceId, // first param has to be GID
         params.envId,
         params.targetEnvId,
         ManagedObjectType.ORG