From 8de24a109a033156cedcb2309b6c4f753a40fdba Mon Sep 17 00:00:00 2001
From: Scott Bell <scott@traclabs.com>
Date: Tue, 14 Feb 2023 20:29:18 +0100
Subject: [PATCH] Have clicking on annotation search result use the preview
 action if in edit mode (#6331)

* fix preview issue

* reenabled test suite after testing 30x in parallel

* add e2e test and disable unit tests for search

* change to const
---
 .../plugins/notebook/tags.e2e.spec.js         | 15 ++++++++++-
 .../layout/search/AnnotationSearchResult.vue  | 25 ++++++++++++++++---
 src/ui/layout/search/GrandSearchSpec.js       | 12 +++++++++
 src/ui/layout/search/ObjectSearchResult.vue   |  7 +++---
 4 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
index b11543872e..dc003185e6 100644
--- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
@@ -111,7 +111,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
         await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Driving");
         await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
     });
-    test('Can search for tags', async ({ page }) => {
+    test('Can search for tags and preview works properly', async ({ page }) => {
         await createNotebookEntryAndTags(page);
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
@@ -126,6 +126,19 @@ test.describe('Tagging in Notebooks @addInit', () => {
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Xq');
         await expect(page.locator('text=No results found')).toBeVisible();
+
+        await createDomainObjectWithDefaults(page, {
+            type: 'Display Layout'
+        });
+
+        // Go back into edit mode for the display layout
+        await page.locator('button[title="Edit"]').click();
+
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Sc');
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Science");
+        await page.getByText('Entry 0').click();
+        await expect(page.locator('.js-preview-window')).toBeVisible();
     });
 
     test('Can delete tags', async ({ page }) => {
diff --git a/src/ui/layout/search/AnnotationSearchResult.vue b/src/ui/layout/search/AnnotationSearchResult.vue
index d97f656339..3116712b4c 100644
--- a/src/ui/layout/search/AnnotationSearchResult.vue
+++ b/src/ui/layout/search/AnnotationSearchResult.vue
@@ -67,6 +67,7 @@
 
 <script>
 import ObjectPath from '../../components/ObjectPath.vue';
+import PreviewAction from '../../preview/PreviewAction';
 import { identifierToString } from '../../../../src/tools/url';
 
 export default {
@@ -125,12 +126,25 @@ export default {
             return this.result.fullTagModels[0].foregroundColor;
         }
     },
+    mounted() {
+        this.previewAction = new PreviewAction(this.openmct);
+        this.previewAction.on('isVisible', this.togglePreviewState);
+    },
+    destroyed() {
+        this.previewAction.off('isVisible', this.togglePreviewState);
+    },
     methods: {
-        clickedResult() {
+        clickedResult(event) {
             const objectPath = this.domainObject.originalPath;
-            let resultUrl = identifierToString(this.openmct, objectPath);
+            if (this.openmct.editor.isEditing()) {
+                event.preventDefault();
+                this.preview(objectPath);
+            } else {
+                const resultUrl = identifierToString(this.openmct, objectPath);
+
+                this.openmct.router.navigate(resultUrl);
+            }
 
-            this.openmct.router.navigate(resultUrl);
             if (this.result.annotationType === this.openmct.annotation.ANNOTATION_TYPES.PLOT_SPATIAL) {
                 //wait a beat for the navigation
                 setTimeout(() => {
@@ -138,6 +152,11 @@ export default {
                 }, 100);
             }
         },
+        preview(objectPath) {
+            if (this.previewAction.appliesTo(objectPath)) {
+                this.previewAction.invoke(objectPath);
+            }
+        },
         clickedPlotAnnotation() {
             const targetDetails = {};
             const targetDomainObjects = {};
diff --git a/src/ui/layout/search/GrandSearchSpec.js b/src/ui/layout/search/GrandSearchSpec.js
index 4855d52568..5accd0e726 100644
--- a/src/ui/layout/search/GrandSearchSpec.js
+++ b/src/ui/layout/search/GrandSearchSpec.js
@@ -291,4 +291,16 @@ xdescribe("GrandSearch", () => {
         const previewWindow = document.querySelector('.js-preview-window');
         expect(previewWindow.innerText).toContain('Snapshot');
     });
+
+    it("should preview annotation search results in edit mode if annotation clicked", async () => {
+        await grandSearchComponent.$children[0].searchEverything('Dri');
+        grandSearchComponent._provided.openmct.router.path = [mockDisplayLayout];
+        await Vue.nextTick();
+        const annotationResults = document.querySelectorAll('[aria-label="Search Result"]');
+        expect(annotationResults.length).toBe(1);
+        expect(annotationResults[0].innerText).toContain('Driving');
+        annotationResults[0].click();
+        const previewWindow = document.querySelector('.js-preview-window');
+        expect(previewWindow.innerText).toContain('Snapshot');
+    });
 });
diff --git a/src/ui/layout/search/ObjectSearchResult.vue b/src/ui/layout/search/ObjectSearchResult.vue
index 1a778efa73..a8ad83e918 100644
--- a/src/ui/layout/search/ObjectSearchResult.vue
+++ b/src/ui/layout/search/ObjectSearchResult.vue
@@ -96,11 +96,11 @@ export default {
     },
     methods: {
         clickedResult(event) {
+            const { objectPath } = this.result;
             if (this.openmct.editor.isEditing()) {
                 event.preventDefault();
-                this.preview();
+                this.preview(objectPath);
             } else {
-                const { objectPath } = this.result;
                 let resultUrl = identifierToString(this.openmct, objectPath);
 
                 // Remove the vestigial 'ROOT' identifier from url if it exists
@@ -114,8 +114,7 @@ export default {
         togglePreviewState(previewState) {
             this.$emit('preview-changed', previewState);
         },
-        preview() {
-            const { objectPath } = this.result;
+        preview(objectPath) {
             if (this.previewAction.appliesTo(objectPath)) {
                 this.previewAction.invoke(objectPath);
             }