feat: programmatically disable create button via API events

src/ui/composables/editor.js

@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+
+import { useEventListener } from './event';
+
+/**
+ * @param {import('../../../openmct').OpenMCT} openmct
+ * @returns {{isEditing: import('vue').Ref<boolean>}} isEditing
+ */
+export function useIsEditing(openmct) {
+  const isEditing = ref(false);
+
+  // eslint-disable-next-line func-style
+  const handler = (value) => (isEditing.value = value);
+
+  // Use the base event listener composable
+  useEventListener(openmct.editor, 'isEditing', handler);
+
+  return { isEditing };
+}

src/ui/composables/event.js

@@ -0,0 +1,18 @@
+import { onBeforeMount, onBeforeUnmount } from 'vue';
+
+/**
+ * @param {*} api the specific openmct API to use i.e. openmct.editor
+ * @param {string} eventName
+ * @param {() => void} handler
+ */
+export function useEventListener(api, eventName, handler) {
+  onBeforeMount(() => {
+    // Add the event listener before the component is mounted
+    api.on(eventName, handler);
+  });
+
+  onBeforeUnmount(() => {
+    // Remove the event listener before the component is unmounted
+    api.off(eventName, handler);
+  });
+}

src/ui/layout/CreateButton.vue

@@ -23,6 +23,7 @@
   <div ref="createButton" class="c-create-button--w">
     <button
       class="c-create-button c-button--menu c-button--major icon-plus"
+      :disabled="isEditing"
       @click.prevent.stop="showCreateMenu"
     >
       <span class="c-button__label">Create</span>
@@ -31,10 +32,19 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+
 import CreateAction from '@/plugins/formActions/CreateAction';
 
+import { useIsEditing } from '../composables/editor';
+
 export default {
   inject: ['openmct'],
+  setup() {
+    const openmct = inject('openmct');
+    const { isEditing } = useIsEditing(openmct);
+    return { isEditing };
+  },
   data: function () {
     return {
       menuItems: {},