diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx index 3bbc089e9d..a91e6af348 100644 --- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx +++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx @@ -69,12 +69,31 @@ export default function HierarchyViewModal() { }); }; + const nameValue = Form.useWatch('name', form); + const assetsTypeValue = Form.useWatch('assetsType', form); + const domainAssetsValue = Form.useWatch('domainAssets', form); + const glossaryAssetsValue = Form.useWatch('glossaryAssets', form); + + const isSubmitButtonDisabled = useMemo(() => { + if (!nameValue?.trim()) return true; + + let assetUrns: string[] = []; + if (assetsTypeValue === ASSET_TYPE_DOMAINS) { + assetUrns = domainAssetsValue ?? []; + } else if (assetsTypeValue === ASSET_TYPE_GLOSSARY) { + assetUrns = glossaryAssetsValue ?? []; + } + + return assetUrns.length === 0; + }, [nameValue, assetsTypeValue, domainAssetsValue, glossaryAssetsValue]); + return (
diff --git a/datahub-web-react/src/app/sharedV2/queryBuilder/GroupHeader.tsx b/datahub-web-react/src/app/sharedV2/queryBuilder/GroupHeader.tsx index 44f71a0e01..9a769abbff 100644 --- a/datahub-web-react/src/app/sharedV2/queryBuilder/GroupHeader.tsx +++ b/datahub-web-react/src/app/sharedV2/queryBuilder/GroupHeader.tsx @@ -1,6 +1,6 @@ import { Tooltip } from '@components'; import { Button } from 'antd'; -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { LogicalOperatorType } from '@app/sharedV2/queryBuilder/builder/types'; import { @@ -18,6 +18,7 @@ interface Props { onChangeOperator: (operator: LogicalOperatorType) => void; index: number; operator?: LogicalOperatorType; + showDeleteButton?: boolean; } const GroupHeader = ({ @@ -27,6 +28,7 @@ const GroupHeader = ({ onChangeOperator, index, operator, + showDeleteButton, }: Props) => { const [selectedOperation, setSelectedOperation] = useState( operator ?? LogicalOperatorType.AND, @@ -37,13 +39,34 @@ const GroupHeader = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedOperation]); + const handleAddPropertyPredicate = useCallback( + (event: React.MouseEvent) => { + onAddPropertyPredicate(); + event.preventDefault(); + }, + [onAddPropertyPredicate], + ); + + const handleAddLogicalPredicate = useCallback( + (event: React.MouseEvent) => { + onAddLogicalPredicate(); + event.preventDefault(); + }, + [onAddLogicalPredicate], + ); + + const selectOperator = useCallback((event: React.MouseEvent, operatorToSelect: LogicalOperatorType) => { + setSelectedOperation(operatorToSelect); + event.preventDefault(); + }, []); + return ( setSelectedOperation(LogicalOperatorType.AND)} + onClick={(e) => selectOperator(e, LogicalOperatorType.AND)} isSelected={selectedOperation === LogicalOperatorType.AND} > All @@ -52,7 +75,7 @@ const GroupHeader = ({ setSelectedOperation(LogicalOperatorType.OR)} + onClick={(e) => selectOperator(e, LogicalOperatorType.OR)} isSelected={selectedOperation === LogicalOperatorType.OR} > Any @@ -61,7 +84,7 @@ const GroupHeader = ({ setSelectedOperation(LogicalOperatorType.NOT)} + onClick={(e) => selectOperator(e, LogicalOperatorType.NOT)} isSelected={selectedOperation === LogicalOperatorType.NOT} > None @@ -71,25 +94,27 @@ const GroupHeader = ({ Add Condition Add Group - onDeletePredicate(index)} - data-testid="query-builder-delete-button" - /> + {showDeleteButton && ( + onDeletePredicate(index)} + data-testid="query-builder-delete-button" + /> + )} diff --git a/datahub-web-react/src/app/sharedV2/queryBuilder/QueryBuilder.tsx b/datahub-web-react/src/app/sharedV2/queryBuilder/QueryBuilder.tsx index 9661483b19..c693f6e005 100644 --- a/datahub-web-react/src/app/sharedV2/queryBuilder/QueryBuilder.tsx +++ b/datahub-web-react/src/app/sharedV2/queryBuilder/QueryBuilder.tsx @@ -105,6 +105,7 @@ const QueryBuilder = ({ selectedPredicate, onChangePredicate, properties, depth, onChangeOperator={onChangeOperator} index={index} operator={logicalPredicate.operator} + showDeleteButton={operands.length > 0} /> } showArrow={operands.length > 0} diff --git a/datahub-web-react/src/app/sharedV2/queryBuilder/styledComponents.ts b/datahub-web-react/src/app/sharedV2/queryBuilder/styledComponents.ts index fb4ade3151..7f26616e59 100644 --- a/datahub-web-react/src/app/sharedV2/queryBuilder/styledComponents.ts +++ b/datahub-web-react/src/app/sharedV2/queryBuilder/styledComponents.ts @@ -92,6 +92,8 @@ export const CardIcons = styled.div` display: flex; justify-content: end; gap: 12px; + min-width: 28px; + min-height: 28px; div { border: 1px solid ${REDESIGN_COLORS.SILVER_GREY};