this is 2024. * observers no more. (#7715)

* this is 2024. `*` observers no more.

* add edit and save domain object helper functions

* add aria-labels and fix e2e tests to use new labels

* generate and save in local storage a condition set with telemetry and condition

* rename const

* move creation code out of generateLocalStorage since it is immutable

* remove function abstractions

* remove @localStorage test label

* Update e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

* Update e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

* Update e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

* Update e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

* remove unneccesary aria text

* remove unneccessary aria text

* use recommended playwright locators

* lint fix

* remove unneccesary steps now that child created directly in parent

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

@@ -371,7 +371,7 @@ test.describe('Basic Condition Set Use', () => {
 
     // Validate that the condition set is evaluating and outputting
     // the correct value when the underlying telemetry subscription is active.
-    let outputValue = page.locator('[aria-label="Current Output Value"]');
+    let outputValue = page.getByLabel('Current Output Value');
     await expect(outputValue).toHaveText('false');
 
     await page.goto(exampleTelemetry.url);
@@ -462,7 +462,7 @@ test.describe('Basic Condition Set Use', () => {
 
     // Validate that the condition set is evaluating and outputting
     // the correct value when the underlying telemetry subscription is active.
-    let outputValue = page.locator('[aria-label="Current Output Value"]');
+    let outputValue = page.getByLabel('Current Output Value');
     await expect(outputValue).toHaveText('false');
 
     await page.goto(exampleTelemetry.url);
@@ -475,3 +475,81 @@ test.describe('Basic Condition Set Use', () => {
     });
   });
 });
+
+test.describe('Condition Set Composition', () => {
+  let conditionSet;
+  let exampleTelemetry;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Condition Set
+    conditionSet = await createDomainObjectWithDefaults(page, {
+      type: 'Condition Set'
+    });
+
+    // Create Telemetry Object as child to Condition Set
+    exampleTelemetry = await createExampleTelemetryObject(page, conditionSet.uuid);
+
+    // Edit Condition Set
+    await page.goto(conditionSet.url);
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+
+    // Add Condition to Condition Set
+    await page.getByRole('button', { name: 'Add Condition' }).click();
+
+    // Enter Condition Output
+    await page.getByLabel('Condition Name Input').first().fill('Negative');
+    await page.getByLabel('Condition Output Type').first().selectOption({ value: 'string' });
+    await page.getByLabel('Condition Output String').first().fill('Negative');
+
+    // Condition Trigger default is okay so no change needed to form
+
+    // Enter Condition Criterion
+    await page.getByLabel('Criterion Telemetry Selection').first().selectOption({ value: 'all' });
+    await page.getByLabel('Criterion Metadata Selection').first().selectOption({ value: 'sin' });
+    await page
+      .locator('select[aria-label="Criterion Comparison Selection"]')
+      .first()
+      .selectOption({ value: 'lessThan' });
+    await page.getByLabel('Criterion Input').first().fill('0');
+
+    // Save the Condition Set
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+  });
+
+  test('You can remove telemetry from a condition set with existing conditions', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7710'
+    });
+
+    await page.getByLabel('Expand My Items folder').click();
+    await page.getByLabel(`Expand ${conditionSet.name} conditionSet`).click();
+
+    await page
+      .getByLabel(`Navigate to ${exampleTelemetry.name}`, { exact: false })
+      .click({ button: 'right' });
+
+    await page
+      .getByLabel(`${exampleTelemetry.name} Context Menu`)
+      .getByRole('menuitem', { name: 'Remove' })
+      .click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    await page
+      .getByLabel(`Navigate to ${conditionSet.name} conditionSet Object`, { exact: true })
+      .click();
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+    await page.getByRole('tab', { name: 'Elements' }).click();
+    expect(
+      await page
+        .getByRole('tabpanel', { name: 'Inspector Views' })
+        .getByRole('listitem', { name: exampleTelemetry.name })
+        .count()
+    ).toEqual(0);
+  });
+});

src/plugins/condition/ConditionManager.js

@@ -46,14 +46,6 @@ export default class ConditionManager extends EventEmitter {
       applied: false
     };
     this.initialize();
-
-    this.stopObservingForChanges = this.openmct.objects.observe(
-      this.conditionSetDomainObject,
-      '*',
-      (newDomainObject) => {
-        this.conditionSetDomainObject = newDomainObject;
-      }
-    );
   }
 
   async requestLatestValue(endpoint) {
@@ -518,10 +510,6 @@ export default class ConditionManager extends EventEmitter {
     Object.values(this.subscriptions).forEach((unsubscribe) => unsubscribe());
     delete this.subscriptions;
 
-    if (this.stopObservingForChanges) {
-      this.stopObservingForChanges();
-    }
-
     this.conditions.forEach((condition) => {
       condition.destroy();
     });

src/plugins/condition/components/ConditionCollection.vue

@@ -21,7 +21,11 @@
 -->
 
 <template>
-  <section id="conditionCollection" :class="{ 'is-expanded': expanded }">
+  <section
+    id="conditionCollection"
+    :class="{ 'is-expanded': expanded }"
+    aria-label="Condition Set Condition Collection"
+  >
     <div class="c-cs__header c-section__header">
       <span
         class="c-disclosure-triangle c-tree__item__view-control is-enabled"

src/plugins/condition/components/ConditionItem.vue

@@ -24,6 +24,7 @@
   <div
     class="c-condition-h"
     :class="{ 'is-drag-target': draggingOver }"
+    aria-label="Condition Set Condition"
     @dragover.prevent
     @drop.prevent="dropCondition($event, conditionIndex)"
     @dragenter="dragEnter($event, conditionIndex)"
@@ -83,6 +84,7 @@
           <input
             v-model="condition.configuration.name"
             class="t-condition-input__name"
+            aria-label="Condition Name Input"
             type="text"
             @change="persist"
           />
@@ -91,7 +93,11 @@
         <span class="c-cdef__label">Output</span>
         <span class="c-cdef__controls">
           <span class="c-cdef__control">
-            <select v-model="selectedOutputSelection" @change="setOutputValue">
+            <select
+              v-model="selectedOutputSelection"
+              aria-label="Condition Output Type"
+              @change="setOutputValue"
+            >
               <option v-for="option in outputOptions" :key="option" :value="option">
                 {{ initCap(option) }}
               </option>
@@ -101,6 +107,7 @@
             <input
               v-if="selectedOutputSelection === outputOptions[2]"
               v-model="condition.configuration.output"
+              aria-label="Condition Output String"
               class="t-condition-name-input"
               type="text"
               @change="persist"

src/plugins/condition/components/ConditionSet.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div class="c-cs" :class="{ 'is-stale': isStale }">
+  <div class="c-cs" :class="{ 'is-stale': isStale }" aria-label="Condition Set">
     <section class="c-cs__current-output c-section">
       <div class="c-cs__content c-cs__current-output-value">
         <span class="c-cs__current-output-value__label">Current Output</span>

src/plugins/condition/components/TestData.vue

@@ -21,7 +21,12 @@
 -->
 
 <template>
-  <section v-show="isEditing" id="test-data" :class="{ 'is-expanded': expanded }">
+  <section
+    v-show="isEditing"
+    id="test-data"
+    :class="{ 'is-expanded': expanded }"
+    aria-label="Condition Set Test Data"
+  >
     <div class="c-cs__header c-section__header">
       <span
         class="c-disclosure-triangle c-tree__item__view-control is-enabled"