fix: use use-query-params instead of redux-location-state

Raubzeug · Raubzeug · commit a8f7d07d91a6 · 2025-04-21T11:40:48.000+03:00
diff --git a/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx b/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx
@@ -10,7 +10,7 @@ import {
     selectPreparedConsumersData,
     selectPreparedTopicStats,
     topicApi,
-} from '../../../../store/reducers/topic/topic';
+} from '../../../../store/reducers/topic';
 import type {EPathType} from '../../../../types/api/schema';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
diff --git a/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx b/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx
@@ -7,7 +7,7 @@ import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
 import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 import {Loader} from '../../../../../components/Loader';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
-import {selectPreparedTopicStats, topicApi} from '../../../../../store/reducers/topic/topic';
+import {selectPreparedTopicStats, topicApi} from '../../../../../store/reducers/topic';
 import type {IPreparedTopicStats} from '../../../../../types/store/topic';
 import {cn} from '../../../../../utils/cn';
 import {formatBps, formatBytes} from '../../../../../utils/dataFormatters/dataFormatters';
diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx
@@ -8,7 +8,7 @@ import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton'
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {nodesListApi, selectNodesMap} from '../../../../store/reducers/nodesList';
 import {partitionsApi, setSelectedConsumer} from '../../../../store/reducers/partitions/partitions';
