clusters"s table styles was fixed, added hyphens to breadcrumbs, URP … (#1384)

* 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

kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx

@@ -37,7 +37,7 @@ const Overview: React.FC<OverviewProps> = ({
           {runningTasksCount}
         </Metrics.Indicator>
         <Metrics.Indicator label="Tasks Failed" isAlert>
-          f{failedTasksCount}
+          {failedTasksCount}
         </Metrics.Indicator>
       </Metrics.Section>
     </Metrics.Wrapper>

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`] = `
             </svg>
           </div>
           <span>
-            f
             2
           </span>
         </div>

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' })<TableCellProps>`
+  padding: 16px;
+  word-break: break-word;
+  max-width: ${(props) => props.maxWidth};
+`;

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx

@@ -84,24 +84,26 @@ const ClustersWidget: React.FC<Props> = ({
           <tbody>
             {chunkItem.data.map((cluster) => (
               <tr key={cluster.name}>
-                <td>
+                <S.TableCell maxWidth="99px">
                   {cluster.readOnly && <Tag color="blue">readonly</Tag>}{' '}
                   {cluster.name}
-                </td>
-                <td>{cluster.version}</td>
-                <td>{cluster.brokerCount}</td>
-                <td>{cluster.onlinePartitionCount}</td>
-                <td>
+                </S.TableCell>
+                <S.TableCell maxWidth="99px">{cluster.version}</S.TableCell>
+                <S.TableCell maxWidth="99px">{cluster.brokerCount}</S.TableCell>
+                <S.TableCell maxWidth="78px">
+                  {cluster.onlinePartitionCount}
+                </S.TableCell>
+                <S.TableCell maxWidth="60px">
                   <NavLink to={clusterTopicsPath(cluster.name)}>
                     {cluster.topicCount}
                   </NavLink>
-                </td>
-                <td>
+                </S.TableCell>
+                <S.TableCell maxWidth="85px">
                   <BytesFormatted value={cluster.bytesInPerSec} />
-                </td>
-                <td>
+                </S.TableCell>
+                <S.TableCell maxWidth="85px">
                   <BytesFormatted value={cluster.bytesOutPerSec} />
-                </td>
+                </S.TableCell>
               </tr>
             ))}
           </tbody>

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');
+  });
 });

kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx

@@ -17,7 +17,7 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
   <LatestVersionWrapper>
     <div>
       <h1>Relevant version</h1>
-      <JSONViewer data={schema} />
+      <JSONViewer data={schema} maxLines={28} />
     </div>
     <div data-testid="meta-data">
       <div>

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap

@@ -8,6 +8,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
     </h1>
     <JSONViewer
       data="{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}"
+      maxLines={28}
     />
   </div>
   <div

kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx

@@ -57,7 +57,8 @@ const Overview: React.FC<Props> = ({
             <Metrics.RedText>{underReplicatedPartitions}</Metrics.RedText>
           </Metrics.Indicator>
           <Metrics.Indicator
-            label="In Sync Replicas"
+            label="ISR"
+            title="In Sync Replicas"
             isAlert
             alertType={inSyncReplicas === replicas ? 'success' : 'error'}
           >

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<FullMessageProps> = ({ data }) => {
+const JSONViewer: React.FC<FullMessageProps> = ({ data, maxLines }) => {
   try {
     if (data.trim().startsWith('{')) {
       return (
@@ -18,7 +19,7 @@ const JSONViewer: React.FC<FullMessageProps> = ({ data }) => {
             value={JSON.stringify(JSON.parse(data), null, '\t')}
             setOptions={{
               showLineNumbers: false,
-              maxLines: 40,
+              maxLines,
               showGutter: false,
             }}
             readOnly

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;
 `;

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(<JSONViewer {...props} />);
+
   it('renders JSONTree', () => {
-    const component = shallow(<JSONViewer data={JSON.stringify(data)} />);
-    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(<JSONViewer data={data as unknown as string} />);
-    expect(component.exists('JSONEditor')).toBeFalsy();
-    expect(component.exists('p')).toBeTruthy();
+    setupComponent({
+      data: '',
+      maxLines,
+    });
+    expect(screen.getByText(JSON.stringify(''))).toBeInTheDocument();
   });
 });