Repository: provectus/kafka-ui
Issue: [0.2.0] readonly mode not respected at topics list level & consumer groups level
Labels: type/bug
scope/frontend

**Describe the bug**
When a cluster is set readonly, I expect that no modification item is ever display.
It has been fixed some time ago on topic page, but in v0.2.0, some stuff are not correct.

On dashboard page, we can see the readonly mode
![image](https://user-images.githubusercontent.com/29728596/132256495-7627e9e4-52cf-458f-99c6-baa84a7c4682.png)


However, on each cluster "Topics" page, which list all the topic, I can see the checkboxes beside each topic.
And when I select any of them, the buttons "Delete selected topics" and "Purge messages of selected topics" appear, which is not wanted.

![image](https://user-images.githubusercontent.com/29728596/132256611-9192b536-fddf-4ddd-8c7a-5fc1078dfbff.png)

Also, on a consumer group page, I have access to "reset offsets" and "delete consumer group"
![image](https://user-images.githubusercontent.com/29728596/132259268-78e6338b-62e1-42ea-b3da-04ba753cec3b.png)

**Expected behavior**
When in readonly, I should not be able to modify/delete/create anything at any level.

**Additional context**
(Add any other context about the problem here)

Issue comments:
Hi, @giom-l. Thanks for creating this issue. We'll fix it in next minor version.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
index de16db04ada..5ebf8c9cf41 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@@ -14,6 +14,7 @@ import {
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
 import { useHistory } from 'react-router';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 import ListItem from './ListItem';
 
@@ -45,6 +46,7 @@ const Details: React.FC<Props> = ({
   const [isConfirmationModelVisible, setIsConfirmationModelVisible] =
     React.useState<boolean>(false);
   const history = useHistory();
+  const { isReadOnly } = React.useContext(ClusterContext);
 
   const onDelete = () => {
     setIsConfirmationModelVisible(false);
@@ -79,20 +81,27 @@ const Details: React.FC<Props> = ({
 
       {isFetched ? (
         <div className="box">
-          <div className="level">
-            <div className="level-item level-right buttons">
-              <button type="button" className="button" onClick={onResetOffsets}>
-                Reset offsets
-              </button>
-              <button
-                type="button"
-                className="button is-danger"
-                onClick={() => setIsConfirmationModelVisible(true)}
-              >
-                Delete consumer group
-              </button>
+          {!isReadOnly && (
+            <div className="level">
+              <div className="level-item level-right buttons">
+                <button
+                  type="button"
+                  className="button"
+                  onClick={onResetOffsets}
+                >
+                  Reset offsets
+                </button>
+                <button
+                  type="button"
+                  className="button is-danger"
+                  onClick={() => setIsConfirmationModelVisible(true)}
+                >
+                  Delete consumer group
+                </button>
+              </div>
             </div>
-          </div>
+          )}
+
           <table className="table is-striped is-fullwidth">
             <thead>
               <tr>
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx
index a2f21437ae1..4ba1c0e8160 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -203,7 +203,7 @@ const List: React.FC<TopicsListProps> = ({
           <table className="table is-fullwidth">
             <thead>
               <tr>
-                <th> </th>
+                {!isReadOnly && <th> </th>}
                 <SortableColumnHeader
                   value={TopicColumnsToSort.NAME}
                   title="Topic Name"
diff --git a/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx b/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
index 9414e9a716d..e93a56fb3bd 100644
--- a/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
@@ -75,17 +75,19 @@ const ListItem: React.FC<ListItemProps> = ({
 
   return (
     <tr>
-      <td>
-        {!internal && (
-          <input
-            type="checkbox"
-            checked={selected}
-            onChange={() => {
-              toggleTopicSelected(name);
-            }}
-          />
-        )}
-      </td>
+      {!isReadOnly && (
+        <td>
+          {!internal && (
+            <input
+              type="checkbox"
+              checked={selected}
+              onChange={() => {
+                toggleTopicSelected(name);
+              }}
+            />
+          )}
+        </td>
+      )}
       <td className="has-text-overflow-ellipsis">
         <NavLink
           exact


Test patch: