Adds conditional style inspector provider (#2655)

* resolved conflicts

* Revert "Condition reorder"

* Adds conditional style inspector provider
Adds condition style tabbed view (this needs to be extended to allow more than one pane per tab in a separate issue)

* Fixes linting issues

* Merge from topic-conditionals

* In order to accomodate two tab layout for the Conditionals feature, rename the following:
- openmct.inspectorViews registry to openmct.propertiesInspector
- InspectorViewRegistry.prototype.addProvider to InspectorViewRegistry.prototype.addViewProvider.
Replace occurances of the same to the new names.

In a subsequent commit expect a new view registry for the styles inspector view registry.

* Use 'styles' property on domain objects to indicate that they should have a styles inspector tab - Note that this will not show up on existing objects but only ones that are created after this feature is added.
Use 'styles' property on domain objects to determine if a styles view can be viewed
Removed the TabbedInspectorView and repurposed the InspectorViews to show both a properties or a styles registry.
Simplified markup in Inspector.vue

* Addresses review comments:
1. Go back to using inspectorViews
2. Remove stylesInspector registry
3. Hardcode Styles Inspector component view
4. Styles tab can be viewed for all creatable objects except for the folders, webPages and conditionSets
5. ConditionalStylesInspectorViewProvider is no longer needed because we are hardcoding the styles view component.

Co-authored-by: Joel McKinnon <JoelMcKinnon@users.noreply.github.com>

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

@@ -0,0 +1,14 @@
+<template>
+<div>Conditional Styles inspector view</div>
+</template>
+
+<script>
+
+export default {
+    components: {
+    },
+    inject: [
+        'openmct'
+    ]
+}
+</script>

src/ui/inspector/Inspector.vue

@@ -1,5 +1,21 @@
 <template>
-<multipane
+<div class="c-inspector">
+    <div class="c-inspector__tabs"
+    >
+        <div v-if="showStyles"
+             class="c-inspector__tabs__holder">
+            <div v-for="tabbedView in tabbedViews"
+                 :key="tabbedView.key"
+                 class="c-inspector__tabs__header"
+                 @click="updateCurrentTab(tabbedView)"
+            >
+                <span class="c-inspector__tabs__label c-tab"
+                      :class="{'is-current': isCurrent(tabbedView)}"
+                >{{ tabbedView.name }}</span>
+            </div>
+        </div>
+        <div class="c-inspector__tabs__contents">
+            <multipane v-if="currentTabbedView.key === '__properties'"
                        class="c-inspector"
                        type="vertical"
             >
@@ -17,6 +33,14 @@
                     <elements />
                 </pane>
             </multipane>
+            <pane v-else
+                  class="c-inspector__styles"
+            >
+                <styles-inspector-view/>
+            </pane>
+        </div>
+    </div>
+</div>
 </template>
 
 <script>
@@ -26,10 +50,14 @@ import Elements from './Elements.vue';
 import Location from './Location.vue';
 import Properties from './Properties.vue';
 import InspectorViews from './InspectorViews.vue';
+import _ from "lodash";
+import StylesInspectorView from "./StylesInspectorView.vue";
 
 export default {
     inject: ['openmct'],
     components: {
+        StylesInspectorView,
+        // StylesInspectorView,
         multipane,
         pane,
         Elements,
@@ -42,23 +70,56 @@ export default {
     },
     data() {
         return {
-            hasComposition: false
+            hasComposition: false,
+            showStyles: false,
+            tabbedViews: [{
+                key: '__properties',
+                name: 'Properties'
+            },{
+                key: '__styles',
+                name: 'Styles'
+            }],
+            currentTabbedView: {}
         }
     },
     mounted() {
-        this.openmct.selection.on('change', this.refreshComposition);
-        this.refreshComposition(this.openmct.selection.get());
+        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet'];
+        this.openmct.selection.on('change', this.updateInspectorViews);
     },
     destroyed() {
-        this.openmct.selection.off('change', this.refreshComposition);
+        this.openmct.selection.off('change', this.updateInspectorViews);
     },
     methods: {
+        updateInspectorViews(selection) {
+            this.refreshComposition(selection);
+            if (this.openmct.types.get('conditionSet')) {
+                this.refreshTabs(selection);
+            }
+        },
         refreshComposition(selection) {
             if (selection.length > 0 && selection[0].length > 0) {
                 let parentObject = selection[0][0].context.item;
 
                 this.hasComposition = !!(parentObject && this.openmct.composition.get(parentObject));
             }
+        },
+        refreshTabs(selection) {
+            if (selection.length > 0 && selection[0].length > 0) {
+                //layout items are not domain objects but should allow conditional styles
+                this.showStyles = selection[0][0].context.layoutItem;
+                let object = selection[0][0].context.item;
+                if (object) {
+                    let type = this.openmct.types.get(object.type);
+                    this.showStyles = (this.excludeObjectTypes.indexOf(object.type) < 0) && type.definition.creatable;
+                }
+                this.updateCurrentTab(this.tabbedViews[0]);
+            }
+        },
+        updateCurrentTab(view) {
+            this.currentTabbedView = view;
+        },
+        isCurrent(view) {
+            return _.isEqual(this.currentTabbedView, view)
         }
     }
 }

src/ui/inspector/InspectorViews.vue

@@ -30,11 +30,10 @@ export default {
                 });
                 this.$el.innerHTML = '';
             }
