Repository: provectus/kafka-ui
Issue: Provide cleanup policy in topic list
Labels: type/enhancement
good first issue
scope/backend
scope/frontend

### Describe the solution you'd like

Backend should expose cleanup policy in topic list request:
delete (with retention), compact, compact with delete (with retention)
Frontend should display this info in topic list page


Issue comments:
Waiting frontend
Looks like @GneyHabub added cleanup policy to topic description, but missed topic list part. FYI: @workshur 

Pull request review comments:

Patch that resolved the issue:
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 34b7bc8a955..be1a6b148dd 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -139,6 +139,7 @@ const List: React.FC<Props> = ({
                 <th>Number of messages</th>
                 <th>Size</th>
                 <th>Type</th>
+                <th>Clean Up Policy</th>
                 <th> </th>
               </tr>
             </thead>
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 ea2e99953fd..2a533027aa6 100644
--- a/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
@@ -20,7 +20,14 @@ export interface ListItemProps {
 }
 
 const ListItem: React.FC<ListItemProps> = ({
-  topic: { name, internal, partitions, segmentSize, replicationFactor },
+  topic: {
+    name,
+    internal,
+    partitions,
+    segmentSize,
+    replicationFactor,
+    cleanUpPolicy,
+  },
   deleteTopic,
   clusterName,
   clearTopicMessages,
@@ -85,6 +92,9 @@ const ListItem: React.FC<ListItemProps> = ({
           {internal ? 'Internal' : 'External'}
         </div>
       </td>
+      <td>
+        <span className="tag is-info">{cleanUpPolicy || 'Unknown'}</span>
+      </td>
       <td className="topic-action-block">
         {!internal && !isReadOnly ? (
           <>
diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap
index b3012f81387..6f5456de37c 100644
--- a/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap
@@ -217,6 +217,9 @@ exports[`List when it does not have readonly flag matches the snapshot 1`] = `
                 <th>
                   Type
                 </th>
+                <th>
+                  Clean Up Policy
+                </th>
                 <th>
                    
                 </th>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
index 34f45dbea92..93c7f55baac 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
@@ -30,6 +30,7 @@ const Overview: React.FC<Props> = ({
   segmentCount,
   clusterName,
   topicName,
+  cleanUpPolicy,
   clearTopicMessages,
 }) => {
   const { isReadOnly } = React.useContext(ClusterContext);
@@ -59,6 +60,9 @@ const Overview: React.FC<Props> = ({
           <BytesFormatted value={segmentSize} />
         </Indicator>
         <Indicator label="Segment count">{segmentCount}</Indicator>
+        <Indicator label="Clean Up Policy">
+          <span className="tag is-info">{cleanUpPolicy || 'Unknown'}</span>
+        </Indicator>
       </MetricsWrapper>
       <div className="box">
         <table className="table is-striped is-fullwidth">


Test patch: