[Filters] Fix view based filters when string input is enabled

src/plugins/filters/components/FilterField.vue

@@ -39,8 +39,8 @@
             type="text"
             :aria-label="label"
             :disabled="useGlobal"
-            :value="persistedValue(filter)"
-            @change="updateFilterValueFromString($event, filter)"
+            :value="persistedValue(filter.comparator)"
+            @change="updateFilterValueFromString($event, filter.comparator)"
           />
         </template>
 
@@ -125,6 +125,7 @@ export default {
       }
     }
   },
+  emits: ['filterTextValueChanged', 'filterSelected', 'clearFilters', 'filterSingleSelected'],
   data() {
     return {
       isEditing: this.openmct.editor.isEditing()

src/plugins/filters/components/FilterObject.vue

@@ -64,10 +64,10 @@
           :use-global="persistedFilters.useGlobal"
           :persisted-filters="updatedFilters[metadatum.key]"
           label="Specific Filter"
-          @filterSelected="updateMultipleFiltersWithSelectedValue"
-          @filterTextValueChanged="updateFiltersWithTextValue"
-          @filterSingleSelected="updateSingleSelection"
-          @clearFilters="clearFilters"
+          @filter-selected="updateMultipleFiltersWithSelectedValue"
+          @filter-text-value-changed="updateFiltersWithTextValue"
+          @filter-single-selected="updateSingleSelection"
+          @clear-filters="clearFilters"
         />
       </ul>
     </div>
@@ -98,6 +98,7 @@ export default {
       }
     }
   },
+  emits: ['updateFilters'],
   data() {
     return {
       expanded: false,

src/plugins/filters/components/FiltersView.vue

@@ -28,20 +28,21 @@
     <global-filters
       :global-filters="globalFilters"
       :global-metadata="globalMetadata"
-      @persistGlobalFilters="persistGlobalFilters"
+      @persist-global-filters="persistGlobalFilters"
     />
     <filter-object
       v-for="(child, key) in children"
       :key="key"
       :filter-object="child"
       :persisted-filters="persistedFilters[key]"
-      @updateFilters="persistFilters"
+      @update-filters="persistFilters"
     />
   </ul>
 </template>
 
 <script>
 import _ from 'lodash';
+import { toRaw } from 'vue';
 
 import FilterObject from './FilterObject.vue';
 import GlobalFilters from './GlobalFilters.vue';
@@ -271,14 +272,14 @@ export default {
       this.openmct.objects.mutate(
         this.providedObject,
         'configuration.filters',
-        this.persistedFilters
+        toRaw(this.persistedFilters)
       );
     },
     mutateConfigurationGlobalFilters() {
       this.openmct.objects.mutate(
         this.providedObject,
         'configuration.globalFilters',
-        this.globalFilters
+        toRaw(this.globalFilters)
       );
     }
   }

src/plugins/filters/components/GlobalFilters.vue

@@ -44,10 +44,10 @@
         :filter-field="metadatum"
         :persisted-filters="updatedFilters[metadatum.key]"
         label="Global Filter"
-        @filterSelected="updateFiltersWithSelectedValue"
-        @filterTextValueChanged="updateFiltersWithTextValue"
-        @filterSingleSelected="updateSingleSelection"
-        @clearFilters="clearFilters"
+        @filter-selected="updateFiltersWithSelectedValue"
+        @filter-text-value-changed="updateFiltersWithTextValue"
+        @filter-single-selected="updateSingleSelection"
+        @clear-filters="clearFilters"
       />
     </ul>
   </li>
@@ -73,6 +73,7 @@ export default {
       }
     }
   },
+  emits: ['persistGlobalFilters'],
   data() {
     return {
       expanded: false,

src/plugins/telemetryTable/TelemetryTable.js

@@ -29,7 +29,8 @@ define([
   './TelemetryTableColumn',
   './TelemetryTableUnitColumn',
   './TelemetryTableConfiguration',
-  '../../utils/staleness'
+  '../../utils/staleness',
+  'vue'
 ], function (
   EventEmitter,
   _,
@@ -39,8 +40,11 @@ define([
   TelemetryTableColumn,
   TelemetryTableUnitColumn,
   TelemetryTableConfiguration,
-  StalenessUtils
+  StalenessUtils,
+  Vue
 ) {
+  const { toRaw } = Vue;
+
   class TelemetryTable extends EventEmitter {
     constructor(domainObject, openmct) {
       super();
@@ -372,6 +376,9 @@ define([
         this.domainObject.configuration.filters &&
         this.domainObject.configuration.filters[keyString];
 
+      // de-reactify it
+      filters = toRaw(filters);
+
       return { filters } || {};
     }
 

src/plugins/telemetryTable/components/table-footer-indicator.vue

@@ -157,14 +157,19 @@ export default {
     },
     getFilterLabels(filterObject, metadatum) {
       let filterLabels = [];
+
       Object.values(filterObject).forEach((comparator) => {
-        comparator.forEach((filterValue) => {
-          metadatum.filters[0].possibleValues.forEach((option) => {
-            if (option.value === filterValue) {
-              filterLabels.push(option.label);
-            }
+        if (typeof comparator !== 'string') {
+          comparator.forEach((filterValue) => {
+            metadatum.filters[0].possibleValues.forEach((option) => {
+              if (option.value === filterValue) {
+                filterLabels.push(option.label);
+              }
+            });
           });
-        });
+        } else {
+          filterLabels.push(comparator);
+        }
       });
 
       return filterLabels;