Skip to content

Commit bbe056f

Browse files
v-tarasevich-blitz-brainv-tarasevich-blitz-brain
committed
fix(customHomePage): bring changes for query builder from Saas
1 parent e9039a7 commit bbe056f

File tree

11 files changed

+126
-107
lines changed

11 files changed

+126
-107
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import LogicalFiltersBuilder from '@app/sharedV2/queryBuilder/LogicalFiltersBuil
1313
import { LogicalOperatorType, LogicalPredicate } from '@app/sharedV2/queryBuilder/builder/types';
1414
import { properties } from '@app/sharedV2/queryBuilder/properties';
1515

16-
const EMPTY_FILTER = {
16+
const EMPTY_FILTER: LogicalPredicate = {
17+
type: 'logical',
1718
operator: LogicalOperatorType.AND,
1819
operands: [],
1920
};

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,28 @@ const Condition = ({ selectedPredicate, onDeletePredicate, onChangePredicate, pr
3838
const valueOptions = (property && selectedPredicate && getValueOptions(property, selectedPredicate)) || undefined;
3939

4040
const handlePropertyChange = (propertyId?: string) => {
41-
const newPredicate = {
41+
const newPredicate: PropertyPredicate = {
42+
type: 'property',
4243
property: propertyId,
4344
};
4445
onChangePredicate(newPredicate);
4546
};
4647

4748
const handleOperatorChange = (operatorId: string) => {
48-
const newPredicate = {
49+
const newPredicate: PropertyPredicate = {
4950
...selectedPredicate,
5051
operator: operatorId,
5152
values: undefined,
53+
type: 'property',
5254
};
5355
onChangePredicate(newPredicate);
5456
};
5557

5658
const handleValuesChange = (values: string[]) => {
57-
const newPredicate = {
59+
const newPredicate: PropertyPredicate = {
5860
...selectedPredicate,
5961
values,
62+
type: 'property',
6063
};
6164
onChangePredicate(newPredicate);
6265
};

‎datahub-web-react/src/app/sharedV2/queryBuilder/GroupHeader.tsx‎

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Tooltip } from '@components';
22
import { Button } from 'antd';
3-
import React, { useCallback, useEffect, useState } from 'react';
3+
import React, { useEffect, useState } from 'react';
44

55
import { LogicalOperatorType } from '@app/sharedV2/queryBuilder/builder/types';
66
import {
@@ -18,7 +18,6 @@ interface Props {
1818
onChangeOperator: (operator: LogicalOperatorType) => void;
1919
index: number;
2020
operator?: LogicalOperatorType;
21-
showDeleteButton?: boolean;
2221
}
2322

2423
const GroupHeader = ({
@@ -28,7 +27,6 @@ const GroupHeader = ({
2827
onChangeOperator,
2928
index,
3029
operator,
31-
showDeleteButton,
3230
}: Props) => {
3331
const [selectedOperation, setSelectedOperation] = useState<LogicalOperatorType>(
3432
operator ?? LogicalOperatorType.AND,
@@ -39,34 +37,13 @@ const GroupHeader = ({
3937
// eslint-disable-next-line react-hooks/exhaustive-deps
4038
}, [selectedOperation]);
4139

42-
const handleAddPropertyPredicate = useCallback(
43-
(event: React.MouseEvent) => {
44-
onAddPropertyPredicate();
45-
event.preventDefault();
46-
},
47-
[onAddPropertyPredicate],
48-
);
49-
50-
const handleAddLogicalPredicate = useCallback(
51-
(event: React.MouseEvent) => {
52-
onAddLogicalPredicate();
53-
event.preventDefault();
54-
},
55-
[onAddLogicalPredicate],
56-
);
57-
58-
const selectOperator = useCallback((event: React.MouseEvent, operatorToSelect: LogicalOperatorType) => {
59-
setSelectedOperation(operatorToSelect);
60-
event.preventDefault();
61-
}, []);
62-
6340
return (
6441
<ToolbarContainer>
6542
<Button.Group>
6643
<Tooltip showArrow={false} title="Match assets that satisfy all of the following conditions (AND)">
6744
<OperationButton
6845
variant="text"
69-
onClick={(e) => selectOperator(e, LogicalOperatorType.AND)}
46+
onClick={() => setSelectedOperation(LogicalOperatorType.AND)}
7047
isSelected={selectedOperation === LogicalOperatorType.AND}
7148
>
7249
All
@@ -75,7 +52,7 @@ const GroupHeader = ({
7552
<Tooltip showArrow={false} title="Match assets that satisfy all of the following conditions (OR)">
7653
<OperationButton
7754
variant="text"
78-
onClick={(e) => selectOperator(e, LogicalOperatorType.OR)}
55+
onClick={() => setSelectedOperation(LogicalOperatorType.OR)}
7956
isSelected={selectedOperation === LogicalOperatorType.OR}
8057
>
8158
Any
@@ -84,7 +61,7 @@ const GroupHeader = ({
8461
<Tooltip showArrow={false} title="Match assets that do not match any of the following conditions (NOT)">
8562
<OperationButton
8663
variant="text"
87-
onClick={(e) => selectOperator(e, LogicalOperatorType.NOT)}
64+
onClick={() => setSelectedOperation(LogicalOperatorType.NOT)}
8865
isSelected={selectedOperation === LogicalOperatorType.NOT}
8966
>
9067
None
@@ -94,27 +71,25 @@ const GroupHeader = ({
9471
<ActionsContainer>
9572
<ButtonComponent
9673
variant="text"
97-
onClick={handleAddPropertyPredicate}
74+
onClick={onAddPropertyPredicate}
9875
data-testid="query-builder-add-condition-button"
9976
>
10077
Add Condition
10178
</ButtonComponent>
10279
<ButtonComponent
10380
variant="text"
104-
onClick={handleAddLogicalPredicate}
81+
onClick={onAddLogicalPredicate}
10582
data-testid="query-builder-add-group-button"
10683
>
10784
Add Group
10885
</ButtonComponent>
10986
<CardIcons>
110-
{showDeleteButton && (
111-
<Icon
112-
icon="Delete"
113-
size="md"
114-
onClick={() => onDeletePredicate(index)}
115-
data-testid="query-builder-delete-button"
116-
/>
117-
)}
87+
<Icon
88+
icon="Delete"
89+
size="md"
90+
onClick={() => onDeletePredicate(index)}
91+
data-testid="query-builder-delete-button"
92+
/>
11893
</CardIcons>
11994
</ActionsContainer>
12095
</ToolbarContainer>

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { SelectOption, SimpleSelect } from '@components';
22
import React, { useMemo } from 'react';
33

44
import { Operator } from '@app/sharedV2/queryBuilder/builder/property/types/operators';
5+
import { ConditionElementWithFixedWidth } from '@app/sharedV2/queryBuilder/styledComponents';
56

67
interface Props {
78
selectedOperator?: string;
@@ -21,16 +22,18 @@ const OperatorSelect = ({ selectedOperator, operators, onChangeOperator }: Props
2122
);
2223

2324
return (
24-
<SimpleSelect
25-
options={options}
26-
placeholder="Select an operator..."
27-
onUpdate={(val) => onChangeOperator(val[0])}
28-
values={selectedOperator ? [selectedOperator.toLowerCase()] : []}
29-
isDisabled={!operators}
30-
data-testid="condition-operator-select"
31-
width="full"
32-
showClear={false}
33-
/>
25+
<ConditionElementWithFixedWidth>
26+
<SimpleSelect
27+
options={options}
28+
placeholder="Select an operator..."
29+
onUpdate={(val) => onChangeOperator(val[0])}
30+
values={selectedOperator ? [selectedOperator.toLowerCase()] : []}
31+
isDisabled={!operators}
32+
data-testid="condition-operator-select"
33+
width="full"
34+
showClear={false}
35+
/>
36+
</ConditionElementWithFixedWidth>
3437
);
3538
};
3639

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { SelectOption, SimpleSelect } from '@components';
22
import React, { useMemo } from 'react';
33

44
import { Property } from '@app/sharedV2/queryBuilder/builder/property/types/properties';
5+
import { ConditionElementWithFixedWidth } from '@app/sharedV2/queryBuilder/styledComponents';
56

67
interface Props {
78
selectedProperty?: string;
@@ -21,15 +22,17 @@ const PropertySelect = ({ selectedProperty, properties, onChangeProperty }: Prop
2122
);
2223

2324
return (
24-
<SimpleSelect
25-
options={options}
26-
onUpdate={(val) => onChangeProperty(val[0])}
27-
values={selectedProperty ? [selectedProperty] : []}
28-
placeholder="Select a property"
29-
data-testid="condition-select"
30-
width="full"
31-
showClear={false}
32-
/>
25+
<ConditionElementWithFixedWidth>
26+
<SimpleSelect
27+
options={options}
28+
onUpdate={(val) => onChangeProperty(val[0])}
29+
values={selectedProperty ? [selectedProperty] : []}
30+
placeholder="Select a property"
31+
data-testid="condition-select"
32+
width="full"
33+
showClear={false}
34+
/>
35+
</ConditionElementWithFixedWidth>
3336
);
3437
};
3538

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { convertToLogicalPredicate } from '@app/sharedV2/queryBuilder/builder/ut
1010
import { CardIcons, StyledCollapse } from '@app/sharedV2/queryBuilder/styledComponents';
1111
import { Icon } from '@src/alchemy-components';
1212

13-
const EMPTY_PROPERTY_PREDICATE = {
13+
const EMPTY_PROPERTY_PREDICATE: PropertyPredicate = {
14+
type: 'property',
1415
property: undefined,
1516
operator: undefined,
1617
values: undefined,
@@ -31,12 +32,12 @@ const QueryBuilder = ({ selectedPredicate, onChangePredicate, properties, depth,
3132
const logicalPredicate = convertToLogicalPredicate(selectedPredicate);
3233
const { operator } = logicalPredicate;
3334

34-
const operands = useMemo(() => {
35+
const operands: (PropertyPredicate | LogicalPredicate)[] = useMemo(() => {
3536
if (logicalPredicate) {
3637
// Filter out undefined values
3738
if (logicalPredicate.operands && logicalPredicate.operands.some((item) => item === undefined)) {
3839
const newOperands = logicalPredicate.operands.filter((item) => item !== undefined);
39-
onChangePredicate({ operator, operands: newOperands });
40+
onChangePredicate({ type: 'logical', operator, operands: newOperands });
4041
return newOperands;
4142
}
4243
return logicalPredicate.operands;
@@ -45,25 +46,26 @@ const QueryBuilder = ({ selectedPredicate, onChangePredicate, properties, depth,
4546
}, [logicalPredicate, onChangePredicate, operator]);
4647

4748
const onAddPropertyPredicate = () => {
48-
const newOperands = [...operands, EMPTY_PROPERTY_PREDICATE];
49-
onChangePredicate({ operator, operands: newOperands });
49+
const newOperands: (PropertyPredicate | LogicalPredicate)[] = [...operands, EMPTY_PROPERTY_PREDICATE];
50+
onChangePredicate({ type: 'logical', operator, operands: newOperands });
5051
};
5152

5253
const onAddLogicalPredicate = () => {
53-
const newPredicate = {
54+
const newPredicate: LogicalPredicate = {
55+
type: 'logical',
5456
operator: LogicalOperatorType.AND,
5557
operands: [],
5658
};
5759
const newOperands = [...operands, newPredicate];
58-
onChangePredicate({ operator, operands: newOperands });
60+
onChangePredicate({ type: 'logical', operator, operands: newOperands });
5961
};
6062

6163
const onChangeOperator = (newOperator) => {
62-
onChangePredicate({ operator: newOperator, operands });
64+
onChangePredicate({ type: 'logical', operator: newOperator, operands });
6365
};
6466

6567
const onChangeOperands = (ops) => {
66-
onChangePredicate({ operator, operands: ops });
68+
onChangePredicate({ type: 'logical', operator, operands: ops });
6769
};
6870

6971
const onDeletePredicate = () => {
@@ -104,8 +106,7 @@ const QueryBuilder = ({ selectedPredicate, onChangePredicate, properties, depth,
104106
onDeletePredicate={onDeletePredicate}
105107
onChangeOperator={onChangeOperator}
106108
index={index}
107-
operator={logicalPredicate.operator}
108-
showDeleteButton={operands.length > 0}
109+
operator={operator}
109110
/>
110111
}
111112
showArrow={operands.length > 0}

0 commit comments

Comments
 (0)