From 6a9ff91d93c38856e96cbfea5042ba5ad996c44a Mon Sep 17 00:00:00 2001 From: Shefali Joshi Date: Mon, 7 Aug 2023 16:19:13 -0700 Subject: [PATCH] Dismiss the independent time conductor popup on unmount (#6859) * Don't set conductor popup to null unless the view is being destroyed * Replace beforeDestroy with beforeUnmount * Propagate plot tick widths to timeline view * Check if conductor popup exists before trying to remove it from the dom * Fix imagery e2e test * Revert accidental commit --------- Co-authored-by: Jesse Mazzella --- .../plugins/imagery/exampleImagery.e2e.spec.js | 2 +- src/plugins/timeConductor/ConductorAxis.vue | 2 +- src/plugins/timeConductor/ConductorHistory.vue | 2 +- src/plugins/timeConductor/ConductorPopUp.vue | 2 +- .../independent/IndependentClock.vue | 2 +- .../independentTimeConductorPopUpManager.js | 17 +++++++---------- src/plugins/timeConductor/timePopupFixed.vue | 2 +- src/plugins/timeConductor/timePopupRealtime.vue | 2 +- 8 files changed, 14 insertions(+), 17 deletions(-) diff --git a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js index 36b804dcfc..09e0c083d4 100644 --- a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js +++ b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js @@ -97,7 +97,7 @@ test.describe('Example Imagery Object', () => { await page.keyboard.press('Enter'); // check image date - await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible(); + await expect(page.getByText('2021-12-30 01:01:00.000Z').first()).toBeVisible(); // flip it off await page.getByRole('switch', { name: 'Disable Independent Time Conductor' }).click(); diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue index dc9fbf636b..722a242703 100644 --- a/src/plugins/timeConductor/ConductorAxis.vue +++ b/src/plugins/timeConductor/ConductorAxis.vue @@ -92,7 +92,7 @@ export default { this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setViewFromTimeSystem); this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL); }, - beforeDestroy() { + beforeUnmount() { clearInterval(this.resizeTimer); }, methods: { diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue index c2d4910071..ef2080b167 100644 --- a/src/plugins/timeConductor/ConductorHistory.vue +++ b/src/plugins/timeConductor/ConductorHistory.vue @@ -102,7 +102,7 @@ export default { this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.updateTimeSystem); this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.updateMode); }, - beforeDestroy() { + beforeUnmount() { this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, this.addTimespan); this.openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.addTimespan); this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.updateTimeSystem); diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue index ef356f318d..6029946d54 100644 --- a/src/plugins/timeConductor/ConductorPopUp.vue +++ b/src/plugins/timeConductor/ConductorPopUp.vue @@ -184,7 +184,7 @@ export default { this.$emit('popupLoaded'); this.setTimeContext(); }, - beforeDestroy() { + beforeUnmount() { this.stopFollowingTimeContext(); }, methods: { diff --git a/src/plugins/timeConductor/independent/IndependentClock.vue b/src/plugins/timeConductor/independent/IndependentClock.vue index 58dd5e71f9..d1ffdc1d8a 100644 --- a/src/plugins/timeConductor/independent/IndependentClock.vue +++ b/src/plugins/timeConductor/independent/IndependentClock.vue @@ -75,7 +75,7 @@ export default { } } }, - beforeDestroy() { + beforeUnmount() { this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock); }, mounted: function () { diff --git a/src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js b/src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js index d61c4bb336..bfe0c3dd1b 100644 --- a/src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js +++ b/src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js @@ -31,14 +31,17 @@ export default { conductorPopup: null }; }, + beforeUnmount() { + if (this.conductorPopup && this.conductorPopup.parentNode === document.body) { + document.body.removeChild(this.conductorPopup); + this.conductorPopup = null; + } + }, mounted() { this.positionBox = debounce(raf(this.positionBox), 250); this.timeConductorOptionsHolder = this.$el; this.timeConductorOptionsHolder.addEventListener('click', this.showPopup); }, - beforeDestroy() { - this.clearPopup(); - }, methods: { initializePopup() { this.conductorPopup = this.$refs.conductorPopup.$el; @@ -60,12 +63,7 @@ export default { // itc toggled, // something is emitting a dupe event with pointer id = -1, want to ignore those // itc is currently enabled - if ( - !this.conductorPopup && - !isToggle && - clickEvent.pointerId !== -1 && - this.independentTCEnabled - ) { + if (!isToggle && clickEvent.pointerId !== -1 && this.independentTCEnabled) { this.showConductorPopup = true; } }, @@ -101,7 +99,6 @@ export default { return; } this.showConductorPopup = false; - this.conductorPopup = null; this.positionX = -10000; // reset it off screan document.removeEventListener('click', this.handleClickAway); diff --git a/src/plugins/timeConductor/timePopupFixed.vue b/src/plugins/timeConductor/timePopupFixed.vue index c072e8f108..862b959512 100644 --- a/src/plugins/timeConductor/timePopupFixed.vue +++ b/src/plugins/timeConductor/timePopupFixed.vue @@ -157,7 +157,7 @@ export default { this.handleNewBounds = _.throttle(this.handleNewBounds, 300); this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem()))); }, - beforeDestroy() { + beforeUnmount() { this.clearAllValidation(); }, methods: { diff --git a/src/plugins/timeConductor/timePopupRealtime.vue b/src/plugins/timeConductor/timePopupRealtime.vue index 8b6545c02d..6c7be6b440 100644 --- a/src/plugins/timeConductor/timePopupRealtime.vue +++ b/src/plugins/timeConductor/timePopupRealtime.vue @@ -173,7 +173,7 @@ export default { this.setOffsets(); document.addEventListener('click', this.hide); }, - beforeDestroy() { + beforeUnmount() { document.removeEventListener('click', this.hide); }, methods: {