Skip to content

Commit 2308464

Browse files
srj-mx-a11ysrj-mx-a11y
committed
[DOP-31559] Hide File filter if source is not of type File
1 parent 1b51dda commit 2308464

File tree

9 files changed

+111
-91
lines changed

9 files changed

+111
-91
lines changed

‎src/entities/transformation/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ const SHOW_BUTTONS_CONTEXT_INITIAL_VALUE: ShowButtonsContextProps = {
1818
export const ShowButtonsContext = createContext<ShowButtonsContextProps>(SHOW_BUTTONS_CONTEXT_INITIAL_VALUE);
1919

2020
export const TRANSFORMATIONS_FORM_DEFAULT_VALUE: TransformationsForm = {
21+
[TransformationType.FILTER_FILE]: [],
2122
[TransformationType.FILTER_ROWS]: [],
2223
[TransformationType.FILTER_COLUMNS]: [],
23-
[TransformationType.FILTER_FILE]: [],
2424
};
2525

2626
export const TRANSFORMATIONS_REQUEST_DEFAULT_VALUE: Transformations = [

‎src/entities/transformation/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,9 @@ export interface TransformationFilterFileForm {
110110
export type Transformations = Array<TransformationFilterRows | TransformationFilterColumns | TransformationFilterFile>;
111111

112112
export interface TransformationsForm {
113+
[TransformationType.FILTER_FILE]?: TransformationFilterFileForm['filters'];
113114
[TransformationType.FILTER_ROWS]?: TransformationFilterRows['filters'];
114115
[TransformationType.FILTER_COLUMNS]?: TransformationFilterColumns['filters'];
115-
[TransformationType.FILTER_FILE]?: TransformationFilterFileForm['filters'];
116116
}
117117

118118
export type TransformationsFormNestedType<T extends keyof TransformationsForm> =

‎src/entities/transformation/ui/TransformationForm/components/TransformationFormItem/hooks/useGetNestedTypesSelectOptions/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ export const useGetNestedTypesSelectOptions = (transformationType: Transformatio
3737
TransformationType,
3838
OptionItem<TransformationFilterRowsType | TransformationFilterColumnsType | TransformationFilterFileType>[]
3939
> = {
40+
[TransformationType.FILTER_FILE]: filterFileTypeSelectOptions,
4041
[TransformationType.FILTER_ROWS]: filterRowsTypeSelectOptions,
4142
[TransformationType.FILTER_COLUMNS]: filterColumnsTypeSelectOptions,
42-
[TransformationType.FILTER_FILE]: filterFileTypeSelectOptions,
4343
};
4444

4545
return filterOptions;

‎src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/TransferConnectionsCanvas.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,22 @@ export const TransferConnectionsCanvas = ({ groupId, isDisplayedButtons = true }
1818
const formInstance = Form.useFormInstance();
1919
const { supportedTransformationTypes } = useSupportedTransformationTypes();
2020

21-
/** Recreate the canvas when supported transformations change */
22-
const canvasKey = supportedTransformationTypes.join(',');
23-
2421
const initialTransformations = useMemo(() => {
2522
return formInstance.getFieldValue('transformations') as TransformationsForm;
2623
}, [formInstance]);
2724

2825
const initialNodes = useMemo(() => {
2926
return getInitialNodes({
3027
groupId,
28+
hasFilterFile:
29+
supportedTransformationTypes.includes(TransformationType.FILTER_FILE) &&
30+
!!initialTransformations[TransformationType.FILTER_FILE]?.length,
3131
hasFilterRows:
3232
supportedTransformationTypes.includes(TransformationType.FILTER_ROWS) &&
3333
!!initialTransformations[TransformationType.FILTER_ROWS]?.length,
3434
hasFilterColumns:
3535
supportedTransformationTypes.includes(TransformationType.FILTER_COLUMNS) &&
3636
!!initialTransformations[TransformationType.FILTER_COLUMNS]?.length,
37-
hasFilterFile:
38-
supportedTransformationTypes.includes(TransformationType.FILTER_FILE) &&
39-
!!initialTransformations[TransformationType.FILTER_FILE]?.length,
4037
});
4138
}, [groupId, supportedTransformationTypes, initialTransformations]);
4239

@@ -48,7 +45,7 @@ export const TransferConnectionsCanvas = ({ groupId, isDisplayedButtons = true }
4845
<ShowButtonsContext.Provider value={{ isDisplayed: isDisplayedButtons }}>
4946
<ReactFlowProvider>
5047
<div className={classes.root}>
51-
<Canvas key={canvasKey} nodeTypes={NODE_TYPES} initialNodes={initialNodes} initialEdges={initialEdges}>
48+
<Canvas nodeTypes={NODE_TYPES} initialNodes={initialNodes} initialEdges={initialEdges}>
5249
{isDisplayedButtons && <TransformButtons />}
5350
</Canvas>
5451
</div>

‎src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/constants.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,50 +12,50 @@ import { TransferCanvasDefaultNodeType, TransferCanvasEdgeType, TransferCanvasTr
1212
export const NODE_TYPES: NodeTypes = {
1313
[TransferCanvasDefaultNodeType.SOURCE]: SourceParamsNode,
1414
[TransferCanvasDefaultNodeType.TARGET]: TargetParamsNode,
15+
[TransferCanvasTransformNodeType.FILTER_FILE]: FilterFileNode,
1516
[TransferCanvasTransformNodeType.FILTER_ROWS]: FilterRowsNode,
1617
[TransferCanvasTransformNodeType.FILTER_COLUMNS]: FilterColumnsNode,
17-
[TransferCanvasTransformNodeType.FILTER_FILE]: FilterFileNode,
1818
};
1919

2020
export const NODE_TYPES_ID = {
2121
[TransferCanvasDefaultNodeType.SOURCE]: '1',
22-
[TransferCanvasTransformNodeType.FILTER_ROWS]: '2',
23-
[TransferCanvasTransformNodeType.FILTER_COLUMNS]: '3',
24-
[TransferCanvasTransformNodeType.FILTER_FILE]: '4',
22+
[TransferCanvasTransformNodeType.FILTER_FILE]: '2',
23+
[TransferCanvasTransformNodeType.FILTER_ROWS]: '3',
24+
[TransferCanvasTransformNodeType.FILTER_COLUMNS]: '4',
2525
[TransferCanvasDefaultNodeType.TARGET]: '5',
2626
};
2727

2828
export const EDGE_TYPES_ID = {
2929
[TransferCanvasEdgeType.SOURCE]: '1',
30-
[TransferCanvasEdgeType.FILTER_ROWS]: '2',
31-
[TransferCanvasEdgeType.FILTER_COLUMNS]: '3',
32-
[TransferCanvasEdgeType.FILTER_FILE]: '4',
30+
[TransferCanvasEdgeType.FILTER_FILE]: '2',
31+
[TransferCanvasEdgeType.FILTER_ROWS]: '3',
32+
[TransferCanvasEdgeType.FILTER_COLUMNS]: '4',
3333
[TransferCanvasEdgeType.TARGET]: '5',
3434
};
3535

3636
export const NODE_POSITION_X_GAP_DEFAULT = 500;
3737
export const NODE_POSITION_X_GAP_LARGE = 1000;
3838

3939
export const TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY = {
40+
[TransferCanvasTransformNodeType.FILTER_FILE]: 'filterFile',
4041
[TransferCanvasTransformNodeType.FILTER_ROWS]: 'filterRows',
4142
[TransferCanvasTransformNodeType.FILTER_COLUMNS]: 'filterColumns',
42-
[TransferCanvasTransformNodeType.FILTER_FILE]: 'filterFile',
4343
} as const;
4444

4545
export const TRANSFER_CANVAS_NODE_TYPE_TO_TRANSFORM_TYPE_MAP: Record<
4646
TransferCanvasTransformNodeType,
4747
TransformationType
4848
> = {
49+
[TransferCanvasTransformNodeType.FILTER_FILE]: TransformationType.FILTER_FILE,
4950
[TransferCanvasTransformNodeType.FILTER_ROWS]: TransformationType.FILTER_ROWS,
5051
[TransferCanvasTransformNodeType.FILTER_COLUMNS]: TransformationType.FILTER_COLUMNS,
51-
[TransferCanvasTransformNodeType.FILTER_FILE]: TransformationType.FILTER_FILE,
5252
} as const;
5353

5454
export const TRANSFER_TRANSFORM_TYPE_TO_CANVAS_NODE_TYPE_MAP: Record<
5555
TransformationType,
5656
TransferCanvasTransformNodeType
5757
> = {
58+
[TransformationType.FILTER_FILE]: TransferCanvasTransformNodeType.FILTER_FILE,
5859
[TransformationType.FILTER_ROWS]: TransferCanvasTransformNodeType.FILTER_ROWS,
5960
[TransformationType.FILTER_COLUMNS]: TransferCanvasTransformNodeType.FILTER_COLUMNS,
60-
[TransformationType.FILTER_FILE]: TransferCanvasTransformNodeType.FILTER_FILE,
6161
} as const;

‎src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ export enum TransferCanvasDefaultNodeType {
2323
}
2424

2525
export enum TransferCanvasTransformNodeType {
26+
FILTER_FILE = 'FILTER_FILE',
2627
FILTER_ROWS = 'FILTER_ROWS',
2728
FILTER_COLUMNS = 'FILTER_COLUMNS',
28-
FILTER_FILE = 'FILTER_FILE',
2929
}
3030

3131
export enum TransferCanvasEdgeType {
3232
SOURCE = 'SOURCE',
33+
FILTER_FILE = 'FILTER_FILE',
3334
FILTER_ROWS = 'FILTER_ROWS',
3435
FILTER_COLUMNS = 'FILTER_COLUMNS',
35-
FILTER_FILE = 'FILTER_FILE',
3636
TARGET = 'TARGET',
3737
}
3838

‎src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/utils/getInitialNodes/getInitialNodes.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,30 @@ export const getInitialNodes = ({
2121

2222
let nodeIndex = 1;
2323

24-
if (hasFilterRows) {
24+
if (hasFilterFile) {
2525
nodes.push({
26-
id: NODE_TYPES_ID[TransferCanvasTransformNodeType.FILTER_ROWS],
27-
type: TransferCanvasTransformNodeType.FILTER_ROWS,
26+
id: NODE_TYPES_ID[TransferCanvasTransformNodeType.FILTER_FILE],
27+
type: TransferCanvasTransformNodeType.FILTER_FILE,
2828
data: {},
2929
position: setNodePosition(nodeIndex),
3030
});
3131
nodeIndex++;
3232
}
3333

34-
if (hasFilterColumns) {
34+
if (hasFilterRows) {
3535
nodes.push({
36-
id: NODE_TYPES_ID[TransferCanvasTransformNodeType.FILTER_COLUMNS],
37-
type: TransferCanvasTransformNodeType.FILTER_COLUMNS,
36+
id: NODE_TYPES_ID[TransferCanvasTransformNodeType.FILTER_ROWS],
37+
type: TransferCanvasTransformNodeType.FILTER_ROWS,
3838
data: {},
3939
position: setNodePosition(nodeIndex),
4040
});
4141
nodeIndex++;
4242
}
4343

44-
if (hasFilterFile) {
44+
if (hasFilterColumns) {
4545
nodes.push({
46-
id: NODE_TYPES_ID[TransferCanvasTransformNodeType.FILTER_FILE],
47-
type: TransferCanvasTransformNodeType.FILTER_FILE,
46+
id: NODE_TYPES_ID[TransferCanvasTransformNodeType.FILTER_COLUMNS],
47+
type: TransferCanvasTransformNodeType.FILTER_COLUMNS,
4848
data: {},
4949
position: setNodePosition(nodeIndex),
5050
});

‎src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/constants.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import { FilterRowsFormItem } from '../FilterRowsFormItem';
88
import { FilterTypeConfig } from './types';
99

1010
export const FILTER_TYPES_CONFIG: Record<TransformationType, FilterTypeConfig> = {
11+
[TransformationType.FILTER_FILE]: {
12+
title: 'filterFile',
13+
filter: <FilterFileFormItem canHaveEmptyRecordsList />,
14+
},
1115
[TransformationType.FILTER_ROWS]: {
1216
title: 'filterRows',
1317
filter: <FilterRowsFormItem canHaveEmptyRecordsList />,
@@ -16,8 +20,4 @@ export const FILTER_TYPES_CONFIG: Record<TransformationType, FilterTypeConfig> =
1620
title: 'filterColumns',
1721
filter: <FilterColumnsFormItem canHaveEmptyRecordsList />,
1822
},
19-
[TransformationType.FILTER_FILE]: {
20-
title: 'filterFile',
21-
filter: <FilterFileFormItem canHaveEmptyRecordsList />,
22-
},
2323
} as const;

‎src/features/transfer/MutateTransferForm/components/TransformButtons/hooks/useHandleNodes/index.ts‎

Lines changed: 79 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Edge, useReactFlow } from '@xyflow/react';
2-
import { useEffect, useState } from 'react';
2+
import { useCallback, useEffect, useState } from 'react';
33
import { Form } from 'antd';
44
import { TransformationsForm } from '@entities/transformation';
55
import { useSupportedTransformationTypes } from '@features/transfer/MutateTransferForm/hooks';
@@ -82,68 +82,91 @@ export const useHandleNodes = () => {
8282
setEdges(newEdges);
8383
};
8484

85-
const deleteNode = (nodeType: TransferCanvasTransformNodeType) => {
86-
setNodes((nodes) =>
87-
nodes
88-
.filter((node) => node.type !== nodeType)
89-
.map((node, index) => ({ ...node, position: setNodePosition(index) })),
90-
);
91-
92-
const currentTransformationsFormValues = formInstance.getFieldValue('transformations') as TransformationsForm;
93-
currentTransformationsFormValues[TRANSFER_CANVAS_NODE_TYPE_TO_TRANSFORM_TYPE_MAP[nodeType]] = [];
94-
95-
formInstance.setFieldValue('transformations', currentTransformationsFormValues);
96-
};
97-
98-
const deleteEdge = (nodeType: TransferCanvasTransformNodeType) => {
99-
const edges = getEdges();
100-
const newEdge: Edge = {
101-
id: '',
102-
source: '',
103-
target: '',
104-
animated: true,
105-
};
106-
107-
let nodeIndex = 0;
108-
109-
const restEdges = edges.filter((edge, index) => {
110-
if (edge.target === NODE_TYPES_ID[nodeType]) {
111-
newEdge.id = edge.id;
112-
newEdge.source = edge.source;
113-
nodeIndex = index;
114-
return false;
115-
}
116-
if (edge.source === NODE_TYPES_ID[nodeType]) {
117-
newEdge.target = edge.target;
118-
nodeIndex = index;
119-
return false;
120-
}
121-
return true;
122-
});
123-
124-
const firstEdges = restEdges.slice(0, nodeIndex);
125-
const lastEdges = restEdges.slice(nodeIndex + 1);
126-
const newEdges = firstEdges.concat(newEdge).concat(lastEdges);
127-
128-
setEdges(newEdges);
129-
};
85+
const deleteNode = useCallback(
86+
(nodeType: TransferCanvasTransformNodeType) => {
87+
setNodes((nodes) =>
88+
nodes
89+
.filter((node) => node.type !== nodeType)
90+
.map((node, index) => ({ ...node, position: setNodePosition(index) })),
91+
);
92+
93+
const currentTransformationsFormValues = formInstance.getFieldValue('transformations') as TransformationsForm;
94+
currentTransformationsFormValues[TRANSFER_CANVAS_NODE_TYPE_TO_TRANSFORM_TYPE_MAP[nodeType]] = [];
95+
96+
formInstance.setFieldValue('transformations', currentTransformationsFormValues);
97+
},
98+
[formInstance, setNodes],
99+
);
100+
101+
const deleteEdge = useCallback(
102+
(nodeType: TransferCanvasTransformNodeType) => {
103+
const edges = getEdges();
104+
const newEdge: Edge = {
105+
id: '',
106+
source: '',
107+
target: '',
108+
animated: true,
109+
};
110+
111+
let nodeIndex = 0;
112+
113+
const restEdges = edges.filter((edge, index) => {
114+
if (edge.target === NODE_TYPES_ID[nodeType]) {
115+
newEdge.id = edge.id;
116+
newEdge.source = edge.source;
117+
nodeIndex = index;
118+
return false;
119+
}
120+
if (edge.source === NODE_TYPES_ID[nodeType]) {
121+
newEdge.target = edge.target;
122+
nodeIndex = index;
123+
return false;
124+
}
125+
return true;
126+
});
127+
128+
const firstEdges = restEdges.slice(0, nodeIndex);
129+
const lastEdges = restEdges.slice(nodeIndex + 1);
130+
const newEdges = firstEdges.concat(newEdge).concat(lastEdges);
131+
132+
setEdges(newEdges);
133+
},
134+
[getEdges, setEdges],
135+
);
130136

131137
const handleAddTransformNode = (nodeType: TransferCanvasTransformNodeType) => {
132138
setTransformNodeTypes((state) => ({ ...state, [nodeType]: true }));
133139
addNewNode(nodeType);
134140
addNewEdge(nodeType);
135141
};
136142

137-
const handleDeleteTransformNode = (nodeType: TransferCanvasTransformNodeType) => {
138-
setTransformNodeTypes((state) =>
139-
(Object.keys(state || {}) as Array<keyof TransformNodeTypes>).reduce(
140-
(prev, curr) => (curr === nodeType ? prev : { ...prev, [curr]: true }),
141-
{},
142-
),
143-
);
144-
deleteNode(nodeType);
145-
deleteEdge(nodeType);
146-
};
143+
const handleDeleteTransformNode = useCallback(
144+
(nodeType: TransferCanvasTransformNodeType) => {
145+
setTransformNodeTypes((state) =>
146+
(Object.keys(state || {}) as Array<keyof TransformNodeTypes>).reduce(
147+
(prev, curr) => (curr === nodeType ? prev : { ...prev, [curr]: true }),
148+
{},
149+
),
150+
);
151+
deleteNode(nodeType);
152+
deleteEdge(nodeType);
153+
},
154+
[deleteEdge, deleteNode],
155+
);
156+
157+
useEffect(() => {
158+
const filterTypes = Object.values(TransferCanvasTransformNodeType) as TransferCanvasTransformNodeType[];
159+
160+
/** Remove nodes that are not supported for the connection type */
161+
getNodes()
162+
.filter(({ type }) => filterTypes.includes(type as TransferCanvasTransformNodeType))
163+
.map(({ type }) => type as TransferCanvasTransformNodeType)
164+
.filter(
165+
(filterType) =>
166+
!supportedTransformationTypes.includes(TRANSFER_CANVAS_NODE_TYPE_TO_TRANSFORM_TYPE_MAP[filterType]),
167+
)
168+
.forEach(handleDeleteTransformNode);
169+
}, [handleDeleteTransformNode, getNodes, supportedTransformationTypes]);
147170

148171
return { transformNodeTypes, handleAddTransformNode, handleDeleteTransformNode };
149172
};

0 commit comments

Comments
 (0)