diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx index 98eba264eba..89f2af321e8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx @@ -19,6 +19,7 @@ import { ServiceCategory } from '../../../enums/service.enum'; import { errorMsg, getServiceLogo } from '../../../utils/CommonUtils'; import SVGIcons, { Icons } from '../../../utils/SvgUtils'; import { Button } from '../../buttons/Button/Button'; +import Searchbar from '../../common/searchbar/Searchbar'; import { Field } from '../../Field/Field'; import { SelectServiceTypeProps } from './Steps.interface'; @@ -32,12 +33,25 @@ const SelectServiceType = ({ onNext, }: SelectServiceTypeProps) => { const [category, setCategory] = useState(''); + const [connectorSearchTerm, setConnectorSearchTerm] = useState(''); + const [selectedConnectors, setSelectedConnectors] = useState([]); + + const handleConnectorSearchTerm = (value: string) => { + setConnectorSearchTerm(value); + setSelectedConnectors( + serviceTypes[serviceCategory].filter((c) => + c.toLowerCase().includes(value.toLowerCase()) + ) + ); + }; useEffect(() => { const allCategory = Object.values(ServiceCategory); - setCategory( - allCategory.includes(serviceCategory) ? serviceCategory : allCategory[0] - ); + const selectedCategory = allCategory.includes(serviceCategory) + ? serviceCategory + : allCategory[0]; + setCategory(selectedCategory); + setSelectedConnectors(serviceTypes[selectedCategory]); }, [serviceCategory]); return ( @@ -49,9 +63,10 @@ const SelectServiceType = ({ id="serviceCategory" name="serviceCategory" value={category} - onChange={(e) => - serviceCategoryHandler(e.target.value as ServiceCategory) - }> + onChange={(e) => { + setConnectorSearchTerm(''); + serviceCategoryHandler(e.target.value as ServiceCategory); + }}> {Object.values(ServiceCategory).map((option, i) => (