Fix validation message for Topic name field (#2425)

* Fixes #2203

* Fixes #2203 adding unit tests

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

@@ -77,6 +77,18 @@ describe('New', () => {
     expect(mockNavigate).not.toHaveBeenCalled();
   });
 
+  it('validates form invalid name', async () => {
+    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
+    await waitFor(() => {
+      userEvent.type(screen.getByPlaceholderText('Topic Name'), 'Invalid,Name');
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByText('Only alphanumeric, _, -, and . allowed')
+      ).toBeInTheDocument();
+    });
+  });
+
   it('submits valid form', async () => {
     await act(() => renderComponent(clusterTopicNewPath(clusterName)));
     await act(() => {

kafka-ui-react-app/src/lib/constants.ts

@@ -15,7 +15,7 @@ export const BASE_PARAMS: ConfigurationParameters = {
   },
 };
 
-export const TOPIC_NAME_VALIDATION_PATTERN = /^[.,A-Za-z0-9_-]+$/;
+export const TOPIC_NAME_VALIDATION_PATTERN = /^[a-zA-Z0-9._-]+$/;
 export const SCHEMA_NAME_VALIDATION_PATTERN = /^[.,A-Za-z0-9_/-]+$/;
 
 export const TOPIC_CUSTOM_PARAMS_PREFIX = 'customParams';

kafka-ui-react-app/src/lib/yupExtended.ts

@@ -47,6 +47,7 @@ export default yup;
 export const topicFormValidationSchema = yup.object().shape({
   name: yup
     .string()
+    .max(249)
     .required()
     .matches(
       TOPIC_NAME_VALIDATION_PATTERN,