fix(Partitions): fix error on wrong consumer in query string

Author: artemmufazalov

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

@@ -1,5 +1,5 @@
 import block from 'bem-cn-lite';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {escapeRegExp} from 'lodash/fp';
 
@@ -53,8 +53,6 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
 
     const dispatch = useDispatch();
 
-    const isFirstRenderRef = useRef(true);
-
     const [generalSearchValue, setGeneralSearchValue] = useState('');
     const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
 
@@ -74,14 +72,6 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     useEffect(() => {
         // Manual path control to ensure it updates with other values so no request with wrong params will be sent
         setComponentCurrentPath(path);
-
-        // Do not reset selected consumer on first effect call
-        // To enable navigating to specific consumer
-        if (isFirstRenderRef.current) {
-            isFirstRenderRef.current = false;
-        } else {
-            dispatch(setSelectedConsumer(undefined));
-        }
     }, [dispatch, path]);
 
     const fetchConsumerData = useCallback(
@@ -90,11 +80,11 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                 dispatch(setDataWasNotLoaded());
             }
 
-            if (selectedConsumer) {
+            if (selectedConsumer && consumers && consumers.includes(selectedConsumer)) {
                 dispatch(getConsumer(componentCurrentPath, selectedConsumer));
             }
         },
-        [dispatch, selectedConsumer, componentCurrentPath],
+        [dispatch, selectedConsumer, componentCurrentPath, consumers],
     );
 
     useAutofetcher(fetchConsumerData, [fetchConsumerData], autorefresh);
@@ -111,10 +101,13 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     );
 
     useEffect(() => {
-        if (consumersToSelect && consumersToSelect.length && !selectedConsumer) {
+        const shouldUpdateSelectedConsumer =
+            !selectedConsumer || (consumers && !consumers.includes(selectedConsumer));
+
+        if (consumersToSelect && consumersToSelect.length && shouldUpdateSelectedConsumer) {
             dispatch(setSelectedConsumer(consumersToSelect[0].value));
         }
-    }, [dispatch, consumersToSelect, selectedConsumer]);
+    }, [dispatch, consumersToSelect, selectedConsumer, consumers]);
 
     const selectedColumns: string[] = useMemo(
         () =>

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

@@ -6,6 +6,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import {useTypedSelector} from '../../../../utils/hooks';
 
 import {
+    cleanTopicData,
     getTopic,
     setDataWasNotLoaded as setTopicDataWasNotLoaded,
 } from '../../../../store/reducers/topic';
@@ -61,6 +62,7 @@ export const PartitionsWrapper = ({path, type}: PartitionsWrapperProps) => {
 
     useEffect(() => {
         dispatch(setTopicDataWasNotLoaded());
+        dispatch(cleanTopicData());
         dispatch(setNodesDataWasNotLoaded());
 
         dispatch(getTopic(path));

src/store/reducers/topic.ts

@@ -18,6 +18,7 @@ import {convertBytesObjectToSpeed} from '../../utils/bytesParsers';
 export const FETCH_TOPIC = createRequestActionTypes('topic', 'FETCH_TOPIC');
 
 const SET_DATA_WAS_NOT_LOADED = 'topic/SET_DATA_WAS_NOT_LOADED';
+const CLEAN_TOPIC_DATA = 'topic/CLEAN_TOPIC_DATA';
 
 const initialState = {
     loading: true,
@@ -64,6 +65,12 @@ const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action)
                 wasLoaded: false,
             };
         }
+        case CLEAN_TOPIC_DATA: {
+            return {
+                ...state,
+                data: undefined,
+            };
+        }
         default:
             return state;
     }
@@ -75,6 +82,12 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
+export const cleanTopicData = () => {
+    return {
+        type: CLEAN_TOPIC_DATA,
+    } as const;
+};
+
 export function getTopic(path?: string) {
     return createApiRequest({
         request: window.api.getTopic({path}),

src/types/store/topic.ts

@@ -1,4 +1,4 @@
-import {FETCH_TOPIC, setDataWasNotLoaded} from '../../store/reducers/topic';
+import {FETCH_TOPIC, cleanTopicData, setDataWasNotLoaded} from '../../store/reducers/topic';
 import type {ApiRequestAction} from '../../store/utils';
 import type {IProcessSpeedStats} from '../../utils/bytesParsers';
 import type {IResponseError} from '../api/error';
@@ -31,7 +31,8 @@ export interface ITopicState {
 
 export type ITopicAction =
     | ApiRequestAction<typeof FETCH_TOPIC, DescribeTopicResult, IResponseError>
-    | ReturnType<typeof setDataWasNotLoaded>;
+    | ReturnType<typeof setDataWasNotLoaded>
+    | ReturnType<typeof cleanTopicData>;
 
 export interface ITopicRootStateSlice {
     topic: ITopicState;