-
             this.selectedViews = this.openmct.inspectorViews.get(selection);
             this.selectedViews.forEach(selectedView => {
                 let viewContainer = document.createElement('div');
-                this.$el.append(viewContainer)
+                this.$el.append(viewContainer);
                 selectedView.show(viewContainer);
             });
         }

src/ui/inspector/StylesInspectorView.vue

@@ -0,0 +1,52 @@
+<template>
+<div></div>
+</template>
+
+<style>
+</style>
+
+<script>
+import ConditionalStylesView from '../../plugins/condition/components/inspector/ConditionalStylesView.vue';
+import Vue from 'vue';
+
+export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            selection: []
+        }
+    },
+    mounted() {
+        this.openmct.selection.on('change', this.updateSelection);
+        this.updateSelection(this.openmct.selection.get());
+    },
+    destroyed() {
+        this.openmct.selection.off('change', this.updateSelection);
+    },
+    methods: {
+        updateSelection(selection) {
+            this.selection = selection;
+
+            if (this.component) {
+                this.component.$destroy();
+                this.component = undefined;
+                this.$el.innerHTML = '';
+            }
+
+            let viewContainer = document.createElement('div');
+            this.$el.append(viewContainer);
+            this.component = new Vue({
+                provide: {
+                    openmct: this.openmct
+                },
+                el: viewContainer,
+                components: {
+                    ConditionalStylesView
+                },
+                template: '<conditional-styles-view></conditional-styles-view>'
+            });
+
+        }
+    }
+}
+</script>

src/ui/inspector/inspector.scss

@@ -1,4 +1,6 @@
 .c-inspector {
+    height: 100%;
+
     > [class*="__"] {
         min-height: 50px;
 
@@ -55,6 +57,44 @@
     .c-tree .grid-properties {
         margin-left: $treeItemIndent;
     }
+
+    &__tabs {
+        $h: 20px;
+        @include abs();
+        display: flex;
+        flex-flow: column nowrap;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        &__holder {
+            display: flex;
+            min-height: $h;
+
+            &__header {
+
+                &:before {
+                    margin-right: $interiorMarginSm;
+                    opacity: 0.7;
+                }
+            }
+        }
+
+        &__contents {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+
+            &--hidden {
+                height: 1000px;
+                width: 1000px;
+                position: absolute;
+                left: -9999px;
+                top: -9999px;
+            }
+        }
+    }
 }
 
 .c-properties {