diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx index 2951721abcd..5b9f52d60df 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx +++ b/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} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.test.tsx index 8e3ca86ed17..61b143bedb6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.test.tsx +++ b/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(), diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx index ced08b81efd..1e99d7d9831 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx @@ -29,6 +29,29 @@ const ConfigureService = ({ }: ConfigureServiceProps) => { const markdownRef = useRef(); + 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 (
@@ -46,9 +69,7 @@ const ConfigureService = ({ value={serviceName} onChange={handleValidation} /> - - {showError.name && errorMsg('Service name is required.')} - {showError.duplicateName && errorMsg('Service name already exist.')} + {errorMsg(validationErrorMsg())}