Fix #6012 Pass clean 'name' to Airflow ingestion pipeline (#6040)

* Fix #6012 Pass clean 'name' to Airflow ingestion pipeline

* Addressing review comments

openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx

@@ -16,13 +16,14 @@ import { LoadingState } from 'Models';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { getServiceDetailsPath, ROUTES } from '../../constants/constants';
+import { delimiterRegex, nameWithSpace } from '../../constants/regex.constants';
 import { STEPS_FOR_ADD_SERVICE } from '../../constants/services.const';
 import { FormSubmitType } from '../../enums/form.enum';
 import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { PipelineType } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
 import { ConfigData, DataObj } from '../../interface/service.interface';
-import { getCurrentUserId } from '../../utils/CommonUtils';
+import { getCurrentUserId, isUrlFriendlyName } from '../../utils/CommonUtils';
 import { getAddServicePath } from '../../utils/RouterUtils';
 import {
   getServiceCreatedLabel,
@@ -59,6 +60,12 @@ const AddService = ({
     serviceType: false,
     name: false,
     duplicateName: false,
+    nameWithSpace: false,
+    delimit: false,
+    specialChar: false,
+    nameLength: false,
+    allowChar: false,
+    isError: false,
   });
   const [activeServiceStep, setActiveServiceStep] = useState(1);
   const [activeIngestionStep, setActiveIngestionStep] = useState(1);
@@ -104,10 +111,41 @@ const AddService = ({
 
   const handleConfigureServiceNextClick = (descriptionValue: string) => {
     setDescription(descriptionValue);
-    if (serviceName.trim()) {
+
+    if (!serviceName.trim()) {
+      setShowErrorMessage({ ...showErrorMessage, name: true, isError: true });
+    } else if (nameWithSpace.test(serviceName)) {
+      setShowErrorMessage({
+        ...showErrorMessage,
+        nameWithSpace: true,
+        isError: true,
+      });
+    } else if (delimiterRegex.test(serviceName)) {
+      setShowErrorMessage({
+        ...showErrorMessage,
+        delimit: true,
+        isError: true,
+      });
+    } else if (nameWithSpace.test(serviceName)) {
+      setShowErrorMessage({
+        ...showErrorMessage,
+        nameWithSpace: true,
+        isError: true,
+      });
+    } else if (!isUrlFriendlyName(serviceName.trim())) {
+      setShowErrorMessage({
+        ...showErrorMessage,
+        specialChar: true,
+        isError: true,
+      });
+    } else if (serviceName.length < 1 || serviceName.length > 128) {
+      setShowErrorMessage({
+        ...showErrorMessage,
+        nameLength: true,
+        isError: true,
+      });
+    } else if (!showErrorMessage.isError) {
       setActiveServiceStep(3);
-    } else {
-      setShowErrorMessage({ ...showErrorMessage, name: true });
     }
   };
 
@@ -173,7 +211,14 @@ const AddService = ({
     const value = event.target.value.trim();
     setServiceName(value);
     if (value) {
-      setShowErrorMessage({ ...showErrorMessage, name: false });
+      setShowErrorMessage({
+        ...showErrorMessage,
+        name: false,
+        isError: false,
+        delimit: false,
+        specialChar: false,
+        nameLength: false,
+      });
     }
   };
 
@@ -209,6 +254,11 @@ const AddService = ({
               showError={{
                 name: showErrorMessage.name,
                 duplicateName: showErrorMessage.duplicateName,
+                nameWithSpace: showErrorMessage.nameWithSpace,
+                delimit: showErrorMessage.delimit,
+                specialChar: showErrorMessage.specialChar,
+                nameLength: showErrorMessage.nameLength,
+                allowChar: showErrorMessage.allowChar,
               }}
               onBack={handleConfigureServiceBackClick}
               onNext={handleConfigureServiceNextClick}

openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.test.tsx

@@ -27,6 +27,11 @@ const mockConfigureServiceProps: ConfigureServiceProps = {
   showError: {
     name: false,
     duplicateName: false,
+    nameWithSpace: false,
+    delimit: false,
+    specialChar: false,
+    nameLength: false,
+    allowChar: false,
   },
   handleValidation: jest.fn(),
   onBack: jest.fn(),

openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx

@@ -29,6 +29,29 @@ const ConfigureService = ({
 }: ConfigureServiceProps) => {
   const markdownRef = useRef<EditorContentRef>();
 
+  const validationErrorMsg = (): string => {
+    if (showError.name) {
+      return 'Service name is required';
+    }
+    if (showError.duplicateName) {
+      return 'Service name already exists';
+    }
+    if (showError.delimit) {
+      return 'Service name with delimiters are not allowed';
+    }
+    if (showError.nameWithSpace) {
+      return 'Service name with spaces are not allowed';
+    }
+    if (showError.nameLength) {
+      return 'Service name length must be between 1 and 128 characters';
+    }
+    if (showError.specialChar) {
+      return 'Service name contains special characters that are not allowed';
+    }
+
+    return '';
+  };
+
   return (
     <div data-testid="configure-service-container">
       <Field>
@@ -46,9 +69,7 @@ const ConfigureService = ({
           value={serviceName}
           onChange={handleValidation}
         />
-
+        {errorMsg(validationErrorMsg())}
-        {showError.name && errorMsg('Service name is required.')}
-        {showError.duplicateName && errorMsg('Service name already exist.')}
       </Field>
       <Field>
         <label className="tw-block tw-form-label" htmlFor="description">

openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/Steps.interface.ts

@@ -30,6 +30,11 @@ export type ConfigureServiceProps = {
   showError: {
     name: boolean;
     duplicateName: boolean;
+    nameWithSpace: boolean;
+    delimit: boolean;
+    specialChar: boolean;
+    nameLength: boolean;
+    allowChar: boolean;
   };
   handleValidation: (
     event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>