[Issue-1535] Hide 'Clear Messages' button on Topic whithout Delete Clean Up Policy (#1542)

Co-authored-by: Anton Zorin <zorii4@Antons-MacBook-Pro.local>

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

@@ -25,7 +25,14 @@ export interface ListItemProps {
 }
 
 const ListItem: React.FC<ListItemProps> = ({
-  topic: { name, internal, partitions, segmentSize, replicationFactor },
+  topic: {
+    name,
+    internal,
+    partitions,
+    segmentSize,
+    replicationFactor,
+    cleanUpPolicy,
+  },
   selected,
   toggleTopicSelected,
   deleteTopic,
@@ -105,9 +112,11 @@ const ListItem: React.FC<ListItemProps> = ({
         {!internal && !isReadOnly && vElipsisVisble ? (
           <div className="has-text-right">
             <Dropdown label={<VerticalElipsisIcon />} right>
-              <DropdownItem onClick={clearTopicMessagesHandler} danger>
-                Clear Messages
-              </DropdownItem>
+              {cleanUpPolicy === 'DELETE' && (
+                <DropdownItem onClick={clearTopicMessagesHandler} danger>
+                  Clear Messages
+                </DropdownItem>
+              )}
               {isTopicDeletionAllowed && (
                 <DropdownItem
                   onClick={() => setDeleteTopicConfirmationVisible(true)}

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

@@ -33,6 +33,7 @@ interface Props extends Topic, TopicDetails {
   topicName: TopicName;
   isInternal: boolean;
   isDeleted: boolean;
+  isDeletePolicy: boolean;
   deleteTopic: (clusterName: ClusterName, topicName: TopicName) => void;
   clearTopicMessages(clusterName: ClusterName, topicName: TopicName): void;
 }
@@ -49,6 +50,7 @@ const Details: React.FC<Props> = ({
   topicName,
   isInternal,
   isDeleted,
+  isDeletePolicy,
   deleteTopic,
   clearTopicMessages,
 }) => {
@@ -103,12 +105,14 @@ const Details: React.FC<Props> = ({
                 >
                   Edit settings
                 </DropdownItem>
-                <DropdownItem
-                  onClick={() => setClearTopicConfirmationVisible(true)}
-                  danger
-                >
-                  Clear messages
-                </DropdownItem>
+                {isDeletePolicy && (
+                  <DropdownItem
+                    onClick={() => setClearTopicConfirmationVisible(true)}
+                    danger
+                  >
+                    Clear messages
+                  </DropdownItem>
+                )}
                 {isTopicDeletionAllowed && (
                   <DropdownItem
                     onClick={() => setDeleteTopicConfirmationVisible(true)}

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

@@ -102,7 +102,7 @@ const Overview: React.FC<Props> = ({
                 <td>{offsetMin}</td>
                 <td>{offsetMax}</td>
                 <td style={{ width: '5%' }}>
-                  {!internal && !isReadOnly ? (
+                  {!internal && !isReadOnly && cleanUpPolicy === 'DELETE' ? (
                     <Dropdown label={<VerticalElipsisIcon />} right>
                       <DropdownItem
                         onClick={() =>

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

@@ -5,6 +5,7 @@ import Overview, {
   Props as OverviewProps,
 } from 'components/Topics/Topic/Details/Overview/Overview';
 import theme from 'theme/theme';
+import { CleanUpPolicy } from 'generated-sources';
 
 describe('Overview', () => {
   const mockClusterName = 'local';
@@ -49,6 +50,7 @@ describe('Overview', () => {
         internal: false,
         clusterName: mockClusterName,
         topicName: mockTopicName,
+        cleanUpPolicy: CleanUpPolicy.DELETE,
         clearTopicMessages: mockClearTopicMessages,
       });
       expect(screen.getByRole('menu')).toBeInTheDocument();

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

@@ -37,6 +37,7 @@ describe('Details', () => {
           deleteTopic={mockDelete}
           clearTopicMessages={mockClearTopicMessages}
           isDeleted={false}
+          isDeletePolicy
         />
       </ClusterContext.Provider>,
       { pathname }
@@ -64,6 +65,7 @@ describe('Details', () => {
                   deleteTopic={mockDelete}
                   clearTopicMessages={mockClearTopicMessages}
                   isDeleted={false}
+                  isDeletePolicy
                 />
               </ClusterContext.Provider>
             </StaticRouter>

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

@@ -482,6 +482,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
           clearTopicMessages={[MockFunction]}
           clusterName="local"
           deleteTopic={[MockFunction]}
+          isDeletePolicy={true}
           isDeleted={false}
           isInternal={true}
           name="__internal.topic"