Skip to content

[Fix]: Update more UI Pages for the Environments + Add API Call Count in UI #1724

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.

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 16 commits into from
May 29, 2025
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
[Fix] tabs and breadcrumbs error
  • Loading branch information
iamfaran committed May 29, 2025
commit 55ff3e55af6643a044111e712adbc79facb85ad7
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import EnvironmentHeader from "./components/EnvironmentHeader";
import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
import { getEnvironmentTagColor } from "./utils/environmentUtils";
import ErrorComponent from './components/ErrorComponent';
const { TabPane } = Tabs;

/**
* Environment Detail Page Component
Expand Down Expand Up @@ -140,6 +139,27 @@ const EnvironmentDetail: React.FC = () => {
}
];

const tabItems = [
{
key: 'workspaces',
label: (
<span>
<AppstoreOutlined /> Workspaces
</span>
),
children: <WorkspacesTab environment={environment} />
},
{
key: 'userGroups',
label: (
<span>
<UsergroupAddOutlined /> User Groups
</span>
),
children: <UserGroupsTab environment={environment} />
}
];

return (
<div
className="environment-detail-container"
Expand Down Expand Up @@ -227,29 +247,8 @@ const EnvironmentDetail: React.FC = () => {
onChange={setActiveTab}
className="modern-tabs"
type="line"
>
<TabPane
tab={
<span>
<AppstoreOutlined /> Workspaces
</span>
}
key="workspaces"
>
<WorkspacesTab environment={environment} />
</TabPane>

<TabPane
tab={
<span>
<UsergroupAddOutlined /> User Groups
</span>
}
key="userGroups"
>
<UserGroupsTab environment={environment} />
</TabPane>
</Tabs>
items={tabItems}
/>

{/* Edit Environment Modal */}
{environment && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,12 @@ import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
import WorkspaceHeader from "./components/WorkspaceHeader";
import ErrorComponent from "./components/ErrorComponent";

const { TabPane } = Tabs;

const WorkspaceDetail: React.FC = () => {
// Use the context hooks
const { environment } = useSingleEnvironmentContext();
const { workspace, isLoading, error, toggleManagedStatus } = useWorkspaceContext();
const { openDeployModal } = useDeployModal();


const [isToggling, setIsToggling] = useState(false);

// Handle toggle managed status
Expand All @@ -58,7 +55,17 @@ 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..." style={{ display: 'block', textAlign: 'center' }} />
<Spin size="large" spinning={true}>
<div style={{
display: 'block',
textAlign: 'center',
padding: '20px',
color: '#8c8c8c',
fontSize: '14px'
}}>
Loading workspace details...
</div>
</Spin>
</div>
);
}
Expand Down Expand Up @@ -98,6 +105,51 @@ const WorkspaceDetail: React.FC = () => {
}
];

const tabItems = [
{
key: 'apps',
label: (
<span>
<AppstoreOutlined /> Apps
</span>
),
children: (
<AppsTab
environment={environment}
workspaceId={workspace.id}
/>
)
},
{
key: 'dataSources',
label: (
<span>
<DatabaseOutlined /> Data Sources
</span>
),
children: (
<DataSourcesTab
environment={environment}
workspaceId={workspace.id}
/>
)
},
{
key: 'queries',
label: (
<span>
<CodeOutlined /> Queries
</span>
),
children: (
<QueriesTab
environment={environment}
workspaceId={workspace.id}
/>
)
}
];

return (
<div className="workspace-detail-container" style={{
padding: "24px",
Expand All @@ -122,28 +174,8 @@ const WorkspaceDetail: React.FC = () => {
defaultActiveKey="apps"
className="modern-tabs"
type="line"
>
<TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
<AppsTab
environment={environment}
workspaceId={workspace.id}
/>
</TabPane>

<TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
<DataSourcesTab
environment={environment}
workspaceId={workspace.id}
/>
</TabPane>
<TabPane tab={<span><CodeOutlined /> Queries</span>} key="queries">
<QueriesTab
environment={environment}
workspaceId={workspace.id}
/>
</TabPane>

</Tabs>
items={tabItems}
/>
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
import { Breadcrumb } from 'antd';
import { BreadcrumbProps } from 'antd/lib/breadcrumb';

interface ModernBreadcrumbsProps extends BreadcrumbProps {
interface ModernBreadcrumbsProps extends Omit<BreadcrumbProps, 'items'> {
/**
* Items to display in the breadcrumb
*/
Expand All @@ -17,6 +17,25 @@ interface ModernBreadcrumbsProps extends BreadcrumbProps {
* Modern styled breadcrumb component with consistent styling
*/
const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
// Convert custom items format to Antd's expected format
const breadcrumbItems = items.map(item => ({
key: item.key,
title: item.onClick ? (
<span
style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
onClick={item.onClick}
onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
>
{item.title}
</span>
) : (
<span style={{ color: '#595959', fontWeight: '500' }}>
{item.title}
</span>
)
}));

return (
<div className="modern-breadcrumb" style={{
background: '#e6f7ff',
Expand All @@ -27,26 +46,7 @@ const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...pr
display: 'flex',
alignItems: 'center'
}}>
<Breadcrumb {...props} separator="/">
{items.map(item => (
<Breadcrumb.Item key={item.key}>
{item.onClick ? (
<span
style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
onClick={item.onClick}
onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
>
{item.title}
</span>
) : (
<span style={{ color: '#595959', fontWeight: '500' }}>
{item.title}
</span>
)}
</Breadcrumb.Item>
))}
</Breadcrumb>
<Breadcrumb {...props} separator="/" items={breadcrumbItems} />
</div>
);
};
Expand Down