fixed intellisense and autocomplete for connect pipeline editor and fixed CSS cascade issue with popover not showing (#2272)

* fixed intellisense and autocomplete for connect pipeline editor and fixed CSS cascade issue with popover not showing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: fixed uri and mounting bug

* fix: updated schema url and fixed ultracite mcp link

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: eblairmckee

frontend/.mcp.json

@@ -6,7 +6,7 @@
     },
     "ultracite": {
       "command": "npx",
-      "args": ["-y", "mcp-remote", "https://www.ultracite.ai/api/mcp/mcp"]
+      "args": ["-y", "mcp-remote", "https://docs.ultracite.ai/mcp"]
     }
   }
 }

frontend/src/components/ui/yaml/yaml-editor.tsx

@@ -9,7 +9,7 @@
  * by the Apache License, Version 2.0
  */
 
-import Editor, { type EditorProps, type Monaco } from '@monaco-editor/react';
+import Editor, { type EditorProps } from '@monaco-editor/react';
 import 'monaco-editor';
 import type { editor } from 'monaco-editor';
 import type { JSONSchema } from 'monaco-yaml';
@@ -28,6 +28,7 @@ const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
   minimap: {
     enabled: false,
   },
+  fixedOverflowWidgets: true,
   roundedSelection: false,
   padding: {
     top: 8,
@@ -57,63 +58,53 @@ const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
   },
 } as const;
 
-const defaultFallbackSchema: MonacoYamlOptions = {
-  enableSchemaRequest: false,
-  format: true,
-  completion: true,
-  validate: true,
-  schemas: [
-    {
-      fileMatch: ['**/*.yaml', '**/*.yml'],
-      schema: {
-        type: 'object',
+function buildMonacoYamlOptions(
+  schema?: YamlEditorProps['schema'],
+): MonacoYamlOptions {
+  const schemaUri = 'https://raw.githubusercontent.com/redpanda-data/console/refs/heads/master/frontend/src/assets/rp-connect-schema.json';
+  const inlineSchema =
+    schema?.definitions || schema?.properties
+      ? {
+          type: 'object' as const,
+          ...(schema.definitions && { definitions: schema.definitions }),
+          ...(schema.properties && { properties: schema.properties }),
+        }
+      : { type: 'object' as const };
+
+  return {
+    enableSchemaRequest: false,
+    format: true,
+    completion: true,
+    validate: true,
+    schemas: [
+      {
+        fileMatch: ['**/*.yaml', '**/*.yml'],
+        schema: inlineSchema,
+        uri: schemaUri,
       },
-      uri: 'http://example.com/yaml-schema.json',
-    },
-  ],
-};
+    ],
+  };
+}
 
 export const YamlEditor = (props: YamlEditorProps) => {
   const { options: givenOptions, schema, ...rest } = props;
   const options = { ...defaultOptions, ...(givenOptions ?? {}) };
-  const monacoRef = useRef<Monaco | null>(null);
   const yamlRef = useRef<MonacoYaml | null>(null);
+  const hasInitializedRef = useRef(false);
 
-  // Build Monaco YAML options with schema from props or fallback
-  const monacoYamlOptions = useMemo<MonacoYamlOptions>(() => {
-    if (schema?.definitions || schema?.properties) {
-      return {
-        enableSchemaRequest: false,
-        format: true,
-        completion: true,
-        validate: true,
-        schemas: [
-          {
-            fileMatch: ['**/*.yaml', '**/*.yml'],
-            schema: {
-              type: 'object',
-              ...(schema.definitions && { definitions: schema.definitions }),
-              ...(schema.properties && { properties: schema.properties }),
-            },
-            uri: 'https://redpanda-connect-schema.json',
-          },
-        ],
-      };
-    }
-    return defaultFallbackSchema;
-  }, [schema]);
+  const monacoYamlOptions = useMemo<MonacoYamlOptions>(
+    () => buildMonacoYamlOptions(schema),
+    [schema],
+  );
 
-  // Reconfigure Monaco YAML when schema changes
+  // Update Monaco YAML when schema changes after initial mount
   useEffect(() => {
-    if (monacoRef.current) {
-      // Dispose previous YAML configuration
-      if (yamlRef.current) {
-        yamlRef.current.dispose();
-      }
-
-      // Create new YAML configuration with updated schema
-      yamlRef.current = configureMonacoYaml(monacoRef.current, monacoYamlOptions);
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      return;
     }
+
+    yamlRef.current?.update(monacoYamlOptions);
   }, [monacoYamlOptions]);
 
   // Cleanup on unmount
@@ -127,13 +118,13 @@ export const YamlEditor = (props: YamlEditorProps) => {
 
   return (
     <Editor
-      onMount={(_, monaco) => {
-        monacoRef.current = monaco;
+      beforeMount={(monaco) => {
         yamlRef.current = configureMonacoYaml(monaco, monacoYamlOptions);
       }}
       defaultLanguage="yaml"
       loading={<LoadingPlaceholder />}
       options={options}
+      path="pipeline.yaml"
       wrapperProps={{
         style: {
           minWidth: 0,

frontend/src/config.ts

@@ -393,28 +393,27 @@ export const embeddedAvailableRoutesObservable = {
 export const setup = memoizeOne((setupArgs: SetConfigArguments) => {
   setConfig(setupArgs);
 
+  // Set MonacoEnvironment synchronously before loader.init() to avoid race
+  // where the editor mounts before the worker URL resolver is available
+  window.MonacoEnvironment = {
+    getWorkerUrl(_, label: string): string {
+      switch (label) {
+        case 'editorWorkerService': {
+          return `${window.location.origin}/static/js/editor.worker.js`;
+        }
+        case 'typescript': {
+          return `${window.location.origin}/static/js/ts.worker.js`;
+        }
+        default: {
+          return `${window.location.origin}/static/js/${label}.worker.js`;
+        }
+      }
+    },
+  };
+
   // Tell monaco editor where to load dependencies from
   loader.config({ monaco });
 
-  // Ensure yaml workers are being loaded locally as well
-  loader.init().then(() => {
-    window.MonacoEnvironment = {
-      getWorkerUrl(_, label: string): string {
-        switch (label) {
-          case 'editorWorkerService': {
-            return `${window.location.origin}/static/js/editor.worker.js`;
-          }
-          case 'typescript': {
-            return `${window.location.origin}/static/js/ts.worker.js`;
-          }
-          default: {
-            return `${window.location.origin}/static/js/${label}.worker.js`;
-          }
-        }
-      },
-    };
-  });
-
   // Get supported endpoints / kafka cluster version
   // In the business version, that endpoint (like any other api endpoint) is
   // protected, so we need to delay the call until the user is logged in.

frontend/src/globals.css

@@ -3,3 +3,10 @@
 @import "./components/redpanda-ui/style/theme.css";
 @import "tailwindcss";
 @import "tw-animate-css";
+
+/* tw-animate-css defines .fade-in { opacity: 0; animation: .3s forwards fadeIn; }
+   which collides with Monaco's internal .monaco-hover.fade-in class,
+   forcing hover widgets to be invisible. Override to restore opacity. */
+.monaco-hover.fade-in {
+  opacity: 1;
+}