FE: Topics: Save field previews into local storage (#449)

Author: Nilumilak

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

@@ -2,43 +2,86 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { TopicMessage } from 'generated-sources';
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Button } from 'components/common/Button/Button';
 import * as S from 'components/common/NewTable/Table.styled';
 import { usePaginateTopics, useIsLiveMode } from 'lib/hooks/useMessagesFilters';
 import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
+import useAppParams from 'lib/hooks/useAppParams';
+import { RouteParamsClusterTopic } from 'lib/paths';
+import { useLocalStorage } from 'lib/hooks/useLocalStorage';
 
-import PreviewModal from './PreviewModal';
 import Message, { PreviewFilter } from './Message';
+import PreviewModal from './PreviewModal';
 
 export interface MessagesTableProps {
   messages: TopicMessage[];
   isFetching: boolean;
 }
 
+interface MessagePreviewProps {
+  [key: string]: {
+    keyFilters: PreviewFilter[];
+    contentFilters: PreviewFilter[];
+  };
+}
+
 const MessagesTable: React.FC<MessagesTableProps> = ({
   messages,
   isFetching,
 }) => {
   const paginate = usePaginateTopics();
-  const [previewFor, setPreviewFor] = useState<string | null>(null);
-
+  const [previewFor, setPreviewFor] = useState<'key' | 'content' | null>(null);
   const [keyFilters, setKeyFilters] = useState<PreviewFilter[]>([]);
   const [contentFilters, setContentFilters] = useState<PreviewFilter[]>([]);
   const nextCursor = useMessageFiltersStore((state) => state.nextCursor);
   const isLive = useIsLiveMode();
+  const { topicName } = useAppParams<RouteParamsClusterTopic>();
+  const [messagesPreview, setMessagesPreview] =
+    useLocalStorage<MessagePreviewProps>('message-preview', {
+      [topicName]: {
+        keyFilters: [],
+        contentFilters: [],
+      },
+    });
+
+  useEffect(() => {
+    setKeyFilters(messagesPreview[topicName]?.keyFilters || []);
+    setContentFilters(messagesPreview[topicName]?.contentFilters || []);
+  }, []);
+
+  const setFilters = useCallback(
+    (payload: PreviewFilter[]) => {
+      if (previewFor === 'key') {
+        setKeyFilters(payload);
+        setMessagesPreview({
+          ...messagesPreview,
+          [topicName]: {
+            ...messagesPreview[topicName],
+            keyFilters: payload,
+          },
+        });
+      } else {
+        setContentFilters(payload);
+        setMessagesPreview({
+          ...messagesPreview,
+          [topicName]: {
+            ...messagesPreview[topicName],
+            contentFilters: payload,
+          },
+        });
+      }
+    },
+    [previewFor, messagesPreview, topicName]
+  );
 
   return (
     <div style={{ position: 'relative' }}>
       {previewFor !== null && (
         <PreviewModal
           values={previewFor === 'key' ? keyFilters : contentFilters}
           toggleIsOpen={() => setPreviewFor(null)}
-          setFilters={(payload: PreviewFilter[]) =>
-            previewFor === 'key'
-              ? setKeyFilters(payload)
-              : setContentFilters(payload)
-          }
+          setFilters={setFilters}
         />
       )}
       <Table isFullwidth>

frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx

@@ -7,6 +7,8 @@ import MessagesTable, {
 } from 'components/Topics/Topic/Messages/MessagesTable';
 import { TopicMessage, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { useIsLiveMode } from 'lib/hooks/useMessagesFilters';
+import useAppParams from 'lib/hooks/useAppParams';
+import { LOCAL_STORAGE_KEY_PREFIX } from 'lib/constants';
 
 export const topicMessagePayload: TopicMessage = {
   partition: 29,
@@ -33,8 +35,16 @@ jest.mock('lib/hooks/useMessagesFilters', () => ({
   usePaginateTopics: jest.fn(),
 }));
 
+jest.mock('lib/hooks/useAppParams', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
 describe('MessagesTable', () => {
   const renderComponent = (props?: Partial<MessagesTableProps>) => {
+    (useAppParams as jest.Mock).mockImplementation(() => ({
+      topicName: 'testTopic',
+    }));
     return render(
       <MessagesTable messages={[]} isFetching={false} {...props} />
     );
@@ -99,4 +109,34 @@ describe('MessagesTable', () => {
       }
     });
   });
+
+  describe('should save messages preview into localstorage', () => {
+    beforeEach(() => {
+      renderComponent({ messages: mockTopicsMessages, isFetching: false });
+    });
+
+    it('should save messages preview into localstorage', async () => {
+      const previewButtons = screen.getAllByText('Preview');
+      await userEvent.click(previewButtons[0]);
+      await userEvent.type(screen.getByPlaceholderText('Field'), 'test1');
+      await userEvent.type(screen.getByPlaceholderText('Json Path'), 'test2');
+      await userEvent.click(screen.getByText('Save'));
+      await userEvent.click(previewButtons[1]);
+      await userEvent.type(screen.getByPlaceholderText('Field'), 'test3');
+      await userEvent.type(screen.getByPlaceholderText('Json Path'), 'test4');
+      await userEvent.click(screen.getByText('Save'));
+      expect(
+        global.localStorage.getItem(
+          `${LOCAL_STORAGE_KEY_PREFIX}-message-preview`
+        )
+      ).toEqual(
+        JSON.stringify({
+          testTopic: {
+            keyFilters: [{ field: 'test1', path: 'test2' }],
+            contentFilters: [{ field: 'test3', path: 'test4' }],
+          },
+        })
+      );
+    });
+  });
 });

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) {