Skip to content

Commit 5d908db

Browse files
vanch3dvanch3d
authored
Merge pull request #997
* fix(29930): add onclose callback to the tools * fix(29930): refactor the data transfer key * fix(29930): clear data transfer key
1 parent c4a3cb2 commit 5d908db

File tree

5 files changed

+67
-16
lines changed

5 files changed

+67
-16
lines changed

‎hivemq-edge-frontend/src/extensions/datahub/components/controls/DesignerToolbox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const DesignerToolbox: FC = () => {
3030
<Panel position="top-left">
3131
<HStack role="group" aria-label={t('workspace.toolbars.draft.aria-label')} p={1}>
3232
<Popover>
33-
{({ isOpen }) => (
33+
{({ isOpen, onClose }) => (
3434
<>
3535
<PopoverTrigger>
3636
<IconButton
@@ -53,7 +53,7 @@ const DesignerToolbox: FC = () => {
5353
<PopoverHeader>{t('workspace.toolbox.panel.aria-label')}</PopoverHeader>
5454
<PopoverBody as={VStack} alignItems="flex-start" maxWidth="12rem">
5555
<Text fontSize="sm">{t('workspace.toolbox.panel.helper')}</Text>
56-
<ToolboxNodes direction="vertical" />
56+
<ToolboxNodes direction="vertical" callback={onClose} />
5757
</PopoverBody>
5858
</PopoverContent>
5959
</>

‎hivemq-edge-frontend/src/extensions/datahub/components/controls/ToolItem.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,38 @@ import IconButton from '@/components/Chakra/IconButton.tsx'
77

88
import type { DataHubNodeType } from '@datahub/types.ts'
99
import { NodeIcon } from '@datahub/components/helpers'
10+
import { DND_DESIGNER_NODE_TYPE } from '@datahub/utils/datahub.utils.ts'
1011

1112
interface ToolProps extends ButtonProps {
1213
nodeType: DataHubNodeType
14+
callback?: () => void
1315
}
1416

15-
const ToolItem: FC<ToolProps> = ({ nodeType, isDisabled }) => {
17+
const ToolItem: FC<ToolProps> = ({ nodeType, isDisabled, callback }) => {
1618
const { t } = useTranslation('datahub')
1719

20+
const onButtonDragEnd = useCallback((event: React.DragEvent<HTMLButtonElement>) => {
21+
event.dataTransfer.clearData(DND_DESIGNER_NODE_TYPE)
22+
}, [])
23+
1824
const onButtonDragStart = useCallback(
1925
(event: React.DragEvent<HTMLButtonElement>) => {
2026
if (isDisabled) {
2127
event.preventDefault()
2228
} else if (event && !isDisabled) {
23-
event.dataTransfer.setData('application/reactflow', nodeType.toString())
29+
event.dataTransfer.setData(DND_DESIGNER_NODE_TYPE, nodeType.toString())
2430
event.dataTransfer.effectAllowed = 'move'
31+
callback?.()
2532
}
2633
},
27-
[nodeType, isDisabled]
34+
[isDisabled, nodeType, callback]
2835
)
2936

3037
return (
3138
<IconButton
3239
size="lg"
3340
onDragStart={onButtonDragStart}
41+
onDragEnd={onButtonDragEnd}
3442
draggable
3543
isDisabled={isDisabled}
3644
icon={<NodeIcon type={nodeType} />}

‎hivemq-edge-frontend/src/extensions/datahub/components/controls/ToolboxNodes.tsx‎

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.ts'
1010

1111
interface ToolboxNodesProps {
1212
direction?: 'horizontal' | 'vertical'
13+
callback?: () => void
1314
}
1415

15-
export const ToolboxNodes: FC<ToolboxNodesProps> = ({ direction = 'horizontal' }) => {
16+
export const ToolboxNodes: FC<ToolboxNodesProps> = ({ direction = 'horizontal', callback }) => {
1617
const { t } = useTranslation('datahub')
1718
const { nodes, isPolicyInDraft } = useDataHubDraftStore()
1819
const { isPolicyEditable } = usePolicyGuards()
@@ -31,21 +32,58 @@ export const ToolboxNodes: FC<ToolboxNodesProps> = ({ direction = 'horizontal' }
3132
alignItems={direction === 'horizontal' ? 'center' : 'flex-start'}
3233
>
3334
<ToolGroup title={t('workspace.toolbox.group.integration.edge')} id="group-integrations">
34-
<ToolItem nodeType={DataHubNodeType.TOPIC_FILTER} isDisabled={isDraftEmpty || !isPolicyEditable} />
35-
<ToolItem nodeType={DataHubNodeType.CLIENT_FILTER} isDisabled={isDraftEmpty || !isPolicyEditable} />
35+
<ToolItem
36+
data-testid="toolbox-trigger"
37+
nodeType={DataHubNodeType.TOPIC_FILTER}
38+
isDisabled={isDraftEmpty || !isPolicyEditable}
39+
callback={callback}
40+
/>
41+
<ToolItem
42+
nodeType={DataHubNodeType.CLIENT_FILTER}
43+
isDisabled={isDraftEmpty || !isPolicyEditable}
44+
callback={callback}
45+
/>
3646
</ToolGroup>
3747
<ToolGroup title={t('workspace.toolbox.group.dataPolicy')} id="group-dataPolicy">
38-
<ToolItem nodeType={DataHubNodeType.DATA_POLICY} isDisabled={!isPolicyEditable || isPolicyInDraft()} />
39-
<ToolItem nodeType={DataHubNodeType.VALIDATOR} isDisabled={isDraftEmpty || !isPolicyEditable} />
40-
<ToolItem nodeType={DataHubNodeType.SCHEMA} isDisabled={isDraftEmpty || !isPolicyEditable} />
48+
<ToolItem
49+
nodeType={DataHubNodeType.DATA_POLICY}
50+
isDisabled={!isPolicyEditable || isPolicyInDraft()}
51+
callback={callback}
52+
/>
53+
<ToolItem
54+
nodeType={DataHubNodeType.VALIDATOR}
55+
isDisabled={isDraftEmpty || !isPolicyEditable}
56+
callback={callback}
57+
/>
58+
<ToolItem
59+
nodeType={DataHubNodeType.SCHEMA}
60+
isDisabled={isDraftEmpty || !isPolicyEditable}
61+
callback={callback}
62+
/>
4163
</ToolGroup>
4264
<ToolGroup title={t('workspace.toolbox.group.behaviorPolicy')} id="group-behaviorPolicy">
43-
<ToolItem nodeType={DataHubNodeType.BEHAVIOR_POLICY} isDisabled={!isPolicyEditable || isPolicyInDraft()} />
44-
<ToolItem nodeType={DataHubNodeType.TRANSITION} isDisabled={isDraftEmpty || !isPolicyEditable} />
65+
<ToolItem
66+
nodeType={DataHubNodeType.BEHAVIOR_POLICY}
67+
isDisabled={!isPolicyEditable || isPolicyInDraft()}
68+
callback={callback}
69+
/>
70+
<ToolItem
71+
nodeType={DataHubNodeType.TRANSITION}
72+
isDisabled={isDraftEmpty || !isPolicyEditable}
73+
callback={callback}
74+
/>
4575
</ToolGroup>
4676
<ToolGroup title={t('workspace.toolbox.group.operation')} id="group-operation">
47-
<ToolItem nodeType={DataHubNodeType.OPERATION} isDisabled={isDraftEmpty || !isPolicyEditable} />
48-
<ToolItem nodeType={DataHubNodeType.FUNCTION} isDisabled={isDraftEmpty || !isPolicyEditable} />
77+
<ToolItem
78+
nodeType={DataHubNodeType.OPERATION}
79+
isDisabled={isDraftEmpty || !isPolicyEditable}
80+
callback={callback}
81+
/>
82+
<ToolItem
83+
nodeType={DataHubNodeType.FUNCTION}
84+
isDisabled={isDraftEmpty || !isPolicyEditable}
85+
callback={callback}
86+
/>
4987
</ToolGroup>
5088
</Wrapper>
5189
)

‎hivemq-edge-frontend/src/extensions/datahub/components/pages/PolicyEditor.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { CANVAS_GRID } from '@datahub/utils/theme.utils.ts'
2323
import { DataHubNodeType } from '@datahub/types.ts'
2424
import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.ts'
2525
import { CANVAS_DROP_DELTA } from '@datahub/designer/checks.utils.ts'
26+
import { DND_DESIGNER_NODE_TYPE } from '@datahub/utils/datahub.utils.ts'
2627

2728
export type OnConnectStartParams = {
2829
nodeId: string | null
@@ -63,7 +64,7 @@ const PolicyEditor: FC = () => {
6364
event.preventDefault()
6465

6566
// check if the dropped element is valid
66-
const type = event.dataTransfer.getData('application/reactflow')
67+
const type = event.dataTransfer.getData(DND_DESIGNER_NODE_TYPE)
6768
if (typeof type === 'undefined' || !type) {
6869
return
6970
}
@@ -82,6 +83,8 @@ const PolicyEditor: FC = () => {
8283
onAddNodes([{ item: newNode, type: 'add' }])
8384
if (type === DataHubNodeType.DATA_POLICY || type === DataHubNodeType.BEHAVIOR_POLICY)
8485
setStatus(status, { type })
86+
87+
event.dataTransfer.clearData(DND_DESIGNER_NODE_TYPE)
8588
}
8689
},
8790
[onAddNodes, reactFlowInstance, setStatus, status]

‎hivemq-edge-frontend/src/extensions/datahub/utils/datahub.utils.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import type { HotKeyItem } from '@datahub/types.ts'
22

3+
export const DND_DESIGNER_NODE_TYPE = 'application/reactflow;type=designer-node'
4+
35
export const SCRIPT_FUNCTION_SEPARATOR = ':'
46
export const SCRIPT_FUNCTION_PREFIX = 'fn'
57
export const SCRIPT_FUNCTION_LATEST = 'latest'

0 commit comments

Comments
 (0)