Repository: provectus/kafka-ui
Issue: Make Submit button inactive when required fields aren't filled
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Submit button is inactive by default in create forms, it should stay inactive also in case of once pressing the input fields and letting it empty

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to schema registry 
2. Create schema
3. Make sure submit button is inactive
4. Click into required input field
5. Make sure submit button became active
6. Click out of the field

**Expected behavior**
Submit button should stay inactive if required data is missing from the forms: _**Create new Topic, Produce Message, Create new schema, Create Connector**_


**Screenshots**
![inactive submit](https://user-images.githubusercontent.com/104780608/170481725-0937c7ee-9711-4a14-82ae-00945fe626a0.png)






Issue comments:

Pull request review comments:
@rAzizbekyan pls take a look if this warning is valid
@workshur I checked it and locally it's not showing error like this
All added cases generate warnings. pls fix it
```
console.error
    Warning: An update to New inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at New (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/src/components/Schemas/New/New.tsx:31:27)
        at Routes (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/node_modules/.pnpm/packages/react-router/lib/components.tsx:253:3)
        at WithRoute (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/src/lib/testHelpers.tsx:33:55)
        at Router (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/node_modules/.pnpm/packages/react-router/lib/components.tsx:173:13)
        at MemoryRouter (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/node_modules/.pnpm/packages/react-router/lib/components.tsx:33:3)
        at QueryClientProvider (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/node_modules/.pnpm/@tanstack+react-query@4.0.5_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/@tanstack/react-query/src/QueryClientProvider.tsx:71:3)
        at TestQueryClientProvider (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/src/lib/testHelpers.tsx:42:3)
        at Provider (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/node_modules/.pnpm/react-redux@8.0.2_nfqigfgwurfoimtkde74cji6ga/node_modules/react-redux/lib/components/Provider.js:19:3)
        at Object.<anonymous>.exports.ThemeProvider (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/node_modules/.pnpm/styled-components@5.3.1_uuaz5p7xzfmtjacf6iqf7idnby/node_modules/styled-components/src/models/ServerStyleSheet.js:68:13)
        at AllTheProviders (/Users/workshur/repos/kafka-ui/kafka-ui-react-app/src/lib/testHelpers.tsx:67:5)
```
I fixed it all, I'm not sure what's the problem that it still fails as when I run tests locally everything is fine

The issue is fixed

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Schemas/New/New.tsx b/kafka-ui-react-app/src/components/Schemas/New/New.tsx
index c3d9ba70034..38bef9bc9b6 100644
--- a/kafka-ui-react-app/src/components/Schemas/New/New.tsx
+++ b/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%"
diff --git a/kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx b/kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx
index c4bcf77abc5..01b9b1cd8b9 100644
--- a/kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx
+++ b/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();
+  });
 });


Test patch: