From d1623b22fe0f8aee074654ad9cc55fc2bc9fdb80 Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Wed, 29 Dec 2021 12:51:25 +0400 Subject: [PATCH 1/6] Updated topic URP status color. --- .../src/components/Topics/Topic/Details/Overview/Overview.tsx | 1 + .../src/components/Topics/Topic/SendMessage/SendMessage.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx index abce1702b59..663b4c3fd09 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx @@ -52,6 +52,7 @@ const Overview: React.FC = ({ label="URP" title="Under replicated partitions" isAlert + alertType={underReplicatedPartitions === 0 ? 'error' : 'success'} > {underReplicatedPartitions} diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx index ee2f9ae038f..2ef8eb2de1d 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx @@ -106,8 +106,8 @@ const SendMessage: React.FC = () => { clusterName, topicName, createTopicMessage: { - key: !key ? null : key, - content: !content ? null : content, + key: !key ? undefined : key, + content: !content ? undefined : content, headers, partition, }, From 2e0ab7b20a75f20a1ae6ed5490efe3291a0b0142 Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Mon, 10 Jan 2022 15:18:42 +0400 Subject: [PATCH 2/6] Small fix. --- .../src/components/Topics/Topic/SendMessage/SendMessage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx index 2ef8eb2de1d..ee2f9ae038f 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx @@ -106,8 +106,8 @@ const SendMessage: React.FC = () => { clusterName, topicName, createTopicMessage: { - key: !key ? undefined : key, - content: !content ? undefined : content, + key: !key ? null : key, + content: !content ? null : content, headers, partition, }, From edf0d16cc95cb77bfdc7bb85cc9b68680dfc63b1 Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Tue, 11 Jan 2022 13:09:44 +0400 Subject: [PATCH 3/6] Added test for circular-alert. --- .../__snapshots__/Overview.spec.tsx.snap | 2 + .../components/common/Metrics/Indicator.tsx | 2 +- .../common/Metrics/Metrics.styled.tsx | 8 +++- .../Metrics/__tests__/Indicator.spec.tsx | 43 ++++++++++++++++++- 4 files changed, 51 insertions(+), 4 deletions(-) diff --git a/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap index ebe3e8573a9..d704ed4b835 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap @@ -211,6 +211,7 @@ exports[`Overview view matches snapshot 1`] = ` @@ -219,6 +220,7 @@ exports[`Overview view matches snapshot 1`] = ` cx={2} cy={2} r={2} + role="circle" /> diff --git a/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx b/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx index 5b98b645287..3431b67394a 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx @@ -3,7 +3,7 @@ import { AlertType } from 'redux/interfaces'; import * as S from './Metrics.styled'; -interface Props { +export interface Props { fetching?: boolean; isAlert?: boolean; label: React.ReactNode; diff --git a/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx b/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx index 8384e12aa3f..6feb0a3da93 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx @@ -78,6 +78,7 @@ export const RedText = styled.span` `; export const CircularAlertWrapper = styled.svg.attrs({ + role: 'svg', viewBox: '0 0 4 4', xmlns: 'http://www.w3.org/2000/svg', })` @@ -87,7 +88,12 @@ export const CircularAlertWrapper = styled.svg.attrs({ height: 4px; `; -export const CircularAlert = styled.circle.attrs({ cx: 2, cy: 2, r: 2 })<{ +export const CircularAlert = styled.circle.attrs({ + role: 'circle', + cx: 2, + cy: 2, + r: 2, +})<{ $type: AlertType; }>( ({ theme, $type }) => css` diff --git a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx index 10fcaa85675..73e4c070f5d 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx @@ -2,20 +2,59 @@ import React from 'react'; import { Indicator } from 'components/common/Metrics'; import { screen } from '@testing-library/react'; import { render } from 'lib/testHelpers'; +import { Props } from 'components/common/Metrics/Indicator'; +import { Colors } from 'theme/theme'; const title = 'Test Title'; const label = 'Test Label'; const child = 'Child'; describe('Indicator', () => { - it('matches the snapshot', () => { + const setupComponent = (props: Partial = {}) => render( - + {child} ); + + it('matches the snapshot', () => { + setupComponent({ title, label }); expect(screen.getByTitle(title)).toBeInTheDocument(); expect(screen.getByText(label)).toBeInTheDocument(); expect(screen.getByText(child)).toBeInTheDocument(); }); + + describe('should render circular alert', () => { + it('should be in document', () => { + setupComponent({ title, label, isAlert: true }); + expect(screen.getByRole('svg')).toBeInTheDocument(); + expect(screen.getByRole('circle')).toBeInTheDocument(); + }); + + it('success alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'success' }); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${Colors.green[40]}` + ); + }); + + it('error alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'error' }); + expect(screen.getByRole('circle')).toHaveStyle(`fill: ${Colors.red[50]}`); + }); + + it('warning alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'warning' }); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${Colors.yellow[10]}` + ); + }); + + it('info alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'info' }); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${Colors.neutral[10]}` + ); + }); + }); }); From 9301aaf5fb6f4006d205b92e2e8b4d5c3dbb1fee Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Wed, 12 Jan 2022 15:22:46 +0400 Subject: [PATCH 4/6] Added test for topic detail overview. --- .../Overview/__test__/Overview.spec.tsx | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx index 3bd9fd920a2..f4971ee7f31 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx @@ -1,11 +1,17 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { screen } from '@testing-library/react'; +import { render } from 'lib/testHelpers'; import Overview from 'components/Topics/Topic/Details/Overview/Overview'; +import { Colors } from 'theme/theme'; describe('Overview', () => { const mockInternal = false; const mockClusterName = 'local'; const mockTopicName = 'topic'; + const mockUnderReplicatedPartitions = 1; + const mockInSyncReplicas = 1; + const mockReplicas = 0; const mockClearTopicMessages = jest.fn(); const mockPartitions = [ { @@ -22,6 +28,20 @@ describe('Overview', () => { offsetMin: 0, }, ]; + const renderComponent = () => + render( + + ); describe('when it has internal flag', () => { it('does not render the Action button a Topic', () => { @@ -54,4 +74,21 @@ describe('Overview', () => { expect(componentEmpty.find('td').text()).toEqual('No Partitions found'); }); }); + + describe('should render circular alert', () => { + it('should be in document', () => { + renderComponent(); + const circles = screen.getAllByRole('circle'); + expect(circles[0]).toBeInTheDocument(); + expect(circles[1]).toBeInTheDocument(); + expect(circles.length).toEqual(2); + }); + + it('should be the appropriate color', () => { + renderComponent(); + const circles = screen.getAllByRole('circle'); + expect(circles[0]).toHaveStyle(`fill: ${Colors.green[40]}`); + expect(circles[1]).toHaveStyle(`fill: ${Colors.red[50]}`); + }); + }); }); From 97b0710cda6b56f1a8f347209d87133105610012 Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Wed, 12 Jan 2022 16:18:06 +0400 Subject: [PATCH 5/6] Fixed name. --- .../src/components/common/Metrics/__tests__/Indicator.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx index 73e4c070f5d..6747ba2016a 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx @@ -17,7 +17,7 @@ describe('Indicator', () => { ); - it('matches the snapshot', () => { + it('renders indicator', () => { setupComponent({ title, label }); expect(screen.getByTitle(title)).toBeInTheDocument(); expect(screen.getByText(label)).toBeInTheDocument(); From bf029b36a2e7fcd3d8931b02eaba30ab383f1d37 Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Wed, 12 Jan 2022 18:10:12 +0400 Subject: [PATCH 6/6] Updated test for topic detail overview. --- .../Topic/Details/Overview/Overview.tsx | 2 +- .../Overview/__test__/Overview.spec.tsx | 41 +++++++++++-------- .../Metrics/__tests__/Indicator.spec.tsx | 12 +++--- 3 files changed, 32 insertions(+), 23 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx index 663b4c3fd09..81bcc3456eb 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx @@ -11,7 +11,7 @@ import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon'; import * as Metrics from 'components/common/Metrics'; import TagStyled from 'components/common/Tag/Tag.styled'; -interface Props extends Topic, TopicDetails { +export interface Props extends Topic, TopicDetails { clusterName: ClusterName; topicName: TopicName; clearTopicMessages( diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx index f4971ee7f31..f0b8f58303b 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx @@ -3,15 +3,11 @@ import { shallow } from 'enzyme'; import { screen } from '@testing-library/react'; import { render } from 'lib/testHelpers'; import Overview from 'components/Topics/Topic/Details/Overview/Overview'; -import { Colors } from 'theme/theme'; +import theme from 'theme/theme'; describe('Overview', () => { - const mockInternal = false; const mockClusterName = 'local'; const mockTopicName = 'topic'; - const mockUnderReplicatedPartitions = 1; - const mockInSyncReplicas = 1; - const mockReplicas = 0; const mockClearTopicMessages = jest.fn(); const mockPartitions = [ { @@ -28,18 +24,23 @@ describe('Overview', () => { offsetMin: 0, }, ]; - const renderComponent = () => + + const renderComponent = ({ + underReplicatedPartitions = 1, + inSyncReplicas = 1, + replicas = 1, + } = {}) => render( ); @@ -49,7 +50,7 @@ describe('Overview', () => { { { it('should be in document', () => { renderComponent(); const circles = screen.getAllByRole('circle'); - expect(circles[0]).toBeInTheDocument(); - expect(circles[1]).toBeInTheDocument(); expect(circles.length).toEqual(2); }); it('should be the appropriate color', () => { - renderComponent(); + renderComponent({ + underReplicatedPartitions: 0, + inSyncReplicas: 1, + replicas: 2, + }); const circles = screen.getAllByRole('circle'); - expect(circles[0]).toHaveStyle(`fill: ${Colors.green[40]}`); - expect(circles[1]).toHaveStyle(`fill: ${Colors.red[50]}`); + expect(circles[0]).toHaveStyle( + `fill: ${theme.circularAlert.color.error}` + ); + expect(circles[1]).toHaveStyle( + `fill: ${theme.circularAlert.color.error}` + ); }); }); }); diff --git a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx index 6747ba2016a..07bb6f6853d 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx @@ -3,7 +3,7 @@ import { Indicator } from 'components/common/Metrics'; import { screen } from '@testing-library/react'; import { render } from 'lib/testHelpers'; import { Props } from 'components/common/Metrics/Indicator'; -import { Colors } from 'theme/theme'; +import theme from 'theme/theme'; const title = 'Test Title'; const label = 'Test Label'; @@ -34,26 +34,28 @@ describe('Indicator', () => { it('success alert', () => { setupComponent({ title, label, isAlert: true, alertType: 'success' }); expect(screen.getByRole('circle')).toHaveStyle( - `fill: ${Colors.green[40]}` + `fill: ${theme.circularAlert.color.success}` ); }); it('error alert', () => { setupComponent({ title, label, isAlert: true, alertType: 'error' }); - expect(screen.getByRole('circle')).toHaveStyle(`fill: ${Colors.red[50]}`); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${theme.circularAlert.color.error}` + ); }); it('warning alert', () => { setupComponent({ title, label, isAlert: true, alertType: 'warning' }); expect(screen.getByRole('circle')).toHaveStyle( - `fill: ${Colors.yellow[10]}` + `fill: ${theme.circularAlert.color.warning}` ); }); it('info alert', () => { setupComponent({ title, label, isAlert: true, alertType: 'info' }); expect(screen.getByRole('circle')).toHaveStyle( - `fill: ${Colors.neutral[10]}` + `fill: ${theme.circularAlert.color.info}` ); }); });