Three Dot Menu Prototype (#3325)

* Three dot menu implementation

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>

src/api/actions/ActionCollection.js

@@ -0,0 +1,189 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+class ActionCollection extends EventEmitter {
+    constructor(applicableActions, objectPath, view, openmct, skipEnvironmentObservers) {
+        super();
+
+        this.applicableActions = applicableActions;
+        this.openmct = openmct;
+        this.objectPath = objectPath;
+        this.view = view;
+        this.skipEnvironmentObservers = skipEnvironmentObservers;
+        this.objectUnsubscribes = [];
+
+        let debounceOptions = {
+            leading: false,
+            trailing: true
+        };
+
+        this._updateActions = _.debounce(this._updateActions.bind(this), 150, debounceOptions);
+        this._update = _.debounce(this._update.bind(this), 150, debounceOptions);
+
+        if (!skipEnvironmentObservers) {
+            this._observeObjectPath();
+            this.openmct.editor.on('isEditing', this._updateActions);
+        }
+
+        this._initializeActions();
+    }
+
+    disable(actionKeys) {
+        actionKeys.forEach(actionKey => {
+            if (this.applicableActions[actionKey]) {
+                this.applicableActions[actionKey].isDisabled = true;
+            }
+        });
+        this._update();
+    }
+
+    enable(actionKeys) {
+        actionKeys.forEach(actionKey => {
+            if (this.applicableActions[actionKey]) {
+                this.applicableActions[actionKey].isDisabled = false;
+            }
+        });
+        this._update();
+    }
+
+    hide(actionKeys) {
+        actionKeys.forEach(actionKey => {
+            if (this.applicableActions[actionKey]) {
+                this.applicableActions[actionKey].isHidden = true;
+            }
+        });
+        this._update();
+    }
+
+    show(actionKeys) {
+        actionKeys.forEach(actionKey => {
+            if (this.applicableActions[actionKey]) {
+                this.applicableActions[actionKey].isHidden = false;
+            }
+        });
+        this._update();
+    }
+
+    destroy() {
+        super.removeAllListeners();
+
+        if (!this.skipEnvironmentObservers) {
+            this.objectUnsubscribes.forEach(unsubscribe => {
+                unsubscribe();
+            });
+
+            this.openmct.editor.off('isEditing', this._updateActions);
+        }
+
+        this.emit('destroy', this.view);
+    }
+
+    getVisibleActions() {
+        let actionsArray = Object.keys(this.applicableActions);
+        let visibleActions = [];
+
+        actionsArray.forEach(actionKey => {
+            let action = this.applicableActions[actionKey];
+
+            if (!action.isHidden) {
+                visibleActions.push(action);
+            }
+        });
+
+        return visibleActions;
+    }
+
+    getStatusBarActions() {
+        let actionsArray = Object.keys(this.applicableActions);
+        let statusBarActions = [];
+
+        actionsArray.forEach(actionKey => {
+            let action = this.applicableActions[actionKey];
+
+            if (action.showInStatusBar && !action.isDisabled && !action.isHidden) {
+                statusBarActions.push(action);
+            }
+        });
+
+        return statusBarActions;
+    }
+
+    getActionsObject() {
+        return this.applicableActions;
+    }
+
+    _update() {
+        this.emit('update', this.applicableActions);
+    }
+
+    _observeObjectPath() {
+        let actionCollection = this;
+
+        function updateObject(oldObject, newObject) {
+            Object.assign(oldObject, newObject);
+
+            actionCollection._updateActions();
+        }
+
+        this.objectPath.forEach(object => {
+            if (object) {
+                let unsubscribe = this.openmct.objects.observe(object, '*', updateObject.bind(this, object));
+
+                this.objectUnsubscribes.push(unsubscribe);
+            }
+        });
+    }
+
+    _initializeActions() {
+        Object.keys(this.applicableActions).forEach(key => {
+            this.applicableActions[key].callBack = () => {
+                return this.applicableActions[key].invoke(this.objectPath, this.view);
+            };
+        });
+    }
+
+    _updateActions() {
+        let newApplicableActions = this.openmct.actions._applicableActions(this.objectPath, this.view);
+
+        this.applicableActions = this._mergeOldAndNewActions(this.applicableActions, newApplicableActions);
+        this._initializeActions();
+        this._update();
+    }
+
+    _mergeOldAndNewActions(oldActions, newActions) {
+        let mergedActions = {};
+        Object.keys(newActions).forEach(key => {
+            if (oldActions[key]) {
+                mergedActions[key] = oldActions[key];
+            } else {
+                mergedActions[key] = newActions[key];
+            }
+        });
+
+        return mergedActions;
+    }
+}
+
+export default ActionCollection;

src/api/actions/ActionsAPI.js

@@ -0,0 +1,144 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
+import ActionCollection from './ActionCollection';
+import _ from 'lodash';
+
+class ActionsAPI extends EventEmitter {
+    constructor(openmct) {
+        super();
+
+        this._allActions = {};
+        this._actionCollections = new WeakMap();
+        this._openmct = openmct;
+
+        this._groupOrder = ['windowing', 'undefined', 'view', 'action', 'json'];
+
+        this.register = this.register.bind(this);
+        this.get = this.get.bind(this);
+        this._applicableActions = this._applicableActions.bind(this);
+        this._updateCachedActionCollections = this._updateCachedActionCollections.bind(this);
+    }
+
+    register(actionDefinition) {
+        this._allActions[actionDefinition.key] = actionDefinition;
+    }
+
+    get(objectPath, view) {
+        if (view) {
+
+            return this._getCachedActionCollection(objectPath, view) || this._newActionCollection(objectPath, view, true);
+        } else {
+
+            return this._newActionCollection(objectPath, view, true);
+        }
+    }
+
+    updateGroupOrder(groupArray) {
+        this._groupOrder = groupArray;
+    }
+
+    _get(objectPath, view) {
+        let actionCollection = this._newActionCollection(objectPath, view);
+
+        this._actionCollections.set(view, actionCollection);
+        actionCollection.on('destroy', this._updateCachedActionCollections);
+
+        return actionCollection;
+    }
+
+    _getCachedActionCollection(objectPath, view) {
+        let cachedActionCollection = this._actionCollections.get(view);
+
+        return cachedActionCollection;
+    }
+
+    _newActionCollection(objectPath, view, skipEnvironmentObservers) {
+        let applicableActions = this._applicableActions(objectPath, view);
+
+        return new ActionCollection(applicableActions, objectPath, view, this._openmct, skipEnvironmentObservers);
+    }
+
+    _updateCachedActionCollections(key) {
+        if (this._actionCollections.has(key)) {
+            let actionCollection = this._actionCollections.get(key);
+            actionCollection.off('destroy', this._updateCachedActionCollections);
+
+            this._actionCollections.delete(key);
+        }
+    }
+
+    _applicableActions(objectPath, view) {
+        let actionsObject = {};
+
+        let keys = Object.keys(this._allActions).filter(key => {
+            let actionDefinition = this._allActions[key];
+
+            if (actionDefinition.appliesTo === undefined) {
+                return true;
+            } else {
+                return actionDefinition.appliesTo(objectPath, view);
+            }
+        });
+
+        keys.forEach(key => {
+            let action = _.clone(this._allActions[key]);
+
+            actionsObject[key] = action;
+        });
+
+        return actionsObject;
+    }
+
+    _groupAndSortActions(actionsArray) {
+        if (!Array.isArray(actionsArray) && typeof actionsArray === 'object') {
+            actionsArray = Object.keys(actionsArray).map(key => actionsArray[key]);
+        }
+
+        let actionsObject = {};
+        let groupedSortedActionsArray = [];
+
+        function sortDescending(a, b) {
+            return b.priority - a.priority;
+        }
+
+        actionsArray.forEach(action => {
+            if (actionsObject[action.group] === undefined) {
+                actionsObject[action.group] = [action];
+            } else {
+                actionsObject[action.group].push(action);
+            }
+        });
+
+        this._groupOrder.forEach(group => {
+            let groupArray = actionsObject[group];
+
+            if (groupArray) {
+                groupedSortedActionsArray.push(groupArray.sort(sortDescending));
+            }
+        });
+
+        return groupedSortedActionsArray;
+    }
+}
+
+export default ActionsAPI;

src/api/actions/ActionsAPISpec.js

@@ -0,0 +1,113 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 ActionsAPI from './ActionsAPI';
+import { createOpenMct, resetApplicationState } from '../../utils/testing';
+
+describe('The Actions API', () => {
+    let openmct;
+    let actionsAPI;
+    let mockAction;
+    let mockObjectPath;
+    let mockViewContext1;
+
+    beforeEach(() => {
+        openmct = createOpenMct();
+        actionsAPI = new ActionsAPI(openmct);
+        mockAction = {
+            name: 'Test Action',
+            key: 'test-action',
+            cssClass: 'test-action',
+            description: 'This is a test action',
+            group: 'action',
+            priority: 9,
+            appliesTo: (objectPath, view = {}) => {
+                if (view.getViewContext) {
+                    let viewContext = view.getViewContext();
+
+                    return viewContext.onlyAppliesToTestCase;
+                } else if (objectPath.length) {
+                    return objectPath[0].type === 'fake-folder';
+                }
+
+                return false;
+            },
+            invoke: () => {
+            }
+        };
+        mockObjectPath = [
+            {
+                name: 'mock folder',
+                type: 'fake-folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                }
+            },
+            {
+                name: 'mock parent folder',
+                type: 'fake-folder',
+                identifier: {
+                    key: 'mock-parent-folder',
+                    namespace: ''
+                }
+            }
+        ];
+        mockViewContext1 = {
+            getViewContext: () => {
+                return {
+                    onlyAppliesToTestCase: true
+                };
+            }
+        };
+    });
+
+    afterEach(() => {
+        resetApplicationState(openmct);
+    });
+
+    describe("register method", () => {
+        it("adds action to ActionsAPI", () => {
+            actionsAPI.register(mockAction);
+
+            let actionCollection = actionsAPI.get(mockObjectPath, mockViewContext1);
+            let action = actionCollection.getActionsObject()[mockAction.key];
+
+            expect(action.key).toEqual(mockAction.key);
+            expect(action.name).toEqual(mockAction.name);
+        });
+    });
+
+    describe("get method", () => {
+        beforeEach(() => {
+            actionsAPI.register(mockAction);
+        });
+
+        it("returns an object with relevant actions when invoked with objectPath only", () => {
+            let actionCollection = actionsAPI.get(mockObjectPath, mockViewContext1);
+            let action = actionCollection.getActionsObject()[mockAction.key];
+
+            expect(action.key).toEqual(mockAction.key);
+            expect(action.name).toEqual(mockAction.name);
+        });
+    });
+});

src/api/api.js

@@ -28,9 +28,10 @@ define([
     './telemetry/TelemetryAPI',
     './indicators/IndicatorAPI',
     './notifications/NotificationAPI',
-    './contextMenu/ContextMenuAPI',
-    './Editor'
-
+    './Editor',
+    './menu/MenuAPI',
+    './actions/ActionsAPI',
+    './status/StatusAPI'
 ], function (
     TimeAPI,
     ObjectAPI,
@@ -39,8 +40,10 @@ define([
     TelemetryAPI,
     IndicatorAPI,
     NotificationAPI,
-    ContextMenuAPI,
-    EditorAPI
+    EditorAPI,
+    MenuAPI,
+    ActionsAPI,
+    StatusAPI
 ) {
     return {
         TimeAPI: TimeAPI,
@@ -51,6 +54,8 @@ define([
         IndicatorAPI: IndicatorAPI,
         NotificationAPI: NotificationAPI.default,
         EditorAPI: EditorAPI,
-        ContextMenuRegistry: ContextMenuAPI.default
+        MenuAPI: MenuAPI.default,
+        ActionsAPI: ActionsAPI.default,
+        StatusAPI: StatusAPI.default
     };
 });

src/api/contextMenu/ContextMenu.vue

@@ -1,24 +0,0 @@
-<template>
-<div class="c-menu">
-    <ul>
-        <li
-            v-for="action in actions"
-            :key="action.name"
-            :class="action.cssClass"
-            :title="action.description"
-            @click="action.invoke(objectPath)"
-        >
-            {{ action.name }}
-        </li>
-        <li v-if="actions.length === 0">
-            No actions defined.
-        </li>
-    </ul>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['actions', 'objectPath']
-};
-</script>

src/api/contextMenu/ContextMenuAPI.js

@@ -1,159 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, 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 ContextMenuComponent from './ContextMenu.vue';
-import Vue from 'vue';
-
-/**
- * The ContextMenuAPI allows the addition of new context menu actions, and for the context menu to be launched from
- * custom HTML elements.
- * @interface ContextMenuAPI
- * @memberof module:openmct
- */
-class ContextMenuAPI {
-    constructor() {
-        this._allActions = [];
-        this._activeContextMenu = undefined;
-
-        this._hideActiveContextMenu = this._hideActiveContextMenu.bind(this);
-        this.registerAction = this.registerAction.bind(this);
-    }
-
-    /**
-     * Defines an item to be added to context menus. Allows specification of text, appearance, and behavior when
-     * selected. Applicabilioty can be restricted by specification of an `appliesTo` function.
-     *
-     * @interface ContextMenuAction
-     * @memberof module:openmct
-     * @property {string} name the human-readable name of this view
-     * @property {string} description a longer-form description (typically
-     *           a single sentence or short paragraph) of this kind of view
-     * @property {string} cssClass the CSS class to apply to labels for this
-     *           view (to add icons, for instance)
-     * @property {string} key unique key to identify the context menu action
-     *           (used in custom context menu eg table rows, to identify which actions to include)
-     * @property {boolean} hideInDefaultMenu optional flag to hide action from showing in the default context menu (tree item)
-     */
-    /**
-     * @method appliesTo
-     * @memberof module:openmct.ContextMenuAction#
-     * @param {DomainObject[]} objectPath the path of the object that the context menu has been invoked on.
-     * @returns {boolean} true if the action applies to the objects specified in the 'objectPath', otherwise false.
-     */
-    /**
-     * Code to be executed when the action is selected from a context menu
-     * @method invoke
-     * @memberof module:openmct.ContextMenuAction#
-     * @param {DomainObject[]} objectPath the path of the object to invoke the action on.
-     */
-    /**
-     * @param {ContextMenuAction} actionDefinition
-     */
-    registerAction(actionDefinition) {
-        this._allActions.push(actionDefinition);
-    }
-
-    /**
-     * @private
-     */
-    _showContextMenuForObjectPath(objectPath, x, y, actionsToBeIncluded) {
-
-        let applicableActions = this._allActions.filter((action) => {
-
-            if (actionsToBeIncluded) {
-                if (action.appliesTo === undefined && actionsToBeIncluded.includes(action.key)) {
-                    return true;
-                }
-
-                return action.appliesTo(objectPath, actionsToBeIncluded) && actionsToBeIncluded.includes(action.key);
-            } else {
-                if (action.appliesTo === undefined) {
-                    return true;
-                }
-
-                return action.appliesTo(objectPath) && !action.hideInDefaultMenu;
-            }
-        });
-
-        if (this._activeContextMenu) {
-            this._hideActiveContextMenu();
-        }
-
-        this._activeContextMenu = this._createContextMenuForObject(objectPath, applicableActions);
-        this._activeContextMenu.$mount();
-        document.body.appendChild(this._activeContextMenu.$el);
-
-        let position = this._calculatePopupPosition(x, y, this._activeContextMenu.$el);
-        this._activeContextMenu.$el.style.left = `${position.x}px`;
-        this._activeContextMenu.$el.style.top = `${position.y}px`;
-
-        document.addEventListener('click', this._hideActiveContextMenu);
-    }
-
-    /**
-     * @private
-     */
-    _calculatePopupPosition(eventPosX, eventPosY, menuElement) {
-        let menuDimensions = menuElement.getBoundingClientRect();
-        let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
-        let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
-
-        if (overflowX > 0) {
-            eventPosX = eventPosX - overflowX;
-        }
-
-        if (overflowY > 0) {
-            eventPosY = eventPosY - overflowY;
-        }
-
-        return {
-            x: eventPosX,
-            y: eventPosY
-        };
-    }
-    /**
-     * @private
-     */
-    _hideActiveContextMenu() {
-        document.removeEventListener('click', this._hideActiveContextMenu);
-        document.body.removeChild(this._activeContextMenu.$el);
-        this._activeContextMenu.$destroy();
-        this._activeContextMenu = undefined;
-    }
-
-    /**
-     * @private
-     */
-    _createContextMenuForObject(objectPath, actions) {
-        return new Vue({
-            components: {
-                ContextMenu: ContextMenuComponent
-            },
-            provide: {
-                actions: actions,
-                objectPath: objectPath
-            },
-            template: '<ContextMenu></ContextMenu>'
-        });
-    }
-}
-export default ContextMenuAPI;

src/api/menu/MenuAPI.js

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 Menu from './menu.js';
+
+/**
+ * The MenuAPI allows the addition of new context menu actions, and for the context menu to be launched from
+ * custom HTML elements.
+ * @interface MenuAPI
+ * @memberof module:openmct
+ */
+
+class MenuAPI {
+    constructor(openmct) {
+        this.openmct = openmct;
+
+        this.showMenu = this.showMenu.bind(this);
+        this._clearMenuComponent = this._clearMenuComponent.bind(this);
+        this._showObjectMenu = this._showObjectMenu.bind(this);
+    }
+
+    showMenu(x, y, actions) {
+        if (this.menuComponent) {
+            this.menuComponent.dismiss();
+        }
+
+        let options = {
+            x,
+            y,
+            actions
+        };
+
+        this.menuComponent = new Menu(options);
+        this.menuComponent.once('destroy', this._clearMenuComponent);
+    }
+
+    _clearMenuComponent() {
+        this.menuComponent = undefined;
+        delete this.menuComponent;
+    }
+
+    _showObjectMenu(objectPath, x, y, actionsToBeIncluded) {
+        let applicableActions = this.openmct.actions._groupedAndSortedObjectActions(objectPath, actionsToBeIncluded);
+
+        this.showMenu(x, y, applicableActions);
+    }
+}
+export default MenuAPI;

src/api/menu/MenuAPISpec.js

@@ -0,0 +1,125 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 MenuAPI from './MenuAPI';
+import Menu from './menu';
+import { createOpenMct, resetApplicationState } from '../../utils/testing';
+
+describe ('The Menu API', () => {
+    let openmct;
+    let menuAPI;
+    let actionsArray;
+    let x;
+    let y;
+    let result;
+
+    beforeEach(() => {
+        openmct = createOpenMct();
+        menuAPI = new MenuAPI(openmct);
+        actionsArray = [
+            {
+                name: 'Test Action 1',
+                cssClass: 'test-css-class-1',
+                description: 'This is a test action',
+                callBack: () => {
+                    result = 'Test Action 1 Invoked';
+                }
+            },
+            {
+                name: 'Test Action 2',
+                cssClass: 'test-css-class-2',
+                description: 'This is a test action',
+                callBack: () => {
+                    result = 'Test Action 2 Invoked';
+                }
+            }
+        ];
+        x = 8;
+        y = 16;
+    });
+
+    afterEach(() => {
+        resetApplicationState(openmct);
+    });
+
+    describe("showMenu method", () => {
+        it("creates an instance of Menu when invoked", () => {
+            menuAPI.showMenu(x, y, actionsArray);
+
+            expect(menuAPI.menuComponent).toBeInstanceOf(Menu);
+        });
+
+        describe("creates a menu component", () => {
+            let menuComponent;
+            let vueComponent;
+
+            beforeEach(() => {
+                menuAPI.showMenu(x, y, actionsArray);
+                vueComponent = menuAPI.menuComponent.component;
+                menuComponent = document.querySelector(".c-menu");
+
+                spyOn(vueComponent, '$destroy');
+            });
+
+            it("renders a menu component in the expected x and y coordinates", () => {
+                let boundingClientRect = menuComponent.getBoundingClientRect();
+                let left = boundingClientRect.left;
+                let top = boundingClientRect.top;
+
+                expect(left).toEqual(x);
+                expect(top).toEqual(y);
+            });
+
+            it("with all the actions passed in", () => {
+                expect(menuComponent).toBeDefined();
+
+                let listItems = menuComponent.children[0].children;
+
+                expect(listItems.length).toEqual(actionsArray.length);
+            });
+
+            it("with click-able menu items, that will invoke the correct callBacks", () => {
+                let listItem1 = menuComponent.children[0].children[0];
+
+                listItem1.click();
+
+                expect(result).toEqual("Test Action 1 Invoked");
+            });
+
+            it("dismisses the menu when action is clicked on", () => {
+                let listItem1 = menuComponent.children[0].children[0];
+
+                listItem1.click();
+
+                let menu = document.querySelector('.c-menu');
+
+                expect(menu).toBeNull();
+            });
+
+            it("invokes the destroy method when menu is dismissed", () => {
+                document.body.click();
+
+                expect(vueComponent.$destroy).toHaveBeenCalled();
+            });
+        });
+    });
+});

src/api/menu/components/Menu.vue

@@ -0,0 +1,52 @@
+<template>
+<div class="c-menu">
+    <ul v-if="actions.length && actions[0].length">
+        <template
+            v-for="(actionGroups, index) in actions"
+        >
+            <li
+                v-for="action in actionGroups"
+                :key="action.name"
+                :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
+                :title="action.description"
+                @click="action.callBack"
+            >
+                {{ action.name }}
+            </li>
+            <div
+                v-if="index !== actions.length - 1"
+                :key="index"
+                class="c-menu__section-separator"
+            >
+            </div>
+            <li
+                v-if="actionGroups.length === 0"
+                :key="index"
+            >
+                No actions defined.
+            </li>
+        </template>
+    </ul>
+
+    <ul v-else>
+        <li
+            v-for="action in actions"
+            :key="action.name"
+            :class="action.cssClass"
+            :title="action.description"
+            @click="action.callBack"
+        >
+            {{ action.name }}
+        </li>
+        <li v-if="actions.length === 0">
+            No actions defined.
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+    inject: ['actions']
+};
+</script>

src/api/menu/menu.js

@@ -0,0 +1,94 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
+import MenuComponent from './components/Menu.vue';
+import Vue from 'vue';
+
+class Menu extends EventEmitter {
+    constructor(options) {
+        super();
+
+        this.options = options;
+
+        this.component = new Vue({
+            provide: {
+                actions: options.actions
+            },
+            components: {
+                MenuComponent
+            },
+            template: '<menu-component />'
+        });
+
+        if (options.onDestroy) {
+            this.once('destroy', options.onDestroy);
+        }
+
+        this.dismiss = this.dismiss.bind(this);
+        this.show = this.show.bind(this);
+
+        this.show();
+    }
+
+    dismiss() {
+        this.emit('destroy');
+        document.body.removeChild(this.component.$el);
+        document.removeEventListener('click', this.dismiss);
+        this.component.$destroy();
+    }
+
+    show() {
+        this.component.$mount();
+        document.body.appendChild(this.component.$el);
+
+        let position = this._calculatePopupPosition(this.options.x, this.options.y, this.component.$el);
+
+        this.component.$el.style.left = `${position.x}px`;
+        this.component.$el.style.top = `${position.y}px`;
+
+        document.addEventListener('click', this.dismiss);
+    }
+
+    /**
+     * @private
+     */
+    _calculatePopupPosition(eventPosX, eventPosY, menuElement) {
+        let menuDimensions = menuElement.getBoundingClientRect();
+        let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
+        let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
+
+        if (overflowX > 0) {
+            eventPosX = eventPosX - overflowX;
+        }
+
+        if (overflowY > 0) {
+            eventPosY = eventPosY - overflowY;
+        }
+
+        return {
+            x: eventPosX,
+            y: eventPosY
+        };
+    }
+}
+
+export default Menu;

src/api/overlays/OverlayAPI.js

@@ -22,6 +22,7 @@ class OverlayAPI {
                 this.dismissLastOverlay();
             }
         });
+
     }
 
     /**
@@ -127,6 +128,7 @@ class OverlayAPI {
 
         return progressDialog;
     }
+
 }
 
 export default OverlayAPI;

src/api/status/StatusAPI.js

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
+
+export default class StatusAPI extends EventEmitter {
+    constructor(openmct) {
+        super();
+
+        this._openmct = openmct;
+        this._statusCache = {};
+
+        this.get = this.get.bind(this);
+        this.set = this.set.bind(this);
+        this.observe = this.observe.bind(this);
+    }
+
+    get(identifier) {
+        let keyString = this._openmct.objects.makeKeyString(identifier);
+
+        return this._statusCache[keyString];
+    }
+
+    set(identifier, value) {
+        let keyString = this._openmct.objects.makeKeyString(identifier);
+
+        this._statusCache[keyString] = value;
+        this.emit(keyString, value);
+    }
+
+    delete(identifier) {
+        let keyString = this._openmct.objects.makeKeyString(identifier);
+
+        this._statusCache[keyString] = undefined;
+        this.emit(keyString, undefined);
+        delete this._statusCache[keyString];
+    }
+
+    observe(identifier, callback) {
+        let key = this._openmct.objects.makeKeyString(identifier);
+
+        this.on(key, callback);
+
+        return () => {
+            this.off(key, callback);
+        };
+    }
+}

src/api/status/StatusAPISpec.js

@@ -0,0 +1,85 @@
+import StatusAPI from './StatusAPI.js';
+import { createOpenMct, resetApplicationState } from '../../utils/testing';
+
+describe("The Status API", () => {
+    let statusAPI;
+    let openmct;
+    let identifier;
+    let status;
+    let status2;
+    let callback;
+
+    beforeEach(() => {
+        openmct = createOpenMct();
+        statusAPI = new StatusAPI(openmct);
+        identifier = {
+            namespace: "test-namespace",
+            key: "test-key"
+        };
+        status = "test-status";
+        status2 = 'test-status-deux';
+        callback = jasmine.createSpy('callback', (statusUpdate) => statusUpdate);
+    });
+
+    afterEach(() => {
+        resetApplicationState(openmct);
+    });
+
+    describe("set function", () => {
+        it("sets status for identifier", () => {
+            statusAPI.set(identifier, status);
+
+            let resultingStatus = statusAPI.get(identifier);
+
+            expect(resultingStatus).toEqual(status);
+        });
+    });
+
+    describe("get function", () => {
+        it("returns status for identifier", () => {
+            statusAPI.set(identifier, status2);
+
+            let resultingStatus = statusAPI.get(identifier);
+
+            expect(resultingStatus).toEqual(status2);
+        });
+    });
+
+    describe("delete function", () => {
+        it("deletes status for identifier", () => {
+            statusAPI.set(identifier, status);
+
+            let resultingStatus = statusAPI.get(identifier);
+            expect(resultingStatus).toEqual(status);
+
+            statusAPI.delete(identifier);
+            resultingStatus = statusAPI.get(identifier);
+
+            expect(resultingStatus).toBeUndefined();
+        });
+    });
+
+    describe("observe function", () => {
+
+        it("allows callbacks to be attached to status set and delete events", () => {
+            let unsubscribe = statusAPI.observe(identifier, callback);
+            statusAPI.set(identifier, status);
+
+            expect(callback).toHaveBeenCalledWith(status);
+
+            statusAPI.delete(identifier);
+
+            expect(callback).toHaveBeenCalledWith(undefined);
+            unsubscribe();
+        });
+
+        it("returns a unsubscribe function", () => {
+            let unsubscribe = statusAPI.observe(identifier, callback);
+            unsubscribe();
+
+            statusAPI.set(identifier, status);
+
+            expect(callback).toHaveBeenCalledTimes(0);
+        });
+    });
+});