From 3291b858385552660e27ba2dbffd8d6961affc0e Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Wed, 19 Jan 2022 16:14:47 +0400 Subject: [PATCH] =?UTF-8?q?clusters"s=20table=20styles=20was=20fixed,=20ad?= =?UTF-8?q?ded=20hyphens=20to=20breadcrumbs,=20URP=20=E2=80=A6=20(#1384)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * clusters"s table styles was fixed, added hyphens to breadcrumbs, URP is not abbreviated and ISR is abbreviated already and "f0" was changed to 0 * styled component name for cluster table was changed * adding tests for clusterwidget cells, adding title for ISR and bringing back changes in breadcrumb regarding hyphens * fixing clusterWidget test * fixing double scroll issue inside Topics > Messages > Content for large message content * bring back last changes * changing styles for scrollbar * added required changes from reviewers and removed enzyme from clusterWidgets test --- .../Connect/Details/Overview/Overview.tsx | 2 +- .../__snapshots__/Overview.spec.tsx.snap | 1 - .../ClustersWidget/ClustersWidget.styled.ts | 10 +++++++ .../ClustersWidget/ClustersWidget.tsx | 24 +++++++++-------- .../__test__/ClustersWidget.spec.tsx | 6 +++++ .../LatestVersion/LatestVersionItem.tsx | 2 +- .../LatestVersionItem.spec.tsx.snap | 1 + .../Topic/Details/Overview/Overview.tsx | 3 ++- .../common/JSONViewer/JSONViewer.tsx | 7 ++--- .../common/JSONViewer/StyledWrapper.styled.ts | 3 --- .../JSONViewer/__test__/JSONViewer.spec.tsx | 26 ++++++++++++++----- 11 files changed, 57 insertions(+), 28 deletions(-) diff --git a/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx index 9f8292daf3..94148f10d2 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx @@ -37,7 +37,7 @@ const Overview: React.FC = ({ {runningTasksCount} - f{failedTasksCount} + {failedTasksCount} 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 8d974fbd03..57e39c5e7b 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 @@ -226,7 +226,6 @@ exports[`Overview view matches snapshot 1`] = ` - f 2 diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.styled.ts b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.styled.ts index 66f4fc4ae3..341cb245ff 100644 --- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.styled.ts +++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.styled.ts @@ -1,5 +1,15 @@ import styled from 'styled-components'; +interface TableCellProps { + maxWidth?: string; +} + export const SwitchWrapper = styled.div` padding: 16px; `; + +export const TableCell = styled.td.attrs({ role: 'cells' })` + padding: 16px; + word-break: break-word; + max-width: ${(props) => props.maxWidth}; +`; diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx index 14b520348f..a00237207b 100644 --- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx +++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx @@ -84,24 +84,26 @@ const ClustersWidget: React.FC = ({ {chunkItem.data.map((cluster) => ( - + {cluster.readOnly && readonly}{' '} {cluster.name} - - {cluster.version} - {cluster.brokerCount} - {cluster.onlinePartitionCount} - + + {cluster.version} + {cluster.brokerCount} + + {cluster.onlinePartitionCount} + + {cluster.topicCount} - - + + - - + + - + ))} diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx index 00bb747e80..a79c567070 100644 --- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx +++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx @@ -31,4 +31,10 @@ describe('ClustersWidget', () => { it('when cluster is read-only', () => { expect(screen.getByText('readonly')).toBeInTheDocument(); }); + + it('render clusterWidget cells', () => { + const cells = screen.getAllByRole('cells'); + expect(cells.length).toBe(14); + expect(cells[0]).toHaveStyle('max-width: 99px'); + }); }); diff --git a/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx b/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx index d70317b2f8..94ae151fd9 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx +++ b/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx @@ -17,7 +17,7 @@ const LatestVersionItem: React.FC = ({

Relevant version

- +
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap index 9e8a53a46a..2eb44a2d24 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap @@ -8,6 +8,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
= ({ {underReplicatedPartitions} diff --git a/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx b/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx index a1e88a3b09..491d57fed0 100644 --- a/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx +++ b/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx @@ -3,11 +3,12 @@ import JSONEditor from 'components/common/JSONEditor/JSONEditor'; import { StyledWrapper } from './StyledWrapper.styled'; -interface FullMessageProps { +export interface FullMessageProps { data: string; + maxLines?: number; } -const JSONViewer: React.FC = ({ data }) => { +const JSONViewer: React.FC = ({ data, maxLines }) => { try { if (data.trim().startsWith('{')) { return ( @@ -18,7 +19,7 @@ const JSONViewer: React.FC = ({ data }) => { value={JSON.stringify(JSON.parse(data), null, '\t')} setOptions={{ showLineNumbers: false, - maxLines: 40, + maxLines, showGutter: false, }} readOnly diff --git a/kafka-ui-react-app/src/components/common/JSONViewer/StyledWrapper.styled.ts b/kafka-ui-react-app/src/components/common/JSONViewer/StyledWrapper.styled.ts index ebe2244a59..91a6ab049a 100644 --- a/kafka-ui-react-app/src/components/common/JSONViewer/StyledWrapper.styled.ts +++ b/kafka-ui-react-app/src/components/common/JSONViewer/StyledWrapper.styled.ts @@ -3,7 +3,4 @@ import styled from 'styled-components'; export const StyledWrapper = styled.div` background-color: #f9fafa; padding: 8px 16px; - max-height: 516px; - overflow-y: scroll; - overflow-wrap: anywhere; `; diff --git a/kafka-ui-react-app/src/components/common/JSONViewer/__test__/JSONViewer.spec.tsx b/kafka-ui-react-app/src/components/common/JSONViewer/__test__/JSONViewer.spec.tsx index 835d84096a..d7a75987b8 100644 --- a/kafka-ui-react-app/src/components/common/JSONViewer/__test__/JSONViewer.spec.tsx +++ b/kafka-ui-react-app/src/components/common/JSONViewer/__test__/JSONViewer.spec.tsx @@ -1,18 +1,30 @@ -import { shallow } from 'enzyme'; import React from 'react'; -import JSONViewer from 'components/common/JSONViewer/JSONViewer'; +import JSONViewer, { + FullMessageProps, +} from 'components/common/JSONViewer/JSONViewer'; +import { render } from 'lib/testHelpers'; +import { screen } from '@testing-library/react'; const data = { a: 1 }; +const maxLines = 28; describe('JSONViewer component', () => { + const setupComponent = (props: FullMessageProps) => + render(); + it('renders JSONTree', () => { - const component = shallow(); - expect(component.exists('Styled(JSONEditor)')).toBeTruthy(); + setupComponent({ + data: JSON.stringify(data), + maxLines, + }); + expect(screen.getByRole('textbox')).toBeInTheDocument(); }); it('matches the snapshot with fixed height with no value', () => { - const component = shallow(); - expect(component.exists('JSONEditor')).toBeFalsy(); - expect(component.exists('p')).toBeTruthy(); + setupComponent({ + data: '', + maxLines, + }); + expect(screen.getByText(JSON.stringify(''))).toBeInTheDocument(); }); });