add managed/unmaged for apps

Author: iamfaran

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

@@ -13,7 +13,8 @@ import {
   Button,
   Statistic,
   Divider,
-  Breadcrumb
+  Breadcrumb,
+  message
 } from "antd";
 import { 
   AppstoreOutlined, 
@@ -29,12 +30,16 @@ import { useEnvironmentContext } from "./context/EnvironmentContext";
 import { useWorkspace } from "./hooks/useWorkspace";
 import { useWorkspaceApps } from "./hooks/useWorkspaceApps";
 import { useWorkspaceDataSources } from "./hooks/useWorkspaceDataSources";
-
+import { useManagedApps } from "./hooks/enterprise/useManagedApps";
+import { App } from "./types/app.types";
+import { getMergedApps } from "./utils/getMergedApps";
+import { connectManagedApp, unconnectManagedApp } from "./services/enterprise.service";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
 
+
 const WorkspaceDetail: React.FC = () => {
 
     // Get parameters from URL
@@ -72,8 +77,35 @@ const WorkspaceDetail: React.FC = () => {
       dataSourceStats,
     } = useWorkspaceDataSources(environment, workspaceId);
 
-   
-  
+    const { managedApps } = useManagedApps(environmentId);
+    const [mergedApps, setMergedApps] = useState<App[]>([]);
+
+    useEffect(() => {
+      setMergedApps(getMergedApps(apps, managedApps));
+    }, [apps, managedApps]);
+
+
+
+          
+    const handleToggleManagedApp = async (app: App, checked: boolean) => {
+      try {
+        if (checked) {
+          await connectManagedApp(environmentId, app.name, app.applicationGid!);
+        } else {
+          await unconnectManagedApp(app.applicationGid!);
+        }
+
+        setMergedApps((currentApps) =>
+          currentApps.map((a) =>
+            a.applicationId === app.applicationId ? { ...a, managed: checked } : a
+          )
+        );
+
+        message.success(`${app.name} is now ${checked ? "Managed" : "Unmanaged"}`);
+      } catch {
+        message.error(`Failed to toggle ${app.name}`);
+      }
+    };
     if (envLoading || workspaceLoading) {
       return (
         <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
@@ -187,10 +219,11 @@ const WorkspaceDetail: React.FC = () => {
             )}
 
             {/* Apps List */}
-            <AppsList 
-              apps={apps}
+            <AppsList
+              apps={mergedApps}
               loading={appsLoading}
               error={appsError}
+              onToggleManaged={handleToggleManagedApp}
             />
           </Card>
         </TabPane>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Tag, Empty, Spin, Avatar, Tooltip } from 'antd';
+import { Table, Tag, Empty, Spin, Avatar, Tooltip, Switch, Space } from 'antd';
 import { 
   AppstoreOutlined, 
   UserOutlined, 
@@ -12,6 +12,8 @@ interface AppsListProps {
   apps: App[];
   loading: boolean;
   error?: string | null;
+  onToggleManaged?: (app: App, checked: boolean) => void;
+
 }
 
 /**
@@ -21,6 +23,8 @@ const AppsList: React.FC<AppsListProps> = ({
   apps,
   loading,
   error,
+  onToggleManaged
+
 }) => {
   // Format timestamp to date string
   const formatDate = (timestamp?: number): string => {
@@ -89,7 +93,26 @@ const AppsList: React.FC<AppsListProps> = ({
           {status}
         </Tag>
       ),
-    }
+    },
+    {
+      title: 'Managed',
+      key: 'managed',
+      render: (record: App) => (
+        <Space>
+          <Tag color={record.managed ? 'green' : 'default'}>
+            {record.managed ? 'Managed' : 'Unmanaged'}
+          </Tag>
+          <Switch
+            size="small"
+            checked={record.managed}
+            onClick={(checked, e) => {
+              e.stopPropagation(); // Prevent navigation
+              onToggleManaged?.(record, checked);
+            }}
+          />
+        </Space>
+      ),
+    },
   ];
 
   // If loading, show spinner

client/packages/lowcoder/src/pages/setting/environments/hooks/enterprise/useManagedApps.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+import { getManagedApps } from '../../services/enterprise.service';
+
+export const useManagedApps = (environmentId: string) => {
+  const [managedApps, setManagedApps] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchManagedApps = async () => {
+      setLoading(true);
+      try {
+        const apps = await getManagedApps(environmentId);
+        setManagedApps(apps);
+      } catch (err: any) {
+        setError(err.message || 'Failed to fetch managed apps');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchManagedApps();
+  }, [environmentId]);
+
+  return { managedApps, loading, error };
+};

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

@@ -106,15 +106,13 @@ export async function getManagedApps(environmentId: string) {
 export async function connectManagedApp(
   environmentId: string,
   app_name: string,
-  app_version: string,
   app_gid: string,
   app_tags: string[] = []
 ) {
   try {
     const payload = {
       environment_id: environmentId,
       app_name,
-      app_version,
       app_gid,
       app_tags,
     };

client/packages/lowcoder/src/pages/setting/environments/types/app.types.ts

@@ -22,4 +22,5 @@ export interface App {
     icon: string;
     published: boolean;
     folder: boolean;
+    managed?: boolean;
   }

client/packages/lowcoder/src/pages/setting/environments/utils/getMergedApps.ts

@@ -0,0 +1,9 @@
+import { App } from '../types/app.types';
+
+
+export const getMergedApps = (standardApps: App[], managedApps: any[]): App[] => {
+  return standardApps.map((app) => ({
+    ...app,
+    managed: managedApps.some((managedApp) => managedApp.appGid === app.applicationGid),
+  }));
+};