diff --git a/frontend/src/components/pages/connect/overview.test.tsx b/frontend/src/components/pages/connect/overview.test.tsx new file mode 100644 index 0000000000..dc0d9ca013 --- /dev/null +++ b/frontend/src/components/pages/connect/overview.test.tsx @@ -0,0 +1,52 @@ +/** + * Copyright 2026 Redpanda Data, Inc. + * + * Use of this software is governed by the Business Source License + * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md + * + * As of the Change Date specified in that file, in accordance with + * the Business Source License, use of this software will be governed + * by the Apache License, Version 2.0 + */ + +import { create } from '@bufbuild/protobuf'; +import { createRouterTransport } from '@connectrpc/connect'; +import { isEmbedded } from 'config'; +import { ListPipelinesResponseSchema } from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb'; +import { listPipelines } from 'protogen/redpanda/api/console/v1alpha1/pipeline-PipelineService_connectquery'; +import { renderWithFileRoutes, screen, waitFor } from 'test-utils'; +import { describe, expect, it, vi } from 'vitest'; + +vi.mock('config', async (importOriginal) => ({ + ...(await importOriginal()), + isEmbedded: vi.fn(), +})); + +import KafkaConnectOverview from './overview'; +import { useSupportedFeaturesStore } from '../../../state/supported-features'; + +const NEW_LIST_CTA = 'Create a pipeline'; + +const transport = createRouterTransport(({ rpc }) => { + rpc(listPipelines, () => create(ListPipelinesResponseSchema, { response: {} })); +}); + +const renderPage = (embedded: boolean) => { + vi.mocked(isEmbedded).mockReturnValue(embedded); + renderWithFileRoutes(, { transport }); +}; + +describe('Connect overview mount', () => { + it('renders the new pipelines list in Cloud', async () => { + renderPage(true); + + await waitFor(() => expect(screen.getByRole('button', { name: NEW_LIST_CTA })).toBeInTheDocument()); + }); + + it('keeps the legacy path when not embedded', async () => { + useSupportedFeaturesStore.setState({ pipelinesApi: false }); + renderPage(false); + await waitFor(() => expect(screen.getByText('Using Redpanda Connect')).toBeInTheDocument()); + expect(screen.queryByRole('button', { name: NEW_LIST_CTA })).not.toBeInTheDocument(); + }); +}); diff --git a/frontend/src/components/pages/connect/overview.tsx b/frontend/src/components/pages/connect/overview.tsx index af42c009e9..f7f7c93e5b 100644 --- a/frontend/src/components/pages/connect/overview.tsx +++ b/frontend/src/components/pages/connect/overview.tsx @@ -29,7 +29,7 @@ import { TaskState, TasksColumn, } from './helper'; -import { isServerless } from '../../../config'; +import { isEmbedded, isServerless } from '../../../config'; import { ListSecretScopesRequestSchema } from '../../../protogen/redpanda/api/dataplane/v1/secret_pb'; import { appGlobal } from '../../../state/app-global'; import { api, rpcnSecretManagerApi } from '../../../state/backend-api'; @@ -42,6 +42,7 @@ import SearchBar from '../../misc/search-bar'; import Section from '../../misc/section'; import Tabs, { type Tab } from '../../misc/tabs/tabs'; import { PageComponent, type PageInitHelper } from '../page'; +import { PipelineListPage } from '../rp-connect/pipeline/list'; import RpConnectPipelinesList from '../rp-connect/pipelines-list'; import { RedpandaConnectIntro } from '../rp-connect/redpanda-connect-intro'; @@ -140,6 +141,10 @@ class KafkaConnectOverview extends PageComponent<{ } render() { + // Cloud gets the new list; self-hosted keeps the tabs below. + if (isEmbedded()) { + return ; + } if (this.props.isLoadingKafkaConnectors) { return ; }