diff --git a/src/plugins/condition/components/Condition.vue b/src/plugins/condition/components/Condition.vue
new file mode 100644
index 0000000000..cfa8aeb670
--- /dev/null
+++ b/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>
diff --git a/src/plugins/conditionSet/ConditionSetViewProvider.js b/src/plugins/conditionSet/ConditionSetViewProvider.js
index 720e377c91..bef7d6c123 100644
--- a/src/plugins/conditionSet/ConditionSetViewProvider.js
+++ b/src/plugins/conditionSet/ConditionSetViewProvider.js
@@ -23,47 +23,51 @@
 import ConditionSet from './components/ConditionSet.vue';
 import Vue from 'vue';
 
-export default function ConditionSetViewProvider(openmct) {
-    return {
-        key: 'conditionSet.view',
-        name: 'Condition Set',
-        cssClass: 'icon-summary-widget',
-        canView: function (domainObject) {
-            return domainObject.type === 'conditionSet';
-        },
-        canEdit: function (domainObject) {
-            return domainObject.type === 'conditionSet';
-        },
-        view: function (domainObject, objectPath) {
-            let component;
-            return {
-                show(container) {
-                    component = new Vue({
-                        el: container,
-                        components: {
-                            ConditionSet
-                        },
-                        provide: {
-                            openmct,
-                            domainObject,
-                            objectPath
-                        },
-                        data() {
-                            return {
-                                domainObject
-                            };
-                        },
-                        template: '<condition-set></condition-set>'
-                    });
-                },
-                destroy() {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
-        },
-        priority() {
-            return 100;
-        }
-    };
+export default class ConditionSetViewProvider {
+    constructor(openmct) {
+        this.openmct = openmct;
+        this.key = 'conditionSet.view';
+        this.cssClass = 'icon-summary-widget';
+    }
+
+    canView(domainObject) {
+        return domainObject.type === 'conditionSet';
+    }
+
+    canEdit(domainObject) {
+        return domainObject.type === 'conditionSet';
+    }
+
+    view(domainObject, objectPath) {
+        let component;
+        const openmct = this.openmct;
+        return {
+            show: (container, isEditing) => {
+                component = new Vue({
+                    el: container,
+                    components: {
+                        ConditionSet
+                    },
+                    provide: {
+                        openmct,
+                        domainObject,
+                        objectPath
+                    },
+                    data() {
+                        return {
+                            isEditing: isEditing
+                        }
+                    },
+                    template: '<condition-set :isEditing="isEditing"></condition-set>'
+                });
+            },
+            onEditModeChange: function (isEditing) {
+                component.isEditing = isEditing;
+            },
+            destroy: () => {
+                component.$destroy();
+                component = undefined;
+            }
+        };
+    }
 }
diff --git a/src/plugins/conditionSet/components/ConditionSet.vue b/src/plugins/conditionSet/components/ConditionSet.vue
index 321ee8a441..16f8151f9b 100644
--- a/src/plugins/conditionSet/components/ConditionSet.vue
+++ b/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: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        return {
-            internalDomainObject: this.domainObject
-        };
-    },
-    inject: ["openmct", "objectPath", "domainObject"]
+        isEditing: Boolean
+    }
 };
 </script>
+
diff --git a/src/plugins/conditionSet/components/Conditions.vue b/src/plugins/conditionSet/components/Conditions.vue
new file mode 100644
index 0000000000..0ee65698ce
--- /dev/null
+++ b/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>
diff --git a/src/plugins/conditionSet/pluginSpec.js b/src/plugins/conditionSet/pluginSpec.js
index 140ba59ac3..e016f11dbe 100644
--- a/src/plugins/conditionSet/pluginSpec.js
+++ b/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;