Messages AdvancedFilters with modal replacement instead of the

sidebar

kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/AdvancedFilter/AdvancedFilter.tsx

@@ -3,7 +3,6 @@ import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 import * as StyledTable from 'components/common/NewTable/Table.styled';
 import Heading from 'components/common/heading/Heading.styled';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
-import { useSearchParams } from 'react-router-dom';
 
 import Form from './Form';
 
@@ -12,23 +11,10 @@ export interface AdvancedFilterProps {
 }
 
 const AdvancedFilter: React.FC<AdvancedFilterProps> = ({ onClose }) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const { save, apply, activeFilter, filters, remove } =
-    useMessageFiltersStore();
-
-  React.useEffect(() => {
-    if (activeFilter?.value) {
-      searchParams.set('q', activeFilter?.value);
-    } else {
-      searchParams.delete('q');
-    }
-    setSearchParams(searchParams);
-  }, [activeFilter]);
+  const { save, apply, filters, remove } = useMessageFiltersStore();
 
   return (
     <div>
-      <Heading level={4}>Add new filter</Heading>
       <Form save={save} apply={apply} onClose={onClose} />
       {filters.length > 0 && (
         <>

kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/Messages.tsx

@@ -8,7 +8,7 @@ import { MESSAGES_PER_PAGE } from 'lib/constants';
 import Search from 'components/common/Search/Search';
 import { Button } from 'components/common/Button/Button';
 import PlusIcon from 'components/common/Icons/PlusIcon';
-import SlidingSidebar from 'components/common/SlidingSidebar';
+import Modal from 'components/common/Modal/Modal';
 import useBoolean from 'lib/hooks/useBoolean';
 
 import MessagesTable from './MessagesTable/MessagesTable';
@@ -23,11 +23,13 @@ const Messages = () => {
   const routerProps = useAppParams<RouteParamsClusterTopic>();
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
+
   const {
     value: isAdvancedFiltersSidebarVisible,
     setFalse: closeAdvancedFiltersSidebar,
     setTrue: openAdvancedFiltersSidebar,
   } = useBoolean();
+
   const { messages, meta, phase, isFetching } = useTopicMessages({
     ...routerProps,
     searchParams,
@@ -95,13 +97,13 @@ const Messages = () => {
           <MessagesTable messages={messages} isLive={isTailing} />
         </S.TableWrapper>
       </S.Wrapper>
-      <SlidingSidebar
-        title="Advanced filtering"
+      <Modal
         open={isAdvancedFiltersSidebarVisible}
         onClose={closeAdvancedFiltersSidebar}
+        header="Add new filter"
       >
         <AdvancedFilter onClose={closeAdvancedFiltersSidebar} />
-      </SlidingSidebar>
+      </Modal>
     </>
   );
 };

kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/MessagesContainer.tsx

@@ -5,6 +5,7 @@ import { RouteParamsClusterTopic } from 'lib/paths';
 import { useSearchParams } from 'react-router-dom';
 import { useTopicDetails } from 'lib/hooks/api/topics';
 import { MESSAGES_PER_PAGE } from 'lib/constants';
+import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 import { SerdeUsage } from 'generated-sources';
 
 import { setSeekTo } from './FiltersBar/utils';
@@ -22,12 +23,17 @@ const MessagesContainer = () => {
   const { data: topic = { partitions: [] } } = useTopicDetails(routerProps);
   const partitions = topic.partitions || [];
 
+  const activeFilterValue = useMessageFiltersStore(
+    (state) => state.activeFilter?.value
+  );
+
   /**
    * Search params:
    * - `q` - search query
    * - `m` - way the consumer is going to consume the messages..
    * - `o` - offset
    * - `t` - timestamp
+   * - `q` - search query
    * - `perPage` - number of messages per page
    * - `seekTo` - offset or timestamp to seek to.
    *    Format: `0-101.1-987` - [partition 0, offset 101], [partition 1, offset 987]
@@ -49,8 +55,13 @@ const MessagesContainer = () => {
     if (!searchParams.get('valueSerde')) {
       searchParams.set('valueSerde', getDefaultSerdeName(serdes.value || []));
     }
+
+    if (activeFilterValue && searchParams.get('q') !== activeFilterValue) {
+      searchParams.set('q', activeFilterValue);
+    }
+
     setSearchParams(searchParams);
-  }, [topic, serdes]);
+  }, [topic, serdes, activeFilterValue]);
 
   return (
     <Suspense>