Fix KSQL empty field in Stream properties causes errors (#2744)

Co-authored-by: Kamila Alekbaeva <kalekbaeva@provectus.com>

kafka-ui-react-app/src/components/KsqlDb/Query/Query.tsx

@@ -167,7 +167,10 @@ const Query: FC = () => {
 
   const submitHandler = useCallback(
     (values: FormValues) => {
-      const streamsProperties = values.streamsProperties.reduce(
+      const filteredProperties = values.streamsProperties.filter(
+        (property) => property.key != null
+      );
+      const streamsProperties = filteredProperties.reduce(
         (acc, current) => ({
           ...acc,
           [current.key as keyof string]: current.value,

kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FormError } from 'components/common/Input/Input.styled';
 import { ErrorMessage } from '@hookform/error-message';
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
@@ -46,6 +46,7 @@ const QueryForm: React.FC<Props> = ({
   const {
     handleSubmit,
     setValue,
+    getValues,
     control,
     formState: { errors },
   } = useForm<FormValues>({
@@ -64,6 +65,16 @@ const QueryForm: React.FC<Props> = ({
     name: 'streamsProperties',
   });
 
+  const handleAddNewProperty = useCallback(() => {
+    if (
+      getValues().streamsProperties.every((prop) => {
+        return prop.key;
+      })
+    ) {
+      append({ key: '', value: '' });
+    }
+  }, []);
+
   return (
     <S.QueryWrapper>
       <form onSubmit={handleSubmit(submitHandler)}>
@@ -164,7 +175,7 @@ const QueryForm: React.FC<Props> = ({
               type="button"
               buttonSize="M"
               buttonType="secondary"
-              onClick={() => append({ key: '', value: '' })}
+              onClick={handleAddNewProperty}
             >
               <PlusIcon />
               Add Stream Property

kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/__test__/QueryForm.spec.tsx

@@ -157,7 +157,7 @@ describe('QueryForm', () => {
     expect(submitFn.mock.calls.length).toBe(1);
   });
 
-  it('add new property', async () => {
+  it('adds new property', async () => {
     renderComponent({
       fetching: false,
       hasResults: false,
@@ -166,6 +166,8 @@ describe('QueryForm', () => {
       submitHandler: jest.fn(),
     });
 
+    const textbox = screen.getByLabelText('key');
+    await userEvent.type(textbox, 'prop_name');
     await act(() => {
       userEvent.click(
         screen.getByRole('button', { name: 'Add Stream Property' })
@@ -174,6 +176,23 @@ describe('QueryForm', () => {
     expect(screen.getAllByRole('textbox', { name: 'key' }).length).toEqual(2);
   });
 
+  it("doesn't add new property", async () => {
+    renderComponent({
+      fetching: false,
+      hasResults: false,
+      handleClearResults: jest.fn(),
+      handleSSECancel: jest.fn(),
+      submitHandler: jest.fn(),
+    });
+
+    await act(() => {
+      userEvent.click(
+        screen.getByRole('button', { name: 'Add Stream Property' })
+      );
+    });
+    expect(screen.getAllByRole('textbox', { name: 'key' }).length).toEqual(1);
+  });
+
   it('delete stream property', async () => {
     await renderComponent({
       fetching: false,
@@ -184,6 +203,7 @@ describe('QueryForm', () => {
     });
 
     await act(() => {
+      userEvent.paste(screen.getByRole('textbox', { name: 'key' }), 'test');
       userEvent.click(
         screen.getByRole('button', { name: 'Add Stream Property' })
       );