update preview action to use new action registry

* Support category arrays for legacy actions

* Fixed object path listener. Removed old context menus

* Removed old fullscreen action and Screenfull dependency

* Restore confirmation dialog on remove

* Restored tests

* Remove unused legacy policies

* WIP re-implementation of Preview action

* WIP for Charles to take a look at flex issues

* Disable legacy preview action

* Style and markup fixes for new Preview

- LegacyViewProvider modded to wrap legacy elements in .u-contents div;
- Added selector that automatically defines display: contents on
`no-class` divs injected into __object-view;
- Unit tested with legacy and new components (telem tables, plot view,
Notebook, etc.)

* Tweak z-indexes, fix open in new tab action, add 'done' button

* Removed legacy action

* reuse contextMenuDropDown component

platform/commonUI/dialog/src/OverlayService.js

@@ -95,7 +95,10 @@ define(
 
             // Create the overlay element and add it to the document's body
             element = this.$compile(TEMPLATE)(scope);
-            this.findBody().prepend(element);
+            
+            // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
+            // multiple overlays with the same z-index are active.
+            this.findBody().append(element);
 
             return {
                 dismiss: dismiss

platform/commonUI/general/bundle.js

@@ -48,8 +48,6 @@ define([
     "./src/directives/MCTSplitter",
     "./src/directives/MCTTree",
     "./src/directives/MCTIndicators",
-    "./src/directives/MCTPreview",
-    "./src/actions/MCTPreviewAction",
     "./src/filters/ReverseFilter",
     "./res/templates/bottombar.html",
     "./res/templates/controls/action-button.html",
@@ -69,7 +67,6 @@ define([
     "./res/templates/controls/selector.html",
     "./res/templates/controls/datetime-picker.html",
     "./res/templates/controls/datetime-field.html",
-    "./res/templates/preview.html",
     'legacyRegistry'
 ], function (
     UrlService,
@@ -99,8 +96,6 @@ define([
     MCTSplitter,
     MCTTree,
     MCTIndicators,
-    MCTPreview,
-    MCTPreviewAction,
     ReverseFilter,
     bottombarTemplate,
     actionButtonTemplate,
@@ -120,7 +115,6 @@ define([
     selectorTemplate,
     datetimePickerTemplate,
     datetimeFieldTemplate,
-    previewTemplate,
     legacyRegistry
 ) {
 
@@ -383,31 +377,6 @@ define([
                     "key": "mctIndicators",
                     "implementation": MCTIndicators,
                     "depends": ['openmct']
-                },
-                {
-                    "key": "mctPreview",
-                    "implementation": MCTPreview,
-                    "depends": [
-                        "$document"
-                    ]
-                }
-            ],
-            "actions": [
-                {
-                    "key": "mct-preview-action",
-                    "implementation": MCTPreviewAction,
-                    "name": "Preview",
-                    "cssClass": "hide-in-t-main-view icon-eye-open",
-                    "description": "Preview in large dialog",
-                    "category": [
-                        "contextual",
-                        "view-control"
-                    ],
-                    "depends": [
-                        "$compile",
-                        "$rootScope"
-                    ],
-                    "priority": "preferred"
                 }
             ],
             "constants": [
@@ -516,10 +485,6 @@ define([
                 {
                     "key": "object-inspector",
                     "template": objectInspectorTemplate
-                },
-                {
-                    "key": "mct-preview",
-                    "template": previewTemplate
                 }
             ],
             "controls": [

platform/commonUI/general/res/templates/preview.html

@@ -1,45 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2017, 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.
--->
-<div class="t-frame-inner abs t-object-type-{{ domainObject.getModel().type }}" mct-preview>
-    <div class="abs object-browse-bar l-flex-row">
-        <div class="left flex-elem l-flex-row grows">
-            <mct-representation
-                    key="'object-header-frame'"
-                    mct-object="domainObject"
-                    class="l-flex-row flex-elem object-header grows">
-            </mct-representation>
-        </div>
-        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <mct-representation
-                    key="'switcher'"
-                    ng-model="representation"
-                    mct-object="domainObject">
-            </mct-representation>
-        </div>
-    </div>
-    <div class="abs object-holder">
-        <mct-representation
-                key="representation.selected.key"
-                mct-object="representation.selected.key && domainObject">
-        </mct-representation>
-    </div>
-</div>

platform/commonUI/general/src/actions/MCTPreviewAction.js

@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, 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.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var PREVIEW_TEMPLATE = '<mct-representation key="\'mct-preview\'"' +
-                                    'class="t-rep-frame holder"' +
-                                    'mct-object="domainObject">' +
-                                '</mct-representation>';
-
-        function MCTPreviewAction($compile, $rootScope, context) {
-            context = context || {};
-            this.domainObject = context.selectedObject || context.domainObject;
-            this.$rootScope = $rootScope;
-            this.$compile = $compile;
-        }
-
-        MCTPreviewAction.prototype.perform = function () {
-            var newScope = this.$rootScope.$new();
-            newScope.domainObject = this.domainObject;
-
-            this.$compile(PREVIEW_TEMPLATE)(newScope);
-        };
-
-        MCTPreviewAction.appliesTo = function (context) {
-            var domainObject = (context || {}).domainObject,
-                status = domainObject.getCapability('status');
-
-            return !(status && status.get('editing'));
-        };
-
-        return MCTPreviewAction;
-    }
-);

platform/commonUI/general/src/directives/MCTPreview.js

@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, 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.
- *****************************************************************************/
-
-define(['zepto', '../services/Overlay'], function ($, Overlay) {
-    function MCTPreview($document) {
-
-        function link($scope, $element) {
-            var actions = $scope.domainObject.getCapability('action'),
-                notebookAction = actions.getActions({key: 'notebook-new-entry'})[0];
-
-            var notebookButton = notebookAction ?
-                [
-                    {
-                        class: 'icon-notebook new-notebook-entry',
-                        title: 'New Notebook Entry',
-                        clickHandler: function (event) {
-                            event.stopPropagation();
-                            notebookAction.perform();
-                        }
-                    }
-                ] : [];
-
-            var overlayService = new Overlay({
-                $document: $document,
-                $element: $element[0],
-                $scope: $scope,
-                browseBarButtons: notebookButton
-            });
-
-            overlayService.toggleOverlay();
-
-            $scope.$on('$destroy', function () {
-                $element.remove();
-            });
-        }
-
-        return {
-            restrict: 'A',
-            link: link
-        };
-    }
-
-    return MCTPreview;
-
-});

platform/commonUI/general/src/services/UrlService.js

@@ -82,7 +82,7 @@ define(
             }
             var searchPath = "?" + arr.join('&'),
                 newTabPath =
-                    "index.html#" + this.urlForLocation(mode, domainObject) +
+                    "#" + this.urlForLocation(mode, domainObject) +
                             searchPath;
             return newTabPath;
         };

src/MCT.js

@@ -230,6 +230,7 @@ define([
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
         this.install(this.plugins.DisplayLayout());
+        this.install(this.plugins.Preview());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));

src/adapter/actions/LegacyContextMenuAction.js

@@ -32,6 +32,23 @@ export default class LegacyContextMenuAction {
         this.LegacyAction = LegacyAction;
     }
 
+    invoke(objectPath) {
+        let context = {
+            category: 'contextual',
+            domainObject: this.openmct.legacyObject(objectPath)
+        }
+        let legacyAction = new this.LegacyAction(context);
+
+        if (!legacyAction.getMetadata) {
+            let metadata = Object.create(this.LegacyAction.definition);
+            metadata.context = context;
+            legacyAction.getMetadata = function () {
+                return metadata;
+            }.bind(legacyAction);
+        }
+        legacyAction.perform();
+    }
+
     appliesTo(objectPath) {
         let legacyObject = this.openmct.legacyObject(objectPath);
 
@@ -63,21 +80,4 @@ export default class LegacyContextMenuAction {
         }
         return false;
     }
-
-    invoke(objectPath) {
-        let context = {
-            category: 'contextual',
-            domainObject: this.openmct.legacyObject(objectPath)
-        }
-        let legacyAction = new this.LegacyAction(context);
-
-        if (!legacyAction.getMetadata) {
-            let metadata = Object.create(this.LegacyAction.definition);
-            metadata.context = context;
-            legacyAction.getMetadata = function () {
-                return metadata;
-            }.bind(legacyAction);
-        }
-        legacyAction.perform();
-    }
 }

src/adapter/views/LegacyViewProvider.js

@@ -77,7 +77,7 @@ define([
                                 openmct.$angular.element(container),
                                 legacyView
                             );
-                            container.style.height = '100%';
+                            container.classList.add('u-contents');
                         }
 
                         if (promises.length) {

src/api/contextMenu/ContextMenuAPI.js

@@ -73,8 +73,12 @@ class ContextMenuAPI {
      * @private
      */
     _showContextMenuForObjectPath(objectPath, x, y) {
-        let applicableActions = this._allActions.filter(
+        let applicableActions = this._allActions.filter((action) => {
-            (action) => action.appliesTo(objectPath));
+            if (action.appliesTo === undefined) {
+                return true;
+            }
+            return action.appliesTo(objectPath);
+        });
 
         if (this._activeContextMenu) {
             this._hideActiveContextMenu();

src/api/overlays/components/OverlayComponent.vue

@@ -40,7 +40,7 @@
 
     .c-overlay {
         @include abs();
-        z-index: 100;
+        z-index: 70;
 
         &__blocker {
             display: none; // Mobile-first

src/plugins/displayLayout/components/SubobjectView.vue

@@ -107,7 +107,7 @@
 
 <script>
     import ObjectView from '../../../ui/components/layout/ObjectView.vue'
-    import ContextMenuDropDown from './contextMenuDropDown.vue';
+    import ContextMenuDropDown from '../../../ui/components/controls/contextMenuDropDown.vue';
     import LayoutFrame from './LayoutFrame.vue'
 
     const MINIMUM_FRAME_SIZE = [320, 180],

src/plugins/plugins.js

@@ -39,7 +39,8 @@ define([
     './folderView/plugin',
     './flexibleLayout/plugin',
     './tabs/plugin',
-    '../../platform/features/fixed/plugin'
+    '../../platform/features/fixed/plugin',
+    './preview/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -59,7 +60,8 @@ define([
     FolderView,
     FlexibleLayout,
     Tabs,
-    FixedView
+    FixedView,
+    PreviewPlugin
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -174,6 +176,7 @@ define([
     plugins.Tabs = Tabs;
     plugins.FixedView = FixedView;
     plugins.FlexibleLayout = FlexibleLayout;
+    plugins.Preview = PreviewPlugin.default;
 
     return plugins;
 });

src/plugins/preview/Preview.vue

@@ -0,0 +1,93 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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.
+ *****************************************************************************/
+ <template>
+ <div class="l-preview-window">
+    <div class="l-preview-window__object-name l-browse-bar__object-name--w" :class="type.cssClass">
+        <span class="l-browse-bar__object-name">
+            {{ domainObject.name }}
+        </span>
+        <context-menu-drop-down :object-path="objectPath"></context-menu-drop-down>
+    </div>
+    <div class="l-preview-window__object-view">
+        <div ref="objectView">
+    </div>
+    </div>
+</div>
+ </template>
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .l-preview-window {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0; right: 0; bottom: 0; left: 0;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        &__object-name {
+            flex: 0 0 auto;
+        }
+
+        &__object-view {
+            flex: 1 1 auto;
+
+            > div:not([class]) {
+                // Target an immediate child div without a class and make it display: contents
+                display: contents;
+            }
+        }
+    }
+</style>
+
+ <script>
+    import ContextMenuDropDown from '../../ui/components/controls/contextMenuDropDown.vue';
+
+    export default {
+        components: {
+            ContextMenuDropDown
+        },
+        inject: [
+            'openmct',
+            'objectPath'
+        ],
+        data() {
+            let domainObject = this.objectPath[0]; 
+            let type = this.openmct.types.get(domainObject.type);
+
+            return {
+                domainObject: domainObject,
+                type: type
+            };
+        },
+        mounted() {
+            let viewProvider = this.openmct.objectViews.get(this.domainObject)[0];
+            this.view = viewProvider.view(this.domainObject);
+            this.view.show(this.$refs.objectView);
+        },
+        destroy() {
+            this.view.destroy();
+        }
+    }
+ </script>

src/plugins/preview/PreviewAction.js

@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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 Preview from './Preview.vue';
+import Vue from 'vue';
+
+export default class PreviewAction {
+    constructor(openmct) {
+        /**
+         * Metadata
+         */
+        this.name = 'Preview';
+        this.description = 'Preview in large dialog';
+        this.cssClass = 'icon-eye-open';
+
+        /**
+         * Dependencies
+         */
+        this._openmct = openmct;
+    }
+    invoke(objectPath) {
+        let preview = new Vue({
+            components: {
+                Preview
+            },
+            provide: {
+                openmct: this._openmct,
+                objectPath: objectPath
+            },
+            template: '<Preview></Preview>'
+        });
+        preview.$mount();
+
+        let overlay = this._openmct.overlays.overlay({
+            element: preview.$el,
+            size: 'large',
+            buttons: [
+                {
+                    label: 'Done',
+                    callback: () => overlay.dismiss()
+                }
+            ],
+            onDestroy: () => preview.$destroy()
+        });
+    }
+}

src/plugins/preview/plugin.js

@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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 PreviewAction from './PreviewAction.js';
+
+export default function () {
+    return function (openmct) {
+        openmct.contextMenu.registerAction(new PreviewAction(openmct));
+    }
+}

src/styles-new/_controls.scss

@@ -231,7 +231,7 @@ input[type=number]::-webkit-outer-spin-button {
     box-shadow: $shdwMenu;
     display: block;
     position: absolute;
-    z-index: 70;
+    z-index: 100;
 }
 
 @mixin menuInner() {

src/styles/overlay/_overlay.scss

@@ -37,7 +37,7 @@
     }
     .blocker {
         background: $colorOvrBlocker;
-        z-index: 100;
+        z-index: 70;
     }
     .close {
         $d: $interiorMargin;
@@ -53,7 +53,7 @@
     }
 
     > .abs.outer-holder {
-        z-index: 102;
+        z-index: 72;
         > .abs.inner-holder {
             $m: $overlayMargin;
             top: $m;
@@ -196,7 +196,7 @@
 
             @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
             background: $colorBodyBg;
-            z-index: 101;
+            z-index: 71;
 
             .abs.inner-holder {
                 opacity: 0;

src/ui/components/controls/contextMenuDropDown.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script>
-import contextMenu from '../../../ui/components/mixins/context-menu-gesture'
+import contextMenu from '../mixins/context-menu-gesture'
 
 export default {
     props: ['objectPath'],

src/ui/components/mixins/context-menu-gesture.js

@@ -20,9 +20,8 @@ export default {
             if (object) {
                 this.$once('hook:destroy',
                     this.openmct.objects.observe(object, '*', updateObject.bind(this, object)))
-                }
             }
-        );
+        });
     },
     destroyed() {
         this.$el.removeEventListener('contextMenu', this.showContextMenu);
@@ -30,6 +29,7 @@ export default {
     methods: {
         showContextMenu(event) {
             event.preventDefault();
+            event.stopPropagation();
             this.openmct.contextMenu._showContextMenuForObjectPath(this.objectPath, event.clientX, event.clientY);
         }
     }