Repository: provectus/kafka-ui
Issue: readonly label disappeared from UI
Labels: type/bug
scope/frontend
status/accepted
type/regression

### Is your proposal related to a problem?

We are running a UI in readonly mode, the readonly works as expected (data can be read, but no changes can be done). But before there was a label that clearly shows which clusters are in readonly. Now it is gone.

### Describe the solution you'd like

It would be good to show to users that what they are accessing is readonly.

### Describe alternatives you've considered

N/A

### Additional context

It is a low priority in  my opinion, just a nice feature that somehow got removed.



Issue comments:

Pull request review comments:
We're trying to use own styles with the styled-components and without classnames, aren't we?
Are these colors from figma?
remove unused className prop, please

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
index 2fbbed56bb5..68d4d62415a 100644
--- a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
+++ b/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",
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 110d134d07f..14b520348f0 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
+++ b/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>
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 c787abeaf0c..00bb747e803 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
@@ -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();
+  });
 });
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/fixtures.ts b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/fixtures.ts
index 9084de39e24..74714e81079 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/fixtures.ts
+++ b/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];
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
index 117c5269190..b6e1ccbaf2f 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
+++ b/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",
diff --git a/kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx b/kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx
index 14a8f48afdd..9ba447387e0 100644
--- a/kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx
+++ b/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>`
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index 6737c6739ab..c1103242c10 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/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],
   },


Test patch: