From 0e30fba72deab049804c52b712d6720963b05d35 Mon Sep 17 00:00:00 2001
From: Deep Tailor <deep.j.tailor@nasa.gov>
Date: Tue, 19 Feb 2019 15:34:47 -0800
Subject: [PATCH] Tree search implementation (#2280)

Re-implements search UI using legacy existing search service.
---
 .../commonUI/edit/src/actions/SaveAsAction.js | 14 +--
 .../edit/src/creation/CreateAction.js         |  6 +-
 src/ui/layout/Layout.vue                      |  6 --
 src/ui/layout/mct-tree.vue                    | 93 +++++++++++++++----
 4 files changed, 84 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/SaveAsAction.js b/platform/commonUI/edit/src/actions/SaveAsAction.js
index a00869eedb..a2091821eb 100644
--- a/platform/commonUI/edit/src/actions/SaveAsAction.js
+++ b/platform/commonUI/edit/src/actions/SaveAsAction.js
@@ -169,15 +169,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) {
diff --git a/platform/commonUI/edit/src/creation/CreateAction.js b/platform/commonUI/edit/src/creation/CreateAction.js
index 3252f6a64c..1caa91cf75 100644
--- a/platform/commonUI/edit/src/creation/CreateAction.js
+++ b/platform/commonUI/edit/src/creation/CreateAction.js
@@ -65,11 +65,10 @@ define(
         CreateAction.prototype.perform = function () {
             var newModel = this.type.getInitialModel(),
                 openmct = this.openmct,
-                newObject,
-                editAction;
+                newObject;
 
             function onSave() {
-                openmct.editor.save();
+                // openmct.editor.save();
             }
 
             function onCancel() {
@@ -81,7 +80,6 @@ define(
             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);
             // TODO: support editing object without saving object first.
             // Which means we have to toggle createwizard afterwards.  For now,
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index e7f5b108e3..bf96d212fd 100644
--- a/src/ui/layout/Layout.vue
+++ b/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,
@@ -328,7 +323,6 @@
         },
         methods: {
             fullScreenToggle() {
-
                 if (this.fullScreen) {
                     this.fullScreen = false;
                     exitFullScreen();
diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue
index 6c8dca1809..a9946fea06 100644
--- a/src/ui/layout/mct-tree.vue
+++ b/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>