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 <[email protected]>
nasa · Aug 7, 2023 · 6a9ff91 · 6a9ff91
1 parent accfbc9
commit 6a9ff91
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -173,7 +173,7 @@ export default {
     this.setOffsets();
     document.addEventListener('click', this.hide);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('click', this.hide);
   },
   methods: {