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

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',

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);