Clear messages should not be present when in readonly mode #481 (#494)

* Clear messages should not be present when in readonly mode #481

* Clear messages should not be present when in readonly mode #481

kafka-ui-react-app/src/components/Topics/List/ListItem.tsx

@@ -9,6 +9,7 @@ import {
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import Dropdown from 'components/common/Dropdown/Dropdown';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 export interface ListItemProps {
   topic: TopicWithDetailedInfo;
@@ -23,6 +24,8 @@ const ListItem: React.FC<ListItemProps> = ({
   clusterName,
   clearTopicMessages,
 }) => {
+  const { isReadOnly } = React.useContext(ClusterContext);
+
   const [isDeleteTopicConfirmationVisible, setDeleteTopicConfirmationVisible] =
     React.useState(false);
 
@@ -65,7 +68,7 @@ const ListItem: React.FC<ListItemProps> = ({
         </div>
       </td>
       <td className="topic-action-block">
-        {!internal ? (
+        {!internal && !isReadOnly ? (
           <>
             <div className="has-text-right">
               <Dropdown

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

@@ -5,6 +5,7 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
+import ClusterContext from 'components/contexts/ClusterContext';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 
 interface Props extends Topic, TopicDetails {
@@ -30,76 +31,82 @@ const Overview: React.FC<Props> = ({
   clusterName,
   topicName,
   clearTopicMessages,
-}) => (
-  <>
-    <MetricsWrapper>
-      <Indicator label="Partitions">{partitionCount}</Indicator>
-      <Indicator label="Replication Factor">{replicationFactor}</Indicator>
-      <Indicator label="URP" title="Under replicated partitions">
-        {underReplicatedPartitions}
-      </Indicator>
-      <Indicator label="In sync replicas">
-        {inSyncReplicas}
-        <span className="subtitle has-text-weight-light">
-          {' '}
-          of
-          {replicas}
-        </span>
-      </Indicator>
-      <Indicator label="Type">
-        <span className={`tag ${internal ? 'is-light' : 'is-primary'}`}>
-          {internal ? 'Internal' : 'External'}
-        </span>
-      </Indicator>
-      <Indicator label="Segment Size" title="">
-        <BytesFormatted value={segmentSize} />
-      </Indicator>
-      <Indicator label="Segment count">{segmentCount}</Indicator>
-    </MetricsWrapper>
-    <div className="box">
-      <table className="table is-striped is-fullwidth">
-        <thead>
-          <tr>
-            <th>Partition ID</th>
-            <th>Broker leader</th>
-            <th>Min offset</th>
-            <th>Max offset</th>
-            <th> </th>
-          </tr>
-        </thead>
-        <tbody>
-          {partitions?.map(({ partition, leader, offsetMin, offsetMax }) => (
-            <tr key={`partition-list-item-key-${partition}`}>
-              <td>{partition}</td>
-              <td>{leader}</td>
-              <td>{offsetMin}</td>
-              <td>{offsetMax}</td>
-              <td className="has-text-right">
-                {!internal ? (
-                  <Dropdown
-                    label={
-                      <span className="icon">
-                        <i className="fas fa-cog" />
-                      </span>
-                    }
-                    right
-                  >
-                    <DropdownItem
-                      onClick={() =>
-                        clearTopicMessages(clusterName, topicName, [partition])
+}) => {
+  const { isReadOnly } = React.useContext(ClusterContext);
+
+  return (
+    <>
+      <MetricsWrapper>
+        <Indicator label="Partitions">{partitionCount}</Indicator>
+        <Indicator label="Replication Factor">{replicationFactor}</Indicator>
+        <Indicator label="URP" title="Under replicated partitions">
+          {underReplicatedPartitions}
+        </Indicator>
+        <Indicator label="In sync replicas">
+          {inSyncReplicas}
+          <span className="subtitle has-text-weight-light">
+            {' '}
+            of
+            {replicas}
+          </span>
+        </Indicator>
+        <Indicator label="Type">
+          <span className={`tag ${internal ? 'is-light' : 'is-primary'}`}>
+            {internal ? 'Internal' : 'External'}
+          </span>
+        </Indicator>
+        <Indicator label="Segment Size" title="">
+          <BytesFormatted value={segmentSize} />
+        </Indicator>
+        <Indicator label="Segment count">{segmentCount}</Indicator>
+      </MetricsWrapper>
+      <div className="box">
+        <table className="table is-striped is-fullwidth">
+          <thead>
+            <tr>
+              <th>Partition ID</th>
+              <th>Broker leader</th>
+              <th>Min offset</th>
+              <th>Max offset</th>
+              <th> </th>
+            </tr>
+          </thead>
+          <tbody>
+            {partitions?.map(({ partition, leader, offsetMin, offsetMax }) => (
+              <tr key={`partition-list-item-key-${partition}`}>
+                <td>{partition}</td>
+                <td>{leader}</td>
+                <td>{offsetMin}</td>
+                <td>{offsetMax}</td>
+                <td className="has-text-right">
+                  {!internal && !isReadOnly ? (
+                    <Dropdown
+                      label={
+                        <span className="icon">
+                          <i className="fas fa-cog" />
+                        </span>
                       }
+                      right
                     >
-                      <span className="has-text-danger">Clear Messages</span>
-                    </DropdownItem>
-                  </Dropdown>
-                ) : null}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  </>
-);
+                      <DropdownItem
+                        onClick={() =>
+                          clearTopicMessages(clusterName, topicName, [
+                            partition,
+                          ])
+                        }
+                      >
+                        <span className="has-text-danger">Clear Messages</span>
+                      </DropdownItem>
+                    </Dropdown>
+                  ) : null}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
 
 export default Overview;