Fix readonly cluster error (#859)

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>

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"

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