-import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic/topic';
+import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY} from '../../../../utils/constants';
 import {
diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx
@@ -5,9 +5,8 @@ import {NoSearchResults} from '@gravity-ui/illustrations';
 import type {RenderControls} from '../../../../components/PaginatedTable';
 import {ResizeablePaginatedTable} from '../../../../components/PaginatedTable';
 import {partitionsApi} from '../../../../store/reducers/partitions/partitions';
-import {setSelectedOffset, setStartTimestamp} from '../../../../store/reducers/topic/topic';
 import type {TopicMessageMetadataItem} from '../../../../types/api/topic';
-import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {useAutoRefreshInterval} from '../../../../utils/hooks';
 import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 import {renderPaginatedTableErrorMessage} from '../../../../utils/renderPaginatedTableErrorMessage';
 import {convertToNumber} from '../../../../utils/utils';
@@ -22,6 +21,7 @@ import {
 } from './columns/columns';
 import {generateTopicDataGetter} from './getData';
 import i18n from './i18n';
+import {useTopicDataQueryParams} from './useTopicDataQueryParams';
 import {
     TOPIC_DATA_COLUMNS_TITLES,
     TOPIC_DATA_COLUMNS_WIDTH_LS_KEY,
@@ -37,7 +37,6 @@ interface TopicDataProps {
 }
 
 export function TopicData({parentRef, path, database}: TopicDataProps) {
-    const dispatch = useTypedDispatch();
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const [startOffset, setStartOffset] = React.useState<number | undefined>(undefined);
     const [endOffset, setEndOffset] = React.useState<number | undefined>(undefined);
@@ -46,9 +45,14 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
     >(undefined);
     const [controlsKey, setControlsKey] = React.useState(0);
 
-    const {selectedPartition, selectedOffset, startTimestamp, topicDataFilter} = useTypedSelector(
-        (state) => state.topic,
-    );
+    const {
+        selectedPartition,
+        selectedOffset,
+        startTimestamp,
+        topicDataFilter,
+        handleSelectedOffsetChange,
+        handleStartTimestampChange,
+    } = useTopicDataQueryParams();
 
     const {
         data: partitions,
@@ -123,9 +127,12 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
         const hasFilters = selectedOffset || startTimestamp;
 
         const resetFilter = () => {
-            dispatch(setSelectedOffset(undefined));
-            dispatch(setStartTimestamp(undefined));
-            setControlsKey((prev) => prev + 1);
+            if (topicDataFilter === 'OFFSET') {
+                handleSelectedOffsetChange(undefined);
+            } else if (topicDataFilter === 'TIMESTAMP') {
+                handleStartTimestampChange(undefined);
+                setControlsKey((prev) => prev + 1);
+            }
         };
 
         return (
diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx
@@ -5,24 +5,19 @@ import {RelativeDatePicker} from '@gravity-ui/date-components';
 import {dateTimeParse} from '@gravity-ui/date-utils';
 import type {TableColumnSetupItem} from '@gravity-ui/uikit';
 import {RadioButton, Select, TableColumnSetup} from '@gravity-ui/uikit';
+import {isNil} from 'lodash';
 
 import {DebouncedInput} from '../../../../../components/DebouncedInput/DebouncedInput';
 import {EntitiesCount} from '../../../../../components/EntitiesCount';
 import type {PreparedPartitionData} from '../../../../../store/reducers/partitions/types';
-import {
-    setSelectedOffset,
-    setSelectedPartition,
-    setStartTimestamp,
-    setTopicDataFilter,
-} from '../../../../../store/reducers/topic/topic';
-import {TopicDataFilterValues} from '../../../../../store/reducers/topic/types';
-import type {TopicDataFilterValue} from '../../../../../store/reducers/topic/types';
 import {formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
-import {useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks';
 import {prepareErrorMessage} from '../../../../../utils/prepareErrorMessage';
 import {convertToNumber} from '../../../../../utils/utils';
 import i18n from '../i18n';
+import {useTopicDataQueryParams} from '../useTopicDataQueryParams';
 import {b} from '../utils/constants';
+import {TopicDataFilterValues} from '../utils/types';
+import type {TopicDataFilterValue} from '../utils/types';
 
 interface TopicDataControlsProps {
     columnsToSelect: TableColumnSetupItem[];
@@ -46,9 +41,8 @@ export function TopicDataControls({
     partitionsLoading,
     partitionsError,
 }: TopicDataControlsProps) {
-    const dispatch = useTypedDispatch();
-
-    const {selectedPartition} = useTypedSelector((state) => state.topic);
+    const {selectedPartition, handleSelectedPartitionChange: handleSelectedPartitionParamChange} =
+        useTopicDataQueryParams();
 
     const partitionsToSelect = partitions?.map(({partitionId}) => ({
         content: partitionId,
@@ -57,13 +51,13 @@ export function TopicDataControls({
 
     const handleSelectedPartitionChange = React.useCallback(
         (value: string[]) => {
-            dispatch(setSelectedPartition(value[0]));
+            handleSelectedPartitionParamChange(value[0]);
         },
-        [dispatch],
+        [handleSelectedPartitionParamChange],
     );
 
     React.useEffect(() => {
-        if (partitions && partitions.length && selectedPartition === undefined) {
+        if (partitions && partitions.length && isNil(selectedPartition)) {
             handleSelectedPartitionChange([partitions[0].partitionId]);
         }
     }, [partitions, selectedPartition, handleSelectedPartitionChange]);
@@ -100,22 +94,26 @@ export function TopicDataControls({
 }
 
 function TopicDataStartControls() {
-    const dispatch = useTypedDispatch();
-    const {selectedOffset, startTimestamp, topicDataFilter} = useTypedSelector(
-        (state) => state.topic,
-    );
+    const {
+        selectedOffset,
+        startTimestamp,
+        topicDataFilter,
+        handleSelectedOffsetChange,
+        handleStartTimestampChange,
+        handleTopicDataFilterChange,
+    } = useTopicDataQueryParams();
 
     const onFilterChange = React.useCallback(
         (value: TopicDataFilterValue) => {
-            dispatch(setTopicDataFilter(value));
+            handleTopicDataFilterChange(value);
         },
-        [dispatch],
+        [handleTopicDataFilterChange],
     );
     const onStartOffsetChange = React.useCallback(
         (value: string) => {
-            dispatch(setSelectedOffset(convertToNumber(value)));
+            handleSelectedOffsetChange(convertToNumber(value));
         },
-        [dispatch],
+        [handleSelectedOffsetChange],
     );
     const handleFromTimestampChange = React.useCallback(
         (data: Value | null) => {
@@ -130,9 +128,9 @@ function TopicDataStartControls() {
                     newValue = absoluteValue ? absoluteValue.valueOf() : undefined;
                 }
             }
-            dispatch(setStartTimestamp(newValue));
+            handleStartTimestampChange(newValue);
         },
-        [dispatch],
+        [handleStartTimestampChange],
     );
 
     const startDateTime = dateTimeParse(Number(startTimestamp));
@@ -154,6 +152,8 @@ function TopicDataStartControls() {
                     label={i18n('label_from')}
                     placeholder={i18n('label_offset')}
                     type="number"
+                    debounce={600}
+                    autoFocus
                 />
             )}
             {topicDataFilter === 'TIMESTAMP' && (
diff --git a/src/containers/Tenant/Diagnostics/TopicData/useTopicDataQueryParams.ts b/src/containers/Tenant/Diagnostics/TopicData/useTopicDataQueryParams.ts
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {NumberParam, StringParam, useQueryParams} from 'use-query-params';
+
+import type {TopicDataFilterValue} from './utils/types';
+import {TopicDataFilterValueParam} from './utils/types';
+
+export function useTopicDataQueryParams() {
+    const [{selectedPartition, selectedOffset, startTimestamp, topicDataFilter}, setQueryParams] =
+        useQueryParams({
+            selectedPartition: StringParam,
+            selectedOffset: NumberParam,
+            startTimestamp: NumberParam,
+            topicDataFilter: TopicDataFilterValueParam,
+        });
+
+    const handleSelectedPartitionChange = React.useCallback(
+        (value: string) => {
+            setQueryParams({selectedPartition: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handleSelectedOffsetChange = React.useCallback(
+        (value?: number) => {
+            setQueryParams({selectedOffset: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handleStartTimestampChange = React.useCallback(
+        (value?: number) => {
+            setQueryParams({startTimestamp: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handleTopicDataFilterChange = React.useCallback(
+        (value: TopicDataFilterValue) => {
+            setQueryParams({topicDataFilter: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    return {
+        selectedPartition,
+        selectedOffset,
+        startTimestamp,
+        topicDataFilter,
+        handleSelectedPartitionChange,
+        handleSelectedOffsetChange,
+        handleStartTimestampChange,
+        handleTopicDataFilterChange,
+    };
+}
diff --git a/src/containers/Tenant/Diagnostics/TopicData/utils/types.ts b/src/containers/Tenant/Diagnostics/TopicData/utils/types.ts
@@ -1,4 +1,5 @@
-import type {TopicDataFilterValue} from '../../../../../store/reducers/topic/types';
+import {createEnumParam, withDefault} from 'use-query-params';
+
 import type {ValueOf} from '../../../../../types/common';
 
 export const TOPIC_DATA_COLUMNS_IDS = {
@@ -26,3 +27,20 @@ export interface TopicDataFilters {
     database: string;
     path: string;
 }
+
+export const TopicDataFilterValues = {
+    TIMESTAMP: 'By Timestamp',
+    OFFSET: 'By Offset',
+} as const;
+
+export type TopicDataFilterValue = keyof typeof TopicDataFilterValues;
+
+export const isValidTopicDataFilterValue = (value: string): value is TopicDataFilterValue => {
+    return Object.keys(TopicDataFilterValues).some((v) => v === value);
+};
+
+export const TopicDataFilterValueEnum = createEnumParam(['TIMESTAMP', 'OFFSET']);
+export const TopicDataFilterValueParam = withDefault<
+    TopicDataFilterValue | undefined | null,
+    'TIMESTAMP'
+>(TopicDataFilterValueEnum, 'TIMESTAMP');
diff --git a/src/containers/Tenant/TenantPages.tsx b/src/containers/Tenant/TenantPages.tsx
@@ -12,6 +12,7 @@ type AdditionalQueryParams = {
     database?: string;
     name?: string;
     backend?: string;
+    selectedPartition?: string;
 };
 
 export type TenantQuery = TenantQueryParams | AdditionalQueryParams;
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
@@ -18,7 +18,6 @@ import singleClusterMode from './singleClusterMode';
 import tenant from './tenant/tenant';
 import tenants from './tenants/tenants';
 import tooltip from './tooltip';
-import topic from './topic/topic';
 
 export const rootReducer = {
     [api.reducerPath]: api.reducer,
@@ -39,7 +38,6 @@ export const rootReducer = {
     queryActions,
     fullscreen,
     clusters,
-    topic,
 };
 
 const combinedReducer = combineReducers({
diff --git a/src/store/reducers/topic.ts b/src/store/reducers/topic.ts
@@ -1,43 +1,11 @@
 /* eslint-disable camelcase */
-import type {PayloadAction} from '@reduxjs/toolkit';
-import {createSelector, createSlice} from '@reduxjs/toolkit';
+import {createSelector} from '@reduxjs/toolkit';
 
-import {convertBytesObjectToSpeed} from '../../../utils/bytesParsers';
-import {parseLag, parseTimestampToIdleTime} from '../../../utils/timeParsers';
-import type {RootState} from '../../defaultStore';
-import {api} from '../api';
+import {convertBytesObjectToSpeed} from '../../utils/bytesParsers';
+import {parseLag, parseTimestampToIdleTime} from '../../utils/timeParsers';
+import type {RootState} from '../defaultStore';
 
-import type {TopicDataFilterValue} from './types';
-
-const initialState: {
-    selectedPartition?: string;
-    topicDataFilter: TopicDataFilterValue;
-    selectedOffset?: number;
-    startTimestamp?: number;
-} = {topicDataFilter: 'TIMESTAMP'};
-
-const slice = createSlice({
-    name: 'topic',
-    initialState,
-    reducers: {
-        setSelectedPartition: (state, action: PayloadAction<string | undefined>) => {
-            state.selectedPartition = action.payload;
-        },
-        setTopicDataFilter: (state, action: PayloadAction<TopicDataFilterValue>) => {
-            state.topicDataFilter = action.payload;
-        },
-        setSelectedOffset: (state, action: PayloadAction<number | undefined>) => {
-            state.selectedOffset = action.payload;
-        },
-        setStartTimestamp: (state, action: PayloadAction<number | undefined>) => {
-            state.startTimestamp = action.payload;
-        },
-    },
-});
-
-export const {setSelectedPartition, setTopicDataFilter, setSelectedOffset, setStartTimestamp} =
-    slice.actions;
-export default slice.reducer;
+import {api} from './api';
 
 export const topicApi = api.injectEndpoints({
     endpoints: (build) => ({
diff --git a/src/store/reducers/topic/types.ts b/src/store/reducers/topic/types.ts
diff --git a/src/store/state-url-mapping.ts b/src/store/state-url-mapping.ts
