From 425e662d6e5c71e2b87dd4bf176f118ad281f6a4 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Fri, 16 Sep 2022 11:36:04 -0700
Subject: [PATCH] Show version information for Plans if available (#5703)

* Show document version if it is available
* Add test for plan version display in the inspector
---
 src/plugins/plan/pluginSpec.js          | 60 +++++++++++++++++++++++++
 src/ui/inspector/details/Properties.vue |  8 ++++
 2 files changed, 68 insertions(+)

diff --git a/src/plugins/plan/pluginSpec.js b/src/plugins/plan/pluginSpec.js
index 235901bf5c..d981ac2653 100644
--- a/src/plugins/plan/pluginSpec.js
+++ b/src/plugins/plan/pluginSpec.js
@@ -23,6 +23,7 @@
 import {createOpenMct, resetApplicationState} from "utils/testing";
 import PlanPlugin from "../plan/plugin";
 import Vue from 'vue';
+import Properties from "@/ui/inspector/details/Properties.vue";
 
 describe('the plugin', function () {
     let planDefinition;
@@ -212,4 +213,63 @@ describe('the plugin', function () {
             });
         });
     });
+
+    describe('the plan version', () => {
+        let component;
+        let componentObject;
+        let testPlanObject = {
+            name: 'Plan',
+            type: 'plan',
+            identifier: {
+                key: 'test-plan',
+                namespace: ''
+            },
+            version: 'v1'
+        };
+
+        beforeEach(() => {
+            openmct.selection.select([{
+                element: element,
+                context: {
+                    item: testPlanObject
+                }
+            }, {
+                element: openmct.layout.$refs.browseObject.$el,
+                context: {
+                    item: testPlanObject,
+                    supportsMultiSelect: false
+                }
+            }], false);
+
+            return Vue.nextTick().then(() => {
+                let viewContainer = document.createElement('div');
+                child.append(viewContainer);
+                component = new Vue({
+                    el: viewContainer,
+                    components: {
+                        Properties
+                    },
+                    provide: {
+                        openmct: openmct
+                    },
+                    template: '<properties/>'
+                });
+            });
+        });
+
+        afterEach(() => {
+            component.$destroy();
+        });
+
+        it('provides an inspector view with the version information if available', () => {
+            componentObject = component.$root.$children[0];
+            const propertiesEls = componentObject.$el.querySelectorAll('.c-inspect-properties__row');
+            expect(propertiesEls.length).toEqual(4);
+            const found = Array.from(propertiesEls).some((propertyEl) => {
+                return (propertyEl.children[0].innerHTML.trim() === 'Version'
+                    && propertyEl.children[1].innerHTML.trim() === 'v1');
+            });
+            expect(found).toBeTrue();
+        });
+    });
 });
diff --git a/src/ui/inspector/details/Properties.vue b/src/ui/inspector/details/Properties.vue
index 148a2d3dd5..fe0edda9e0 100644
--- a/src/ui/inspector/details/Properties.vue
+++ b/src/ui/inspector/details/Properties.vue
@@ -95,6 +95,7 @@ export default {
             const timestampLabel = this.domainObject.modified ? 'Modified' : 'Created';
             const timestamp = this.domainObject.modified ? this.domainObject.modified : this.domainObject.created;
             const notes = this.domainObject.notes;
+            const version = this.domainObject.version;
 
             const details = [
                 {
@@ -127,6 +128,13 @@ export default {
                 );
             }
 
+            if (version) {
+                details.push({
+                    name: 'Version',
+                    value: version
+                });
+            }
+
             return [...details, ...this.typeProperties];
         },
         context() {