#2875 Messages V2: Fix smart filters (#2920)

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

@@ -3,15 +3,33 @@ 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';
 
-const AdvancedFilter = () => {
-  const { save, apply, filters, remove } = useMessageFiltersStore();
+export interface AdvancedFilterProps {
+  onClose?: () => void;
+}
+
+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]);
+
   return (
     <div>
       <Heading level={4}>Add new filter</Heading>
-      <Form save={save} apply={apply} />
+      <Form save={save} apply={apply} onClose={onClose} />
       {filters.length > 0 && (
         <>
           <Heading level={4}>Saved Filters</Heading>

kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/Advanced Filter/Form.tsx

@@ -13,7 +13,11 @@ import { AdvancedFilter } from 'lib/hooks/useMessageFiltersStore';
 
 const validationSchema = yup.object().shape({
   value: yup.string().required(),
-  name: yup.string().required(),
+  name: yup.string().when('saveFilter', {
+    is: (value: boolean | undefined) => typeof value === 'undefined' || value,
+    then: (schema) => schema.required(),
+    otherwise: (schema) => schema.notRequired(),
+  }),
 });
 
 export interface FormProps {
@@ -21,9 +25,16 @@ export interface FormProps {
   value?: string;
   save(filter: AdvancedFilter): void;
   apply(filter: AdvancedFilter): void;
+  onClose?: () => void;
 }
 
-const Form: React.FC<FormProps> = ({ name, value, save, apply }) => {
+const Form: React.FC<FormProps> = ({
+  name = '',
+  value,
+  save,
+  apply,
+  onClose,
+}) => {
   const methods = useForm<AdvancedFilter>({
     mode: 'onChange',
     resolver: yupResolver(validationSchema),
@@ -36,19 +47,22 @@ const Form: React.FC<FormProps> = ({ name, value, save, apply }) => {
     getValues,
   } = methods;
 
+  const onApply = React.useCallback(() => {
+    apply(getValues());
+    reset({ name: '', value: '' });
+    if (onClose) {
+      onClose();
+    }
+  }, []);
+
   const onSubmit = React.useCallback(
     (values: AdvancedFilter) => {
-      apply(values);
-      reset({ name: '', value: '' });
+      save(values);
+      onApply();
     },
     [reset, save]
   );
 
-  const onSave = React.useCallback(() => {
-    save(getValues());
-    handleSubmit(onSubmit);
-  }, []);
-
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} aria-label="Filters submit Form">
@@ -97,7 +111,6 @@ const Form: React.FC<FormProps> = ({ name, value, save, apply }) => {
             buttonType="secondary"
             type="submit"
             disabled={!isValid || isSubmitting || !isDirty}
-            onClick={onSave}
           >
             Save & Apply
           </Button>
@@ -106,6 +119,7 @@ const Form: React.FC<FormProps> = ({ name, value, save, apply }) => {
             buttonType="primary"
             type="submit"
             disabled={isSubmitting || !isDirty}
+            onClick={onApply}
           >
             Apply Filter
           </Button>

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

@@ -103,7 +103,7 @@ const Messages = () => {
         open={isAdvancedFiltersSidebarVisible}
         onClose={closeAdvancedFiltersSidebar}
       >
-        <AdvancedFilter />
+        <AdvancedFilter onClose={closeAdvancedFiltersSidebar} />
       </SlidingSidebar>
     </>
   );