Display offline ISR by Partition on Topic overview (#2887)

* Display In Sync Replicas (ISR) by Partition on Topic overview (#2703)

* add unit test

---------

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.styled.ts

@@ -2,9 +2,15 @@ import styled from 'styled-components';
 
 export const Replica = styled.span.attrs({ 'aria-label': 'replica-info' })<{
   leader?: boolean;
+  outOfSync?: boolean;
 }>`
-  color: ${({ leader, theme }) =>
-    leader ? theme.topicMetaData.liderReplica.color : null};
+  color: ${({ leader, outOfSync, theme }) => {
+    if (outOfSync) return theme.topicMetaData.outOfSync.color;
+    if (leader) return theme.topicMetaData.liderReplica.color;
+    return null;
+  }};
+
+  font-weight: ${({ outOfSync }) => (outOfSync ? '500' : null)};
 
   &:after {
     content: ', ';

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

@@ -51,9 +51,10 @@ const Overview: React.FC = () => {
           if (replicas === undefined || replicas.length === 0) {
             return 0;
           }
-          return replicas?.map(({ broker, leader }: Replica) => (
+          return replicas?.map(({ broker, leader, inSync }: Replica) => (
             <S.Replica
               leader={leader}
+              outOfSync={!inSync}
               key={broker}
               title={leader ? 'Leader' : ''}
             >

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

@@ -75,6 +75,19 @@ describe('Overview', () => {
     );
   });
 
+  describe('when replicas out of sync', () => {
+    it('should be the appropriate color', () => {
+      render(<Replica outOfSync />);
+      const element = screen.getByLabelText('replica-info');
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveStyleRule(
+        'color',
+        theme.topicMetaData.outOfSync.color
+      );
+      expect(element).toHaveStyleRule('font-weight', '500');
+    });
+  });
+
   describe('when it has internal flag', () => {
     it('renders the Action button for Topic', () => {
       renderComponent({

kafka-ui-react-app/src/theme/theme.ts

@@ -517,6 +517,9 @@ const theme = {
     liderReplica: {
       color: Colors.green[60],
     },
+    outOfSync: {
+      color: Colors.red[50],
+    },
   },
   dangerZone: {
     borderColor: Colors.neutral[10],