Navigating from condition widget back to display layout can cause background to become styled with Localstorage

[akhenry]

Summary

Navigating between a condition widget and a layout can cause the background of the entire layout to change color, even though no background styling has been defined for the layout.

Note: this only appears to affect localStorage

Steps to Reproduce

1. Import the attached JSON file
2. Switch to real-time mode in the conductor
3. Navigate to My Items > My Items > Components > Demo Conditions > Battery Widget
4. Go into edit mode
5. In the inspector, click "styles"
6. Cancel out of edit mode
7. Navigate to My Items > My Items > Components > Demo Tabs View > Spacecraft Plots

Environment

• Open MCT Version: 74b8390
• Deployment Type: local
• Browser: Chrome 98.0.4758.109

Impact Check List

• Data loss or misrepresented data? - Yes can make it appear as though a condition has been triggered when it hasn't
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?

Additional Information

My Items - condition bug.json.zip

[akhenry]

Categorizing as blocker due to misrepresentation of data. May affect operator's situational awareness by misrepresenting the state of the spacecraft

[shefalijoshi]

Unable to reproduce on banner (2.0.1). Marking as closed to test.

[akhenry]

Also cannot reproduce. Looks good to me.

Still reproducible, but only reproducible locally. Does not happen in testathon environment.

[shefalijoshi]

This happens when there are two or more objects in the view that have a js-style-receiver class on them.
The ObjectView uses this class to determine where to apply the styles.

For example, a Display Layout with a Condition Widget component in it. They both have a js-style-receiver class on them.

The fix is to pick the right receiver.

[davetsay]

bad things happening on condition widget create. Also navigating to a condition widget without a condition set applied gives the same error.

vue.js?7193:634 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'conditionSetIdentifier')"

found in

---> <ConditionWidgetComponent> at src/plugins/conditionWidget/components/ConditionWidget.vue
       <Root>
warn @ vue.js?7193:634
logError @ vue.js?7193:1902
globalHandleError @ vue.js?7193:1897
handleError @ vue.js?7193:1857
invokeWithErrorHandling @ vue.js?7193:1880
callHook @ vue.js?7193:4236
insert @ vue.js?7193:3165
invokeInsertHook @ vue.js?7193:6385
patch @ vue.js?7193:6602
Vue._update @ vue.js?7193:3961
updateComponent @ vue.js?7193:4082
get @ vue.js?7193:4494
Watcher @ vue.js?7193:4483
mountComponent @ vue.js?7193:4089
Vue.$mount @ vue.js?7193:9088
Vue.$mount @ vue.js?7193:11993
Vue._init @ vue.js?7193:5026
Vue @ vue.js?7193:5092
show @ ConditionWidgetViewProvider.js?63bc:42
viewObject.show @ ViewRegistry.js?9cc6:96
updateView @ ObjectView.vue?62bb:258
show @ ObjectView.vue?62bb:303
viewObject @ Browse.js?bb5e:41
onParamsChanged @ Browse.js?bb5e:34
emit @ index.js?4c3f:144
doParamsChange @ ApplicationRouter.js?a65c:350
handleLocationChange @ ApplicationRouter.js?a65c:377
setQueryString @ ApplicationRouter.js?a65c:411
updateParams @ ApplicationRouter.js?a65c:264
eval @ Browse.js?bb5e:102
Promise.then (async)
navigateToPath @ Browse.js?bb5e:67
eval @ Browse.js?bb5e:20
doPathChange @ ApplicationRouter.js?a65c:318
handleLocationChange @ ApplicationRouter.js?a65c:372
navigate @ ApplicationRouter.js?a65c:136
_navigateAndEdit @ CreateAction.js?d217:125
_onSave @ CreateAction.js?d217:87
Promise.then (async)
_showCreateForm @ CreateAction.js?d217:154
invoke @ CreateAction.js?d217:37
eval @ CreateButton.vue?9a4c:86
Promise.then (async)
create @ CreateButton.vue?9a4c:83
onItemClicked @ CreateButton.vue?9a4c:57
invokeWithErrorHandling @ vue.js?7193:1872
invoker @ vue.js?7193:2197
original._wrapper @ vue.js?7193:7591
vue.js?7193:1906 TypeError: Cannot read properties of undefined (reading 'conditionSetIdentifier')
    at VueComponent.updateDomainObject (ConditionWidget.vue?ea07:139:1)
    at VueComponent.mounted (ConditionWidget.vue?ea07:74:1)
    at invokeWithErrorHandling (vue.js?7193:1872:1)
    at callHook (vue.js?7193:4236:1)
    at Object.insert (vue.js?7193:3165:1)
    at invokeInsertHook (vue.js?7193:6385:1)
    at Vue.patch [as __patch__] (vue.js?7193:6602:1)
    at Vue._update (vue.js?7193:3961:1)
    at Vue.updateComponent (vue.js?7193:4082:1)
    at Watcher.get (vue.js?7193:4494:1)

[shefalijoshi]

Needs retest

[alizenguyen]

Verified testathon 7/1/2022:

Tested both on banner and locally and didn't show style changes on both