Skip to content

Commit d65a6b4

Browse files
CodingOnStarCodingOnStarautofix-ci[bot]
authored
refactor: migrate from PortalToFollowElem to Popover component across various components (langgenius#35454)
Co-authored-by: CodingOnStar <hanxujiang@dify.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 44a91e3 commit d65a6b4

37 files changed

Lines changed: 1894 additions & 1066 deletions

File tree

‎eslint-suppressions.json‎

Lines changed: 0 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -488,11 +488,6 @@
488488
"count": 1
489489
}
490490
},
491-
"web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx": {
492-
"no-restricted-imports": {
493-
"count": 1
494-
}
495-
},
496491
"web/app/components/app/configuration/dataset-config/index.tsx": {
497492
"ts/no-explicit-any": {
498493
"count": 1
@@ -3060,14 +3055,6 @@
30603055
"count": 3
30613056
}
30623057
},
3063-
"web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx": {
3064-
"no-restricted-imports": {
3065-
"count": 1
3066-
},
3067-
"ts/no-explicit-any": {
3068-
"count": 2
3069-
}
3070-
},
30713058
"web/app/components/header/account-setting/model-provider-page/declarations.ts": {
30723059
"erasable-syntax-only/enums": {
30733060
"count": 11
@@ -3554,11 +3541,6 @@
35543541
"count": 2
35553542
}
35563543
},
3557-
"web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx": {
3558-
"no-restricted-imports": {
3559-
"count": 1
3560-
}
3561-
},
35623544
"web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx": {
35633545
"no-restricted-imports": {
35643546
"count": 1
@@ -3672,11 +3654,6 @@
36723654
"count": 1
36733655
}
36743656
},
3675-
"web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx": {
3676-
"no-restricted-imports": {
3677-
"count": 1
3678-
}
3679-
},
36803657
"web/app/components/plugins/reference-setting-modal/auto-update-setting/types.ts": {
36813658
"erasable-syntax-only/enums": {
36823659
"count": 2
@@ -3933,11 +3910,6 @@
39333910
"count": 1
39343911
}
39353912
},
3936-
"web/app/components/tools/labels/selector.tsx": {
3937-
"no-restricted-imports": {
3938-
"count": 1
3939-
}
3940-
},
39413913
"web/app/components/tools/mcp/create-card.tsx": {
39423914
"ts/no-explicit-any": {
39433915
"count": 1
@@ -4123,11 +4095,6 @@
41234095
"count": 1
41244096
}
41254097
},
4126-
"web/app/components/workflow/block-selector/tool-picker.tsx": {
4127-
"no-restricted-imports": {
4128-
"count": 1
4129-
}
4130-
},
41314098
"web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx": {
41324099
"ts/no-explicit-any": {
41334100
"count": 1
@@ -4313,14 +4280,6 @@
43134280
"count": 2
43144281
}
43154282
},
4316-
"web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx": {
4317-
"no-restricted-imports": {
4318-
"count": 3
4319-
},
4320-
"ts/no-explicit-any": {
4321-
"count": 4
4322-
}
4323-
},
43244283
"web/app/components/workflow/nodes/_base/components/agent-strategy.tsx": {
43254284
"ts/no-empty-object-type": {
43264285
"count": 1
@@ -4547,22 +4506,6 @@
45474506
"count": 1
45484507
}
45494508
},
4550-
"web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx": {
4551-
"no-restricted-imports": {
4552-
"count": 1
4553-
},
4554-
"react/set-state-in-effect": {
4555-
"count": 1
4556-
},
4557-
"ts/no-explicit-any": {
4558-
"count": 3
4559-
}
4560-
},
4561-
"web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx": {
4562-
"no-restricted-imports": {
4563-
"count": 1
4564-
}
4565-
},
45664509
"web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx": {
45674510
"no-restricted-imports": {
45684511
"count": 1
@@ -4742,11 +4685,6 @@
47424685
"count": 1
47434686
}
47444687
},
4745-
"web/app/components/workflow/nodes/code/dependency-picker.tsx": {
4746-
"no-restricted-imports": {
4747-
"count": 1
4748-
}
4749-
},
47504688
"web/app/components/workflow/nodes/code/types.ts": {
47514689
"erasable-syntax-only/enums": {
47524690
"count": 1
@@ -4897,16 +4835,6 @@
48974835
"count": 1
48984836
}
48994837
},
4900-
"web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx": {
4901-
"no-restricted-imports": {
4902-
"count": 1
4903-
}
4904-
},
4905-
"web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx": {
4906-
"no-restricted-imports": {
4907-
"count": 1
4908-
}
4909-
},
49104838
"web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx": {
49114839
"no-restricted-imports": {
49124840
"count": 1
@@ -4957,11 +4885,6 @@
49574885
"count": 2
49584886
}
49594887
},
4960-
"web/app/components/workflow/nodes/if-else/components/condition-add.tsx": {
4961-
"no-restricted-imports": {
4962-
"count": 1
4963-
}
4964-
},
49654888
"web/app/components/workflow/nodes/if-else/components/condition-list/condition-input.tsx": {
49664889
"ts/no-explicit-any": {
49674890
"count": 1
@@ -4977,11 +4900,6 @@
49774900
"count": 1
49784901
}
49794902
},
4980-
"web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx": {
4981-
"no-restricted-imports": {
4982-
"count": 1
4983-
}
4984-
},
49854903
"web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx": {
49864904
"no-restricted-imports": {
49874905
"count": 1
@@ -5085,16 +5003,6 @@
50855003
"count": 1
50865004
}
50875005
},
5088-
"web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx": {
5089-
"no-restricted-imports": {
5090-
"count": 1
5091-
}
5092-
},
5093-
"web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx": {
5094-
"no-restricted-imports": {
5095-
"count": 1
5096-
}
5097-
},
50985006
"web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx": {
50995007
"ts/no-explicit-any": {
51005008
"count": 1
@@ -5110,11 +5018,6 @@
51105018
"count": 1
51115019
}
51125020
},
5113-
"web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-variable-selector.tsx": {
5114-
"no-restricted-imports": {
5115-
"count": 1
5116-
}
5117-
},
51185021
"web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx": {
51195022
"no-restricted-imports": {
51205023
"count": 1
@@ -5294,11 +5197,6 @@
52945197
"count": 1
52955198
}
52965199
},
5297-
"web/app/components/workflow/nodes/loop/components/condition-add.tsx": {
5298-
"no-restricted-imports": {
5299-
"count": 1
5300-
}
5301-
},
53025200
"web/app/components/workflow/nodes/loop/components/condition-list/condition-input.tsx": {
53035201
"ts/no-explicit-any": {
53045202
"count": 1
@@ -5314,11 +5212,6 @@
53145212
"count": 1
53155213
}
53165214
},
5317-
"web/app/components/workflow/nodes/loop/components/condition-list/condition-var-selector.tsx": {
5318-
"no-restricted-imports": {
5319-
"count": 1
5320-
}
5321-
},
53225215
"web/app/components/workflow/nodes/loop/components/condition-number-input.tsx": {
53235216
"no-restricted-imports": {
53245217
"count": 1
@@ -6095,14 +5988,6 @@
60955988
"count": 5
60965989
}
60975990
},
6098-
"web/app/education-apply/search-input.tsx": {
6099-
"no-restricted-imports": {
6100-
"count": 1
6101-
},
6102-
"ts/no-explicit-any": {
6103-
"count": 1
6104-
}
6105-
},
61065991
"web/app/education-apply/verify-state-modal.tsx": {
61075992
"react/set-state-in-effect": {
61085993
"count": 1

‎web/app/components/app/configuration/dataset-config/context-var/__tests__/index.spec.tsx‎

Lines changed: 73 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,72 @@ vi.mock('@/next/navigation', () => ({
1010
usePathname: () => '/test',
1111
}))
1212

13+
vi.mock('@langgenius/dify-ui/popover', async () => {
14+
const React = await import('react')
15+
const PopoverContext = React.createContext({
16+
open: false,
17+
setOpen: (_open: boolean) => {},
18+
})
19+
20+
const Popover = ({
21+
children,
22+
open: controlledOpen,
23+
onOpenChange,
24+
}: {
25+
children: React.ReactNode
26+
open?: boolean
27+
onOpenChange?: (open: boolean) => void
28+
}) => {
29+
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
30+
const isControlled = controlledOpen !== undefined
31+
const open = isControlled ? !!controlledOpen : uncontrolledOpen
32+
const setOpen = (nextOpen: boolean) => {
33+
if (!isControlled)
34+
setUncontrolledOpen(nextOpen)
35+
onOpenChange?.(nextOpen)
36+
}
37+
38+
return (
39+
<PopoverContext.Provider value={{ open, setOpen }}>
40+
{children}
41+
</PopoverContext.Provider>
42+
)
43+
}
44+
45+
const PopoverTrigger = ({ render }: { render: React.ReactNode }) => {
46+
const { open, setOpen } = React.useContext(PopoverContext)
47+
return (
48+
<div
49+
data-testid="popover-trigger"
50+
onClick={() => setOpen(!open)}
51+
>
52+
{render}
53+
</div>
54+
)
55+
}
56+
57+
const PopoverContent = ({
58+
children,
59+
...props
60+
}: React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }) => {
61+
const { open } = React.useContext(PopoverContext)
62+
if (!open)
63+
return null
64+
65+
return (
66+
<div data-testid="popover-content" {...props}>
67+
{children}
68+
</div>
69+
)
70+
}
71+
72+
return {
73+
Popover,
74+
PopoverTrigger,
75+
PopoverContent,
76+
}
77+
})
78+
1379
type PortalToFollowElemProps = {
1480
children: React.ReactNode
1581
open?: boolean
@@ -209,20 +275,17 @@ describe('ContextVar', () => {
209275
// Act
210276
render(<ContextVar {...props} />)
211277

212-
const triggers = screen.getAllByTestId('portal-trigger')
213-
const varPickerTrigger = triggers[triggers.length - 1]
278+
const varPickerTrigger = screen.getByTestId('popover-trigger')
214279

215280
await user.click(varPickerTrigger!)
216-
expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
281+
expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
217282

218283
// Select a different option
219-
const options = screen.getAllByText('var2')
220-
expect(options.length).toBeGreaterThan(0)
221-
await user.click(options[0]!)
284+
await user.click(screen.getByText('var2'))
222285

223286
// Assert
224287
expect(onChange).toHaveBeenCalledWith('var2')
225-
expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
288+
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
226289
})
227290

228291
it('should toggle dropdown when clicking the trigger button', async () => {
@@ -233,16 +296,15 @@ describe('ContextVar', () => {
233296
// Act
234297
render(<ContextVar {...props} />)
235298

236-
const triggers = screen.getAllByTestId('portal-trigger')
237-
const varPickerTrigger = triggers[triggers.length - 1]
299+
const varPickerTrigger = screen.getByTestId('popover-trigger')
238300

239301
// Open dropdown
240302
await user.click(varPickerTrigger!)
241-
expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
303+
expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
242304

243305
// Close dropdown
244306
await user.click(varPickerTrigger!)
245-
expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
307+
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
246308
})
247309
})
248310

0 commit comments

Comments
 (0)