May 8, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
 import React, {useState} from "react";
 import { useParams } from "react-router-dom";
 import {
  Spin,
  Typography,
  Tabs,
  Alert,
  Descriptions,
  Dropdown,
  Menu,
  Button,
  Breadcrumb,
 } from "antd";
 import {
  ReloadOutlined,
  LinkOutlined,
  ClusterOutlined,
  TeamOutlined,
  UserOutlined,
  SyncOutlined,
  EditOutlined,
  EllipsisOutlined,
  MoreOutlined,
  HomeOutlined
 } from "@ant-design/icons";

 import {useEnvironmentContext } from "./context/EnvironmentContext";
 import {useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
 import { workspaceConfig } from "./config/workspace.config";
 import { userGroupsConfig } from "./config/usergroups.config";
 import DeployableItemsTab from "./components/DeployableItemsTab";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;


 /**
 * Environment Detail Page Component
 * Shows detailed information about a specific environment
 */
 const EnvironmentDetail: React.FC = () => {
  //Get environment ID from URL params
  //Use the SingleEnvironmentContext instead of EnvironmentContext
  const {
    environment,
 isLoadingEnvironment,
 isLoading,
    error,
    updateEnvironmentData
  } = useEnvironmentContext();


  } = useSingleEnvironmentContext();

  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [isUpdating, setIsUpdating] = useState(false);
  };

  // Handle save environment
  const handleSaveEnvironment = async (environmentId: string, data: Partial<Environment>) => {
  const handleSaveEnvironment = async (data: Partial<Environment>) => {
    if (!environment) return;

    setIsUpdating(true);
    try {
 await updateEnvironmentData(environmentId, data);
 // Close the modal first, before the update completes
      handleCloseModal();

      // Then update the environment data
      await updateEnvironmentData(data);
    } catch (error) {
      console.error('Failed to update environment:', error);
    } finally {
    </Menu>
  );

  if (isLoadingEnvironment) {
  if (isLoading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}>
        <Spin size="large" tip="Loading environment..." />
      />
    );
  }

  return (
    <div
      className="environment-detail-container"
        <Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
      </Breadcrumb>

      {/* Header with environment name and controls */}
      {/* Header with environment name and controls */}
      <div
        className="environment-header"
          />
        </TabPane>
      </Tabs>

      {/* Edit Environment Modal */}
      {environment && (
        <EditEnvironmentModal
  );
 };

 export default EnvironmentDetail;
 export default EnvironmentDetail;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx b/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx
 // client/packages/lowcoder/src/pages/setting/environments/Environments.tsx
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 import { Switch, Route, useRouteMatch } from "react-router-dom";
 import { EnvironmentProvider } from "./context/EnvironmentContext";
 import EnvironmentRoutes from "./routes/EnvironmentRoutes";
 import EnvironmentsList from "./EnvironmentsList";
 import EnvironmentScopedRoutes from "./components/EnvironmentScopedRoutes";

 import {
  ENVIRONMENT_SETTING,
  ENVIRONMENT_DETAIL
 } from "@lowcoder-ee/constants/routesURL";

 /**
 * Top-level Environments component that wraps all environment-related routes
 *with the EnvironmentProviderfor shared state management
 * Top-level Environments component
 *Provides the EnvironmentProviderat the top level
 */
 const Environments: React.FC = () => {
  const { path } = useRouteMatch();

  return (
    <EnvironmentProvider>
      <Switch>
        {/*Route that shows thelistof environments */}
        <Route exact path={ENVIRONMENT_SETTING}>
        {/*Environmentlistroute */}
        <Route exact path={path}>
          <EnvironmentsList />
        </Route>

        {/* Allotherroutesunder /environments/:envId */}
        <Route path={ENVIRONMENT_DETAIL}>
          <EnvironmentScopedRoutes />

        {/* All routesthat need a specific environment */}
        <Route path={`${path}/:envId`}>
          <EnvironmentRoutes />
        </Route>
      </Switch>
    </EnvironmentProvider>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
  // Use the shared context instead of a local hook
  const {
    environments,
 isLoadingEnvironments,
 isLoading,
    error,
  } = useEnvironmentContext();

      )}

      {/* Empty state handling */}
      {!isLoadingEnvironments && environments.length === 0 && !error ? (
      {!isLoading && environments.length === 0 && !error ? (
        <Empty
          description="No environments found"
          image={Empty.PRESENTED_IMAGE_SIMPLE}
        /* Table component */
        <EnvironmentsTable
          environments={filteredEnvironments}
          loading={isLoadingEnvironments}
          loading={isLoading}
          onRowClick={handleRowClick}
        />
      )}
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@
		import React, {useState} from "react";
		import { useParams } from "react-router-dom";
		import {
		Spin,
		Typography,
Expand All		@@ -8,25 +7,18 @@ import {
		Tabs,
		Alert,
		Descriptions,
		Dropdown,
		Menu,
		Button,
		Breadcrumb,
		} from "antd";
		import {
		ReloadOutlined,
		LinkOutlined,
		ClusterOutlined,
		TeamOutlined,
		UserOutlined,
		SyncOutlined,
		EditOutlined,
		EllipsisOutlined,
		MoreOutlined,
		HomeOutlined
		} from "@ant-design/icons";

		import {useEnvironmentContext } from "./context/EnvironmentContext";
		import {useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
		import { workspaceConfig } from "./config/workspace.config";
		import { userGroupsConfig } from "./config/usergroups.config";
		import DeployableItemsTab from "./components/DeployableItemsTab";
Expand All		@@ -37,21 +29,18 @@ import history from "@lowcoder-ee/util/history";
		const { Title, Text } = Typography;
		const { TabPane } = Tabs;


		/**
		* Environment Detail Page Component
		* Shows detailed information about a specific environment
		*/
		const EnvironmentDetail: React.FC = () => {
		//Get environment ID from URL params
		//Use the SingleEnvironmentContext instead of EnvironmentContext
		const {
		environment,
		isLoadingEnvironment,
		isLoading,
		error,
		updateEnvironmentData
		} = useEnvironmentContext();


		} = useSingleEnvironmentContext();

		const [isEditModalVisible, setIsEditModalVisible] = useState(false);
		const [isUpdating, setIsUpdating] = useState(false);
Expand All		@@ -67,11 +56,16 @@ const EnvironmentDetail: React.FC = () => {
		};

		// Handle save environment
		const handleSaveEnvironment = async (environmentId: string, data: Partial<Environment>) => {
		const handleSaveEnvironment = async (data: Partial<Environment>) => {
		if (!environment) return;

		setIsUpdating(true);
		try {
		await updateEnvironmentData(environmentId, data);
		// Close the modal first, before the update completes
		handleCloseModal();

		// Then update the environment data
		await updateEnvironmentData(data);
		} catch (error) {
		console.error('Failed to update environment:', error);
		} finally {
Expand All		@@ -89,7 +83,7 @@ const EnvironmentDetail: React.FC = () => {
		</Menu>
		);

		if (isLoadingEnvironment) {
		if (isLoading) {
		return (
		<div style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}>
		<Spin size="large" tip="Loading environment..." />
Expand All		@@ -107,6 +101,7 @@ const EnvironmentDetail: React.FC = () => {
		/>
		);
		}

		return (
		<div
		className="environment-detail-container"
Expand All		@@ -124,7 +119,6 @@ const EnvironmentDetail: React.FC = () => {
		<Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
		</Breadcrumb>

		{/* Header with environment name and controls */}
		{/* Header with environment name and controls */}
		<div
		className="environment-header"
Expand DownExpand Up		@@ -231,6 +225,7 @@ const EnvironmentDetail: React.FC = () => {
		/>
		</TabPane>
		</Tabs>

		{/* Edit Environment Modal */}
		{environment && (
		<EditEnvironmentModal
Expand All		@@ -245,4 +240,4 @@ const EnvironmentDetail: React.FC = () => {
		);
		};

		export default EnvironmentDetail;
		export default EnvironmentDetail;
Original file line number	Diff line number	Diff line change
		@@ -1,30 +1,28 @@
		// client/packages/lowcoder/src/pages/setting/environments/Environments.tsx
		import React from "react";
		import { Switch, Route } from "react-router-dom";
		import { Switch, Route, useRouteMatch } from "react-router-dom";
		import { EnvironmentProvider } from "./context/EnvironmentContext";
		import EnvironmentRoutes from "./routes/EnvironmentRoutes";
		import EnvironmentsList from "./EnvironmentsList";
		import EnvironmentScopedRoutes from "./components/EnvironmentScopedRoutes";

		import {
		ENVIRONMENT_SETTING,
		ENVIRONMENT_DETAIL
		} from "@lowcoder-ee/constants/routesURL";

		/**
		* Top-level Environments component that wraps all environment-related routes
		*with the EnvironmentProviderfor shared state management
		* Top-level Environments component
		*Provides the EnvironmentProviderat the top level
		*/
		const Environments: React.FC = () => {
		const { path } = useRouteMatch();

		return (
		<EnvironmentProvider>
		<Switch>
		{/Route that shows thelistof environments /}
		<Route exact path={ENVIRONMENT_SETTING}>
		{/Environmentlistroute /}
		<Route exact path={path}>
		<EnvironmentsList />
		</Route>

		{/* Allotherroutesunder /environments/:envId */}
		<Route path={ENVIRONMENT_DETAIL}>
		<EnvironmentScopedRoutes />

		{/* All routesthat need a specific environment */}
		<Route path={`${path}/:envId`}>
		<EnvironmentRoutes />
		</Route>
		</Switch>
		</EnvironmentProvider>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,7 +18,7 @@ const EnvironmentsList: React.FC = () => {
		// Use the shared context instead of a local hook
		const {
		environments,
		isLoadingEnvironments,
		isLoading,
		error,
		} = useEnvironmentContext();

Expand DownExpand Up		@@ -83,7 +83,7 @@ const EnvironmentsList: React.FC = () => {
		)}

		{/* Empty state handling */}
		{!isLoadingEnvironments && environments.length === 0 && !error ? (
		{!isLoading && environments.length === 0 && !error ? (
		<Empty
		description="No environments found"
		image={Empty.PRESENTED_IMAGE_SIMPLE}
Expand All		@@ -92,7 +92,7 @@ const EnvironmentsList: React.FC = () => {
		/* Table component */
		<EnvironmentsTable
		environments={filteredEnvironments}
		loading={isLoadingEnvironments}
		loading={isLoading}
		onRowClick={handleRowClick}
		/>
		)}
Expand Down