Merge branch 'master' into composables-for-edit

- TODO: Replace all usage

.cspell.json

@@ -492,7 +492,9 @@
     "gcov",
     "WCAG",
     "stackedplot",
-    "Andale"
+    "Andale",
+    "composables",
+    "composable"
   ],
   "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"],
   "ignorePaths": [

src/plugins/charts/bar/inspector/BarGraphOptions.vue

@@ -130,8 +130,11 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+
 import ColorPalette from '@/ui/color/ColorPalette';
 
+import { useIsEditing } from '../../../../ui/composables/editing';
 import SeriesOptions from './SeriesOptions.vue';
 
 export default {
@@ -139,6 +142,14 @@ export default {
     SeriesOptions
   },
   inject: ['openmct', 'domainObject'],
+  setup() {
+    const openmct = inject('openmct');
+    const { isEditing } = useIsEditing(openmct);
+
+    return {
+      isEditing
+    };
+  },
   data() {
     return {
       xKey: this.domainObject.configuration.axes.xKey,
@@ -148,34 +159,23 @@ export default {
       plotSeries: [],
       yKeyOptions: [],
       xKeyOptions: [],
-      isEditing: this.openmct.editor.isEditing(),
       colorPalette: this.colorPalette,
       useInterpolation: this.domainObject.configuration.useInterpolation,
       useBar: this.domainObject.configuration.useBar
     };
   },
-  computed: {
-    canEdit() {
-      return this.isEditing && !this.domainObject.locked;
-    }
-  },
   beforeMount() {
     this.colorPalette = new ColorPalette();
   },
   mounted() {
-    this.openmct.editor.on('isEditing', this.setEditState);
     this.composition = this.openmct.composition.get(this.domainObject);
     this.registerListeners();
     this.composition.load();
   },
   beforeUnmount() {
-    this.openmct.editor.off('isEditing', this.setEditState);
     this.stopListening();
   },
   methods: {
-    setEditState(isEditing) {
-      this.isEditing = isEditing;
-    },
     registerListeners() {
       this.composition.on('add', this.addSeries);
       this.composition.on('remove', this.removeSeries);

src/plugins/charts/scatter/inspector/PlotOptions.vue

@@ -31,6 +31,9 @@
 </template>
 
 <script>
+import { computed, inject } from 'vue';
+
+import { useIsEditing } from '../../../../ui/composables/editing';
 import PlotOptionsBrowse from './PlotOptionsBrowse.vue';
 import PlotOptionsEdit from './PlotOptionsEdit.vue';
 export default {
@@ -38,27 +41,17 @@ export default {
     PlotOptionsBrowse,
     PlotOptionsEdit
   },
-  inject: ['openmct', 'domainObject'],
-  data() {
+  setup() {
+    const openmct = inject('openmct');
+    const domainObject = inject('domainObject');
+    const { isEditing } = useIsEditing(openmct);
+    const canEdit = computed(() => {
+      return isEditing.value && !domainObject.locked;
+    });
     return {
-      isEditing: this.openmct.editor.isEditing()
+      isEditing,
+      canEdit
     };
-  },
-  computed: {
-    canEdit() {
-      return this.isEditing && !this.domainObject.locked;
-    }
-  },
-  mounted() {
-    this.openmct.editor.on('isEditing', this.setEditState);
-  },
-  beforeUnmount() {
-    this.openmct.editor.off('isEditing', this.setEditState);
-  },
-  methods: {
-    setEditState(isEditing) {
-      this.isEditing = isEditing;
-    }
   }
 };
 </script>

src/plugins/condition/components/inspector/StylesView.vue

@@ -135,6 +135,8 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+
 import ConditionDescription from '@/plugins/condition/components/ConditionDescription.vue';
 import ConditionError from '@/plugins/condition/components/ConditionError.vue';
 import {
@@ -144,6 +146,7 @@ import {
 } from '@/plugins/condition/utils/styleUtils';
 import PreviewAction from '@/ui/preview/PreviewAction.js';
 
+import { useIsEditing } from '../../../../ui/composables/editing';
 import FontStyleEditor from '../../../inspectorViews/styles/FontStyleEditor.vue';
 import StyleEditor from './StyleEditor.vue';
 
@@ -160,10 +163,16 @@ export default {
     ConditionDescription
   },
   inject: ['openmct', 'selection', 'stylesManager'],
+  setup() {
+    const openmct = inject('openmct');
+    const { isEditing } = useIsEditing(openmct);
+    return {
+      isEditing
+    };
+  },
   data() {
     return {
       staticStyle: undefined,
-      isEditing: this.openmct.editor.isEditing(),
       mixedStyles: [],
       isStaticAndConditionalStyles: false,
       conditionalStyles: [],
@@ -231,6 +240,20 @@ export default {
       return this.styleableFontItems.length && this.allowEditing;
     }
   },
+  watch: {
+    isEditing(isEditing) {
+      if (isEditing) {
+        if (this.stopProvidingTelemetry) {
+          this.stopProvidingTelemetry();
+          delete this.stopProvidingTelemetry;
+        }
+      } else {
+        //reset the selectedConditionID so that the condition set computation can drive it.
+        this.applySelectedConditionStyle('');
+        this.subscribeToConditionSet();
+      }
+    }
+  },
   unmounted() {
     this.removeListeners();
     this.openmct.editor.off('isEditing', this.setEditState);
@@ -255,7 +278,6 @@ export default {
 
     this.setConsolidatedFontStyle();
 
-    this.openmct.editor.on('isEditing', this.setEditState);
     this.stylesManager.on('styleSelected', this.applyStyleToSelection);
   },
   methods: {
@@ -297,19 +319,6 @@ export default {
 
       return objectStyles;
     },
-    setEditState(isEditing) {
-      this.isEditing = isEditing;
-      if (this.isEditing) {
-        if (this.stopProvidingTelemetry) {
-          this.stopProvidingTelemetry();
-          delete this.stopProvidingTelemetry;
-        }
-      } else {
-        //reset the selectedConditionID so that the condition set computation can drive it.
-        this.applySelectedConditionStyle('');
-        this.subscribeToConditionSet();
-      }
-    },
     enableConditionSetNav() {
       this.openmct.objects
         .getOriginalPath(this.conditionSetDomainObject.identifier)
@@ -320,7 +329,7 @@ export default {
     },
     navigateOrPreview(event) {
       // If editing, display condition set in Preview overlay; otherwise nav to it while browsing
-      if (this.openmct.editor.isEditing()) {
+      if (this.isEditing) {
         event.preventDefault();
         this.previewAction.invoke(this.objectPath);
       } else {

src/plugins/condition/pluginSpec.js

@@ -257,7 +257,6 @@ describe('the plugin', function () {
 
       return nextTick().then(() => {
         styleViewComponentObject = component.$refs.root;
-        styleViewComponentObject.setEditState(true);
       });
     });
 
@@ -396,7 +395,7 @@ describe('the plugin', function () {
       }
     };
 
-    beforeEach(() => {
+    beforeEach(async () => {
       displayLayoutItem = {
         composition: [],
         configuration: {
@@ -564,6 +563,7 @@ describe('the plugin', function () {
         ]
       ];
       let viewContainer = document.createElement('div');
+      openmct.editor.isEditing = jasmine.createSpy().and.returnValue(true);
       child.append(viewContainer);
       const { vNode, destroy } = mount({
         components: {
@@ -580,10 +580,8 @@ describe('the plugin', function () {
       component = vNode.componentInstance;
       _destroy = destroy;
 
-      return nextTick().then(() => {
-        styleViewComponentObject = component.$refs.root;
-        styleViewComponentObject.setEditState(true);
-      });
+      await nextTick();
+      styleViewComponentObject = component.$refs.root;
     });
 
     afterEach(() => {

src/ui/color/ColorSwatch.vue

@@ -59,10 +59,13 @@
 </template>
 
 <script>
+import { computed, inject } from 'vue';
+
+import { useIsEditing } from '../../ui/composables/editing.js';
 import ColorPalette from './ColorPalette.js';
 
 export default {
-  inject: ['openmct', 'domainObject'],
+  inject: ['domainObject'],
   props: {
     currentColor: {
       type: String,
@@ -90,26 +93,28 @@ export default {
     }
   },
   emits: ['color-set'],
+  setup() {
+    const openmct = inject('openmct');
+    const domainObject = inject('domainObject');
+    const isEditing = useIsEditing(openmct);
+    const canEdit = computed(() => {
+      return isEditing.value && !domainObject.locked;
+    });
+    return {
+      isEditing,
+      canEdit
+    };
+  },
   data() {
     return {
       swatchActive: false,
-      colorPaletteGroups: [],
-      isEditing: this.openmct.editor.isEditing()
+      colorPaletteGroups: []
     };
   },
-  computed: {
-    canEdit() {
-      return this.isEditing && !this.domainObject.locked;
-    }
-  },
   mounted() {
     this.colorPalette = new ColorPalette();
-    this.openmct.editor.on('isEditing', this.setEditState);
     this.initialize();
   },
-  beforeUnmount() {
-    this.openmct.editor.off('isEditing', this.setEditState);
-  },
   methods: {
     initialize() {
       const colorPaletteGroups = this.colorPalette.groups();
@@ -124,9 +129,6 @@ export default {
       });
       this.colorPaletteGroups = colorPaletteGroups;
     },
-    setEditState(isEditing) {
-      this.isEditing = isEditing;
-    },
     setColor(chosenColor) {
       this.$emit('color-set', chosenColor);
     },

src/ui/composables/editing.js

@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { ref } from 'vue';
+
+import { useEventEmitter } from './event.js';
+
+/**
+ * Provides a reactive `isEditing` property that reflects the current editing state of the
+ * application.
+ * @param {OpenMCT} openmct the open mct api
+ * @returns {{
+ *  isEditing: import('vue').Ref<boolean>
+ * }}
+ */
+export function useIsEditing(openmct) {
+  const isEditing = ref(openmct.editor.isEditing());
+
+  useEventEmitter(openmct.editor, 'isEditing', (_isEditing) => {
+    isEditing.value = _isEditing;
+  });
+
+  return { isEditing };
+}

src/ui/composables/event.js

@@ -0,0 +1,49 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeMount, onBeforeUnmount, onMounted } from 'vue';
+
+/**
+ * Registers an event listener on the specified target and automatically removes it when the
+ * component is unmounted.
+ * This is a Vue composition API utility function.
+ * @param {EventTarget} target - The target to attach the event listener to.
+ * @param {string} event - The name of the event to listen for.
+ * @param {Function} callback - The callback function to execute when the event is triggered.
+ */
+export function useEventListener(target, event, callback) {
+  onMounted(() => target.addEventListener(event, callback));
+  onBeforeUnmount(() => target.removeEventListener(event, callback));
+}
+
+/**
+ * Registers an event listener on the specified EventEmitter instance and automatically removes it
+ * when the component is unmounted.
+ * This is a Vue composition API utility function.
+ * @param {import('eventemitter3').EventEmitter} emitter - The EventEmitter instance to attach the event listener to.
+ * @param {string} event - The name of the event to listen for.
+ * @param {Function} callback - The callback function to execute when the event is triggered.
+ */
+export function useEventEmitter(emitter, event, callback) {
+  onBeforeMount(() => emitter.on(event, callback));
+  onBeforeUnmount(() => emitter.off(event, callback));
+}

src/ui/layout/AppLayout.vue

@@ -155,6 +155,9 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+
+import { useIsEditing } from '../../ui/composables/editing.js';
 import ObjectView from '../components/ObjectView.vue';
 import Inspector from '../inspector/InspectorPanel.vue';
 import Toolbar from '../toolbar/ToolbarContainer.vue';
@@ -186,7 +189,14 @@ export default {
     RecentObjectsList
   },
   inject: ['openmct'],
-  data: function () {
+  setup() {
+    const openmct = inject('openmct');
+    const { isEditing } = useIsEditing(openmct);
+    return {
+      isEditing
+    };
+  },
+  data() {
     let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
     let headExpanded = true;
     if (storedHeadProps) {
@@ -196,7 +206,6 @@ export default {
     return {
       fullScreen: false,
       conductorComponent: undefined,
-      isEditing: false,
       hasToolbar: false,
       actionCollection: undefined,
       triggerSync: false,
@@ -215,10 +224,6 @@ export default {
     }
   },
   mounted() {
-    this.openmct.editor.on('isEditing', (isEditing) => {
-      this.isEditing = isEditing;
-    });
-
     this.openmct.selection.on('change', this.toggleHasToolbar);
   },
   methods: {

src/ui/layout/BrowseBar.vue

@@ -141,13 +141,14 @@
 </template>
 
 <script>
-import { toRaw } from 'vue';
+import { inject, toRaw } from 'vue';
 
 import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 import IndependentTimeConductor from '@/plugins/timeConductor/independent/IndependentTimeConductor.vue';
 
 import tooltipHelpers from '../../api/tooltips/tooltipMixins.js';
 import { SupportedViewTypes } from '../../utils/constants.js';
+import { useIsEditing } from '../composables/editing.js';
 import ViewSwitcher from './ViewSwitcher.vue';
 
 const PLACEHOLDER_OBJECT = {};
@@ -168,14 +169,20 @@ export default {
       }
     }
   },
-  data: function () {
+  setup() {
+    const openmct = inject('openmct');
+    const { isEditing } = useIsEditing(openmct);
+    return {
+      isEditing
+    };
+  },
+  data() {
     return {
       notebookTypes: [],
       showViewMenu: false,
       showSaveMenu: false,
       domainObject: PLACEHOLDER_OBJECT,
       viewKey: undefined,
-      isEditing: this.openmct.editor.isEditing(),
       notebookEnabled: this.openmct.types.get('notebook'),
       statusBarItems: [],
       status: ''
@@ -273,14 +280,10 @@ export default {
       this.updateActionItems(this.actionCollection.getActionsObject());
     }
   },
-  mounted: function () {
+  mounted() {
     document.addEventListener('click', this.closeViewAndSaveMenu);
     this.promptUserbeforeNavigatingAway = this.promptUserbeforeNavigatingAway.bind(this);
     window.addEventListener('beforeunload', this.promptUserbeforeNavigatingAway);
-
-    this.openmct.editor.on('isEditing', (isEditing) => {
-      this.isEditing = isEditing;
-    });
   },
   beforeUnmount: function () {
     if (this.mutationObserver) {
@@ -352,7 +355,7 @@ export default {
       });
     },
     promptUserbeforeNavigatingAway(event) {
-      if (this.openmct.editor.isEditing()) {
+      if (this.isEditing) {
         event.preventDefault();
         event.returnValue = '';
       }

src/ui/toolbar/components/ToolbarColorPicker.vue

@@ -32,7 +32,7 @@
         class="c-swatch"
         :style="{ background: options.value }"
         role="img"
-        :aria-label="None"
+        aria-label="None"
       ></div>
     </button>
     <div v-if="open" class="c-menu c-palette c-palette--color">