added conditions and condition components

src/plugins/condition/components/Condition.vue

@@ -0,0 +1,24 @@
+<template>
+<div id="conditionArea"
+     class="c-cs-editui__conditions widget-condition"
+>
+    <span v-if="isEditing">[editable condition data]</span>
+    <span v-else>[read-only condition data]</span>
+</div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    props: {
+        isEditing: Boolean
+    },
+    data() {
+        return {
+            conditionData: {}
+        };
+    },
+    methods: {
+    }
+}
+</script>

src/plugins/conditionSet/ConditionSetViewProvider.js

@@ -23,21 +23,26 @@
 import ConditionSet from './components/ConditionSet.vue';
 import Vue from 'vue';
 
-export default function ConditionSetViewProvider(openmct) {
+export default class ConditionSetViewProvider {
-    return {
+    constructor(openmct) {
-        key: 'conditionSet.view',
+        this.openmct = openmct;
-        name: 'Condition Set',
+        this.key = 'conditionSet.view';
-        cssClass: 'icon-summary-widget',
+        this.cssClass = 'icon-summary-widget';
-        canView: function (domainObject) {
+    }
+
+    canView(domainObject) {
         return domainObject.type === 'conditionSet';
-        },
+    }
-        canEdit: function (domainObject) {
+
+    canEdit(domainObject) {
         return domainObject.type === 'conditionSet';
-        },
+    }
-        view: function (domainObject, objectPath) {
+
+    view(domainObject, objectPath) {
         let component;
+        const openmct = this.openmct;
         return {
-                show(container) {
+            show: (container, isEditing) => {
                 component = new Vue({
                     el: container,
                     components: {
@@ -50,20 +55,19 @@ export default function ConditionSetViewProvider(openmct) {
                     },
                     data() {
                         return {
-                                domainObject
+                            isEditing: isEditing
-                            };
+                        }
                     },
-                        template: '<condition-set></condition-set>'
+                    template: '<condition-set :isEditing="isEditing"></condition-set>'
                 });
             },
-                destroy() {
+            onEditModeChange: function (isEditing) {
+                component.isEditing = isEditing;
+            },
+            destroy: () => {
                 component.$destroy();
                 component = undefined;
             }
         };
-        },
-        priority() {
-            return 100;
     }
-    };
 }

src/plugins/conditionSet/components/ConditionSet.vue

@@ -37,13 +37,13 @@
                     </div>
                 </div>
             </section>
-            <section class="test-data">
+            <section v-show="isEditing"
+                     class="test-data"
+            >
                 <div class="c-sw-edit__ui__header">
                     <span class="c-disclosure-triangle is-enabled t-view-control-test-data c-disclosure-triangle--expanded"></span>
                     <span class="c-sw-edit__ui__header-label">Test Data</span>
                 </div>
-            </section>
-            <section class="conditions">
                 <div class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-rules expanded-widget-test-data">
                     <div class="flex-accordion-holder t-widget-test-data-content w-widget-test-data-content">
                         <div class="l-enable">
@@ -60,6 +60,7 @@
                             </div>
                             <div class="holder add-rule-button-wrapper align-right">
                                 <button
+                                    v-show="isEditing"
                                     id="addRule"
                                     class="c-button c-button--major add-test-condition icon-plus"
                                 >
@@ -69,44 +70,24 @@
                         </div>
                     </div>
                 </div>
-                <div class="c-sw-edit__ui__header">
-                    <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-rules"></span>
-                    <span class="c-sw-edit__ui__header-label">Conditions</span>
-                </div>
-                <div class="t-test-data-config">
-                    <div id="ruleArea"
-                         class="c-sw-editui__rules widget-rules"
-                    >
-                        <span>[data]</span>
-                    </div>
-                    <div class="holder add-rule-button-wrapper align-right">
-                        <button
-                            id="addRule"
-                            class="c-button c-button--major add-rule-button icon-plus"
-                        >
-                            <span class="c-button__label">Add Rule</span>
-                        </button>
-                    </div>
-                </div>
             </section>
+            <Conditions :is-editing="isEditing" />
         </div>
     </div>
 </div>
 </template>
 
 <script>
+import Conditions from './Conditions.vue';
+
 export default {
+    inject: ["openmct", "objectPath", "domainObject"],
+    components: {
+        Conditions
+    },
     props: {
-        domainObject: {
+        isEditing: Boolean
-            type: Object,
-            required: true
     }
-    },
-    data() {
-        return {
-            internalDomainObject: this.domainObject
-        };
-    },
-    inject: ["openmct", "objectPath", "domainObject"]
 };
 </script>
+

src/plugins/conditionSet/components/Conditions.vue

@@ -0,0 +1,46 @@
+<template>
+<section id="conditions">
+    <div class="c-sw-edit__ui__header">
+        <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-conditons"></span>
+        <span class="c-sw-edit__ui__header-label">Conditions</span>
+    </div>
+    <div class="t-test-data-config">
+        <div id="conditionArea"
+             class="c-cs-editui__conditions widget-condition"
+        >
+            <Condition :is-editing="isEditing" />
+            <Condition :is-editing="isEditing" />
+        </div>
+        <div class="holder add-condition-button-wrapper align-right">
+            <button
+                v-show="isEditing"
+                id="addCondition"
+                class="c-button c-button--major add-condition-button icon-plus"
+            >
+                <span class="c-button__label">Add Condition</span>
+            </button>
+        </div>
+    </div>
+</section>
+</template>
+
+<script>
+import Condition from '../../condition/components/Condition.vue';
+
+export default {
+    inject: ['openmct'],
+    components: {
+        Condition
+    },
+    props: {
+        isEditing: Boolean
+    },
+    data() {
+        return {
+            conditionData: {}
+        };
+    },
+    methods: {
+    }
+}
+</script>

src/plugins/conditionSet/pluginSpec.js

@@ -23,7 +23,7 @@
 import { createOpenMct } from 'testTools';
 import ConditionSetPlugin from './plugin';
 
-describe('The plugin', () => {
+fdescribe('The plugin', () => {
     let openmct;
     let conditionSetDefinition;
     let element;