FE: Topics: Remember user polling options

Resolves: #440

Author: Nilumilak

frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx

@@ -63,7 +63,7 @@ const Filters: React.FC<FiltersProps> = ({
     smartFilter,
     setSmartFilter,
     refreshData,
-  } = useMessagesFilters();
+  } = useMessagesFilters(topicName);
 
   const { data: topic } = useTopicDetails({ clusterName, topicName });
   const [createdEditedSmartId, setCreatedEditedSmartId] = useState<string>();

frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx

@@ -10,12 +10,10 @@ import { useTopicDetails } from 'lib/hooks/api/topics';
 import { externalTopicPayload } from 'lib/fixtures/topics';
 import { useSerdes } from 'lib/hooks/api/topicMessages';
 import { serdesPayload } from 'lib/fixtures/topicMessages';
-import {
-  MessagesFilterKeys,
-  MessagesFilterKeysTypes,
-} from 'lib/hooks/useMessagesFilters';
 import { PollingMode } from 'generated-sources';
 import { ModeOptions } from 'lib/hooks/filterUtils';
+import { MessagesFilterKeysTypes } from 'lib/types';
+import { MessagesFilterKeys } from 'lib/constants';
 
 const closeIconMock = 'closeIconMock';
 const filtersSideBarMock = 'filtersSideBarMock';

frontend/src/components/common/Search/Search.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentRef, useRef } from 'react';
+import React, { ComponentRef, useEffect, useRef } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import Input from 'components/common/Input/Input';
 import { useSearchParams } from 'react-router-dom';
