Repository: provectus/kafka-ui
Issue: Partition value displays not right in case of selecting second time within Topic/Messages
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Selected value for Partition dropdown should always displayed in the same format for Messages filtering

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Login to system
2. Navigate to Topic profile which has Messages and more than one partition
3. Turn to Messages tab
4. Check filtering by partitions
5. Select/unselect the value for partitions dropdown

**Expected behavior**
The value always should be displayed the same way (partition #)

**Screenshots**

https://user-images.githubusercontent.com/104780608/169744114-071908a9-07e3-41fb-8d9b-f85ae738aad2.mov






Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
index 9eb7884b761..ad3aec6b815 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
@@ -181,7 +181,7 @@ const Filters: React.FC<FiltersProps> = ({
       partitions.map((partition: Partition) => {
         return {
           value: partition.partition,
-          label: String(partition.partition),
+          label: `Partition #${partition.partition.toString()}`,
         };
       })
     );
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/utils.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/utils.ts
index 8b29b5b820f..16dbc7db693 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/utils.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/utils.ts
@@ -53,7 +53,7 @@ export const getSelectedPartitionsFromSeekToParam = (
         if (selectedPartitionIds?.includes(partition)) {
           return {
             value: partition,
-            label: partition.toString(),
+            label: `Partition #${partition.toString()}`,
           };
         }
 
@@ -64,6 +64,6 @@ export const getSelectedPartitionsFromSeekToParam = (
 
   return partitions.map(({ partition }) => ({
     value: partition,
-    label: partition.toString(),
+    label: `Partition #${partition.toString()}`,
   }));
 };
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/utils.spec.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/utils.spec.ts
index c58bc09b0ea..06a13d641b1 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/utils.spec.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/utils.spec.ts
@@ -101,7 +101,7 @@ describe('utils', () => {
     it('returns parsed partition from params when partition list includes selected partition', () => {
       searchParams.set('seekTo', '42::0');
       expect(getSelectedPartitionsFromSeekToParam(searchParams, part)).toEqual([
-        { label: '42', value: 42 },
+        { label: 'Partition #42', value: 42 },
       ]);
     });
     it('returns parsed partition from params when partition list NOT includes selected partition', () => {
@@ -113,7 +113,7 @@ describe('utils', () => {
     it('returns partitions when param "seekTo" is not defined', () => {
       searchParams.delete('seekTo');
       expect(getSelectedPartitionsFromSeekToParam(searchParams, part)).toEqual([
-        { label: '42', value: 42 },
+        { label: 'Partition #42', value: 42 },
       ]);
     });
   });


Test patch: