fix: remove empty selectedConsumer from url (#1644)

Author: artemmufazalov

src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx

@@ -82,7 +82,7 @@ export const Partitions = ({path, database}: PartitionsProps) => {
             selectedConsumer && consumers && !consumers.includes(selectedConsumer);
 
         if (isTopicWithoutConsumers || wrongSelectedConsumer) {
-            dispatch(setSelectedConsumer(''));
+            dispatch(setSelectedConsumer(undefined));
         }
     }, [dispatch, topicLoading, selectedConsumer, consumers]);
 
@@ -94,7 +94,7 @@ export const Partitions = ({path, database}: PartitionsProps) => {
         setHiddenColumns(newHiddenColumns);
     };
 
-    const handleSelectedConsumerChange = (value: string) => {
+    const handleSelectedConsumerChange = (value?: string) => {
         dispatch(setSelectedConsumer(value));
     };
 

src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx

@@ -13,8 +13,8 @@ import type {PreparedPartitionDataWithHosts} from '../utils/types';
 
 interface PartitionsControlsProps {
     consumers: string[] | undefined;
-    selectedConsumer: string;
-    onSelectedConsumerChange: (consumer: string) => void;
+    selectedConsumer?: string;
+    onSelectedConsumerChange: (consumer?: string) => void;
     selectDisabled: boolean;
     partitions: PreparedPartitionDataWithHosts[] | undefined;
     onSearchChange: (filteredPartitions: PreparedPartitionDataWithHosts[]) => void;
@@ -111,7 +111,8 @@ export const PartitionsControls = ({
     }, [initialColumnsIds, hiddenColumns]);
 
     const handleConsumerSelectChange = (value: string[]) => {
-        onSelectedConsumerChange(value[0]);
+        // Do not set empty string to state
+        onSelectedConsumerChange(value[0] || undefined);
     };
 
     const handlePartitionIdSearchChange = (value: string) => {
@@ -151,7 +152,7 @@ export const PartitionsControls = ({
                 className={b('consumer-select')}
                 label={i18n('controls.consumerSelector')}
                 options={consumersToSelect}
-                value={[selectedConsumer]}
+                value={[selectedConsumer || '']}
                 onUpdate={handleConsumerSelectChange}
                 filterable={consumers && consumers.length > 5}
                 disabled={selectDisabled || !consumers || !consumers.length}

src/store/reducers/partitions/partitions.ts

@@ -3,18 +3,17 @@ import type {PayloadAction} from '@reduxjs/toolkit';
 
 import {api} from '../api';
 
-import type {PartitionsState} from './types';
 import {prepareConsumerPartitions, prepareTopicPartitions} from './utils';
 
-const initialState: PartitionsState = {
-    selectedConsumer: '',
-};
+const initialState: {
+    selectedConsumer?: string;
+} = {};
 
 const slice = createSlice({
     name: 'partitions',
     initialState,
     reducers: {
-        setSelectedConsumer: (state, action: PayloadAction<string>) => {
+        setSelectedConsumer: (state, action: PayloadAction<string | undefined>) => {
             state.selectedConsumer = action.payload;
         },
     },

src/store/reducers/partitions/types.ts

@@ -28,7 +28,3 @@ export interface PreparedPartitionData {
     partitionNodeId: number;
     connectionNodeId?: number;
 }
-
-export interface PartitionsState {
-    selectedConsumer: string;
-}