@@ -31,6 +31,12 @@ const Search: React.FC<SearchProps> = ({
   const [searchParams, setSearchParams] = useSearchParams();
   const ref = useRef<ComponentRef<'input'>>(null);
 
+  useEffect(() => {
+    if (ref.current != null && value) {
+      ref.current.value = value;
+    }
+  }, [value]);
+
   const handleChange = useDebouncedCallback((e) => {
     if (ref.current != null) {
       ref.current.value = e.target.value;

frontend/src/components/common/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import useClickOutside from 'lib/hooks/useClickOutside';
 import DropdownArrowIcon from 'components/common/Icons/DropdownArrowIcon';
 
@@ -42,6 +42,10 @@ const Select = <T extends object>(
   const [selectedOption, setSelectedOption] = useState(value);
   const [showOptions, setShowOptions] = useState(false);
 
+  useEffect(() => {
+    setSelectedOption(value);
+  }, [value]);
+
   const showOptionsHandler = () => {
     if (!disabled) setShowOptions(!showOptions);
   };

frontend/src/lib/constants.ts

@@ -106,3 +106,23 @@ export const CONSUMER_GROUP_STATE_TOOLTIPS: Record<ConsumerGroupState, string> =
     DEAD: 'The group is going to be removed. It might be due to the inactivity, or the group is being migrated to different group coordinator.',
     UNKNOWN: '',
   } as const;
+
+/**
+ * @description !! Note !!
+ * Key value should match
+ * */
+export const MessagesFilterKeys = {
+  mode: 'mode',
+  timestamp: 'timestamp',
+  keySerde: 'keySerde',
+  valueSerde: 'valueSerde',
+  limit: 'limit',
+  offset: 'offset',
+  stringFilter: 'stringFilter',
+  partitions: 'partitions',
+  smartFilterId: 'smartFilterId',
+  activeFilterId: 'activeFilterId',
+  activeFilterNPId: 'activeFilterNPId', // not persisted filter name to indicate the refresh
+  cursor: 'cursor',
+  r: 'r', // used tp force refresh of the data
+} as const;

frontend/src/lib/hooks/api/topicMessages.tsx

@@ -1,6 +1,10 @@
 import React, { useCallback, useRef } from 'react';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
-import { BASE_PARAMS, MESSAGES_PER_PAGE } from 'lib/constants';
+import {
+  BASE_PARAMS,
+  MESSAGES_PER_PAGE,
+  MessagesFilterKeys,
+} from 'lib/constants';
 import {
   GetSerdesRequest,
   PollingMode,
@@ -13,10 +17,7 @@ import { showServerError } from 'lib/errorHandling';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { messagesApiClient } from 'lib/api';
 import { useSearchParams } from 'react-router-dom';
-import {
-  getCursorValue,
-  MessagesFilterKeys,
-} from 'lib/hooks/useMessagesFilters';
+import { getCursorValue } from 'lib/hooks/useMessagesFilters';
 import { convertStrToPollingMode } from 'lib/hooks/filterUtils';
 import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 import { TopicName } from 'lib/interfaces/topic';

frontend/src/lib/hooks/useLocalStorage.ts

@@ -1,9 +1,12 @@
 import { LOCAL_STORAGE_KEY_PREFIX } from 'lib/constants';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Dispatch, SetStateAction } from 'react';
 
-export const useLocalStorage = (featureKey: string, defaultValue: string) => {
+export const useLocalStorage = <T>(
+  featureKey: string,
+  defaultValue: T
+): [T, Dispatch<SetStateAction<T>>] => {
   const key = `${LOCAL_STORAGE_KEY_PREFIX}-${featureKey}`;
-  const [value, setValue] = useState(() => {
+  const [value, setValue] = useState<T>(() => {
     const saved = localStorage.getItem(key);
 
     if (saved !== null) {

frontend/src/lib/hooks/useMessagesFilters.ts

@@ -2,36 +2,15 @@ import { useSearchParams } from 'react-router-dom';
 import { PollingMode } from 'generated-sources';
 import { useEffect } from 'react';
 import { Option } from 'react-multi-select-component';
-import { ObjectValues } from 'lib/types';
+import { MessagesFilterKeys } from 'lib/constants';
 
 import { convertStrToPollingMode, ModeOptions } from './filterUtils';
 import {
   AdvancedFilter,
   selectFilter,
   useMessageFiltersStore,
 } from './useMessageFiltersStore';
-
-/**
- * @description !! Note !!
- * Key value should match
- * */
-export const MessagesFilterKeys = {
-  mode: 'mode',
-  timestamp: 'timestamp',
-  keySerde: 'keySerde',
-  valueSerde: 'valueSerde',
-  limit: 'limit',
-  offset: 'offset',
-  stringFilter: 'stringFilter',
-  partitions: 'partitions',
-  smartFilterId: 'smartFilterId',
-  activeFilterId: 'activeFilterId',
-  activeFilterNPId: 'activeFilterNPId', // not persisted filter name to indicate the refresh
-  cursor: 'cursor',
-  r: 'r', // used tp force refresh of the data
-} as const;
-
-export type MessagesFilterKeysTypes = ObjectValues<typeof MessagesFilterKeys>;
+import { useMessagesFiltersFields } from './useMessagesFiltersFields';
 
 const PER_PAGE = 100;
 
@@ -80,12 +59,18 @@ export function usePaginateTopics(initSearchParams?: URLSearchParams) {
   };
 }
 
-export function useMessagesFilters() {
+export function useMessagesFilters(topicName: string) {
   const [searchParams, setSearchParams] = useSearchParams();
   const refreshData = useRefreshData(searchParams);
+  const {
+    initMessagesFiltersFields,
+    setMessagesFiltersField,
+    removeMessagesFiltersField,
+  } = useMessagesFiltersFields(topicName);
 
   useEffect(() => {
     setSearchParams((params) => {
+      initMessagesFiltersFields(params);
       params.set(MessagesFilterKeys.limit, PER_PAGE.toString());
 
       if (!params.get(MessagesFilterKeys.mode)) {
@@ -140,8 +125,10 @@ export function useMessagesFilters() {
    * */
   const setMode = (newMode: PollingMode) => {
     setSearchParams((params) => {
+      removeMessagesFiltersField(MessagesFilterKeys.offset);
+      removeMessagesFiltersField(MessagesFilterKeys.timestamp);
+      setMessagesFiltersField(MessagesFilterKeys.mode, newMode);
       params.set(MessagesFilterKeys.mode, newMode);
-
       params.delete(MessagesFilterKeys.offset);
       params.delete(MessagesFilterKeys.timestamp);
       return params;
@@ -151,13 +138,18 @@ export function useMessagesFilters() {
   const setTimeStamp = (newDate: Date | null) => {
     if (newDate === null) {
       setSearchParams((params) => {
+        removeMessagesFiltersField(MessagesFilterKeys.timestamp);
         params.delete(MessagesFilterKeys.timestamp);
         return params;
       });
       return;
     }
 
     setSearchParams((params) => {
+      setMessagesFiltersField(
+        MessagesFilterKeys.timestamp,
+        newDate.getTime().toString()
+      );
       params.set(MessagesFilterKeys.timestamp, newDate.getTime().toString());
       return params;
     });
@@ -166,19 +158,22 @@ export function useMessagesFilters() {
   const setKeySerde = (newKeySerde: string) => {
     setSearchParams((params) => {
       params.set(MessagesFilterKeys.keySerde, newKeySerde);
+      setMessagesFiltersField(MessagesFilterKeys.keySerde, newKeySerde);
       return params;
     });
   };
 
   const setValueSerde = (newValueSerde: string) => {
     setSearchParams((params) => {
+      setMessagesFiltersField(MessagesFilterKeys.valueSerde, newValueSerde);
       params.set(MessagesFilterKeys.valueSerde, newValueSerde);
       return params;
     });
   };
 
   const setOffsetValue = (newOffsetValue: string) => {
     setSearchParams((params) => {
+      setMessagesFiltersField(MessagesFilterKeys.offset, newOffsetValue);
       params.set(MessagesFilterKeys.offset, newOffsetValue);
       return params;
     });
@@ -187,8 +182,10 @@ export function useMessagesFilters() {
   const setSearch = (value: string) => {
     setSearchParams((params) => {
       if (value) {
+        setMessagesFiltersField(MessagesFilterKeys.stringFilter, value);
         params.set(MessagesFilterKeys.stringFilter, value);
       } else {
+        removeMessagesFiltersField(MessagesFilterKeys.stringFilter);
         params.delete(MessagesFilterKeys.stringFilter);
       }
       return params;
@@ -200,10 +197,16 @@ export function useMessagesFilters() {
       params.delete(MessagesFilterKeys.partitions);
 
       if (values.length) {
+        setMessagesFiltersField(
+          MessagesFilterKeys.partitions,
+          values.map((v) => v.value).join(',')
+        );
         params.append(
           MessagesFilterKeys.partitions,
           values.map((v) => v.value).join(',')
         );
+      } else {
+        removeMessagesFiltersField(MessagesFilterKeys.partitions);
       }
 
       return params;