feat(TopicData): use number input for offset selection (#2890)

Author: Raubzeug

src/components/DebouncedInput/DebouncedNumerInput.tsx

@@ -0,0 +1,23 @@
+import type {NumberInputProps} from '@gravity-ui/uikit';
+import {NumberInput} from '@gravity-ui/uikit';
+
+import {useDebouncedValue} from '../../utils/hooks/useDebouncedValue';
+
+interface DebouncedInputProps extends NumberInputProps {
+    debounce?: number;
+}
+
+export const DebouncedNumberInput = ({
+    onUpdate,
+    value = null,
+    debounce = 200,
+    ...rest
+}: DebouncedInputProps) => {
+    const [currentValue, handleUpdate] = useDebouncedValue<number | null>({
+        value,
+        onUpdate,
+        debounce,
+    });
+
+    return <NumberInput value={currentValue} onUpdate={handleUpdate} {...rest} />;
+};

src/components/DebouncedInput/DebouncedTextInput.tsx

@@ -7,7 +7,7 @@ interface DebouncedInputProps extends TextInputProps {
     debounce?: number;
 }
 
-export const DebouncedInput = ({
+export const DebouncedTextInput = ({
     onUpdate,
     value = '',
     debounce = 200,

src/components/Search/Search.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {TextInputProps} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
-import {DebouncedInput} from '../DebouncedInput/DebouncedTextInput';
+import {DebouncedTextInput} from '../DebouncedInput/DebouncedTextInput';
 
 import './Search.scss';
 
@@ -27,7 +27,7 @@ export const Search = ({
     ...props
 }: SearchProps) => {
     return (
-        <DebouncedInput
+        <DebouncedTextInput
             debounce={debounce}
             hasClear
             autoFocus

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

@@ -351,7 +351,7 @@ export function TopicData({scrollContainerRef, path, database, databaseFullPath}
                             getRowClassName={(row) => {
                                 return b('row', {
                                     active: Boolean(
-                                        String(row.Offset) === selectedOffset ||
+                                        safeParseNumber(row.Offset) === selectedOffset ||
                                             String(row.Offset) === activeOffset,
                                     ),
                                     removed: row.removed,

src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx

@@ -18,7 +18,7 @@ import {
 } from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
-import {DebouncedInput} from '../../../../../components/DebouncedInput/DebouncedTextInput';
+import {DebouncedNumberInput} from '../../../../../components/DebouncedInput/DebouncedNumerInput';
 import type {PreparedPartitionData} from '../../../../../store/reducers/partitions/types';
 import {formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
 import {prepareErrorMessage} from '../../../../../utils/prepareErrorMessage';
@@ -137,7 +137,7 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
         [handleTopicDataFilterChange, handleSelectedOffsetChange, handleStartTimestampChange],
     );
     const onStartOffsetChange = React.useCallback(
-        (value: string) => {
+        (value: number | null) => {
             handleSelectedOffsetChange(value);
         },
         [handleSelectedOffsetChange],
@@ -176,19 +176,20 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
                 </SegmentedRadioGroup.Option>
             </SegmentedRadioGroup>
             {topicDataFilter === 'OFFSET' && (
-                <DebouncedInput
+                <DebouncedNumberInput
                     controlRef={inputRef}
                     className={b('offset-input')}
-                    value={selectedOffset ? String(selectedOffset) : ''}
+                    max={Number.MAX_SAFE_INTEGER}
+                    min={0}
+                    value={isNil(selectedOffset) ? null : safeParseNumber(selectedOffset)}
                     onUpdate={onStartOffsetChange}
                     label={i18n('label_from')}
                     placeholder={i18n('label_offset')}
-                    type="number"
                     debounce={600}
                     endContent={
                         <ActionTooltip title={i18n('action_scroll-selected')}>
                             <Button
-                                disabled={isNil(selectedOffset) || selectedOffset === ''}
+                                disabled={isNil(selectedOffset)}
                                 className={b('scroll-button')}
                                 view="flat-action"
                                 size="xs"

src/containers/Tenant/Diagnostics/TopicData/useTopicDataQueryParams.ts

@@ -11,7 +11,7 @@ export function useTopicDataQueryParams() {
         setQueryParams,
     ] = useQueryParams({
         selectedPartition: StringParam,
-        selectedOffset: StringParam,
+        selectedOffset: NumberParam,
         startTimestamp: NumberParam,
         topicDataFilter: TopicDataFilterValueParam,
         activeOffset: StringParam,
@@ -25,8 +25,8 @@ export function useTopicDataQueryParams() {
     );
 
     const handleSelectedOffsetChange = React.useCallback(
-        (value?: string) => {
-            setQueryParams({selectedOffset: value}, 'replaceIn');
+        (value?: number | null) => {
+            setQueryParams({selectedOffset: value || undefined}, 'replaceIn');
         },
         [setQueryParams],
     );

src/utils/hooks/useDebouncedValue.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function useDebouncedValue<T extends string | number>({
+export function useDebouncedValue<T extends string | number | null>({
     value,
     onUpdate,
     debounce = 200,