From fddf77ee35677f33d0ce64c032aa51b7374c9655 Mon Sep 17 00:00:00 2001
From: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>
Date: Thu, 30 May 2024 13:34:00 -0400
Subject: [PATCH] CodeEditor: Fix broken styles (#88495)

* fix: remove erroneous container

* fix: update selector

* fix: pass data attrs via `wrapperProps`

* fix: ensure `toBeInTheDocument` checks have unique markup
---
 .../src/selectors/components.ts               |  2 +-
 .../Monaco/ReactMonacoEditorLazy.tsx          | 29 +++++++------------
 .../MonacoFieldWrapper.test.tsx               |  2 +-
 .../MonacoQueryField.test.tsx                 |  2 +-
 .../components/LokiQueryCodeEditor.test.tsx   |  4 +--
 5 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index d11995ccc92..165861766c3 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -527,7 +527,7 @@ export const Components = {
     container: 'data-testid Code editor container',
   },
   ReactMonacoEditor: {
-    container: 'data-testid ReactMonacoEditor container',
+    editorLazy: 'data-testid ReactMonacoEditor editorLazy',
   },
   DashboardImportPage: {
     textarea: 'data-testid-import-dashboard-textarea',
diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
index 5cac26c170b..eecfc033198 100644
--- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
+++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
@@ -16,7 +16,7 @@ import type { ReactMonacoEditorProps } from './types';
  * @internal
  * Experimental export
  **/
-const MonacoEditorLazy = (props: ReactMonacoEditorProps) => {
+export const ReactMonacoEditorLazy = (props: ReactMonacoEditorProps) => {
   const styles = useStyles2(getStyles);
   const { loading, error, dependency } = useAsyncDependency(
     import(/* webpackChunkName: "react-monaco-editor" */ './ReactMonacoEditor')
@@ -31,13 +31,21 @@ const MonacoEditorLazy = (props: ReactMonacoEditorProps) => {
       <ErrorWithStack
         title="React Monaco Editor failed to load"
         error={error}
-        errorInfo={{ componentStack: error?.stack || '' }}
+        errorInfo={{ componentStack: error?.stack ?? '' }}
       />
     );
   }
 
   const ReactMonacoEditor = dependency.ReactMonacoEditor;
-  return <ReactMonacoEditor {...props} loading={props.loading ?? null} />;
+  return (
+    <ReactMonacoEditor
+      {...props}
+      loading={props.loading ?? null}
+      wrapperProps={{
+        'data-testid': selectors.components.ReactMonacoEditor.editorLazy,
+      }}
+    />
+  );
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
@@ -48,18 +56,3 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
   };
 };
-
-const withContainer = <P extends object>(Component: React.ComponentType<P>): React.ComponentType<P> => {
-  const WithContainer = (props: P) => (
-    // allow tests to easily determine if the code editor has rendered in any of its three states (loading, error, or ready)
-    <div data-testid={selectors.components.ReactMonacoEditor.container}>
-      <Component {...props} />
-    </div>
-  );
-
-  WithContainer.displayName = Component.displayName;
-
-  return WithContainer;
-};
-
-export const ReactMonacoEditorLazy = withContainer(MonacoEditorLazy);
diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
index ddfdd665f80..e98e694f093 100644
--- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
+++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
@@ -27,7 +27,7 @@ describe('MonacoFieldWrapper', () => {
     renderComponent();
 
     await waitFor(async () => {
-      const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container);
+      const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
       expect(monacoEditor).toBeInTheDocument();
     });
   });
diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx
index 5686179490c..6d003381237 100644
--- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx
+++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx
@@ -33,7 +33,7 @@ describe('MonacoQueryField', () => {
   test('Renders with no errors', async () => {
     renderComponent();
 
-    const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container);
+    const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
     expect(monacoEditor).toBeInTheDocument();
   });
 });
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.test.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.test.tsx
index 3e850b09175..efa2c070d1f 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.test.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.test.tsx
@@ -34,7 +34,7 @@ describe('LokiQueryCodeEditor', () => {
     props.showExplain = true;
     props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
     render(<LokiQueryCodeEditor {...props} query={defaultQuery} />);
-    const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container);
+    const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
     expect(monacoEditor).toBeInTheDocument();
     expect(screen.getByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
   });
@@ -43,7 +43,7 @@ describe('LokiQueryCodeEditor', () => {
     const props = createDefaultProps();
     props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
     render(<LokiQueryCodeEditor {...props} query={defaultQuery} />);
-    const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container);
+    const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
     expect(monacoEditor).toBeInTheDocument();
     expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
   });