-
+
+
+
+
{displayName}
@@ -73,6 +53,6 @@ export const MCPServerCard = ({ server }: { server: MCPServer }) => {
)}
-
+
);
};
diff --git a/mlflow/server/js/src/mcp-registry/components/MCPServerCardGrid.tsx b/mlflow/server/js/src/mcp-registry/components/MCPServerCardGrid.tsx
index 3f85799ac15a3..86bee58e207ee 100644
--- a/mlflow/server/js/src/mcp-registry/components/MCPServerCardGrid.tsx
+++ b/mlflow/server/js/src/mcp-registry/components/MCPServerCardGrid.tsx
@@ -1,9 +1,9 @@
import type { CursorPaginationProps } from '@databricks/design-system';
-import { CursorPagination, Empty, NoIcon, Spinner, useDesignSystemTheme } from '@databricks/design-system';
import { FormattedMessage } from 'react-intl';
import type { MCPServer } from '../types';
import { MCPServerCard } from './MCPServerCard';
+import { PaginatedCardGrid } from './PaginatedCardGrid';
export const MCPServerCardGrid = ({
servers,
@@ -23,83 +23,26 @@ export const MCPServerCardGrid = ({
onNextPage: () => void;
onPreviousPage: () => void;
pageSizeSelect?: CursorPaginationProps['pageSizeSelect'];
-}) => {
- const { theme } = useDesignSystemTheme();
-
- if (isLoading) {
- return (
-
-
-
-
- );
- }
-
- if (!servers?.length && isFiltered) {
- return (
-
- }
- title={
-
- }
- description={null}
- />
-
- );
- }
-
- if (!servers?.length) {
- return null;
- }
-
- return (
-
-
- {servers.map((server) => (
-
- ))}
-
-
-
-
-
- );
-};
+}) => (
+
+ }
+ noResultsMessage={
+
+ }
+ renderItem={(server) =>
}
+ getItemKey={(server) => server.name}
+ />
+);
diff --git a/mlflow/server/js/src/mcp-registry/components/MCPServerListTable.tsx b/mlflow/server/js/src/mcp-registry/components/MCPServerListTable.tsx
index b58a525bf4d71..458b82a0f5780 100644
--- a/mlflow/server/js/src/mcp-registry/components/MCPServerListTable.tsx
+++ b/mlflow/server/js/src/mcp-registry/components/MCPServerListTable.tsx
@@ -21,26 +21,10 @@ import { FormattedMessage, useIntl } from 'react-intl';
import type { MCPServer } from '../types';
import MCPRegistryRoutes from '../routes';
-import { resolveDisplayName } from '../utils';
+import { emptyCenterStyles, resolveDisplayName } from '../utils';
import { Link } from '../../common/utils/RoutingUtils';
import Utils from '../../common/utils/Utils';
-export const emptyCenterStyles = {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- height: '100%',
- minHeight: 400,
- width: '100%',
- '& > div': {
- height: '100%',
- display: 'flex',
- flexDirection: 'column' as const,
- justifyContent: 'center',
- alignItems: 'center',
- },
-};
-
const MCPServerNameCell = ({ getValue, row }: CellContext
) => {
const { theme } = useDesignSystemTheme();
const value = getValue() as string;
diff --git a/mlflow/server/js/src/mcp-registry/components/MCPServerVersionDetail.tsx b/mlflow/server/js/src/mcp-registry/components/MCPServerVersionDetail.tsx
index ed5b11ca16b4a..102dc361bd632 100644
--- a/mlflow/server/js/src/mcp-registry/components/MCPServerVersionDetail.tsx
+++ b/mlflow/server/js/src/mcp-registry/components/MCPServerVersionDetail.tsx
@@ -13,7 +13,7 @@ import {
import { FormattedMessage, useIntl } from 'react-intl';
import type { MCPAccessBinding, MCPServer, MCPServerVersion } from '../types';
-import { STATUS_TAG_COLOR, resolveDisplayName } from '../utils';
+import { STATUS_TAG_COLOR, resolveDisplayName, resolveVersionDisplayName } from '../utils';
import { ServerJSONViewer } from './ServerJSONViewer';
import { MCPServerAccessBindings } from './MCPServerAccessBindings';
import { UpdateVersionStatusModal } from './UpdateVersionStatusModal';
@@ -51,15 +51,23 @@ export const MCPServerVersionDetail = ({
version,
bindings,
bindingsLoading,
+ bindingsError,
aliasesByVersion,
showEditAliasesModal,
+ onAddBinding,
+ onEditBinding,
+ onDeleteBinding,
}: {
server: MCPServer;
version?: MCPServerVersion;
bindings?: MCPAccessBinding[];
bindingsLoading?: boolean;
+ bindingsError?: Error | null;
aliasesByVersion: Record;
showEditAliasesModal?: (versionNumber: string) => void;
+ onAddBinding?: () => void;
+ onEditBinding?: (binding: MCPAccessBinding) => void;
+ onDeleteBinding?: (binding: MCPAccessBinding) => void;
}) => {
const { theme } = useDesignSystemTheme();
const intl = useIntl();
@@ -158,7 +166,7 @@ export const MCPServerVersionDetail = ({
- {displayName}
+ {resolveVersionDisplayName(version, displayName)}
@@ -247,13 +255,21 @@ export const MCPServerVersionDetail = ({
{version.server_json && }
-
+
{
updateStatusMutation.mutate(
{ version: version.version, status: newStatus },
@@ -281,7 +297,7 @@ export const MCPServerVersionDetail = ({
/>
}
isLoading={deleteVersionMutation.isLoading}
- error={(deleteVersionMutation.error as Error | null)?.message ?? null}
+ error={deleteVersionMutation.error?.message ?? null}
onConfirm={() => {
deleteVersionMutation.mutate(version.version, {
onSuccess: () => setDeleteModalVisible(false),
diff --git a/mlflow/server/js/src/mcp-registry/components/PaginatedCardGrid.tsx b/mlflow/server/js/src/mcp-registry/components/PaginatedCardGrid.tsx
new file mode 100644
index 0000000000000..af9b3880f01e5
--- /dev/null
+++ b/mlflow/server/js/src/mcp-registry/components/PaginatedCardGrid.tsx
@@ -0,0 +1,104 @@
+import type { CursorPaginationProps } from '@databricks/design-system';
+import { CursorPagination, Empty, NoIcon, Spinner, useDesignSystemTheme } from '@databricks/design-system';
+
+import { emptyCenterStyles } from '../utils';
+
+export const PaginatedCardGrid = ({
+ items,
+ isLoading,
+ isFiltered,
+ hasNextPage,
+ hasPreviousPage,
+ onNextPage,
+ onPreviousPage,
+ pageSizeSelect,
+ loadingMessage,
+ noResultsMessage,
+ emptyState,
+ renderItem,
+ getItemKey,
+}: {
+ items?: T[];
+ isLoading?: boolean;
+ isFiltered?: boolean;
+ hasNextPage: boolean;
+ hasPreviousPage: boolean;
+ onNextPage: () => void;
+ onPreviousPage: () => void;
+ pageSizeSelect?: CursorPaginationProps['pageSizeSelect'];
+ loadingMessage: React.ReactNode;
+ noResultsMessage: React.ReactNode;
+ emptyState?: React.ReactNode;
+ renderItem: (item: T) => React.ReactNode;
+ getItemKey: (item: T) => string | number;
+}) => {
+ const { theme } = useDesignSystemTheme();
+
+ if (isLoading) {
+ return (
+
+
+ {loadingMessage}
+
+ );
+ }
+
+ if (!items?.length && isFiltered) {
+ return (
+
+ } title={noResultsMessage} description={null} />
+
+ );
+ }
+
+ if (!items?.length) {
+ return emptyState ? {emptyState}
: null;
+ }
+
+ return (
+
+
+ {items.map((item) => (
+
{renderItem(item)}
+ ))}
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !binding) {
+ return (
+
+
+
+
+ }
+ description={error?.message}
+ closable={false}
+ />
+
+ );
+ }
+
+ const displayName = resolveBindingDisplayName(binding);
+ const description = binding.resolved_version?.server_json?.description;
+ const target = binding.server_alias || binding.server_version || '—';
+ const versionStatus = binding.resolved_version?.status;
+
+ return (
+
+
+
+
+
+ }
+ aria-label={intl.formatMessage({
+ defaultMessage: 'More actions',
+ description: 'Aria label for access binding detail actions overflow menu',
+ })}
+ />
+
+
+ setDeleteModalVisible(true)}
+ >
+
+
+
+
+ }
+ onClick={() => setEditModalOpen(true)}
+ >
+
+
+
+ }
+ />
+
+
+ {description && (
+ <>
+
+
+
+ {description}
+
+ )}
+
+
+
+
+
+ {binding.endpoint_url}
+
+ }
+ onClick={() => copyToClipboard(binding.endpoint_url)}
+ css={{ flexShrink: 0 }}
+ />
+
+
+
+
+
+
+ {formatTransportType(binding.transport_type)}
+
+
+
+
+
+ {binding.server_name}
+
+
+
+
+
+
+ {target}
+ {versionStatus && (
+
+ {versionStatus}
+
+ )}
+
+
+
+
+
+
+ {binding.last_updated_timestamp ? Utils.formatTimestamp(binding.last_updated_timestamp, intl) : '—'}
+
+
+
+
+
+ {binding.last_updated_by || '—'}
+
+
+
+
+
+ {binding.creation_timestamp ? Utils.formatTimestamp(binding.creation_timestamp, intl) : '—'}
+
+
+
+
+
+ {binding.created_by || '—'}
+
+
+
+
+
+
+
+
+ setEditModalOpen(false)}
+ onSuccess={() => refetch()}
+ editBinding={binding}
+ lockedServer={binding.server_name}
+ />
+
+
+ }
+ isLoading={deleteMutation.isLoading}
+ error={deleteMutation.error?.message ?? null}
+ onConfirm={() => {
+ deleteMutation.mutate(
+ { serverName: binding.server_name, bindingId: binding.binding_id },
+ {
+ onSuccess: () => {
+ setDeleteModalVisible(false);
+ navigate(MCPRegistryRoutes.mcpRegistryPageRoute);
+ },
+ },
+ );
+ }}
+ onCancel={() => {
+ deleteMutation.reset();
+ setDeleteModalVisible(false);
+ }}
+ />
+
+ );
+};
+
+export default withErrorBoundary(ErrorUtils.mlflowServices.EXPERIMENTS, MCPAccessBindingDetailPage);
diff --git a/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.test.tsx b/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.test.tsx
index 2af95a3755bec..9033dff7c55bd 100644
--- a/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.test.tsx
+++ b/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.test.tsx
@@ -11,12 +11,14 @@ import { setupServer } from '../../common/utils/setup-msw';
import MCPRegistryPage from './MCPRegistryPage';
import {
createMockMCPServer,
+ createMockMCPAccessBinding,
getMockedSearchMCPServersResponse,
getMockedSearchMCPServersErrorResponse,
+ getMockedSearchMCPAccessBindingsAllResponse,
} from '../test-utils';
describe('MCPRegistryPage', () => {
- const server = setupServer(getMockedSearchMCPServersResponse([]));
+ const server = setupServer(getMockedSearchMCPServersResponse([]), getMockedSearchMCPAccessBindingsAllResponse([]));
const renderPage = (initialEntries = ['/']) => {
const queryClient = new QueryClient();
@@ -45,12 +47,40 @@ describe('MCPRegistryPage', () => {
await waitFor(() => {
expect(screen.getByText('MCP Registry')).toBeInTheDocument();
});
- expect(screen.getByText('Servers')).toBeInTheDocument();
expect(screen.getByText('Access Bindings')).toBeInTheDocument();
+ expect(screen.getByText('Servers')).toBeInTheDocument();
+ });
+
+ it('defaults to access bindings tab', async () => {
+ renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('MCP Registry')).toBeInTheDocument();
+ });
+ expect(screen.getByPlaceholderText('Search access bindings')).toBeInTheDocument();
+ });
+
+ it('shows create server empty state on access bindings tab when no servers exist', async () => {
+ renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('Register an MCP server before creating access bindings.')).toBeInTheDocument();
+ });
});
- it('renders empty state when no servers exist', async () => {
+ it('switches to servers tab', async () => {
renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('MCP Registry')).toBeInTheDocument();
+ });
+
+ await userEvent.click(screen.getByText('Servers'));
+
+ await waitFor(() => {
+ expect(screen.getByPlaceholderText('Search MCP servers by name')).toBeInTheDocument();
+ });
+ });
+
+ it('renders empty state on servers tab when no servers exist', async () => {
+ renderPage(['/?tab=servers']);
await waitFor(() => {
expect(screen.getByText('Create and manage MCP servers using MLflow.')).toBeInTheDocument();
});
@@ -62,7 +92,7 @@ describe('MCPRegistryPage', () => {
createMockMCPServer({ name: 'server-2', display_name: 'My Server 2' }),
];
server.use(getMockedSearchMCPServersResponse(servers));
- renderPage();
+ renderPage(['/?tab=servers']);
await waitFor(() => {
expect(screen.getByText('My Server 1')).toBeInTheDocument();
expect(screen.getByText('My Server 2')).toBeInTheDocument();
@@ -82,7 +112,7 @@ describe('MCPRegistryPage', () => {
);
}),
);
- renderPage();
+ renderPage(['/?tab=servers']);
const searchInput = screen.getByPlaceholderText('Search MCP servers by name');
await userEvent.type(searchInput, 'raw');
@@ -95,34 +125,21 @@ describe('MCPRegistryPage', () => {
it('shows Create MCP server button when servers exist', async () => {
const servers = [createMockMCPServer({ name: 's1', display_name: 'Server 1' })];
server.use(getMockedSearchMCPServersResponse(servers));
- renderPage();
+ renderPage(['/?tab=servers']);
await waitFor(() => {
expect(screen.getByText('Server 1')).toBeInTheDocument();
});
- expect(screen.getByText('Create MCP server')).toBeInTheDocument();
+ expect(screen.getAllByText('Create MCP server').length).toBeGreaterThanOrEqual(1);
});
it('renders error alert when API fails', async () => {
server.use(getMockedSearchMCPServersErrorResponse(500, 'Something broke'));
- renderPage();
+ renderPage(['/?tab=servers']);
await waitFor(() => {
expect(screen.getByText('Something broke')).toBeInTheDocument();
});
});
- it('switches to access bindings tab', async () => {
- renderPage();
- await waitFor(() => {
- expect(screen.getByText('MCP Registry')).toBeInTheDocument();
- });
-
- await userEvent.click(screen.getByText('Access Bindings'));
-
- await waitFor(() => {
- expect(screen.getByText('Create and manage direct access endpoints for your MCP servers.')).toBeInTheDocument();
- });
- });
-
it('sends max_results query parameter to the API', async () => {
let capturedMaxResults: string | null = null;
server.use(
@@ -150,14 +167,12 @@ describe('MCPRegistryPage', () => {
);
}),
);
- renderPage();
+ renderPage(['/?tab=servers']);
- // Wait for initial load (grid view has pagination now)
await waitFor(() => {
expect(screen.getByText('Test')).toBeInTheDocument();
});
- // Click next to go to page 2
await waitFor(() => {
expect(screen.getByText('Next')).toBeInTheDocument();
});
@@ -167,7 +182,6 @@ describe('MCPRegistryPage', () => {
expect(capturedPageTokens).toContain('token-abc');
});
- // Now type a search filter — should reset page_token to null
const searchInput = screen.getByPlaceholderText('Search MCP servers by name');
await userEvent.type(searchInput, 'test');
@@ -184,7 +198,7 @@ describe('MCPRegistryPage', () => {
res(ctx.json({ mcp_servers: servers, next_page_token: 'next-token' })),
),
);
- renderPage();
+ renderPage(['/?tab=servers']);
await waitFor(() => {
expect(screen.getByText('Server 1')).toBeInTheDocument();
@@ -196,7 +210,7 @@ describe('MCPRegistryPage', () => {
it('renders page size selector in grid view', async () => {
const servers = [createMockMCPServer({ name: 'server-1', display_name: 'Server 1' })];
server.use(getMockedSearchMCPServersResponse(servers));
- renderPage();
+ renderPage(['/?tab=servers']);
await waitFor(() => {
expect(screen.getByText('Server 1')).toBeInTheDocument();
@@ -212,7 +226,7 @@ describe('MCPRegistryPage', () => {
return res(ctx.json({ mcp_servers: [], next_page_token: undefined }));
}),
);
- renderPage();
+ renderPage(['/?tab=servers']);
const searchInput = screen.getByPlaceholderText('Search MCP servers by name');
await userEvent.type(searchInput, "status = 'active'");
@@ -230,19 +244,16 @@ describe('MCPRegistryPage', () => {
return res(ctx.json({ mcp_servers: [], next_page_token: undefined }));
}),
);
- renderPage();
+ renderPage(['/?tab=servers']);
- // Wait for initial load
await waitFor(() => {
expect(callCount).toBeGreaterThanOrEqual(1);
});
const initialCallCount = callCount;
- // Type multiple characters quickly
const searchInput = screen.getByPlaceholderText('Search MCP servers by name');
await userEvent.type(searchInput, 'abcdef');
- // Wait for debounce to settle (500ms)
await waitFor(
() => {
expect(callCount).toBeGreaterThan(initialCallCount);
@@ -270,7 +281,7 @@ describe('MCPRegistryPage', () => {
return res(ctx.json({ mcp_servers: servers, next_page_token: undefined }));
}),
);
- renderPage();
+ renderPage(['/?tab=servers']);
await waitFor(() => {
expect(screen.getByText('Original Server')).toBeInTheDocument();
@@ -279,12 +290,10 @@ describe('MCPRegistryPage', () => {
const searchInput = screen.getByPlaceholderText('Search MCP servers by name');
await userEvent.type(searchInput, 'test');
- // Old data should still be visible during the loading period
await waitFor(() => {
expect(screen.getByText('Original Server')).toBeInTheDocument();
});
- // Eventually new data appears
await waitFor(
() => {
expect(screen.getByText('Filtered Server')).toBeInTheDocument();
@@ -292,4 +301,66 @@ describe('MCPRegistryPage', () => {
{ timeout: 3000 },
);
});
+
+ // --- Access Bindings tab tests ---
+
+ it('renders binding cards on access bindings tab', async () => {
+ const servers = [createMockMCPServer({ name: 'io.test/server', display_name: 'Test Server' })];
+ const bindings = [
+ createMockMCPAccessBinding({
+ binding_id: 1,
+ server_name: 'io.test/server',
+ server_alias: 'production',
+ }),
+ ];
+ server.use(getMockedSearchMCPServersResponse(servers), getMockedSearchMCPAccessBindingsAllResponse(bindings));
+ renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('io.test/server')).toBeInTheDocument();
+ });
+ expect(screen.getByText('production')).toBeInTheDocument();
+ });
+
+ it('shows create server empty state on bindings tab when no servers exist', async () => {
+ renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('Register an MCP server before creating access bindings.')).toBeInTheDocument();
+ });
+ });
+
+ it('shows create endpoint empty state on bindings tab when servers exist but no bindings', async () => {
+ const servers = [createMockMCPServer({ name: 'io.test/server' })];
+ server.use(getMockedSearchMCPServersResponse(servers), getMockedSearchMCPAccessBindingsAllResponse([]));
+ renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('Create and manage direct access endpoints for your MCP servers.')).toBeInTheDocument();
+ });
+ });
+
+ it('disables create binding button when no servers exist', async () => {
+ renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('Register an MCP server before creating access bindings.')).toBeInTheDocument();
+ });
+ const createButton = screen.getByText('Create access binding').closest('button');
+ expect(createButton).toBeDisabled();
+ });
+
+ it('enables create binding button when servers exist', async () => {
+ const servers = [createMockMCPServer({ name: 'io.test/server' })];
+ server.use(getMockedSearchMCPServersResponse(servers), getMockedSearchMCPAccessBindingsAllResponse([]));
+ renderPage();
+ await waitFor(() => {
+ const createButton = screen.getByText('Create access binding').closest('button');
+ expect(createButton).not.toBeDisabled();
+ });
+ });
+
+ it('renders view toggle on bindings tab', async () => {
+ renderPage();
+ await waitFor(() => {
+ expect(screen.getByText('MCP Registry')).toBeInTheDocument();
+ });
+ expect(screen.getByPlaceholderText('Search access bindings')).toBeInTheDocument();
+ });
});
diff --git a/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.tsx b/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.tsx
index a5317c22bf650..3beef6117ab51 100644
--- a/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.tsx
+++ b/mlflow/server/js/src/mcp-registry/pages/MCPRegistryPage.tsx
@@ -11,11 +11,9 @@ import {
SegmentedControlGroup,
WrenchIcon,
Spacer,
- Table,
- TableHeader,
- TableRow,
TableFilterInput,
TableFilterLayout,
+ Typography,
useDesignSystemTheme,
} from '@databricks/design-system';
import type { RadioChangeEvent } from '@databricks/design-system';
@@ -27,8 +25,14 @@ import ErrorUtils from '../../common/utils/ErrorUtils';
import { useSearchParams } from '../../common/utils/RoutingUtils';
import { ModelSearchInputHelpTooltip } from '../../model-registry/components/model-list/ModelListFilters';
import { useMCPServersListQuery } from '../hooks/useMCPServersListQuery';
+import { useMCPAccessBindingsListQuery } from '../hooks/useMCPAccessBindingsListQuery';
import { MCPServerCardGrid } from '../components/MCPServerCardGrid';
-import { MCPServerListTable, emptyCenterStyles } from '../components/MCPServerListTable';
+import { MCPServerListTable } from '../components/MCPServerListTable';
+import type { MCPAccessBinding } from '../types';
+import { emptyCenterStyles } from '../utils';
+import { MCPAccessBindingCardGrid } from '../components/MCPAccessBindingCardGrid';
+import { MCPAccessBindingListTable } from '../components/MCPAccessBindingListTable';
+import { AccessBindingModal } from '../components/AccessBindingModal';
import { useDebounce } from 'use-debounce';
type ViewMode = 'list' | 'grid';
@@ -39,9 +43,11 @@ const MCPRegistryPage = () => {
const intl = useIntl();
const [searchParams, setSearchParams] = useSearchParams();
const tabFromUrl = searchParams.get('tab');
- const activeTab: ActiveTab = tabFromUrl === 'bindings' ? 'bindings' : 'servers';
+ const activeTab: ActiveTab = tabFromUrl === 'servers' ? 'servers' : 'bindings';
const [viewMode, setViewMode] = useState('grid');
const [searchFilter, setSearchFilter] = useState('');
+ const [bindingModalOpen, setBindingModalOpen] = useState(false);
+ const [editingBinding, setEditingBinding] = useState(undefined);
const [debouncedSearchFilter] = useDebounce(searchFilter, 500);
const effectiveFilter = searchFilter ? debouncedSearchFilter : undefined;
@@ -54,14 +60,30 @@ const MCPRegistryPage = () => {
onNextPage,
onPreviousPage,
pageSizeSelect,
- } = useMCPServersListQuery({ searchFilter: effectiveFilter });
+ } = useMCPServersListQuery({
+ searchFilter: activeTab === 'servers' ? effectiveFilter : undefined,
+ });
+
+ const {
+ data: bindings,
+ isLoading: bindingsLoading,
+ error: bindingsError,
+ hasNextPage: bindingsHasNextPage,
+ hasPreviousPage: bindingsHasPreviousPage,
+ onNextPage: bindingsOnNextPage,
+ onPreviousPage: bindingsOnPreviousPage,
+ pageSizeSelect: bindingsPageSizeSelect,
+ } = useMCPAccessBindingsListQuery({
+ searchFilter: activeTab === 'bindings' ? effectiveFilter : undefined,
+ enabled: activeTab === 'bindings',
+ });
const handleTabChange = useCallback(
(e: RadioChangeEvent) => {
const value = e.target.value as ActiveTab;
setSearchFilter('');
const next = new URLSearchParams(searchParams);
- if (value === 'servers') {
+ if (value === 'bindings') {
next.delete('tab');
} else {
next.set('tab', value);
@@ -71,12 +93,25 @@ const MCPRegistryPage = () => {
[searchParams, setSearchParams],
);
- const isEmptyState = !isLoading && !error && !servers?.length && !searchFilter;
- const createButton = !isEmptyState ? (
-
- ) : null;
+ const isServersEmpty = !isLoading && !error && !servers?.length && !searchFilter;
+ const createButton =
+ activeTab === 'bindings' ? (
+
+ ) : !isServersEmpty ? (
+
+ ) : null;
const serversEmptyState = (
@@ -133,12 +168,12 @@ const MCPRegistryPage = () => {
onChange={handleTabChange}
componentId="mlflow.mcp_registry.tabs"
>
-
-
-
+
+
+
{activeTab === 'servers' && (
@@ -186,7 +221,7 @@ const MCPRegistryPage = () => {
/>
)}
{viewMode === 'grid' ? (
- isEmptyState ? (
+ isServersEmpty ? (
serversEmptyState
) : (
{
)}
{activeTab === 'bindings' && (
- <>
-
-
- setSearchFilter(e.target.value)}
- suffix={null}
- />
-
+
+
+
+
+ setSearchFilter(e.target.value)}
+ suffix={null}
+ />
+
+
+
setViewMode(e.target.value as ViewMode)}
+ componentId="mlflow.mcp_registry.bindings.view_toggle"
+ >
+ } />
+ } />
+
-
-
- }
- description={
+
+
+
+ {bindingsError?.message && (
+
+ )}
+ {isServersEmpty && viewMode === 'grid' ? (
+
+
+ }
+ description={
+
+ }
+ button={
+ }
+ disabled
+ >
- }
- button={
- }
- disabled
- >
+
+ }
+ />
+
+ ) : viewMode === 'grid' ? (
+ {
+ setEditingBinding(undefined);
+ setBindingModalOpen(true);
+ }}
+ />
+ ) : (
+ {
+ setEditingBinding(undefined);
+ setBindingModalOpen(true);
+ }}
+ onEditBinding={(binding) => {
+ setEditingBinding(binding);
+ setBindingModalOpen(true);
+ }}
+ emptyStateOverride={
+ isServersEmpty ? (
+
-
- }
- />
-
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ }
+ description={
+
+ }
+ button={
+
}
+ disabled
+ >
+
+
+ }
+ />
+ ) : undefined
+ }
+ />
+ )}
+
)}
{
version={currentVersion}
bindings={bindings}
bindingsLoading={bindingsLoading}
+ bindingsError={bindingsError}
aliasesByVersion={aliasesByVersion}
showEditAliasesModal={showEditAliasesModal}
+ onAddBinding={() => setAddBindingModalOpen(true)}
+ onEditBinding={(binding) => {
+ setEditingBinding(binding);
+ setAddBindingModalOpen(true);
+ }}
+ onDeleteBinding={setDeletingBinding}
/>
{EditAliasesModal}
+