diff --git a/client/packages/lowcoder/src/constants/reduxActionConstants.ts b/client/packages/lowcoder/src/constants/reduxActionConstants.ts index 6dd42de3d6..aea840a5c6 100644 --- a/client/packages/lowcoder/src/constants/reduxActionConstants.ts +++ b/client/packages/lowcoder/src/constants/reduxActionConstants.ts @@ -172,6 +172,11 @@ export const ReduxActionTypes = { /* Enterprise Edition */ FETCH_ENTERPRISE_LICENSE : "FETCH_ENTERPRISE_LICENSE", SET_ENTERPRISE_LICENSE : "SET_ENTERPRISE_LICENSE", + + /* Environments */ + FETCH_ENVIRONMENTS : "FETCH_ENVIRONMENTS", + FETCH_ENVIRONMENTS_SUCCESS: "FETCH_ENVIRONMENTS_SUCCESS", + FETCH_ENVIRONMENTS_FAILURE: "FETCH_ENVIRONMENTS_FAILURE", /* Branding Setting */ FETCH_BRANDING_SETTING : "FETCH_BRANDING_SETTING", diff --git a/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx b/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx index 41081435de..afdb01fca9 100644 --- a/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx +++ b/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx @@ -1,31 +1,28 @@ // client/packages/lowcoder/src/pages/setting/environments/Environments.tsx import React from "react"; import { Switch, Route, useRouteMatch } from "react-router-dom"; -import { EnvironmentProvider } from "./context/EnvironmentContext"; import EnvironmentRoutes from "./routes/EnvironmentRoutes"; import EnvironmentsList from "./EnvironmentsList"; /** * Top-level Environments component - * Provides the EnvironmentProvider at the top level + * No longer needs the EnvironmentProvider since we use Redux */ const Environments: React.FC = () => { const { path } = useRouteMatch(); return ( - - - {/* Environment list route */} - - - - - {/* All routes that need a specific environment */} - - - - - + + {/* Environment list route */} + + + + + {/* All routes that need a specific environment */} + + + + ); }; diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx index 8d8fa2c435..3f9f51a1fb 100644 --- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx +++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx @@ -1,8 +1,10 @@ -import React, { useState } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { Typography, Alert, Input, Button, Space, Empty, Card, Spin, Row, Col, Tooltip, Badge } from "antd"; import { SearchOutlined, CloudServerOutlined, SyncOutlined, PlusOutlined} from "@ant-design/icons"; import { useHistory } from "react-router-dom"; -import { useEnvironmentContext } from "./context/EnvironmentContext"; +import { useSelector, useDispatch } from "react-redux"; +import { selectEnvironments, selectEnvironmentsLoading, selectEnvironmentsError } from "redux/selectors/enterpriseSelectors"; +import { fetchEnvironments } from "redux/reduxActions/enterpriseActions"; import { Environment } from "./types/environment.types"; import EnvironmentsTable from "./components/EnvironmentsTable"; import CreateEnvironmentModal from "./components/CreateEnvironmentModal"; @@ -17,23 +19,23 @@ const { Title, Text } = Typography; * Displays a table of environments */ const EnvironmentsList: React.FC = () => { - // Use the shared context instead of a local hook - const { - environments, - isLoading, - error, - refreshEnvironments - } = useEnvironmentContext(); + // Use Redux state instead of context + const dispatch = useDispatch(); + const environments = useSelector(selectEnvironments); + const isLoading = useSelector(selectEnvironmentsLoading); + const error = useSelector(selectEnvironmentsError); // State for search input const [searchText, setSearchText] = useState(""); - const [isRefreshing, setIsRefreshing] = useState(false); const [isCreateModalVisible, setIsCreateModalVisible] = useState(false); const [isCreating, setIsCreating] = useState(false); + + // Hook for navigation const history = useHistory(); + // Filter environments based on search text const filteredEnvironments = environments.filter((env) => { const searchLower = searchText.toLowerCase(); @@ -62,10 +64,8 @@ const EnvironmentsList: React.FC = () => { }; // Handle refresh - const handleRefresh = async () => { - setIsRefreshing(true); - await refreshEnvironments(); - setIsRefreshing(false); + const handleRefresh = () => { + dispatch(fetchEnvironments()); }; // Handle create environment @@ -73,7 +73,7 @@ const EnvironmentsList: React.FC = () => { setIsCreating(true); try { await createEnvironment(environmentData); - await refreshEnvironments(); // Refresh the list after creation + dispatch(fetchEnvironments()); // Refresh the list after creation } catch (error) { console.error("Failed to create environment:", error); throw error; // Re-throw to let the modal handle the error display @@ -153,7 +153,7 @@ const EnvironmentsList: React.FC = () => { Create Environment