merge tree search implementation for testing purposes

package.json

@@ -25,7 +25,7 @@
     "eventemitter3": "^1.2.0",
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
-    "fast-sass-loader": "^1.4.5",
+    "fast-sass-loader": "1.4.6",
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",

platform/commonUI/edit/src/actions/SaveAsAction.js

@@ -92,16 +92,7 @@ function (
          * @memberof platform/commonUI/edit.SaveAction#
          */
     SaveAsAction.prototype.perform = function () {
-        // Discard the current root view (which will be the editing
-        // UI, which will have been pushed atop the Browse UI.)
-        function returnToBrowse(object) {
-            if (object) {
-                object.getCapability("action").perform("navigate");
-            }
-            return object;
-        }
-
-        return this.save().then(returnToBrowse);
+        return this.save();
     };
 
     /**
@@ -169,15 +160,17 @@ function (
         }
 
         function saveAfterClone(clonedObject) {
-            return domainObject.getCapability("editor").save()
-                .then(resolveWith(clonedObject));
+            return this.openmct.editor.save().then(() => {
+                // Force mutation for search indexing
+                clonedObject.useCapability('mutation', (model) => {
+                    return model;
+                });
+                return clonedObject;
+            })
         }
 
         function finishEditing(clonedObject) {
-            return domainObject.getCapability("editor").finish()
-                .then(function () {
-                    return fetchObject(clonedObject.getId());
-                });
+            return fetchObject(clonedObject.getId())
         }
 
         function onSuccess(object) {
@@ -190,7 +183,7 @@ function (
             if (reason !== "user canceled") {
                 self.notificationService.error("Save Failed");
             }
-            return false;
+            throw reason;
         }
 
         return getParent(domainObject)

platform/commonUI/edit/src/creation/CreateAction.js

@@ -65,24 +65,33 @@ define(
         CreateAction.prototype.perform = function () {
             var newModel = this.type.getInitialModel(),
                 openmct = this.openmct,
-                newObject,
-                editAction;
-
-            function onSave() {
-                openmct.editor.save();
-            }
+                newObject;
 
             function onCancel() {
                 openmct.editor.cancel();
             }
 
+            function navigateAndEdit(object) {
+                let objectPath = object.getCapability('context').getPath(),
+                    url = '#/browse/' + objectPath
+                        .map(function (o) {
+                            return o && openmct.objects.makeKeyString(o.getId())
+                        })
+                        .join('/');
+
+                window.location.href = url;
+
+                openmct.editor.edit();
+            }
+
             newModel.type = this.type.getKey();
             newModel.location = this.parent.getId();
             newObject = this.parent.useCapability('instantiation', newModel);
 
             openmct.editor.edit();
-            editAction = newObject.getCapability("action").getActions("edit")[0];
-            newObject.getCapability("action").perform("save-as").then(onSave, onCancel);
+            newObject.getCapability("action").perform("save-as")
+                .then(navigateAndEdit, onCancel)
+
             // TODO: support editing object without saving object first.
             // Which means we have to toggle createwizard afterwards.  For now,
             // We will disable this.

platform/forms/src/controllers/SnapshotPreviewController.js

@@ -29,12 +29,13 @@ define(
         function SnapshotPreviewController($scope, openmct) {
 
             $scope.previewImage = function (imageUrl) {
-                let image = document.createElement('img');
-                image.src = imageUrl;
+                let imageDiv = document.createElement('div');
+                imageDiv.classList = 'image-main s-image-main';
+                imageDiv.style.backgroundImage = `url(${imageUrl})`;
 
                 let previewImageOverlay = openmct.overlays.overlay(
                     {
-                        element: image,
+                        element: imageDiv,
                         size: 'large',
                         buttons: [
                             {

src/api/composition/DefaultCompositionProvider.js

@@ -178,8 +178,12 @@ define([
      * @method remove
      */
     DefaultCompositionProvider.prototype.remove = function (domainObject, childId) {
-        // TODO: this needs to be synchronized via mutation.
-        throw new Error('Default Provider does not implement removal.');
+        let composition = domainObject.composition.filter(function (child) {
+            return !(childId.namespace === child.namespace &&
+                childId.key === child.key);
+        });
+
+        this.publicAPI.objects.mutate(domainObject, 'composition', composition);
     };
 
     /**

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -503,9 +503,27 @@ export default {
             this.persist();
         },
         deleteContainer(containerId) {
-            let container = this.containers.filter(c => c.id === containerId)[0];
-            let containerIndex = this.containers.indexOf(container);
+            let container = this.containers.filter(c => c.id === containerId)[0],
+                containerIndex = this.containers.indexOf(container);
+
+            /*
+                remove associated domainObjects from composition
+            */
+            container.frames.forEach(f => {
+                this.composition.remove({identifier: f.domainObjectIdentifier});
+            });
+
             this.containers.splice(containerIndex, 1);
+
+            /*
+                add a container when there are no containers in the FL,
+                to prevent user from not being able to add a frame via
+                drag and drop. 
+            */
+            if (this.containers.length === 0) {
+                this.containers.push(new Container(100));
+            }
+
             sizeToFill(this.containers);
             this.persist();
         },
