Make Submit button inactive when required fields aren't filled (#2315)

* fixing create schema page validation issue

* fixing schema create form schemaType select issue

* adding test cases for schema creation

kafka-ui-react-app/src/components/Schemas/New/New.tsx

@@ -105,11 +105,11 @@ const New: React.FC = () => {
             control={control}
             rules={{ required: 'Schema Type is required.' }}
             name="schemaType"
+            defaultValue={SchemaTypeOptions[0].value as SchemaType}
             render={({ field: { name, onChange, value } }) => (
               <Select
                 selectSize="M"
                 name={name}
-                defaultValue={SchemaTypeOptions[0].value}
                 value={value}
                 onChange={onChange}
                 minWidth="50%"

kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 import New from 'components/Schemas/New/New';
 import { render, WithRoute } from 'lib/testHelpers';
 import { clusterSchemaNewPath } from 'lib/paths';
-import { screen } from '@testing-library/dom';
+import { act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 const clusterName = 'local';
+const subjectValue = 'subject';
+const schemaValue = 'schema';
 
 describe('New Component', () => {
   beforeEach(() => {
@@ -21,4 +24,26 @@ describe('New Component', () => {
   it('renders component', () => {
     expect(screen.getByText('Create new schema')).toBeInTheDocument();
   });
+  it('submit button will be disabled while form fields are not filled', () => {
+    const submitBtn = screen.getByRole('button', { name: /submit/i });
+    expect(submitBtn).toBeDisabled();
+  });
+  it('submit button will be enabled when form fields are filled', async () => {
+    const subject = screen.getByPlaceholderText('Schema Name');
+    const schema = screen.getAllByRole('textbox')[1];
+    const schemaTypeSelect = screen.getByRole('listbox');
+
+    await act(() => {
+      userEvent.type(subject, subjectValue);
+    });
+    await act(() => {
+      userEvent.type(schema, schemaValue);
+    });
+    await act(() => {
+      userEvent.selectOptions(schemaTypeSelect, ['AVRO']);
+    });
+
+    const submitBtn = screen.getByRole('button', { name: /Submit/i });
+    expect(submitBtn).toBeEnabled();
+  });
 });