Skip to content

Commit 6f2187f

Browse files
cstnscstns
authored
Merge pull request #6255 from FlowFuse/fix/drawer-dialog-positioning
fix(ui): wrap DialogBox in Teleport to fix positioning in drawer cont…
2 parents d45bbf7 + 7753abb commit 6f2187f

5 files changed

Lines changed: 69 additions & 56 deletions

File tree

‎frontend/src/components/dialogs/AssetDetailDialog.vue‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<ff-dialog
3+
v-if="visible"
34
ref="dialog" :header="header" :sub-header="`Node-RED Version: ${nrVersion}`" confirm-label="Close" :closeOnConfirm="true"
45
data-el="flow-view-dialog" boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]"
56
contentClass="overflow-hidden flex-grow" @confirm="confirm()"
@@ -35,22 +36,26 @@ export default {
3536
async show (payload) { // accepts blueprints, snapshots and libraries
3637
// If there is no flows property, but there is a category property, we assume this is a blueprint
3738
// and try to load the content dynamically
38-
if (!payload.flows && Object.hasOwn(payload, 'category')) {
39-
const blueprint = await BlueprintAPI.getFlowBlueprint(payload.id)
40-
payload.flows = blueprint.flows
41-
}
42-
this.mode = 'view'
43-
this.$refs.dialog.show()
44-
this.payload = payload
45-
setTimeout(() => {
46-
this.renderFlows()
47-
}, 20)
39+
this.visible = true
40+
this.$nextTick(async () => {
41+
if (!payload.flows && Object.hasOwn(payload, 'category')) {
42+
const blueprint = await BlueprintAPI.getFlowBlueprint(payload.id)
43+
payload.flows = blueprint.flows
44+
}
45+
this.mode = 'view'
46+
this.$refs.dialog.show()
47+
this.payload = payload
48+
setTimeout(() => {
49+
this.renderFlows()
50+
}, 20)
51+
})
4852
}
4953
}
5054
},
5155
data () {
5256
return {
53-
payload: []
57+
payload: [],
58+
visible: false
5459
}
5560
},
5661
computed: {
@@ -73,6 +78,7 @@ export default {
7378
methods: {
7479
confirm () {
7580
this.$refs.dialog.close()
81+
this.visible = false
7682
},
7783
renderFlows () {
7884
const flowRenderer = new FlowRenderer()

‎frontend/src/ui-components/components/DialogBox.vue‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
<template>
2-
<div
3-
ref="container"
4-
class="ff-dialog-container"
5-
:class="'ff-dialog-container--' + (open ? 'open' : 'closed')"
6-
data-click-exclude="right-drawer"
7-
>
8-
<div class="ff-dialog-box" :class="boxClass">
9-
<div class="ff-dialog-header" data-sentry-unmask>
10-
{{ header }}
11-
<span v-if="subHeader" class="ff-dialog-subheader">{{ subHeader }}</span>
12-
</div>
13-
<div ref="content" class="ff-dialog-content" :class="contentClass">
14-
<slot></slot>
15-
</div>
16-
<div class="ff-dialog-actions">
17-
<slot name="actions">
18-
<ff-button v-if="canBeCanceled" kind="secondary" data-action="dialog-cancel" @click="cancel()">{{ cancelLabel }}</ff-button>
19-
<ff-button :kind="kind" data-action="dialog-confirm" :disabled="disablePrimary" @click="confirm()">{{ confirmLabel }}</ff-button>
20-
</slot>
2+
<Teleport to="body">
3+
<div
4+
ref="container"
5+
class="ff-dialog-container"
6+
:class="'ff-dialog-container--' + (open ? 'open' : 'closed')"
7+
data-click-exclude="right-drawer"
8+
v-bind="$attrs"
9+
>
10+
<div class="ff-dialog-box" :class="boxClass">
11+
<div class="ff-dialog-header" data-sentry-unmask>
12+
{{ header }}
13+
<span v-if="subHeader" class="ff-dialog-subheader">{{ subHeader }}</span>
14+
</div>
15+
<div ref="content" class="ff-dialog-content" :class="contentClass">
16+
<slot></slot>
17+
</div>
18+
<div class="ff-dialog-actions">
19+
<slot name="actions">
20+
<ff-button v-if="canBeCanceled" kind="secondary" data-action="dialog-cancel" @click="cancel()">{{ cancelLabel }}</ff-button>
21+
<ff-button :kind="kind" data-action="dialog-confirm" :disabled="disablePrimary" @click="confirm()">{{ confirmLabel }}</ff-button>
22+
</slot>
23+
</div>
2124
</div>
2225
</div>
23-
</div>
26+
</Teleport>
2427
</template>
2528

2629
<script>
2730
export default {
2831
name: 'ff-dialog',
32+
inheritAttrs: false,
2933
props: {
3034
header: {
3135
type: String,

‎test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -164,14 +164,13 @@ describe('FlowFuse - Blueprints', () => {
164164

165165
cy.wait('@getFlowBlueprints')
166166

167-
cy.get('[data-el="flow-view-dialog"]').should('not.be.visible')
168-
169-
cy.get('[data-el="blueprint-tile"]').each(($div) => cy.wrap($div).within(() => {
170-
cy.get('[data-action="show-blueprint"]').click()
171-
cy.get('[data-el="flow-view-dialog"]').should('be.visible')
172-
cy.get('[data-action="dialog-confirm"]').click()
173-
cy.get('[data-el="flow-view-dialog"]').should('not.be.visible')
174-
}))
167+
cy.get('[data-el="blueprint-tile"]').each(($tile) => {
168+
cy.get('[data-el="flow-view-dialog"]').should('not.exist')
169+
cy.wrap($tile).within(() => cy.get('[data-action="show-blueprint"]').click())
170+
cy.get('[data-el="flow-view-dialog"]').should('exist')
171+
cy.get('[data-el="flow-view-dialog"] [data-action="dialog-confirm"]').click()
172+
cy.get('[data-el="flow-view-dialog"]').should('not.exist')
173+
})
175174
})
176175

177176
it('can export blueprints', () => {

‎test/e2e/frontend/cypress/tests-ee/instances/version-history/timeline.spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ describe('FlowFuse - Version History', () => {
151151

152152
// it can view restored snapshots
153153
cy.intercept('GET', '/api/v1/snapshots/*/full', fullSnapshot).as('getSnapshot')
154-
cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
154+
cy.get('[data-el="dialog-view-snapshot"]').should('not.exist')
155155
cy.contains('Auto Snapshot - 2024-10-16 10:59:38').click()
156156
cy.wait('@getSnapshot')
157157
cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
@@ -160,7 +160,7 @@ describe('FlowFuse - Version History', () => {
160160
})
161161

162162
// it can view the pipeline deployed snapshot
163-
cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
163+
cy.get('[data-el="dialog-view-snapshot"]').should('not.exist')
164164
cy.get('[data-el="timeline-list"]')
165165
.contains('Tatooine CNC Shop Snapshot deployed from instance-1-1')
166166
.within(() => {
@@ -181,7 +181,7 @@ describe('FlowFuse - Version History', () => {
181181
cy.go('back')
182182

183183
// it can view created snapshots
184-
cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
184+
cy.get('[data-el="dialog-view-snapshot"]').should('not.exist')
185185
cy.get('[data-el="timeline-list"]')
186186
.contains('Snapshot Captured: Auto Snapshot - 2024-10-18 12:41:28')
187187
.within(() => {
@@ -203,7 +203,7 @@ describe('FlowFuse - Version History', () => {
203203
})
204204

205205
// it can view manually imported snapshots
206-
cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
206+
cy.get('[data-el="dialog-view-snapshot"]').should('not.exist')
207207
cy.get('[data-el="timeline-list"]')
208208
.contains('Imported Tatooine CNC Shop snapshot')
209209
.within(() => {

‎test/e2e/frontend/cypress/tests-ee/team/library.spec.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -134,26 +134,30 @@ describe('FlowFuse - Library', () => {
134134
interceptBlueprints(multipleBlueprints)
135135

136136
cy.get('[data-el="ff-tab"]').contains('Blueprints').click()
137-
cy.get('[data-el="flow-view-dialog"]').should('exist').should('not.be.visible')
137+
cy.get('[data-el="flow-view-dialog"]').should('not.exist')
138138

139139
cy.get('[data-el="1"]').within(() => {
140-
cy.get('[data-action="show-blueprint"]').should('exist').should('be.visible').click()
141-
cy.get('[data-el="flow-view-dialog"]').should('be.visible')
142-
cy.get('[data-action="dialog-confirm"]').click()
143-
cy.get('[data-el="flow-view-dialog"]').should('exist').should('not.be.visible')
140+
cy.get('[data-action="show-blueprint"]').should('exist').should('exist').click()
144141
})
142+
cy.get('[data-el="flow-view-dialog"]').should('exist')
143+
cy.get('[data-el="flow-view-dialog"] [data-action="dialog-confirm"]').click()
144+
cy.get('[data-el="flow-view-dialog"]').should('not.exist')
145+
145146
cy.get('[data-el="2"]').within(() => {
146-
cy.get('[data-action="show-blueprint"]').should('exist').should('be.visible').click()
147-
cy.get('[data-el="flow-view-dialog"]').should('be.visible')
148-
cy.get('[data-action="dialog-confirm"]').click()
149-
cy.get('[data-el="flow-view-dialog"]').should('exist').should('not.be.visible')
147+
cy.get('[data-action="show-blueprint"]').should('exist').should('exist').click()
150148
})
149+
cy.get('[data-el="flow-view-dialog"]').should('exist')
150+
151+
cy.get('[data-el="flow-view-dialog"] [data-action="dialog-confirm"]').click()
152+
cy.get('[data-el="flow-view-dialog"]').should('not.exist')
153+
151154
cy.get('[data-el="3"]').within(() => {
152-
cy.get('[data-action="show-blueprint"]').should('exist').should('be.visible').click()
153-
cy.get('[data-el="flow-view-dialog"]').should('be.visible')
154-
cy.get('[data-action="dialog-confirm"]').click()
155-
cy.get('[data-el="flow-view-dialog"]').should('exist').should('not.be.visible')
155+
cy.get('[data-action="show-blueprint"]').should('exist').should('exist').click()
156156
})
157+
158+
cy.get('[data-el="flow-view-dialog"]').should('exist')
159+
cy.get('[data-el="flow-view-dialog"] [data-action="dialog-confirm"]').click()
160+
cy.get('[data-el="flow-view-dialog"]').should('not.exist')
157161
})
158162
})
159163

0 commit comments

Comments
 (0)