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 <ozyx@users.noreply.github.com>

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();

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: {

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);

src/plugins/timeConductor/ConductorPopUp.vue

@@ -184,7 +184,7 @@ export default {
     this.$emit('popupLoaded');
     this.setTimeContext();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.stopFollowingTimeContext();
   },
   methods: {

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 () {

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);

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: {

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: {