Skip to content

Commit

Permalink
FE: Create connector button throws 404 if KC cluster is inaccessible (#…
Browse files Browse the repository at this point in the history
…136)

Co-authored-by: Roman Zabaluev <[email protected]>
  • Loading branch information
Nilumilak and Haarolean authored Mar 7, 2024
1 parent 81f73a5 commit 135055c
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 19 deletions.
40 changes: 25 additions & 15 deletions frontend/src/components/Connect/List/ListPage.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import React, { Suspense } from 'react';
import useAppParams from 'lib/hooks/useAppParams';
import { clusterConnectorNewRelativePath, ClusterNameRoute } from 'lib/paths';
import { ClusterNameRoute, clusterConnectorNewRelativePath } from 'lib/paths';
import ClusterContext from 'components/contexts/ClusterContext';
import Search from 'components/common/Search/Search';
import * as Metrics from 'components/common/Metrics';
import PageHeading from 'components/common/PageHeading/PageHeading';
import { ActionButton } from 'components/common/ActionComponent';
import Tooltip from 'components/common/Tooltip/Tooltip';
import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
import PageLoader from 'components/common/PageLoader/PageLoader';
import { Action, ConnectorState, ResourceType } from 'generated-sources';
import { useConnectors } from 'lib/hooks/api/kafkaConnect';
import { ConnectorState, Action, ResourceType } from 'generated-sources';
import { useConnectors, useConnects } from 'lib/hooks/api/kafkaConnect';
import { ActionButton } from 'components/common/ActionComponent';

import List from './List';

const ListPage: React.FC = () => {
const { isReadOnly } = React.useContext(ClusterContext);
const { clusterName } = useAppParams<ClusterNameRoute>();
const { data: connects = [] } = useConnects(clusterName);

// Fetches all connectors from the API, without search criteria. Used to display general metrics.
const { data: connectorsMetrics, isLoading } = useConnectors(clusterName);
Expand All @@ -33,17 +35,25 @@ const ListPage: React.FC = () => {
<>
<PageHeading text="Connectors">
{!isReadOnly && (
<ActionButton
buttonType="primary"
buttonSize="M"
to={clusterConnectorNewRelativePath}
permission={{
resource: ResourceType.CONNECT,
action: Action.CREATE,
}}
>
Create Connector
</ActionButton>
<Tooltip
value={
<ActionButton
buttonType="primary"
buttonSize="M"
disabled={!connects.length}
to={clusterConnectorNewRelativePath}
permission={{
resource: ResourceType.CONNECT,
action: Action.CREATE,
}}
>
Create Connector
</ActionButton>
}
showTooltip={!connects.length}
content="No Connects available"
placement="left"
/>
)}
</PageHeading>
<Metrics.Wrapper>
Expand Down
27 changes: 25 additions & 2 deletions frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { connectors } from 'lib/fixtures/kafkaConnect';
import { connectors, connects } from 'lib/fixtures/kafkaConnect';
import ClusterContext, {
ContextProps,
initialValue,
Expand All @@ -8,14 +8,15 @@ import ListPage from 'components/Connect/List/ListPage';
import { screen, within } from '@testing-library/react';
import { render, WithRoute } from 'lib/testHelpers';
import { clusterConnectorsPath } from 'lib/paths';
import { useConnectors } from 'lib/hooks/api/kafkaConnect';
import { useConnectors, useConnects } from 'lib/hooks/api/kafkaConnect';

jest.mock('components/Connect/List/List', () => () => (
<div>Connectors List</div>
));

jest.mock('lib/hooks/api/kafkaConnect', () => ({
useConnectors: jest.fn(),
useConnects: jest.fn(),
}));

jest.mock('components/common/Icons/SpinnerIcon', () => () => 'progressbar');
Expand All @@ -28,6 +29,10 @@ describe('Connectors List Page', () => {
isLoading: false,
data: [],
}));

(useConnects as jest.Mock).mockImplementation(() => ({
data: connects,
}));
});

const renderComponent = async (contextValue: ContextProps = initialValue) =>
Expand Down Expand Up @@ -178,4 +183,22 @@ describe('Connectors List Page', () => {
expect(failedTasksIndicator).toHaveTextContent('Failed Tasks 1');
});
});

describe('Create new connector', () => {
it('Create new connector button is enabled when connects list is not empty', async () => {
await renderComponent();

expect(screen.getByText('Create Connector')).toBeEnabled();
});

it('Create new connector button is disabled when connects list is empty', async () => {
(useConnects as jest.Mock).mockImplementation(() => ({
data: [],
}));

await renderComponent();

expect(screen.getByText('Create Connector')).toBeDisabled();
});
});
});
10 changes: 8 additions & 2 deletions frontend/src/components/common/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,15 @@ interface TooltipProps {
value: React.ReactNode;
content: string;
placement?: Placement;
showTooltip?: boolean;
}

const Tooltip: React.FC<TooltipProps> = ({ value, content, placement }) => {
const Tooltip: React.FC<TooltipProps> = ({
value,
content,
placement,
showTooltip = true,
}) => {
const [open, setOpen] = useState(false);
const { x, y, refs, strategy, context } = useFloating({
open,
Expand All @@ -28,7 +34,7 @@ const Tooltip: React.FC<TooltipProps> = ({ value, content, placement }) => {
<div ref={refs.setReference} {...getReferenceProps()}>
<S.Wrapper>{value}</S.Wrapper>
</div>
{open && (
{showTooltip && open && (
<S.MessageTooltip
ref={refs.setFloating}
style={{
Expand Down

0 comments on commit 135055c

Please sign in to comment.