[Filters] Fix view based filters when string input is enabled (#7050)

* de-reactifying some objects for clarity, handling strings for filters, some vue 3 formatting

* removing debug, fixing string value persistence

* remove unnecessary change

* removing vue utils from non vue files

* nipping proxy objects in the bud

* linting

---------

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

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>
 

src/plugins/filters/components/FiltersView.vue

@@ -42,6 +42,7 @@
 
 <script>
 import _ from 'lodash';
+import { toRaw } from 'vue';
 
 import FilterObject from './FilterObject.vue';
 import GlobalFilters from './GlobalFilters.vue';
@@ -267,14 +268,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/telemetryTable/components/TableFooterIndicator.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;