From c402f36306dd001947b60749e768dc58949e1bec Mon Sep 17 00:00:00 2001
From: Renat Kalimulin <103274228+Nilumilak@users.noreply.github.com>
Date: Fri, 26 Apr 2024 11:53:56 +0300
Subject: [PATCH] BE: FE: Topics: Allow custom topic params upon creation
 (#271)

Co-authored-by: Mgrdich <mgotm13@gmail.com>
Co-authored-by: VladSenyuta <vlad.senyuta@gmail.com>
---
 .../ui/screens/schemas/SchemaCreateForm.java  |   2 +
 .../screens/topics/TopicCreateEditForm.java   |   8 +-
 .../ui/smokesuite/brokers/BrokersTest.java    |   4 +-
 .../ui/smokesuite/schemas/SchemasTest.java    |   2 +-
 .../Form/CustomParams/CustomParamField.tsx    |  23 +-
 .../shared/Form/CustomParams/CustomParams.tsx |  24 +-
 .../__test__/CustomParamField.spec.tsx        |  46 ++--
 .../__test__/CustomParams.spec.tsx            | 211 ++++++++++--------
 .../InputWithOptions.styled.ts                | 151 +++++++++++++
 .../InputWithOptions/InputWithOptions.tsx     |  94 ++++++++
 .../__tests__/InputWithOptions.spec.tsx       |  84 +++++++
 frontend/src/lib/yupExtended.ts               |  34 ++-
 12 files changed, 536 insertions(+), 147 deletions(-)
 create mode 100644 frontend/src/components/common/InputWithOptions/InputWithOptions.styled.ts
 create mode 100644 frontend/src/components/common/InputWithOptions/InputWithOptions.tsx
 create mode 100644 frontend/src/components/common/InputWithOptions/__tests__/InputWithOptions.spec.tsx

diff --git a/e2e-tests/src/main/java/io/kafbat/ui/screens/schemas/SchemaCreateForm.java b/e2e-tests/src/main/java/io/kafbat/ui/screens/schemas/SchemaCreateForm.java
index cb734ba86..309f8fc68 100644
--- a/e2e-tests/src/main/java/io/kafbat/ui/screens/schemas/SchemaCreateForm.java
+++ b/e2e-tests/src/main/java/io/kafbat/ui/screens/schemas/SchemaCreateForm.java
@@ -3,6 +3,7 @@
 import static com.codeborne.selenide.Selenide.$;
 import static com.codeborne.selenide.Selenide.$$x;
 import static com.codeborne.selenide.Selenide.$x;
+import static com.codeborne.selenide.Selenide.sleep;
 import static org.openqa.selenium.By.id;
 
 import com.codeborne.selenide.Condition;
@@ -96,6 +97,7 @@ public int getVersionsNumberFromList() {
   @Step
   public SchemaCreateForm selectVersionFromDropDown(int versionNumberDd) {
     $x(String.format(ddlElementLocator, versionNumberDd)).shouldBe(Condition.visible).click();
+    sleep(1000);
     return this;
   }
 
diff --git a/e2e-tests/src/main/java/io/kafbat/ui/screens/topics/TopicCreateEditForm.java b/e2e-tests/src/main/java/io/kafbat/ui/screens/topics/TopicCreateEditForm.java
index 00a3f65dd..aedc3e1c5 100644
--- a/e2e-tests/src/main/java/io/kafbat/ui/screens/topics/TopicCreateEditForm.java
+++ b/e2e-tests/src/main/java/io/kafbat/ui/screens/topics/TopicCreateEditForm.java
@@ -29,11 +29,11 @@ public class TopicCreateEditForm extends BasePage {
   protected SelenideElement minInSyncReplicasField = $x("//input[@name='minInSyncReplicas']");
   protected SelenideElement cleanUpPolicyDdl = $x("//ul[@id='topicFormCleanupPolicy']");
   protected SelenideElement maxSizeOnDiscDdl = $x("//ul[@id='topicFormRetentionBytes']");
-  protected SelenideElement customParameterDdl = $x("//ul[contains(@name,'customParams')]");
-  protected SelenideElement deleteCustomParameterBtn = $x("//span[contains(@title,'Delete customParam')]");
-  protected SelenideElement addCustomParameterTypeBtn = $x("//button[contains(text(),'Add Custom Parameter')]");
+  protected SelenideElement customParameterDdl = $x("//input[contains(@name, 'customParams')][@role='listitem']");
+  protected SelenideElement deleteCustomParameterBtn = $x("//span[contains(@title, 'Delete customParam')]");
+  protected SelenideElement addCustomParameterTypeBtn = $x("//button[contains(text(), 'Add Custom Parameter')]");
   protected SelenideElement customParameterValueField = $x("//input[@placeholder='Value']");
-  protected SelenideElement validationCustomParameterValueMsg = $x("//p[contains(text(),'Value is required')]");
+  protected SelenideElement validationCustomParameterValueMsg = $x("//p[contains(text(), 'Value is required')]");
   protected String ddlElementLocator = "//li[@value='%s']";
   protected String btnTimeToRetainLocator = "//button[@class][text()='%s']";
   protected String customParamsElmCss = "ul[role=listbox][name^=customParams][name$=name]";
diff --git a/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/brokers/BrokersTest.java b/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/brokers/BrokersTest.java
index 2e41623ea..64fb73cc4 100644
--- a/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/brokers/BrokersTest.java
+++ b/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/brokers/BrokersTest.java
@@ -160,7 +160,7 @@ public void brokersConfigEditCheck() {
     configItem
         .setValue(String.valueOf(newValue))
         .clickCancelBtn();
-    Assert.assertEquals(getIntegerFromString(configItem.getValue(), false), defaultValue,
+    Assert.assertEquals(getIntegerFromString(configItem.getValue(), true), defaultValue,
         "configItem.getValue()");
     configItem
         .clickEditBtn()
@@ -173,7 +173,7 @@ public void brokersConfigEditCheck() {
     softly.assertFalse(configItem.getSaveBtn().isDisplayed(), "getSaveBtn().isDisplayed()");
     softly.assertFalse(configItem.getCancelBtn().isDisplayed(), "getCancelBtn().isDisplayed()");
     softly.assertTrue(configItem.getEditBtn().isDisplayed(), "getEditBtn().isDisplayed()");
-    softly.assertEquals(getIntegerFromString(configItem.getValue(), false), newValue,
+    softly.assertEquals(getIntegerFromString(configItem.getValue(), true), newValue,
         "configItem.getValue()");
     softly.assertAll();
   }
diff --git a/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/schemas/SchemasTest.java b/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/schemas/SchemasTest.java
index 3b140018e..a8089aab1 100644
--- a/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/schemas/SchemasTest.java
+++ b/e2e-tests/src/test/java/io/kafbat/ui/smokesuite/schemas/SchemasTest.java
@@ -90,7 +90,7 @@ public void compareVersionsCheck() {
         .getVersionsNumberFromList();
     Assert.assertEquals(versionsNumberFromDdl, latestVersion, "Versions number is not matched");
     schemaCreateForm
-        .selectVersionFromDropDown(1);
+        .selectVersionFromDropDown(latestVersion);
     Assert.assertEquals(schemaCreateForm.getMarkedLinesNumber(), 42, "getMarkedLinesNumber()");
   }
 
diff --git a/frontend/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/frontend/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
index 75baca10e..f773129b4 100644
--- a/frontend/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
+++ b/frontend/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
@@ -4,12 +4,12 @@ import { TOPIC_CUSTOM_PARAMS } from 'lib/constants';
 import { FieldArrayWithId, useFormContext, Controller } from 'react-hook-form';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import { FormError } from 'components/common/Input/Input.styled';
-import Select from 'components/common/Select/Select';
 import Input from 'components/common/Input/Input';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import * as C from 'components/Topics/shared/Form/TopicForm.styled';
 import { ConfigSource } from 'generated-sources';
+import InputWithOptions from 'components/common/InputWithOptions/InputWithOptions';
 import { TopicConfigParams, TopicFormData } from 'lib/interfaces/topic';
 
 import * as S from './CustomParams.styled';
@@ -37,6 +37,7 @@ const CustomParamField: React.FC<Props> = ({
     formState: { errors },
     setValue,
     watch,
+    trigger,
     control,
   } = useFormContext<TopicFormData>();
   const nameValue = watch(`customParams.${index}.name`);
@@ -76,17 +77,18 @@ const CustomParamField: React.FC<Props> = ({
         <InputLabel>Custom Parameter *</InputLabel>
         <Controller
           control={control}
-          rules={{ required: 'Custom Parameter is required.' }}
           name={`customParams.${index}.name`}
-          render={({ field: { value, name, onChange } }) => (
-            <Select
-              name={name}
-              placeholder="Select"
-              disabled={isDisabled}
-              minWidth="270px"
-              onChange={onChange}
+          render={({ field: { name, onChange, value } }) => (
+            <InputWithOptions
               value={value}
               options={options}
+              name={name}
+              onChange={(s) => {
+                onChange(s);
+                trigger('customParams');
+              }}
+              minWidth="270px"
+              placeholder="Select"
             />
           )}
         />
@@ -101,9 +103,6 @@ const CustomParamField: React.FC<Props> = ({
         <InputLabel>Value *</InputLabel>
         <Input
           name={`customParams.${index}.value` as const}
-          hookFormOptions={{
-            required: 'Value is required.',
-          }}
           placeholder="Value"
           defaultValue={field.value}
           autoComplete="off"
diff --git a/frontend/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx b/frontend/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx
index 7895bffbf..86dc7df2f 100644
--- a/frontend/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx
+++ b/frontend/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx
@@ -3,6 +3,8 @@ import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { Button } from 'components/common/Button/Button';
 import { TOPIC_CUSTOM_PARAMS_PREFIX } from 'lib/constants';
 import PlusIcon from 'components/common/Icons/PlusIcon';
+import { ErrorMessage } from '@hookform/error-message';
+import { FormError } from 'components/common/Input/Input.styled';
 import { TopicConfigParams, TopicFormData } from 'lib/interfaces/topic';
 
 import CustomParamField from './CustomParamField';
@@ -18,7 +20,12 @@ const CustomParams: React.FC<CustomParamsProps> = ({
   isSubmitting,
   config,
 }) => {
-  const { control } = useFormContext<TopicFormData>();
+  const {
+    trigger,
+    control,
+    formState: { errors },
+  } = useFormContext<TopicFormData>();
+
   const { fields, append, remove } = useFieldArray({
     control,
     name: TOPIC_CUSTOM_PARAMS_PREFIX,
@@ -36,12 +43,14 @@ const CustomParams: React.FC<CustomParamsProps> = ({
   });
 
   const [existingFields, setExistingFields] = React.useState<string[]>([]);
-
   const removeField = (index: number): void => {
-    setExistingFields(
-      existingFields.filter((field) => field !== controlledFields[index].name)
-    );
-    remove(index);
+    const itemIndex = existingFields.indexOf(controlledFields[index].name);
+    if (itemIndex !== -1) {
+      existingFields.splice(itemIndex, 1);
+      setExistingFields(existingFields);
+      remove(index);
+      trigger('customParams');
+    }
   };
 
   return (
@@ -58,6 +67,9 @@ const CustomParams: React.FC<CustomParamsProps> = ({
           setExistingFields={setExistingFields}
         />
       ))}
+      <FormError>
+        <ErrorMessage errors={errors} name={`customParams` as const} />
+      </FormError>
       <div>
         <Button
           type="button"
diff --git a/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParamField.spec.tsx b/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParamField.spec.tsx
index 8ff3b88da..dd1a435a8 100644
--- a/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParamField.spec.tsx
+++ b/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParamField.spec.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { act, screen, within } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import CustomParamsField, {
   Props,
@@ -42,7 +42,14 @@ describe('CustomParamsField', () => {
     setExistingFields.mockClear();
   });
 
-  it('renders the component with its view correctly', () => {
+  const getCustomParamInput = () => screen.getByRole('listitem');
+  const getCustomParamsList = () => screen.getByRole('listbox');
+  const getValueInput = () => screen.getByRole('textbox');
+  const getRemoveButton = () => screen.getByRole('button');
+
+  const topicCustomParam1 = Object.keys(TOPIC_CUSTOM_PARAMS)[0];
+
+  it('renders the component with its view correctly', async () => {
     setupComponent({
       field,
       isDisabled,
@@ -51,9 +58,11 @@ describe('CustomParamsField', () => {
       existingFields,
       setExistingFields,
     });
-    expect(screen.getByRole('listbox')).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(getCustomParamInput()).toBeInTheDocument();
+    expect(getValueInput()).toBeInTheDocument();
+    expect(getRemoveButton()).toBeInTheDocument();
+    await userEvent.click(getCustomParamInput());
+    expect(getCustomParamsList()).toBeInTheDocument();
   });
 
   describe('core functionality works', () => {
@@ -66,7 +75,7 @@ describe('CustomParamsField', () => {
         existingFields,
         setExistingFields,
       });
-      await userEvent.click(screen.getByRole('button'));
+      await userEvent.click(getRemoveButton());
       expect(remove).toHaveBeenCalledTimes(1);
     });
 
@@ -79,7 +88,7 @@ describe('CustomParamsField', () => {
         existingFields,
         setExistingFields,
       });
-      await userEvent.type(screen.getByRole('button'), SPACE_KEY);
+      await userEvent.type(getRemoveButton(), SPACE_KEY);
       // userEvent.type triggers remove two times as at first it clicks on element and then presses space
       expect(remove).toHaveBeenCalledTimes(2);
     });
@@ -93,12 +102,10 @@ describe('CustomParamsField', () => {
         existingFields,
         setExistingFields,
       });
-      const listbox = screen.getByRole('listbox');
-      await selectOption(listbox, 'compression.type');
-
-      const selectedOption = within(listbox).getAllByRole('option');
-      expect(selectedOption.length).toEqual(1);
-      expect(selectedOption[0]).toHaveTextContent('compression.type');
+      await userEvent.click(getCustomParamInput());
+      await selectOption(getCustomParamsList(), topicCustomParam1);
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      expect(getCustomParamInput()).toHaveValue(topicCustomParam1);
     });
 
     it('selecting option updates textbox value', async () => {
@@ -110,11 +117,12 @@ describe('CustomParamsField', () => {
         existingFields,
         setExistingFields,
       });
-      const listbox = screen.getByRole('listbox');
-      await selectOption(listbox, 'compression.type');
+      await userEvent.click(getCustomParamInput());
+      await selectOption(getCustomParamsList(), topicCustomParam1);
 
-      const textbox = screen.getByRole('textbox');
-      expect(textbox).toHaveValue(TOPIC_CUSTOM_PARAMS['compression.type']);
+      expect(getValueInput()).toHaveValue(
+        TOPIC_CUSTOM_PARAMS[topicCustomParam1]
+      );
     });
 
     it('selecting option updates triggers setExistingFields', async () => {
@@ -126,8 +134,8 @@ describe('CustomParamsField', () => {
         existingFields,
         setExistingFields,
       });
-      const listbox = screen.getByRole('listbox');
-      await selectOption(listbox, 'compression.type');
+      await userEvent.click(getCustomParamInput());
+      await selectOption(getCustomParamsList(), topicCustomParam1);
 
       expect(setExistingFields).toHaveBeenCalledTimes(1);
     });
diff --git a/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParams.spec.tsx b/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParams.spec.tsx
index 1a185637a..37f0a07eb 100644
--- a/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParams.spec.tsx
+++ b/frontend/src/components/Topics/shared/Form/CustomParams/__test__/CustomParams.spec.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { act, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import CustomParams, {
   CustomParamsProps,
@@ -10,28 +10,20 @@ import { TOPIC_CUSTOM_PARAMS } from 'lib/constants';
 
 import { defaultValues } from './fixtures';
 
-const selectOption = async (listbox: HTMLElement, option: string) => {
-  await act(async () => {
-    await userEvent.click(listbox);
-  });
+const selectOption = async (textinput: HTMLElement, option: string) => {
+  await userEvent.click(textinput);
+  await userEvent.clear(textinput);
   await userEvent.click(screen.getByText(option));
 };
 
-const expectOptionIsSelected = (listbox: HTMLElement, option: string) => {
-  const selectedOption = within(listbox).getAllByRole('option');
-  expect(selectedOption.length).toEqual(1);
-  expect(selectedOption[0]).toHaveTextContent(option);
-};
-
 const expectOptionAvailability = async (
-  listbox: HTMLElement,
+  textinput: () => HTMLElement,
+  listbox: () => HTMLElement,
   option: string,
   disabled: boolean
 ) => {
-  await act(async () => {
-    await userEvent.click(listbox);
-  });
-  const selectedOptions = within(listbox).getAllByText(option).reverse();
+  await userEvent.click(textinput());
+  const selectedOptions = within(listbox()).getAllByText(option).reverse();
   // its either two or one nodes, we only need last one
   const selectedOption = selectedOptions[0];
 
@@ -45,9 +37,7 @@ const expectOptionAvailability = async (
     'cursor',
     disabled ? 'not-allowed' : 'pointer'
   );
-  await act(async () => {
-    await userEvent.click(listbox);
-  });
+  await userEvent.click(document.body);
 };
 
 const renderComponent = (props: CustomParamsProps, defaults = {}) => {
@@ -63,144 +53,167 @@ const renderComponent = (props: CustomParamsProps, defaults = {}) => {
   );
 };
 
+const getCustomParamInput = () => screen.getByRole('listitem');
+const getAllCustomParamInputs = () => screen.getAllByRole('listitem');
+const getCustomParamsList = () => screen.getByRole('listbox');
+const getValueInput = () => screen.getByRole('textbox');
+const getAllValueInputs = () => screen.getAllByRole('textbox');
+const getAddNewFieldButton = () => screen.getByText('Add Custom Parameter');
+
+const topicCustomParam1 = Object.keys(TOPIC_CUSTOM_PARAMS)[0];
+const topicCustomParam2 = Object.keys(TOPIC_CUSTOM_PARAMS)[1];
+const topicCustomParam3 = Object.keys(TOPIC_CUSTOM_PARAMS)[2];
+
 describe('CustomParams', () => {
   it('renders with props', () => {
     renderComponent({ isSubmitting: false });
 
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveTextContent('Add Custom Parameter');
+    expect(getAddNewFieldButton()).toBeInTheDocument();
+    expect(getAddNewFieldButton()).toHaveTextContent('Add Custom Parameter');
   });
 
   it('has defaultValues when they are set', () => {
     renderComponent({ isSubmitting: false }, defaultValues);
 
-    expect(
-      screen.getByRole('option', { name: defaultValues.customParams[0].name })
-    ).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toHaveValue(
-      defaultValues.customParams[0].value
+    expect(getCustomParamInput()).toHaveValue(
+      defaultValues.customParams[0].name
     );
+    expect(getValueInput()).toHaveValue(defaultValues.customParams[0].value);
   });
 
   describe('works with user inputs correctly', () => {
-    let button: HTMLButtonElement;
-
     beforeEach(async () => {
       renderComponent({ isSubmitting: false });
-      button = screen.getByRole('button');
-      await act(async () => {
-        await userEvent.click(button);
-      });
+      await userEvent.click(getAddNewFieldButton());
     });
 
     it('button click creates custom param fieldset', async () => {
-      const listbox = screen.getByRole('listbox');
-      expect(listbox).toBeInTheDocument();
-
-      const textbox = screen.getByRole('textbox');
-      expect(textbox).toBeInTheDocument();
+      await userEvent.click(getCustomParamInput());
+      expect(getCustomParamsList()).toBeInTheDocument();
+      expect(getValueInput()).toBeInTheDocument();
     });
 
     it('can select option', async () => {
-      const listbox = screen.getByRole('listbox');
+      await selectOption(getCustomParamInput(), topicCustomParam1);
+      expect(getCustomParamInput()).toHaveValue(topicCustomParam1);
 
-      await selectOption(listbox, 'compression.type');
-      expectOptionIsSelected(listbox, 'compression.type');
-      await expectOptionAvailability(listbox, 'compression.type', true);
+      await expectOptionAvailability(
+        getCustomParamInput,
+        getCustomParamsList,
+        topicCustomParam1,
+        true
+      );
 
-      const textbox = screen.getByRole('textbox');
-      expect(textbox).toHaveValue(TOPIC_CUSTOM_PARAMS['compression.type']);
+      expect(getValueInput()).toHaveValue(
+        TOPIC_CUSTOM_PARAMS[topicCustomParam1]
+      );
     });
 
     it('when selected option changes disabled options update correctly', async () => {
-      const listbox = screen.getByRole('listbox');
+      await selectOption(getCustomParamInput(), topicCustomParam1);
+      expect(getCustomParamInput()).toHaveValue(topicCustomParam1);
 
-      await selectOption(listbox, 'compression.type');
-      expectOptionIsSelected(listbox, 'compression.type');
-      await expectOptionAvailability(listbox, 'compression.type', true);
+      await expectOptionAvailability(
+        getCustomParamInput,
+        getCustomParamsList,
+        topicCustomParam1,
+        true
+      );
 
-      await selectOption(listbox, 'delete.retention.ms');
-      await expectOptionAvailability(listbox, 'delete.retention.ms', true);
-      await expectOptionAvailability(listbox, 'compression.type', false);
+      await selectOption(getCustomParamInput(), topicCustomParam2);
+      await expectOptionAvailability(
+        getCustomParamInput,
+        getCustomParamsList,
+        topicCustomParam2,
+        true
+      );
+
+      await userEvent.click(getAddNewFieldButton());
+      await expectOptionAvailability(
+        () => getAllCustomParamInputs()[1],
+        getCustomParamsList,
+        topicCustomParam1,
+        false
+      );
     });
 
     it('multiple button clicks create multiple fieldsets', async () => {
-      await act(async () => {
-        await userEvent.click(button);
-      });
-      await act(async () => {
-        await userEvent.click(button);
-      });
-
-      const listboxes = screen.getAllByRole('listbox');
-      expect(listboxes.length).toBe(3);
-
-      const textboxes = screen.getAllByRole('textbox');
-      expect(textboxes.length).toBe(3);
+      await userEvent.click(getAddNewFieldButton());
+      await userEvent.click(getAddNewFieldButton());
+
+      expect(getAllCustomParamInputs().length).toBe(3);
+
+      expect(getAllValueInputs().length).toBe(3);
     });
 
     it("can't select already selected option", async () => {
-      await act(async () => {
-        await userEvent.click(button);
-      });
-
-      const listboxes = screen.getAllByRole('listbox');
+      await userEvent.click(getAddNewFieldButton());
 
-      const firstListbox = listboxes[0];
-      await selectOption(firstListbox, 'compression.type');
-      await expectOptionAvailability(firstListbox, 'compression.type', true);
+      await selectOption(getAllCustomParamInputs()[0], topicCustomParam1);
+      await expectOptionAvailability(
+        () => getAllCustomParamInputs()[0],
+        getCustomParamsList,
+        topicCustomParam1,
+        true
+      );
 
-      const secondListbox = listboxes[1];
-      await expectOptionAvailability(secondListbox, 'compression.type', true);
+      await expectOptionAvailability(
+        () => getAllCustomParamInputs()[1],
+        getCustomParamsList,
+        topicCustomParam1,
+        true
+      );
     });
 
     it('when fieldset with selected custom property type is deleted disabled options update correctly', async () => {
-      await act(async () => {
-        await userEvent.click(button);
-      });
-      await act(async () => {
-        await userEvent.click(button);
-      });
-
-      const listboxes = screen.getAllByRole('listbox');
+      await userEvent.click(getAddNewFieldButton());
+      await userEvent.click(getAddNewFieldButton());
 
-      const firstListbox = listboxes[0];
-      await selectOption(firstListbox, 'compression.type');
-      await expectOptionAvailability(firstListbox, 'compression.type', true);
+      const [firstListBox, secondListbox, thirdListbox] =
+        getAllCustomParamInputs();
+      await selectOption(firstListBox, topicCustomParam1);
+      await expectOptionAvailability(
+        () => firstListBox,
+        getCustomParamsList,
+        topicCustomParam1,
+        true
+      );
 
-      const secondListbox = listboxes[1];
-      await selectOption(secondListbox, 'delete.retention.ms');
+      await selectOption(secondListbox, topicCustomParam2);
       await expectOptionAvailability(
-        secondListbox,
-        'delete.retention.ms',
+        () => secondListbox,
+        getCustomParamsList,
+        topicCustomParam2,
         true
       );
 
-      const thirdListbox = listboxes[2];
-      await selectOption(thirdListbox, 'file.delete.delay.ms');
+      await selectOption(thirdListbox, topicCustomParam3);
       await expectOptionAvailability(
-        thirdListbox,
-        'file.delete.delay.ms',
+        () => thirdListbox,
+        getCustomParamsList,
+        topicCustomParam3,
         true
       );
 
       const deleteSecondFieldsetButton = screen.getByTitle(
         'Delete customParam field 1'
       );
-      await act(async () => {
-        await userEvent.click(deleteSecondFieldsetButton);
-      });
+      await userEvent.click(deleteSecondFieldsetButton);
       expect(secondListbox).not.toBeInTheDocument();
 
+      await userEvent.clear(firstListBox);
       await expectOptionAvailability(
-        firstListbox,
-        'delete.retention.ms',
+        () => firstListBox,
+        getCustomParamsList,
+        topicCustomParam2,
         false
       );
+
+      await userEvent.clear(thirdListbox);
       await expectOptionAvailability(
-        thirdListbox,
-        'delete.retention.ms',
+        () => thirdListbox,
+        getCustomParamsList,
+        topicCustomParam2,
         false
       );
     });
diff --git a/frontend/src/components/common/InputWithOptions/InputWithOptions.styled.ts b/frontend/src/components/common/InputWithOptions/InputWithOptions.styled.ts
new file mode 100644
index 000000000..6965da34a
--- /dev/null
+++ b/frontend/src/components/common/InputWithOptions/InputWithOptions.styled.ts
@@ -0,0 +1,151 @@
+import styled, { css } from 'styled-components';
+import { ComponentProps } from 'react';
+
+export interface InputProps extends ComponentProps<'input'> {
+  inputSize?: 'S' | 'M' | 'L';
+}
+
+const INPUT_SIZES = {
+  S: 24,
+  M: 32,
+  L: 40,
+};
+
+interface OptionProps {
+  disabled?: boolean;
+}
+
+export const Wrapper = styled.div<InputProps>(
+  ({ inputSize }) => css`
+    position: relative;
+    &:hover {
+      svg:first-child {
+        fill: ${({ theme }) => theme.input.icon.hover};
+      }
+    }
+    svg {
+      position: absolute;
+      top: ${inputSize && INPUT_SIZES[inputSize]
+        ? `${INPUT_SIZES[inputSize] / 2 - 2.5}px`
+        : `17.5px`};
+      right: 13px;
+      z-index: 1;
+    }
+  `
+);
+
+export const Input = styled.input<InputProps>(
+  ({ theme: { input }, inputSize }) => css`
+    background-color: ${input.backgroundColor.normal};
+    border: 1px ${input.borderColor.normal} solid;
+    border-radius: 4px;
+    color: ${input.color.normal};
+    height: ${inputSize && `${INPUT_SIZES[inputSize]}px`
+      ? `${INPUT_SIZES[inputSize]}px`
+      : '40px'};
+    width: 100%;
+    padding-left: 12px;
+    padding-right: 30px;
+    font-size: 14px;
+
+    &::placeholder {
+      color: ${input.color.placeholder.normal};
+      font-size: 14px;
+    }
+    &:hover {
+      border-color: ${input.borderColor.hover};
+    }
+    &:focus {
+      outline: none;
+      border-color: ${input.borderColor.focus};
+      &::placeholder {
+        color: transparent;
+      }
+    }
+    &:read-only {
+      color: ${input.color.readOnly};
+      border: none;
+      background-color: ${input.backgroundColor.readOnly};
+      &:focus {
+        &::placeholder {
+          color: ${input.color.placeholder.readOnly};
+        }
+      }
+      cursor: not-allowed;
+    }
+  `
+);
+
+export type StyledInputProps = ComponentProps<typeof Input>;
+
+export const OptionList = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  max-height: 228px;
+  margin-top: 4px;
+  background-color: ${({ theme }) => theme.select.backgroundColor.normal};
+  border: 1px ${({ theme }) => theme.select.borderColor.normal} solid;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 18px;
+  color: ${({ theme }) => theme.select.color.normal};
+  overflow-y: auto;
+  z-index: 10;
+  max-width: 300px;
+  min-width: 100%;
+  align-items: center;
+  & div {
+    white-space: nowrap;
+  }
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${({ theme }) =>
+      theme.select.optionList.scrollbar.backgroundColor};
+  }
+
+  &::-webkit-scrollbar:horizontal {
+    height: 7px;
+  }
+`;
+
+export const Option = styled.li<OptionProps>`
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 10px 12px;
+  transition: all 0.2s ease-in-out;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  gap: 5px;
+  color: ${({ theme, disabled }) =>
+    theme.select.color[disabled ? 'disabled' : 'normal']};
+
+  &:hover {
+    background-color: ${({ theme, disabled }) =>
+      theme.select.backgroundColor[disabled ? 'normal' : 'hover']};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.select.backgroundColor.active};
+  }
+`;
+
+export const SelectedOption = styled.li<{ isThemeMode?: boolean }>`
+  display: flex;
+  padding-right: ${({ isThemeMode }) => (isThemeMode ? '' : '16px')};
+  list-style-position: inside;
+  white-space: nowrap;
+  & svg {
+    path {
+      fill: ${({ theme }) => theme.defaultIconColor};
+    }
+  }
+  & div {
+    display: none;
+  }
+`;
diff --git a/frontend/src/components/common/InputWithOptions/InputWithOptions.tsx b/frontend/src/components/common/InputWithOptions/InputWithOptions.tsx
new file mode 100644
index 000000000..c9550c7c6
--- /dev/null
+++ b/frontend/src/components/common/InputWithOptions/InputWithOptions.tsx
@@ -0,0 +1,94 @@
+import React, { useRef } from 'react';
+import useClickOutside from 'lib/hooks/useClickOutside';
+import DropdownArrowIcon from 'components/common/Icons/DropdownArrowIcon';
+import { SelectOption } from 'components/common/Select/Select';
+
+import * as S from './InputWithOptions.styled';
+
+export interface InputWithOptionsProps
+  extends Omit<S.StyledInputProps, 'onChange'> {
+  options: SelectOption<string>[];
+  value?: string;
+  onChange?: (option: string) => void;
+  inputSize?: 'S' | 'M' | 'L';
+  minWidth?: string;
+}
+
+const InputWithOptions = ({
+  options = [],
+  value = '',
+  onChange,
+  inputSize = 'L',
+  placeholder = '',
+  minWidth,
+  ...rest
+}: InputWithOptionsProps) => {
+  const [selectedOption, setSelectedOption] = React.useState(value);
+  const [showOptions, setShowOptions] = React.useState(false);
+
+  let filteredOptions = options.filter((option) =>
+    option.value.includes(selectedOption.toLowerCase())
+  );
+
+  if (!filteredOptions.length && selectedOption) {
+    filteredOptions = [{ value: selectedOption, label: selectedOption }];
+  }
+
+  const updateSelectedOption = (option: SelectOption<string>) => {
+    if (!option.disabled) {
+      setSelectedOption(option.value);
+      onChange?.(option.value);
+      setShowOptions(false);
+    }
+  };
+
+  const selectContainerRef = useRef(null);
+  const clickOutsideHandler = () => {
+    const isDisabledOption = (optionText: string) =>
+      options.some((option) => option.value === optionText && option.disabled);
+
+    if (!isDisabledOption(value) && showOptions) {
+      onChange?.(selectedOption);
+    }
+
+    setShowOptions(false);
+  };
+  useClickOutside(selectContainerRef, clickOutsideHandler);
+
+  return (
+    <S.Wrapper inputSize={inputSize} ref={selectContainerRef}>
+      <S.Input
+        {...rest}
+        role="listitem"
+        value={selectedOption}
+        onFocus={() => setShowOptions(true)}
+        autoComplete="off"
+        placeholder={placeholder}
+        inputSize={inputSize}
+        onChange={(e) => {
+          onChange?.(e.target.value);
+          setSelectedOption(e.target.value);
+        }}
+      />
+      <DropdownArrowIcon isOpen={showOptions} />
+      {showOptions && (
+        <S.OptionList role="listbox" tabIndex={0}>
+          {filteredOptions?.map((option) => (
+            <S.Option
+              role="option"
+              value={option.value}
+              key={option.value}
+              disabled={option.disabled}
+              onClick={() => updateSelectedOption(option)}
+              tabIndex={0}
+            >
+              {option.label}
+            </S.Option>
+          ))}
+        </S.OptionList>
+      )}
+    </S.Wrapper>
+  );
+};
+
+export default InputWithOptions;
diff --git a/frontend/src/components/common/InputWithOptions/__tests__/InputWithOptions.spec.tsx b/frontend/src/components/common/InputWithOptions/__tests__/InputWithOptions.spec.tsx
new file mode 100644
index 000000000..4b1206877
--- /dev/null
+++ b/frontend/src/components/common/InputWithOptions/__tests__/InputWithOptions.spec.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import InputWithOptions, {
+  InputWithOptionsProps,
+} from 'components/common/InputWithOptions/InputWithOptions';
+import { SelectOption } from 'components/common/Select/Select';
+
+jest.mock('react-hook-form', () => ({
+  useFormContext: () => ({
+    register: jest.fn(),
+  }),
+}));
+
+const options: Array<SelectOption<string>> = [
+  { label: 'test-label1', value: 'test-value1', disabled: false },
+  { label: 'test-label2', value: 'test-value2', disabled: false },
+  { label: 'test-label3', value: 'test-value3', disabled: false },
+  { label: 'test-label4', value: 'test-value4', disabled: true },
+];
+
+const renderComponent = (props?: Partial<InputWithOptionsProps>) => {
+  render(<InputWithOptions name="test" options={options} {...props} />);
+};
+
+describe('InputWithOptions component', () => {
+  beforeEach(() => {
+    renderComponent({ onChange: () => {} });
+  });
+
+  const getInputBox = () => screen.getByRole('listitem');
+  const getListbox = () => screen.getByRole('listbox');
+
+  it('renders component', () => {
+    expect(getInputBox()).toBeInTheDocument();
+  });
+
+  it('shows select options when select is being clicked', async () => {
+    expect(getInputBox()).toBeInTheDocument();
+    await userEvent.click(getInputBox());
+    expect(getListbox()).toBeInTheDocument();
+    expect(screen.getAllByRole('option')).toHaveLength(4);
+  });
+
+  it('checking select option change', async () => {
+    await userEvent.click(getInputBox());
+    await userEvent.selectOptions(getListbox(), ['test-label1']);
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(getInputBox()).toHaveValue('test-value1');
+  });
+
+  it('trying to select disabled option does not trigger change', async () => {
+    await userEvent.click(getInputBox());
+    await userEvent.selectOptions(getListbox(), ['test-label4']);
+    expect(screen.queryByRole('listbox')).toBeInTheDocument();
+    expect(getInputBox()).toHaveValue('');
+  });
+
+  it('allows user to type', async () => {
+    await userEvent.click(getInputBox());
+    await userEvent.type(getInputBox(), 'test');
+    expect(getInputBox()).toHaveValue('test');
+  });
+
+  it('options list depends on the input value', async () => {
+    await userEvent.click(getInputBox());
+    await userEvent.type(getInputBox(), 'test-label1');
+    expect(screen.getByRole('option')).toBeInTheDocument();
+  });
+
+  it('click outside closes the list', async () => {
+    await userEvent.click(getInputBox());
+    await userEvent.click(document.body);
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('click outside select option', async () => {
+    await userEvent.click(getInputBox());
+    await userEvent.type(getInputBox(), 'test');
+    await userEvent.click(document.body);
+    expect(getInputBox()).toHaveValue('test');
+  });
+});
diff --git a/frontend/src/lib/yupExtended.ts b/frontend/src/lib/yupExtended.ts
index ad0c9fb19..cf88d900a 100644
--- a/frontend/src/lib/yupExtended.ts
+++ b/frontend/src/lib/yupExtended.ts
@@ -84,10 +84,36 @@ export const topicFormValidationSchema = yup.object().shape({
   retentionBytes: yup.number(),
   maxMessageBytes: yup.string(),
   customParams: yup.array().of(
-    yup.object().shape({
-      name: yup.string().required('Custom parameter is required'),
-      value: yup.string().required('Value is required'),
-    })
+    yup
+      .object()
+      .shape({
+        name: yup.string().required('Custom parameter is required'),
+        value: yup.string().required('Value is required'),
+      })
+      .test(
+        'is_unique',
+        'Custom parameters must be unique',
+        (
+          value,
+          context: yup.TestContext<yup.AnyObject> & {
+            options: yup.ValidateOptions<yup.AnyObject> & { path?: string };
+          }
+        ) => {
+          const hasDuplicate =
+            context?.parent.filter(
+              (option: { name: string }) => option.name === value.name
+            ).length > 1;
+
+          if (hasDuplicate && 'path' in context.options) {
+            return context.createError({
+              message: 'Custom parameters must be unique',
+              path: `${context.options.path}.name`,
+            });
+          }
+
+          return true;
+        }
+      )
   ),
 });