瀏覽代碼

FE: Implement a warning for duplicated filter (#3608)

* bugfix/messages-filter-dupes add validation for existing filter

* bugfix/messages-filter-dupes replace `current` with `same` in alert message
Nail Badiullin 2 年之前
父節點
當前提交
89019dae19

+ 1 - 1
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx

@@ -27,7 +27,7 @@ export interface AddEditFilterContainerProps {
   inputDisplayNameDefaultValue?: string;
   inputCodeDefaultValue?: string;
   isAdd?: boolean;
-  submitCallback?: (values: AddMessageFilters) => void;
+  submitCallback?: (values: AddMessageFilters) => Promise<void>;
 }
 
 const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({

+ 14 - 0
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx

@@ -6,6 +6,7 @@ import SavedFilters from 'components/Topics/Topic/Messages/Filters/SavedFilters'
 import SavedIcon from 'components/common/Icons/SavedIcon';
 import QuestionIcon from 'components/common/Icons/QuestionIcon';
 import useBoolean from 'lib/hooks/useBoolean';
+import { showAlert } from 'lib/errorHandling';
 
 import AddEditFilterContainer from './AddEditFilterContainer';
 import InfoModal from './InfoModal';
@@ -43,6 +44,19 @@ const AddFilter: React.FC<FilterModalProps> = ({
 
   const onSubmit = React.useCallback(
     async (values: AddMessageFilters) => {
+      const isFilterExists = filters.some(
+        (filter) => filter.name === values.name
+      );
+
+      if (isFilterExists) {
+        showAlert('error', {
+          id: '',
+          title: 'Validation Error',
+          message: 'Filter with the same name already exists',
+        });
+        return;
+      }
+
       const data = { ...values };
       if (data.saveFilter) {
         addFilter(data);