Skip to content

Add error component on invalid URL and managed-obj endpoint #1694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 21, 2025
Merged

Add error component on invalid URL and managed-obj endpoint #1694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ead10b
Fix link managed issue for the deployable items
iamfaran May 20, 2025
60f9b34
Fix filters response for the APPS
iamfaran May 20, 2025
ed55d12
remove console logs
iamfaran May 20, 2025
29a4fae
add err component and fix errors
iamfaran May 20, 2025
392a4ad
Merge branch 'ee-setup' of github.com:lowcoder-org/lowcoder into fix/…
iamfaran May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 7 additions & 39 deletions client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

/**
Expand Down Expand Up @@ -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"
/>
);
}

Expand Down
10 changes: 2 additions & 8 deletions client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down
14 changes: 7 additions & 7 deletions client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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);

Expand All @@ -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"
/>
);
}

Expand Down
38 changes: 38 additions & 0 deletions client/packages/lowcoder/src/pages/setting/environments/components/ErrorComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
3 changes: 2 additions & 1 deletion client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
3 changes: 2 additions & 1 deletion client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
5 changes: 3 additions & 2 deletions client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export interface DeployAppParams {
envId: string;
targetEnvId: string;
applicationId: string;
applicationGid: string;
updateDependenciesIfNeeded?: boolean;
publishOnTarget?: boolean;
publicToAll?: boolean;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
7 changes: 4 additions & 3 deletions client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -54,7 +56,6 @@ export async function getWorkspaceDataSources(
orgId: workspaceId
}
});
console.log("data source response",response);

// Check if response is valid
if (!response.data) {
Expand Down Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion client/packages/lowcoder/src/pages/setting/environments/services/enterprise.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 [];
Expand Down
8 changes: 2 additions & 6 deletions client/packages/lowcoder/src/pages/setting/environments/services/environments.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 [];
Expand Down Expand Up @@ -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,
Expand All @@ -444,8 +442,6 @@ export async function getWorkspaceQueries(
managed: false // Default to unmanaged
}));

console.log("queries",queries);

return {
queries,
total: response.data.total
Expand Down
12 changes: 2 additions & 10 deletions client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface MergedQueriesResult {
targetEnvId: string;
queryId: string;
updateDependenciesIfNeeded?: boolean;
queryGid: string;
}


Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -84,7 +76,7 @@ export interface MergedQueriesResult {
});
if (response.status === 200) {
await transferManagedObject(
params.queryId,
params.queryGid,
params.envId,
params.targetEnvId,
ManagedObjectType.QUERY
Expand Down
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading