fix(customHomePage): bring changes for query builder from Saas

Author: v-tarasevich-blitz-brain

datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/relatedEntities/RelatedEntitiesSection.tsx

@@ -13,7 +13,8 @@ import LogicalFiltersBuilder from '@app/sharedV2/queryBuilder/LogicalFiltersBuil
 import { LogicalOperatorType, LogicalPredicate } from '@app/sharedV2/queryBuilder/builder/types';
 import { properties } from '@app/sharedV2/queryBuilder/properties';
 
-const EMPTY_FILTER = {
+const EMPTY_FILTER: LogicalPredicate = {
+    type: 'logical',
     operator: LogicalOperatorType.AND,
     operands: [],
 };

datahub-web-react/src/app/sharedV2/queryBuilder/Condition.tsx

@@ -38,25 +38,28 @@ const Condition = ({ selectedPredicate, onDeletePredicate, onChangePredicate, pr
     const valueOptions = (property && selectedPredicate && getValueOptions(property, selectedPredicate)) || undefined;
 
     const handlePropertyChange = (propertyId?: string) => {
-        const newPredicate = {
+        const newPredicate: PropertyPredicate = {
+            type: 'property',
             property: propertyId,
         };
         onChangePredicate(newPredicate);
     };
 
     const handleOperatorChange = (operatorId: string) => {
-        const newPredicate = {
+        const newPredicate: PropertyPredicate = {
             ...selectedPredicate,
             operator: operatorId,
             values: undefined,
+            type: 'property',
         };
         onChangePredicate(newPredicate);
     };
 
     const handleValuesChange = (values: string[]) => {
-        const newPredicate = {
+        const newPredicate: PropertyPredicate = {
             ...selectedPredicate,
             values,
+            type: 'property',
         };
         onChangePredicate(newPredicate);
     };

datahub-web-react/src/app/sharedV2/queryBuilder/OperatorSelect.tsx

@@ -2,6 +2,7 @@ import { SelectOption, SimpleSelect } from '@components';
 import React, { useMemo } from 'react';
 
 import { Operator } from '@app/sharedV2/queryBuilder/builder/property/types/operators';
+import { ConditionElementWithFixedWidth } from '@app/sharedV2/queryBuilder/styledComponents';
 
 interface Props {
     selectedOperator?: string;
@@ -21,16 +22,18 @@ const OperatorSelect = ({ selectedOperator, operators, onChangeOperator }: Props
     );
 
     return (
-        <SimpleSelect
-            options={options}
-            placeholder="Select an operator..."
-            onUpdate={(val) => onChangeOperator(val[0])}
-            values={selectedOperator ? [selectedOperator.toLowerCase()] : []}
-            isDisabled={!operators}
-            data-testid="condition-operator-select"
-            width="full"
-            showClear={false}
-        />
+        <ConditionElementWithFixedWidth>
+            <SimpleSelect
+                options={options}
+                placeholder="Select an operator..."
+                onUpdate={(val) => onChangeOperator(val[0])}
+                values={selectedOperator ? [selectedOperator.toLowerCase()] : []}
+                isDisabled={!operators}
+                data-testid="condition-operator-select"
+                width="full"
+                showClear={false}
+            />
+        </ConditionElementWithFixedWidth>
     );
 };
 

datahub-web-react/src/app/sharedV2/queryBuilder/PropertySelect.tsx

@@ -2,6 +2,7 @@ import { SelectOption, SimpleSelect } from '@components';
 import React, { useMemo } from 'react';
 
 import { Property } from '@app/sharedV2/queryBuilder/builder/property/types/properties';
+import { ConditionElementWithFixedWidth } from '@app/sharedV2/queryBuilder/styledComponents';
 
 interface Props {
     selectedProperty?: string;
@@ -21,15 +22,17 @@ const PropertySelect = ({ selectedProperty, properties, onChangeProperty }: Prop
     );
 
     return (
-        <SimpleSelect
-            options={options}
-            onUpdate={(val) => onChangeProperty(val[0])}
-            values={selectedProperty ? [selectedProperty] : []}
-            placeholder="Select a property"
-            data-testid="condition-select"
-            width="full"
-            showClear={false}
-        />
+        <ConditionElementWithFixedWidth>
+            <SimpleSelect
+                options={options}
+                onUpdate={(val) => onChangeProperty(val[0])}
+                values={selectedProperty ? [selectedProperty] : []}
+                placeholder="Select a property"
+                data-testid="condition-select"
+                width="full"
+                showClear={false}
+            />
+        </ConditionElementWithFixedWidth>
     );
 };
 

datahub-web-react/src/app/sharedV2/queryBuilder/QueryBuilder.tsx

@@ -10,7 +10,8 @@ import { convertToLogicalPredicate } from '@app/sharedV2/queryBuilder/builder/ut
 import { CardIcons, StyledCollapse } from '@app/sharedV2/queryBuilder/styledComponents';
 import { Icon } from '@src/alchemy-components';
 
-const EMPTY_PROPERTY_PREDICATE = {
+const EMPTY_PROPERTY_PREDICATE: PropertyPredicate = {
+    type: 'property',
     property: undefined,
     operator: undefined,
     values: undefined,
@@ -31,12 +32,12 @@ const QueryBuilder = ({ selectedPredicate, onChangePredicate, properties, depth,
     const logicalPredicate = convertToLogicalPredicate(selectedPredicate);
     const { operator } = logicalPredicate;
 
-    const operands = useMemo(() => {
+    const operands: (PropertyPredicate | LogicalPredicate)[] = useMemo(() => {
         if (logicalPredicate) {
             // Filter out undefined values
             if (logicalPredicate.operands && logicalPredicate.operands.some((item) => item === undefined)) {
                 const newOperands = logicalPredicate.operands.filter((item) => item !== undefined);
-                onChangePredicate({ operator, operands: newOperands });
+                onChangePredicate({ type: 'logical', operator, operands: newOperands });
                 return newOperands;
             }
             return logicalPredicate.operands;
@@ -45,25 +46,26 @@ const QueryBuilder = ({ selectedPredicate, onChangePredicate, properties, depth,
     }, [logicalPredicate, onChangePredicate, operator]);
 
     const onAddPropertyPredicate = () => {
-        const newOperands = [...operands, EMPTY_PROPERTY_PREDICATE];
-        onChangePredicate({ operator, operands: newOperands });
+        const newOperands: (PropertyPredicate | LogicalPredicate)[] = [...operands, EMPTY_PROPERTY_PREDICATE];
+        onChangePredicate({ type: 'logical', operator, operands: newOperands });
     };
 
     const onAddLogicalPredicate = () => {
-        const newPredicate = {
+        const newPredicate: LogicalPredicate = {
+            type: 'logical',
             operator: LogicalOperatorType.AND,
             operands: [],
         };
         const newOperands = [...operands, newPredicate];
-        onChangePredicate({ operator, operands: newOperands });
+        onChangePredicate({ type: 'logical', operator, operands: newOperands });
     };
 
     const onChangeOperator = (newOperator) => {
-        onChangePredicate({ operator: newOperator, operands });
+        onChangePredicate({ type: 'logical', operator: newOperator, operands });
     };
 
     const onChangeOperands = (ops) => {
-        onChangePredicate({ operator, operands: ops });
+        onChangePredicate({ type: 'logical', operator, operands: ops });
     };
 
     const onDeletePredicate = () => {