Use allow-utf8-labelnames client capability in UI

Author: jake-kramer

public/app/components/TagsBar.tsx

@@ -230,7 +230,7 @@ function LabelsSubmenu({
 
 // Identifies whether a label is in a query or not
 function isLabelInQuery(query: string, label: string, labelValue: string) {
-  return query.includes(`${label}="${labelValue}"`);
+  return query.includes(`"${label}"="${labelValue}"`);
 }
 
 export default TagsBar;

public/app/services/base.ts

@@ -32,6 +32,8 @@ export async function request(
     headers = {
       ...config?.headers,
       ...(tenantID && { 'X-Scope-OrgID': tenantID }),
+      // Specify client capabilities in `Accept` header
+      Accept: 'application/json;allow-utf8-labelnames=true',
     };
   }
 
@@ -53,6 +55,8 @@ export async function downloadWithOrgID(
     headers = {
       ...config?.headers,
       ...(tenantID && { 'X-Scope-OrgID': tenantID }),
+      // Specify client capabilities in `Accept` header
+      Accept: 'application/json;allow-utf8-labelnames=true',
     };
   }
 

public/app/util/query.ts

@@ -5,13 +5,13 @@ export function appendLabelToQuery(
 ) {
   const case1Regexp = new RegExp(`${label}=.+?(\\}|,)`);
   if (query.match(case1Regexp)) {
-    return query.replace(case1Regexp, `${label}="${labelValue}"$1`);
+    return query.replace(case1Regexp, `"${label}"="${labelValue}"$1`);
   }
   if (query.indexOf('{}') !== -1) {
-    return query.replace('}', `${label}="${labelValue}"}`);
+    return query.replace('}', `"${label}"="${labelValue}"}`);
   }
   if (query.indexOf('}') !== -1) {
-    return query.replace('}', `, ${label}="${labelValue}"}`);
+    return query.replace('}', `, "${label}"="${labelValue}"}`);
   }
 
   console.warn('TODO: handle this case');