Skip to content

Commit 5918a01

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

File tree

10 files changed

+57
-39
lines changed

10 files changed

+57
-39
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: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,50 +12,54 @@ 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;
62+
63+
export const TRANSFER_CANVAS_FILTER_NODES = Object.values(
64+
TransferCanvasTransformNodeType,
65+
) as TransferCanvasTransformNodeType[];

‎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/TransformButtons.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import { memo, useState } from 'react';
1+
import { memo, useEffect, useState } from 'react';
22
import { Typography } from 'antd';
33
import { useModalState } from '@shared/hooks';
44
import { ModalWrapper } from '@shared/ui';
55
import { DEFAULT_MODAL_DELETE_WIDTH } from '@shared/constants';
66
import { useTranslation } from 'react-i18next';
7+
import { useReactFlow } from '@xyflow/react';
78

89
import {
910
TransferCanvasTransformNodeType,
1011
TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY,
1112
TRANSFER_CANVAS_NODE_TYPE_TO_TRANSFORM_TYPE_MAP,
13+
TransferCanvasNodeData,
14+
TRANSFER_CANVAS_FILTER_NODES,
1215
} from '../TransferConnectionsCanvas';
1316
import { useSupportedTransformationTypes } from '../../hooks';
1417

@@ -21,12 +24,28 @@ const { Text } = Typography;
2124
export const TransformButtons = memo(() => {
2225
const { t } = useTranslation('transformation');
2326
const { transformNodeTypes, handleAddTransformNode, handleDeleteTransformNode } = useHandleNodes();
27+
const { getNodes } = useReactFlow<TransferCanvasNodeData>();
28+
2429
const { supportedTransformationTypes } = useSupportedTransformationTypes();
2530

2631
const [nodeTypeForDeleting, setNodeTypeForDeleting] = useState<TransferCanvasTransformNodeType | null>(null);
2732

2833
const { isOpened: isOpenedModal, handleOpen: openModal, handleClose: handleCloseModal } = useModalState();
2934

35+
/** Remove nodes that are not supported for the connection type */
36+
useEffect(() => {
37+
getNodes()
38+
.filter(
39+
({ type }) =>
40+
TRANSFER_CANVAS_FILTER_NODES.includes(type as TransferCanvasTransformNodeType) &&
41+
!supportedTransformationTypes.includes(
42+
TRANSFER_CANVAS_NODE_TYPE_TO_TRANSFORM_TYPE_MAP[type as TransferCanvasTransformNodeType],
43+
),
44+
)
45+
.forEach(({ type }) => handleDeleteTransformNode(type as TransferCanvasTransformNodeType));
46+
// eslint-disable-next-line react-hooks/exhaustive-deps
47+
}, [supportedTransformationTypes]);
48+
3049
const handleOpenDeleteNodeModal = (nodeType: TransferCanvasTransformNodeType) => {
3150
setNodeTypeForDeleting(nodeType);
3251
openModal();

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Edge, useReactFlow } from '@xyflow/react';
22
import { useEffect, useState } from 'react';
33
import { Form } from 'antd';
44
import { TransformationsForm } from '@entities/transformation';
5-
import { useSupportedTransformationTypes } from '@features/transfer/MutateTransferForm/hooks';
65

76
import {
87
TransferCanvasNodeData,
@@ -21,12 +20,11 @@ export const useHandleNodes = () => {
2120
const formInstance = Form.useFormInstance();
2221

2322
const [transformNodeTypes, setTransformNodeTypes] = useState<TransformNodeTypes>();
24-
const { supportedTransformationTypes } = useSupportedTransformationTypes();
2523

2624
/** Set initial nodes using useEffect, because nodes state fill only after mounting */
2725
useEffect(() => {
2826
setTransformNodeTypes(getInitialTransformNodeTypes(getNodes()));
29-
}, [getNodes, supportedTransformationTypes]);
27+
}, [getNodes]);
3028

3129
const addNewNode = (nodeType: TransferCanvasTransformNodeType) => {
3230
const newNode = {

0 commit comments

Comments
 (0)