Skip to content

Commit 5f393b0

Browse files
iamfaraniamfaran
committed
wrap the provider
1 parent 17bb62a commit 5f393b0

File tree

5 files changed

+98
-119
lines changed

5 files changed

+98
-119
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx

Lines changed: 8 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ import {
1919
} from "@ant-design/icons";
2020

2121
import { useEnvironmentContext } from "./context/EnvironmentContext";
22-
import WorkspacesTab from "./components/WorkspacesTab";
23-
import UserGroupsTab from "./components/UserGroupsTab";
2422
import { workspaceConfig } from "./config/workspace.config";
2523
import { userGroupsConfig } from "./config/usergroups.config";
2624
import DeployableItemsTab from "./components/DeployableItemsTab";
@@ -38,55 +36,30 @@ const EnvironmentDetail: React.FC = () => {
3836
// Get environment ID from URL params
3937
const {
4038
environment,
41-
isLoadingEnvironment: envLoading,
42-
error: envError,
39+
isLoadingEnvironment,
40+
error
4341
} = useEnvironmentContext();
4442

4543

4644

47-
// If loading, show spinner
48-
if (envLoading) {
45+
if (isLoadingEnvironment) {
4946
return (
50-
<div
51-
style={{
52-
display: "flex",
53-
justifyContent: "center",
54-
alignItems: "center",
55-
height: "100%",
56-
padding: "50px",
57-
}}
58-
>
59-
<Spin size="large" tip="Loading environment details..." />
47+
<div style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}>
48+
<Spin size="large" tip="Loading environment..." />
6049
</div>
6150
);
6251
}
6352

64-
// If error, show error message
65-
if (envError) {
53+
if (error || !environment) {
6654
return (
6755
<Alert
68-
message="Error loading environment details"
69-
description={envError}
56+
message="Error loading environment"
57+
description={error || "Environment not found"}
7058
type="error"
7159
showIcon
72-
style={{ margin: "24px" }}
73-
/>
74-
);
75-
}
76-
77-
// If no environment data, show message
78-
if (!environment) {
79-
return (
80-
<Alert
81-
message="Environment not found"
82-
description="The requested environment could not be found"
83-
type="warning"
84-
showIcon
85-
style={{ margin: "24px" }}
8660
/>
8761
);
8862
}
89-
9063
return (
9164
<div className="environment-detail-container" style={{ padding: "24px" }}>
9265
{/* Header with environment name and controls */}

‎client/packages/lowcoder/src/pages/setting/environments/Environments.tsx

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { Switch, Route } from "react-router-dom";
3+
import { EnvironmentProvider } from "./context/EnvironmentContext";
34
import EnvironmentsList from "./EnvironmentsList";
45
import EnvironmentScopedRoutes from "./components/EnvironmentScopedRoutes";
56

@@ -8,20 +9,26 @@ import {
89
ENVIRONMENT_DETAIL
910
} from "@lowcoder-ee/constants/routesURL";
1011

12+
/**
13+
* Top-level Environments component that wraps all environment-related routes
14+
* with the EnvironmentProvider for shared state management
15+
*/
1116
const Environments: React.FC = () => {
1217
return (
13-
<Switch>
14-
{/* Route that shows the list of environments */}
15-
<Route exact path={ENVIRONMENT_SETTING}>
16-
<EnvironmentsList />
17-
</Route>
18+
<EnvironmentProvider>
19+
<Switch>
20+
{/* Route that shows the list of environments */}
21+
<Route exact path={ENVIRONMENT_SETTING}>
22+
<EnvironmentsList />
23+
</Route>
1824

19-
{/* All other routes under /environments/:envId */}
20-
<Route path={ENVIRONMENT_DETAIL}>
21-
<EnvironmentScopedRoutes />
22-
</Route>
23-
</Switch>
25+
{/* All other routes under /environments/:envId */}
26+
<Route path={ENVIRONMENT_DETAIL}>
27+
<EnvironmentScopedRoutes />
28+
</Route>
29+
</Switch>
30+
</EnvironmentProvider>
2431
);
2532
};
2633

27-
export default Environments;
34+
export default Environments;

‎client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useState } from "react";
2-
import { Table, Typography, Alert, Input, Button, Space, Empty } from "antd";
2+
import { Typography, Alert, Input, Button, Space, Empty } from "antd";
33
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
44
import { useHistory } from "react-router-dom";
5-
import { useEnvironments } from "./hooks/useEnvironments";
5+
import { useEnvironmentContext } from "./context/EnvironmentContext";
66
import { Environment } from "./types/environment.types";
77
import EnvironmentsTable from "./components/EnvironmentsTable";
88
import { buildEnvironmentId } from "@lowcoder-ee/constants/routesURL";
@@ -11,16 +11,16 @@ const { Title } = Typography;
1111

1212
/**
1313
* Environment Listing Page Component
14-
* Displays a basic table of environments
14+
* Displays a table of environments
1515
*/
1616
const EnvironmentsList: React.FC = () => {
17-
// Use our custom hook to get environments data and states
18-
const { environments, loading, error, refresh } = useEnvironments();
17+
// Use the shared context instead of a local hook
18+
const { environments, isLoadingEnvironments, error, refreshEnvironments } = useEnvironmentContext();
1919

2020
// State for search input
2121
const [searchText, setSearchText] = useState("");
2222

23-
// Hook for navigation (using history instead of navigate)
23+
// Hook for navigation
2424
const history = useHistory();
2525

2626
// Filter environments based on search text
@@ -34,38 +34,6 @@ const EnvironmentsList: React.FC = () => {
3434
);
3535
});
3636

37-
// Define table columns - updated to match the actual data structure
38-
const columns = [
39-
{
40-
title: "Name",
41-
dataIndex: "environmentName",
42-
key: "environmentName",
43-
render: (name: string) => name || "Unnamed Environment",
44-
},
45-
{
46-
title: "Domain",
47-
dataIndex: "environmentFrontendUrl",
48-
key: "environmentFrontendUrl",
49-
render: (url: string) => url || "No URL",
50-
},
51-
{
52-
title: "ID",
53-
dataIndex: "environmentId",
54-
key: "environmentId",
55-
},
56-
{
57-
title: "Stage",
58-
dataIndex: "environmentType",
59-
key: "environmentType",
60-
},
61-
{
62-
title: "Master",
63-
dataIndex: "isMaster",
64-
key: "isMaster",
65-
render: (isMaster: boolean) => (isMaster ? "Yes" : "No"),
66-
},
67-
];
68-
6937
// Handle row click to navigate to environment detail
7038
const handleRowClick = (record: Environment) => {
7139
history.push(buildEnvironmentId(record.environmentId));
@@ -93,7 +61,11 @@ const EnvironmentsList: React.FC = () => {
9361
prefix={<SearchOutlined />}
9462
allowClear
9563
/>
96-
<Button icon={<ReloadOutlined />} onClick={refresh} loading={loading}>
64+
<Button
65+
icon={<ReloadOutlined />}
66+
onClick={() => refreshEnvironments()}
67+
loading={isLoadingEnvironments}
68+
>
9769
Refresh
9870
</Button>
9971
</Space>
@@ -111,7 +83,7 @@ const EnvironmentsList: React.FC = () => {
11183
)}
11284

11385
{/* Empty state handling */}
114-
{!loading && environments.length === 0 && !error ? (
86+
{!isLoadingEnvironments && environments.length === 0 && !error ? (
11587
<Empty
11688
description="No environments found"
11789
image={Empty.PRESENTED_IMAGE_SIMPLE}
@@ -120,12 +92,12 @@ const EnvironmentsList: React.FC = () => {
12092
/* Table component */
12193
<EnvironmentsTable
12294
environments={filteredEnvironments}
123-
loading={loading}
95+
loading={isLoadingEnvironments}
12496
onRowClick={handleRowClick}
12597
/>
12698
)}
12799
</div>
128100
);
129101
};
130102

131-
export default EnvironmentsList;
103+
export default EnvironmentsList;

‎client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentScopedRoutes.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from "react";
1+
import React, { useEffect } from "react";
22
import { Switch, Route, useParams } from "react-router-dom";
3-
import { EnvironmentProvider } from "../context/EnvironmentContext";
4-
3+
import { useEnvironmentContext } from "../context/EnvironmentContext";
54
import EnvironmentDetail from "../EnvironmentDetail";
65
import WorkspaceDetail from "../WorkspaceDetail";
76
import { DeployModalProvider } from "../context/DeployModalContext";
@@ -11,13 +10,23 @@ import {
1110
ENVIRONMENT_WORKSPACE_DETAIL,
1211
} from "@lowcoder-ee/constants/routesURL";
1312

13+
/**
14+
* Component for routes scoped to a specific environment
15+
* Uses the environment ID from the URL parameters to fetch the specific environment
16+
*/
1417
const EnvironmentScopedRoutes: React.FC = () => {
15-
const { environmentId } = useParams<{ environmentId: string }>();
18+
const { environmentId } = useParams<{ environmentId: string }>();
19+
const { refreshEnvironment } = useEnvironmentContext();
20+
21+
// When the environmentId changes, fetch the specific environment
22+
useEffect(() => {
23+
if (environmentId) {
24+
refreshEnvironment(environmentId);
25+
}
26+
}, [environmentId, refreshEnvironment]);
1627

1728
return (
18-
<EnvironmentProvider envId={environmentId}>
19-
20-
<DeployModalProvider>
29+
<DeployModalProvider>
2130
<Switch>
2231
<Route exact path={ENVIRONMENT_DETAIL}>
2332
<EnvironmentDetail />
@@ -27,9 +36,8 @@ const EnvironmentScopedRoutes: React.FC = () => {
2736
<WorkspaceDetail />
2837
</Route>
2938
</Switch>
30-
</DeployModalProvider>
31-
</EnvironmentProvider>
39+
</DeployModalProvider>
3240
);
3341
};
3442

35-
export default EnvironmentScopedRoutes;
43+
export default EnvironmentScopedRoutes;

0 commit comments

Comments
 (0)