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(); }); });