Added readonly status for the cluster. (#1364)

* Added readonly status for the cluster.

* Classes element changed to styled components.

* removed unnecessary className from interface.

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -246,6 +246,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
       },
       "tagStyles": Object {
         "backgroundColor": Object {
+          "blue": "#e3f2fd",
           "gray": "#F1F2F3",
           "green": "#D6F5E0",
           "red": "#FAD1D1",

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

@@ -84,7 +84,10 @@ const ClustersWidget: React.FC<Props> = ({
           <tbody>
             {chunkItem.data.map((cluster) => (
               <tr key={cluster.name}>
-                <td>{cluster.name}</td>
+                <td>
+                  {cluster.readOnly && <Tag color="blue">readonly</Tag>}{' '}
+                  {cluster.name}
+                </td>
                 <td>{cluster.version}</td>
                 <td>{cluster.brokerCount}</td>
                 <td>{cluster.onlinePartitionCount}</td>

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

@@ -27,4 +27,8 @@ describe('ClustersWidget', () => {
     userEvent.click(screen.getByRole('checkbox'));
     expect(screen.getAllByRole('row').length).toBe(2);
   });
+
+  it('when cluster is read-only', () => {
+    expect(screen.getByText('readonly')).toBeInTheDocument();
+  });
 });

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/fixtures.ts

@@ -9,6 +9,7 @@ export const onlineCluster: Cluster = {
   topicCount: 3,
   bytesInPerSec: 0.000030618196853764715,
   bytesOutPerSec: 5.737800890036267075817,
+  readOnly: false,
 };
 
 export const offlineCluster: Cluster = {
@@ -20,6 +21,7 @@ export const offlineCluster: Cluster = {
   topicCount: 2,
   bytesInPerSec: 8000.0000067376808542600021,
   bytesOutPerSec: 0.8153063567297119490871,
+  readOnly: true,
 };
 
 export const clusters: Cluster[] = [onlineCluster, offlineCluster];

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -257,6 +257,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
       },
       "tagStyles": Object {
         "backgroundColor": Object {
+          "blue": "#e3f2fd",
           "gray": "#F1F2F3",
           "green": "#D6F5E0",
           "red": "#FAD1D1",

kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 interface Props {
-  color: 'green' | 'gray' | 'yellow' | 'red' | 'white';
+  color: 'green' | 'gray' | 'yellow' | 'red' | 'white' | 'blue';
 }
 
 export const Tag = styled.p<Props>`

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

@@ -34,6 +34,12 @@ export const Colors = {
   yellow: {
     '10': '#FFEECC',
   },
+  blue: {
+    '10': '#e3f2fd',
+    '20': '#bbdefb',
+    '30': '#90caf9',
+    '40': '#64b5f6',
+  },
 };
 
 const theme = {
@@ -177,6 +183,7 @@ const theme = {
       yellow: Colors.yellow[10],
       white: Colors.neutral[10],
       red: Colors.red[10],
+      blue: Colors.blue[10],
     },
     color: Colors.neutral[90],
   },