5469 search results sometimes show the wrong contextual path or no path at all master (#5567)

* use identifier from domain object to tell vue to rerender, also show object in annotations

* fix annotation result clicks

* use key string instead

* add nice e2e test

* add some more search types

* added negative expect

e2e/tests/functional/search.e2e.spec.js

@@ -19,7 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
 /**
  * This test suite is dedicated to tests which verify search functionalities.
  */
@@ -30,35 +29,36 @@ test.describe('Grand Search', () => {
     test('Can search for objects, and subsequent search dropdown behaves properly', async ({ page, openmctConfig }) => {
         const { myItemsFolderName } = openmctConfig;
 
-        await createClockAndDisplayLayout(page, myItemsFolderName);
+        await createObjectsForSearch(page, myItemsFolderName);
 
         // Click [aria-label="OpenMCT Search"] input[type="search"]
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
         // Fill [aria-label="OpenMCT Search"] input[type="search"]
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Cl');
-        await expect(page.locator('[aria-label="Search Result"]')).toContainText('Clock');
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
+        await expect(page.locator('[aria-label="Search Result"] >> nth=1')).toContainText(`Clock B ${myItemsFolderName} Red Folder Blue Folder`);
+        await expect(page.locator('[aria-label="Search Result"] >> nth=2')).toContainText(`Clock C ${myItemsFolderName} Red Folder Blue Folder`);
+        await expect(page.locator('[aria-label="Search Result"] >> nth=3')).toContainText(`Clock D ${myItemsFolderName} Red Folder Blue Folder`);
         // Click text=Elements >> nth=0
         await page.locator('text=Elements').first().click();
-        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toBeVisible();
 
-        // Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
         await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
-        // Click [aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock
+        await page.locator('[aria-label="Clock A clock result"] >> text=Clock A').click();
-        await page.locator('[aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock').click();
         await expect(page.locator('.js-preview-window')).toBeVisible();
 
         // Click [aria-label="Close"]
         await page.locator('[aria-label="Close"]').click();
-        await expect(page.locator('[aria-label="Search Result"]')).toBeVisible();
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toBeVisible();
-        await expect(page.locator('[aria-label="Search Result"]')).toContainText('Cloc');
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
 
         // Click [aria-label="OpenMCT Search"] a >> nth=0
         await page.locator('[aria-label="OpenMCT Search"] a').first().click();
-        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toBeVisible();
 
         // Fill [aria-label="OpenMCT Search"] input[type="search"]
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('foo');
-        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toBeVisible();
 
         // Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
         await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
@@ -68,12 +68,24 @@ test.describe('Grand Search', () => {
         await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
         // Fill [aria-label="OpenMCT Search"] [aria-label="Search Input"]
         await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').fill('Cl');
-        // Click text=Unnamed Clock
         await Promise.all([
             page.waitForNavigation(),
-            page.locator('text=Unnamed Clock').click()
+            page.locator('text=Clock A').click()
         ]);
         await expect(page.locator('.is-object-type-clock')).toBeVisible();
+
+        await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').fill('Disp');
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText('Unnamed Display Layout');
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toContainText('Folder');
+
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Clock C');
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock C ${myItemsFolderName} Red Folder Blue Folder`);
+
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Cloc');
+        await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
+        await expect(page.locator('[aria-label="Search Result"] >> nth=1')).toContainText(`Clock B ${myItemsFolderName} Red Folder Blue Folder`);
+        await expect(page.locator('[aria-label="Search Result"] >> nth=2')).toContainText(`Clock C ${myItemsFolderName} Red Folder Blue Folder`);
+        await expect(page.locator('[aria-label="Search Result"] >> nth=3')).toContainText(`Clock D ${myItemsFolderName} Red Folder Blue Folder`);
     });
 });
 
@@ -174,25 +186,67 @@ async function waitForSearchCompletion(page) {
 }
 
 /**
-  * Creates a notebook object and adds an entry.
+  * Creates some domain objects for searching
   * @param {import('@playwright/test').Page} page
-  * @param {string} myItemsFolderName
   */
-async function createClockAndDisplayLayout(page, myItemsFolderName) {
+async function createObjectsForSearch(page, myItemsFolderName) {
     //Go to baseURL
     await page.goto('./', { waitUntil: 'networkidle' });
 
-    // Click button:has-text("Create")
     await page.locator('button:has-text("Create")').click();
-    // Click li:has-text("Notebook")
+    await page.locator('li:has-text("Folder") >> nth=1').click();
-    await page.locator('li:has-text("Clock")').click();
-    // Click button:has-text("OK")
     await Promise.all([
         page.waitForNavigation(),
+        await page.locator('text=Properties Title Notes >> input[type="text"]').fill('Red Folder'),
+        await page.locator(`text=Save In Open MCT ${myItemsFolderName} >> span`).nth(3).click(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('li:has-text("Folder") >> nth=2').click();
+    await Promise.all([
+        page.waitForNavigation(),
+        await page.locator('text=Properties Title Notes >> input[type="text"]').fill('Blue Folder'),
+        await page.locator('form[name="mctForm"] >> text=Red Folder').click(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
+    await Promise.all([
+        page.waitForNavigation(),
+        await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock A'),
+        await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
+    await Promise.all([
+        page.waitForNavigation(),
+        await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock B'),
+        await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
+    await Promise.all([
+        page.waitForNavigation(),
+        await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock C'),
+        await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
+    await Promise.all([
+        page.waitForNavigation(),
+        await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock D'),
+        await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
         page.locator('button:has-text("OK")').click()
     ]);
 
-    // Click a:has-text("My Items")
     await Promise.all([
         page.waitForNavigation(),
         page.locator(`a:has-text("${myItemsFolderName}") >> nth=0`).click()

src/ui/components/ObjectPath.vue

@@ -22,7 +22,7 @@
 
 <template>
 <ul
-    v-if="originalPath.length"
+    v-if="orderedOriginalPath.length"
     class="c-location"
 >
     <li
@@ -48,14 +48,18 @@ export default {
     },
     inject: ['openmct'],
     props: {
-        enableSelectionListening: {
+        domainObject: {
+            type: Object,
+            required: true
+        },
+        readOnly: {
             type: Boolean,
             required: false,
             default() {
-                return true;
+                return false;
             }
         },
-        readOnly: {
+        showObjectItself: {
             type: Boolean,
             required: false,
             default() {
@@ -65,73 +69,34 @@ export default {
     },
     data() {
         return {
-            domainObject: {},
+            orderedOriginalPath: []
-            originalPath: [],
-            keyString: ''
         };
     },
-    computed: {
+    async mounted() {
-        orderedOriginalPath() {
+        const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            return this.originalPath.slice().reverse();
-        }
-    },
-    mounted() {
-        if (this.enableSelectionListening) {
-            this.openmct.selection.on('change', this.updateSelection);
-            this.updateSelection(this.openmct.selection.get());
-        }
-    },
-    beforeDestroy() {
-        this.openmct.selection.off('change', this.updateSelection);
-    },
-    methods: {
-        setOriginalPath(path, skipSlice) {
-            let originalPath = path;
 
-            if (!skipSlice) {
+        if (keyString && this.keyString !== keyString) {
-                originalPath = path.slice(1, -1);
+            this.keyString = keyString;
-            }
+            this.originalPath = [];
 
-            this.originalPath = originalPath.map((domainObject, index, pathArray) => {
+            const rawOriginalPath = await this.openmct.objects.getOriginalPath(keyString);
+
+            const pathWithDomainObject = rawOriginalPath.map((domainObject, index, pathArray) => {
                 let key = this.openmct.objects.makeKeyString(domainObject.identifier);
+                const objectPath = pathArray.slice(index);
 
                 return {
                     domainObject,
                     key,
-                    objectPath: pathArray.slice(index)
+                    objectPath
                 };
             });
-        },
+            if (this.showObjectItself) {
-        clearData() {
+                // remove ROOT only
-            this.domainObject = {};
+                this.orderedOriginalPath = pathWithDomainObject.slice(0, pathWithDomainObject.length - 1).reverse();
-            this.originalPath = [];
+            } else {
-            this.keyString = '';
+                // remove ROOT and object itself from path
-        },
+                this.orderedOriginalPath = pathWithDomainObject.slice(1, pathWithDomainObject.length - 1).reverse();
-        updateSelection(selection) {
-            if (!selection.length || !selection[0].length) {
-                this.clearData();
-
-                return;
-            }
-
-            this.domainObject = selection[0][0].context.item;
-            let parentObject = selection[0][1];
-
-            if (!this.domainObject && parentObject && parentObject.context.item) {
-                this.setOriginalPath([parentObject.context.item], true);
-                this.keyString = '';
-
-                return;
-            }
-
-            let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
-            if (keyString && this.keyString !== keyString) {
-                this.keyString = keyString;
-                this.originalPath = [];
-
-                this.openmct.objects.getOriginalPath(this.keyString)
-                    .then(this.setOriginalPath);
             }
         }
     }

src/ui/layout/search/AnnotationSearchResult.vue

@@ -42,8 +42,9 @@
         </div>
 
         <ObjectPath
-            ref="location"
+            :domain-object="domainObject"
             :read-only="false"
+            :show-object-itself="true"
         />
 
         <div class="c-gsearch-result__tags">
@@ -124,18 +125,15 @@ export default {
             return this.result.fullTagModels[0].foregroundColor;
         }
     },
-    mounted() {
-        const selectionObject = {
-            context: {
-                item: this.domainObject
-            }
-        };
-        this.$refs.location.updateSelection([[selectionObject]]);
-    },
     methods: {
         clickedResult() {
             const objectPath = this.domainObject.originalPath;
-            const resultUrl = objectPathToUrl(this.openmct, objectPath);
+            let resultUrl = objectPathToUrl(this.openmct, objectPath);
+            // get rid of ROOT if extant
+            if (resultUrl.includes('/ROOT')) {
+                resultUrl = resultUrl.split('/ROOT').join('');
+            }
+
             this.openmct.router.navigate(resultUrl);
         },
         isSearchMatched(tag) {

src/ui/layout/search/ObjectSearchResult.vue

@@ -46,8 +46,8 @@
         </div>
 
         <ObjectPath
-            ref="objectpath"
             :read-only="false"
+            :domain-object="result"
         />
     </div>
     <div class="c-gsearch-result__more-options-button">
@@ -88,12 +88,6 @@ export default {
         }
     },
     mounted() {
-        const selectionObject = {
-            context: {
-                item: this.result
-            }
-        };
-        this.$refs.objectpath.updateSelection([[selectionObject]]);
         this.previewAction = new PreviewAction(this.openmct);
         this.previewAction.on('isVisible', this.togglePreviewState);
     },

src/ui/layout/search/SearchResultsDropDown.vue

@@ -39,8 +39,8 @@
             >
                 <div class="c-gsearch__results-section-title">Object Results</div>
                 <object-search-result
-                    v-for="(objectResult, index) in objectResults"
+                    v-for="(objectResult) in objectResults"
-                    :key="index"
+                    :key="openmct.objects.makeKeyString(objectResult.identifier)"
                     :result="objectResult"
                     @preview-changed="previewChanged"
                     @click.native="selectedResult"
@@ -52,8 +52,8 @@
             >
                 <div class="c-gsearch__results-section-title">Annotation Results</div>
                 <annotation-search-result
-                    v-for="(annotationResult, index) in annotationResults"
+                    v-for="(annotationResult) in annotationResults"
-                    :key="index"
+                    :key="openmct.objects.makeKeyString(annotationResult.identifier)"
                     :result="annotationResult"
                     @click.native="selectedResult"
                 />
@@ -73,6 +73,7 @@ export default {
         AnnotationSearchResult,
         ObjectSearchResult
     },
+    inject: ['openmct'],
     data() {
         return {
             resultsShown: false,