Loki: Fix escaping in cheatsheet (#78046)

public/app/plugins/datasource/loki/components/LokiCheatSheet.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import React, { ComponentProps } from 'react';
+
+import { LokiDatasource } from '../datasource';
+import { LokiQuery } from '../types';
+
+import LokiCheatSheet from './LokiCheatSheet';
+
+const setup = () => {
+  const props: ComponentProps<typeof LokiCheatSheet> = {
+    datasource: {
+      languageProvider: {
+        started: true,
+        getLabelKeys: jest.fn().mockReturnValue(['job']),
+        fetchLabelValues: jest.fn().mockResolvedValue(['"grafana/data"']),
+      },
+    } as unknown as LokiDatasource,
+    query: {} as unknown as LokiQuery,
+    onClickExample: jest.fn(),
+  };
+  return props;
+};
+
+describe('Loki Cheat Sheet', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('escapes label values in examples', async () => {
+    const props = setup();
+    render(<LokiCheatSheet {...props} />);
+    jest.runAllTimers();
+
+    const streamSelector = await screen.findByText('{job="\\"grafana/data\\""}');
+    expect(streamSelector).toBeInTheDocument();
+  });
+});

public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx

@@ -5,6 +5,7 @@ import { QueryEditorHelpProps } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 
 import LokiLanguageProvider from '../LanguageProvider';
+import { escapeLabelValueInExactSelector } from '../languageUtils';
 import { LokiQuery } from '../types';
 
 const DEFAULT_EXAMPLES = ['{job="default/prometheus"}'];
@@ -65,7 +66,7 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
         const values = await provider.fetchLabelValues(preferredLabel);
         const userExamples = shuffle(values)
           .slice(0, EXAMPLES_LIMIT)
-          .map((value) => `{${preferredLabel}="${value}"}`);
+          .map((value) => `{${preferredLabel}="${escapeLabelValueInExactSelector(value)}"}`);
         this.setState({ userExamples });
       }
     } else {
@@ -85,7 +86,7 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
         type="button"
         className="cheat-sheet-item__example"
         key={expr}
-        onClick={(e) => onClick({ refId: 'A', expr })}
+        onClick={() => onClick({ refId: 'A', expr })}
       >
         <code>{expr}</code>
       </button>