[Alerting] Avoid invalid characters in copied rule expression (#57839)

* Avoid copying UTF8 BOM chars in rule expression

* Add comment

public/app/features/alerting/unified/components/Expression.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { PluginType } from '@grafana/data';
+
+import { Expression } from './Expression';
+
+const expression =
+  '100 - ( avg by ( agent_hostname ) ( rate ( node_cpu_seconds_total { mode = "idle" } [ 2h ] ) ) * 100 ) > 97';
+
+const rulesSource = {
+  id: 5,
+  uid: 'gdev-prometheus',
+  type: 'prometheus',
+  name: 'gdev-prometheus',
+  meta: {
+    id: 'prometheus',
+    type: PluginType.datasource,
+    name: 'Prometheus',
+    info: {
+      author: {
+        name: 'Grafana Labs',
+        url: 'https://grafana.com',
+      },
+      description: 'Open source time series database & alerting',
+      links: [
+        {
+          name: 'Learn more',
+          url: 'https://prometheus.io/',
+        },
+      ],
+      logos: {
+        small: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg',
+        large: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg',
+      },
+      build: {},
+      screenshots: [],
+      version: '',
+      updated: '',
+    },
+    module: 'app/plugins/datasource/prometheus/module',
+    baseUrl: 'public/app/plugins/datasource/prometheus',
+  },
+  url: '/api/datasources/proxy/5',
+  access: 'proxy' as 'proxy',
+  jsonData: {
+    manageAlerts: true,
+  },
+  readOnly: false,
+};
+
+describe('Expression', () => {
+  it('Should not allow to edit the text in the editor', () => {
+    render(<Expression expression={expression} rulesSource={rulesSource} />);
+
+    const editor = screen.getByTestId('expression-editor');
+    userEvent.type(editor, 'something else');
+
+    expect(editor).toHaveTextContent(expression);
+    expect(editor).not.toHaveTextContent('something else');
+  });
+});

public/app/features/alerting/unified/components/Expression.tsx

@@ -34,12 +34,12 @@ export const HighlightedQuery: FC<{ language: 'promql' | 'logql'; expr: string }
 
   const slateValue = useMemo(() => makeValue(expr), [expr]);
 
-  return <Editor plugins={plugins} value={slateValue} readOnly={true} />;
+  //We don't want to set readOnly={true} to the Editor to prevent unwanted charaters in the copied text. See https://github.com/grafana/grafana/pull/57839
+  return <Editor data-testid={'expression-editor'} plugins={plugins} value={slateValue} />;
 };
 
 export const Expression: FC<Props> = ({ expression: query, rulesSource }) => {
   const styles = useStyles(getStyles);
-
   return (
     <Well className={cx(styles.well, 'slate-query-field')}>
       {isCloudRulesSource(rulesSource) ? (