Save subobject styles to container/layout if the object cannot be persisted (#3471)

* styles for Subobjects that can't be persisted should be saved on the container/layout

* Add tests for suboject styles that should be saved on the display layout

src/plugins/condition/components/inspector/StylesView.vue

@@ -219,6 +219,18 @@ export default {
         isItemType(type, item) {
             return item && (item.type === type);
         },
+        canPersistObject(item) {
+            // for now the only way to tell if an object can be persisted is if it is creatable.
+            let creatable = false;
+            if (item) {
+                const type = this.openmct.types.get(item.type);
+                if (type && type.definition) {
+                    creatable = (type.definition.creatable === true);
+                }
+            }
+
+            return creatable;
+        },
         hasConditionalStyle(domainObject, layoutItem) {
             const id = layoutItem ? layoutItem.id : undefined;
 
@@ -251,7 +263,7 @@ export default {
                 } else {
                     this.canHide = true;
                     domainObject = selectionItem[1].context.item;
-                    if (item && !layoutItem || this.isItemType('subobject-view', layoutItem)) {
+                    if (item && !layoutItem || (this.isItemType('subobject-view', layoutItem) && this.canPersistObject(item))) {
                         subObjects.push(item);
                         itemStyle = getApplicableStylesForItem(item);
                         if (this.hasConditionalStyle(item)) {

src/plugins/condition/pluginSpec.js

@@ -146,6 +146,8 @@ describe('the plugin', function () {
         let displayLayoutItem;
         let lineLayoutItem;
         let boxLayoutItem;
+        let notCreatableObjectItem;
+        let notCreatableObject;
         let selection;
         let component;
         let styleViewComponentObject;
@@ -264,6 +266,19 @@ describe('the plugin', function () {
                             "stroke": "#717171",
                             "type": "line-view",
                             "id": "57d49a28-7863-43bd-9593-6570758916f0"
+                        },
+                        {
+                            "width": 32,
+                            "height": 18,
+                            "x": 36,
+                            "y": 8,
+                            "identifier": {
+                                "key": "~TEST~image",
+                                "namespace": "test-space"
+                            },
+                            "hasFrame": true,
+                            "type": "subobject-view",
+                            "id": "6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85"
                         }
                     ],
                     "layoutGrid": [
@@ -297,6 +312,52 @@ describe('the plugin', function () {
                 "type": "box-view",
                 "id": "89b88746-d325-487b-aec4-11b79afff9e8"
             };
+            notCreatableObjectItem = {
+                "width": 32,
+                "height": 18,
+                "x": 36,
+                "y": 8,
+                "identifier": {
+                    "key": "~TEST~image",
+                    "namespace": "test-space"
+                },
+                "hasFrame": true,
+                "type": "subobject-view",
+                "id": "6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85"
+            };
+            notCreatableObject = {
+                "identifier": {
+                    "key": "~TEST~image",
+                    "namespace": "test-space"
+                },
+                "name": "test~image",
+                "location": "test-space:~TEST",
+                "type": "test.image",
+                "telemetry": {
+                    "values": [
+                        {
+                            "key": "value",
+                            "name": "Value",
+                            "hints": {
+                                "image": 1,
+                                "priority": 0
+                            },
+                            "format": "image",
+                            "source": "value"
+                        },
+                        {
+                            "key": "utc",
+                            "source": "timestamp",
+                            "name": "Timestamp",
+                            "format": "iso",
+                            "hints": {
+                                "domain": 1,
+                                "priority": 1
+                            }
+                        }
+                    ]
+                }
+            };
             selection = [
                 [{
                     context: {
@@ -316,6 +377,19 @@ describe('the plugin', function () {
                         "index": 0
                     }
                 },
+                {
+                    context: {
+                        item: displayLayoutItem,
+                        "supportsMultiSelect": true
+                    }
+                }],
+                [{
+                    context: {
+                        "item": notCreatableObject,
+                        "layoutItem": notCreatableObjectItem,
+                        "index": 2
+                    }
+                },
                 {
                     context: {
                         item: displayLayoutItem,
@@ -344,7 +418,7 @@ describe('the plugin', function () {
         });
 
         it('initializes the items in the view', () => {
-            expect(styleViewComponentObject.items.length).toBe(2);
+            expect(styleViewComponentObject.items.length).toBe(3);
         });
 
         it('initializes conditional styles', () => {
@@ -363,7 +437,7 @@ describe('the plugin', function () {
 
             return Vue.nextTick().then(() => {
                 expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
-                [boxLayoutItem, lineLayoutItem].forEach((item) => {
+                [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
                     const itemStyles = styleViewComponentObject.domainObject.configuration.objectStyles[item.id].styles;
                     expect(itemStyles.length).toBe(2);
                     const foundStyle = itemStyles.find((style) => {
@@ -385,7 +459,7 @@ describe('the plugin', function () {
 
             return Vue.nextTick().then(() => {
                 expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
-                [boxLayoutItem, lineLayoutItem].forEach((item) => {
+                [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
                     const itemStyle = styleViewComponentObject.domainObject.configuration.objectStyles[item.id].staticStyle;
                     expect(itemStyle).toBeDefined();
                     const applicableStyles = getApplicableStylesForItem(styleViewComponentObject.domainObject, item);