@@ -545,6 +563,12 @@ export default {
                 .frames
                 .filter((f => f.id === frameId))[0];
             let frameIndex = container.frames.indexOf(frame);
+
+            /*
+                remove associated domainObject from composition
+            */
+            this.composition.remove({identifier: frame.domainObjectIdentifier});
+
             container.frames.splice(frameIndex, 1);
             sizeToFill(container.frames);
             this.persist(containerIndex);
@@ -617,7 +641,7 @@ export default {
             } else {
                 this.containers.splice(toIndex, 0, container);
             }
-            this.persist(index);
+            this.persist();
         },
         removeChildObject(identifier) {
             let removeIdentifier = this.openmct.objects.makeKeyString(identifier);

src/plugins/flexibleLayout/toolbarProvider.js

@@ -204,7 +204,7 @@ function ToolbarProvider(openmct) {
                 addContainer,
                 toggleFrame ? separator: undefined,
                 toggleFrame,
-                deleteFrame || deleteContainer ? separator: undefined,
+                deleteFrame || deleteContainer ? separator : undefined,
                 deleteFrame,
                 deleteContainer
             ];

src/plugins/plot/src/services/ExportImageService.js

@@ -30,7 +30,7 @@ define(
     ],
     function (
         html2canvas,
-        saveAs
+        { saveAs }
     ) {
 
         /**

src/ui/inspector/Elements.vue

@@ -1,6 +1,10 @@
 <template>
 <div class="c-elements-pool">
-    <Search class="c-elements-pool__search" @input="applySearch"></Search>
+    <Search class="c-elements-pool__search"
+        :value="currentSearch"
+        @input="applySearch" 
+        @clear="applySearch">
+    </Search>
     <div class="c-elements-pool__elements">
         <ul class="tree c-tree c-elements-pool__tree" id="inspector-elements-tree"
             v-if="elements.length > 0">
@@ -69,7 +73,8 @@ export default {
         return {
             elements: [],
             isEditing: this.openmct.editor.isEditing(),
-            parentObject: undefined
+            parentObject: undefined,
+            currentSearch: ''
         }
     },
     mounted() {

src/ui/layout/Layout.vue

@@ -22,9 +22,6 @@
                   handle="after"
                   label="Browse"
                   collapsable>
-                <div class="l-shell__search">
-                    <search class="c-search--major" ref="shell-search"></search>
-                </div>
                 <mct-tree class="l-shell__tree"></mct-tree>
             </pane>
             <pane class="l-shell__pane-main">
@@ -250,7 +247,6 @@
     import ObjectView from '../components/ObjectView.vue';
     import MctTemplate from '../legacy/mct-template.vue';
     import CreateButton from './CreateButton.vue';
-    import search from '../components/search.vue';
     import multipane from './multipane.vue';
     import pane from './pane.vue';
     import BrowseBar from './BrowseBar.vue';
@@ -293,7 +289,6 @@
             ObjectView,
             'mct-template': MctTemplate,
             CreateButton,
-            search,
             multipane,
             pane,
             BrowseBar,
@@ -304,31 +299,24 @@
             this.openmct.editor.on('isEditing', (isEditing)=>{
                 this.isEditing = isEditing;
             });
+
+            this.openmct.selection.on('change', this.toggleHasToolbar);
         },
         data: function () {
             return {
                 fullScreen: false,
-                conductorComponent: {},
-                isEditing: false
+                conductorComponent: undefined,
+                isEditing: false,
+                hasToolbar: false
             }
         },
         computed: {
             toolbar() {
-                let selection = this.openmct.selection.get();
-                let structure = undefined;
-
-                if (!selection[0]) {
-                    structure = [];
-                } else {
-                    structure = this.openmct.toolbars.get(selection);
-                }
-
-                return this.isEditing && structure.length > 0;
+                return this.hasToolbar && this.isEditing;
             }
         },
         methods: {
             fullScreenToggle() {
-
                 if (this.fullScreen) {
                     this.fullScreen = false;
                     exitFullScreen();
@@ -339,6 +327,17 @@
             },
             openInNewTab(event) {
                 window.open(window.location.href);
+            },
+            toggleHasToolbar(selection) {
+                let structure = undefined;
+
+                if (!selection[0]) {
+                    structure = [];
+                } else {
+                    structure = this.openmct.toolbars.get(selection);
+                }
+
+                this.hasToolbar = structure.length > 0;
             }
         }
     }

src/ui/layout/mct-tree.vue

@@ -1,9 +1,20 @@
 <template>
     <div class="c-tree__wrapper">
+        <div class="l-shell__search">
+            <search class="c-search--major" ref="shell-search"
+                :value="searchValue"
+                @input="searchTree"
+                @clear="searchTree">
+            </search>
+        </div>
+        <div
+            v-if="treeItems.length === 0">
+            No results found
+        </div>
         <ul class="c-tree">
-            <tree-item v-for="child in children"
-                       :key="child.id"
-                       :node="child">
+            <tree-item v-for="treeItem in treeItems"
+                       :key="treeItem.id"
+                       :node="treeItem">
             </tree-item>
         </ul>
     </div>
@@ -125,28 +136,72 @@
 
 <script>
     import treeItem from './tree-item.vue'
+    import search from '../components/search.vue';
 
     export default {
-        data() {
-            return {
-                children: []
-            };
-        },
         inject: ['openmct'],
-        mounted: function () {
-            this.openmct.objects.get('ROOT')
-                .then(root => this.openmct.composition.get(root).load())
-                .then(children => this.children = children.map((c) => {
-                    return {
-                        id: this.openmct.objects.makeKeyString(c.identifier),
-                        object: c,
-                        objectPath: [c]
-                    };
-                }))
-        },
         name: 'mct-tree',
         components: {
+            search,
             treeItem
+        },
+        data() {
+            return {
+                searchValue: '',
+                allTreeItems: [],
+                filteredTreeItems: []
+            }
+        },
+        computed: {
+            treeItems() {
+                if (this.searchValue === '') {
+                    return this.allTreeItems;
+                } else {
+                    return this.filteredTreeItems;
+                }
+            }
+        },
+        methods: {
+            getAllChildren() {
+                this.openmct.objects.get('ROOT')
+                    .then(root => this.openmct.composition.get(root).load())
+                    .then(children => {
+                        this.allTreeItems = children.map(c => {
+                                return {
+                                    id: this.openmct.objects.makeKeyString(c.identifier),
+                                    object: c,
+                                    objectPath: [c]
+                            };
+                        });
+                    });
+            },
+            getFilteredChildren() {
+                this.searchService.query(this.searchValue).then(children => {
+                    this.filteredTreeItems = children.hits.map(child => {
+                        let objectPath = child.object.getCapability('context')
+                                .getPath().slice(1).map(oldObject => oldObject.useCapability('adapter'))
+                                .reverse(),
+                            object = child.object.useCapability('adapter');
+
+                        return {
+                            id: this.openmct.objects.makeKeyString(object.identifier),
+                            object,
+                            objectPath 
+                        }
+                    });
+                });
+            },
+            searchTree(value) {
+                this.searchValue = value;
+                
+                if (this.searchValue !== '') {
+                    this.getFilteredChildren();
+                }
+            }
+        },
+        mounted() {
+            this.searchService = this.openmct.$injector.get('searchService');
+            this.getAllChildren();
         }
     }
 </script>

src/ui/preview/Preview.vue

@@ -20,19 +20,31 @@
  * 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 class="l-preview-window">
+        <div class="l-browse-bar">
+            <div class="l-browse-bar__start">
+                <div class="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>
+            <div class="l-browse-bar__end">
+                <div class="l-browse-bar__actions">
+                    <button class="l-browse-bar__actions__edit c-button icon-notebook" 
+                        title="New Notebook entry" 
+                        @click="snapshot">
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="l-preview-window__object-view">
+            <div ref="objectView"></div>
+        </div>
     </div>
-    <div class="l-preview-window__object-view">
-        <div ref="objectView">
-    </div>
-    </div>
-</div>
- </template>
+</template>
 <style lang="scss">
     @import '~styles/sass-base';
 
@@ -63,6 +75,7 @@
 
  <script>
     import ContextMenuDropDown from '../../ui/components/contextMenuDropDown.vue';
+    import NotebookSnapshot from '../utils/notebook-snapshot';
 
     export default {
         components: {
@@ -72,6 +85,12 @@
             'openmct',
             'objectPath'
         ],
+        methods: {
+            snapshot() {
+                let element = document.getElementsByClassName("l-preview-window__object-view")[0];
+                this.notebookSnapshot.capture(this.domainObject, element);
+            }
+        },
         data() {
             let domainObject = this.objectPath[0];
             let type = this.openmct.types.get(domainObject.type);
@@ -85,6 +104,7 @@
             let viewProvider = this.openmct.objectViews.get(this.domainObject)[0];
             this.view = viewProvider.view(this.domainObject);
             this.view.show(this.$refs.objectView);
+            this.notebookSnapshot = new NotebookSnapshot(this.openmct);
         },
         destroy() {
             this.view.destroy();