chore(ui): improve the labels behavior

Author: MilosPaunovic

ui/src/components/executions/Executions.vue

@@ -632,7 +632,8 @@
                 const toIgnore = this.configs.hiddenLabelsPrefixes || [];
 
                 // Extract only the keys from the route query labels
-                const allowedLabels = this.$route.query.labels ? this.$route.query.labels.map(label => label.split(":")[0]) : [];
+                const helper = Array.isArray(this.$route.query.labels) ? this.$route.query.labels : [this.$route.query.labels];
+                const allowedLabels = this.$route.query.labels ? helper.map(label => label.split(":")[0]) : [];
 
                 return labels?.filter(label => {
                     // Check if the label key matches any prefix but allow it if it's in the query

ui/src/components/filter/KestraFilter.vue

@@ -581,7 +581,7 @@
         () => route.query,
         (q: any) => {
             // Handling change of label filters from direct click events
-            const routeFilters = decodeParams(route.path, q, props.include, OPTIONS);
+            const routeFilters = decodeParams(q, props.include, OPTIONS);
             currentFilters.value = routeFilters;
         },
         {immediate: true},

ui/src/components/layout/Labels.vue

@@ -30,33 +30,24 @@
         {labels: () => [], readOnly: false},
     );
 
-    import {decodeParams} from "../../components/filter/utils/helpers";
     let query: any[] = [];
     watch(
         () => route.query,
-        (q: any) => (query = decodeParams(q, undefined, [])),
+        (q: any) => (query = [].concat(q.labels ?? null)),
         {immediate: true},
     );
 
-    const isChecked = (label: Label) => {
-        return query.some((l) => {
-            if (typeof l?.value !== "string") return false;
-
-            const [key, value] = l.value.split(":");
-            return key === label.key && value === label.value;
-        });
-    };
+    const isChecked = (label: Label) =>
+        query.some((l) => l === `${label.key}:${label.value}`);
 
     const updateLabel = (label: Label) => {
-        const getKey = (key: string) => `filters[labels][$eq][${key}]`;
-
         if (isChecked(label)) {
-            const replacementQuery = {...route.query};
-            delete replacementQuery[getKey(label.key)];
-            router.replace({query: replacementQuery});
+            const helper = {...route.query};
+            delete helper.labels;
+            router.replace({query: helper});
         } else {
             router.replace({
-                query: {...route.query, [getKey(label.key)]: label.value},
+                query: {...route.query, labels: `${label.key}:${label.value}`},
             });
         }
     };