fix(deps): update @patternfly

package.json

@@ -9,12 +9,12 @@
     "packages/*"
   ],
   "resolutions": {
-    "@patternfly/patternfly": "5.2.1",
-    "@patternfly/react-code-editor": "5.1.0",
-    "@patternfly/react-core": "5.2.2",
-    "@patternfly/react-icons": "5.2.1",
-    "@patternfly/react-table": "5.2.2",
-    "@patternfly/react-topology": "5.2.1",
+    "@patternfly/patternfly": "5.3.1",
+    "@patternfly/react-code-editor": "5.3.3",
+    "@patternfly/react-core": "5.3.3",
+    "@patternfly/react-icons": "5.3.2",
+    "@patternfly/react-table": "5.3.3",
+    "@patternfly/react-topology": "5.4.0-prerelease.10",
     "axios": "1.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/ui/package.json

@@ -46,12 +46,12 @@
     "@kaoto-next/uniforms-patternfly": "^0.6.10",
     "@kie-tools-core/editor": "0.32.0",
     "@kie-tools-core/notifications": "0.32.0",
-    "@patternfly/patternfly": "5.2.1",
-    "@patternfly/react-code-editor": "5.1.0",
-    "@patternfly/react-core": "5.2.2",
-    "@patternfly/react-icons": "5.2.1",
-    "@patternfly/react-table": "5.2.2",
-    "@patternfly/react-topology": "5.2.1",
+    "@patternfly/patternfly": "5.3.1",
+    "@patternfly/react-code-editor": "5.3.3",
+    "@patternfly/react-core": "5.3.3",
+    "@patternfly/react-icons": "5.3.2",
+    "@patternfly/react-table": "5.3.3",
+    "@patternfly/react-topology": "5.4.0-prerelease.10",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.12.0",
     "ajv-draft-04": "^1.0.0",

packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx

@@ -47,7 +47,7 @@ describe('DataFormatEditor', () => {
 
   it('should render', async () => {
     render(<DataFormatEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -59,7 +59,7 @@ describe('DataFormatEditor', () => {
 
   it('should filter candidates with a text input', async () => {
     render(<DataFormatEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -75,7 +75,7 @@ describe('DataFormatEditor', () => {
 
   it('should clear filter and close the dropdown with close button', async () => {
     render(<DataFormatEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });

packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx

@@ -48,7 +48,7 @@ describe('LoadBalancerEditor', () => {
 
   it('should render', async () => {
     render(<LoadBalancerEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -62,7 +62,7 @@ describe('LoadBalancerEditor', () => {
 
   it('should filter candidates with a text input', async () => {
     render(<LoadBalancerEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -78,7 +78,7 @@ describe('LoadBalancerEditor', () => {
 
   it('should clear filter and close the dropdown with close button', async () => {
     render(<LoadBalancerEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });

packages/ui/src/components/SourceCode/SourceCode.tsx

@@ -1,7 +1,6 @@
 import { CodeEditor, CodeEditorProps, Language } from '@patternfly/react-code-editor';
-import * as monaco from 'monaco-editor';
 import { configureMonacoYaml } from 'monaco-yaml';
-import { FunctionComponent, Ref, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { FunctionComponent, MutableRefObject, Ref, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { EditorDidMount } from 'react-monaco-editor';
 import { SourceSchemaType, sourceSchemaConfig } from '../../models/camel';
 import { EntitiesContext } from '../../providers/entities.provider';
@@ -18,34 +17,33 @@ interface SourceCodeProps {
 export const SourceCode: FunctionComponent<SourceCodeProps> = (props) => {
   const editorRef = useRef<Parameters<EditorDidMount>[0] | null>(null);
   const entityContext = useContext(EntitiesContext);
+  const schemaType: SourceSchemaType = entityContext?.currentSchemaType ?? SourceSchemaType.Route;
+  const currentSchema = sourceSchemaConfig.config[schemaType].schema;
+  const monacoYamlHandlerRef: MutableRefObject<ReturnType<typeof configureMonacoYaml> | undefined> = useRef(undefined);
 
-  useEffect(() => {
-    const schemaType: SourceSchemaType = entityContext?.currentSchemaType ?? SourceSchemaType.Route;
-    const currentSchema = sourceSchemaConfig.config[schemaType].schema;
-    let monacoYamlHandler: ReturnType<typeof configureMonacoYaml> | undefined;
-
-    if (currentSchema) {
-      monacoYamlHandler = configureMonacoYaml(monaco, {
-        enableSchemaRequest: true,
-        hover: true,
-        completion: true,
-        validate: true,
-        format: true,
-        schemas: [
-          {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            schema: currentSchema.schema as any,
-            uri: currentSchema.uri,
-            fileMatch: ['*'],
-          },
-        ],
-      });
-    }
+  const editorProps: Ref<CodeEditorProps['editorProps']> = useRef({
+    beforeMount: (monaco) => {
+      if (currentSchema) {
+        const monacoYamlHandler = configureMonacoYaml(monaco, {
+          enableSchemaRequest: true,
+          hover: true,
+          completion: true,
+          validate: true,
+          format: true,
+          schemas: [
+            {
+              schema: currentSchema.schema,
+              uri: currentSchema.uri,
+              fileMatch: ['*'],
+            },
+          ],
+        });
 
-    return () => {
-      monacoYamlHandler?.dispose();
-    };
-  }, [entityContext?.currentSchemaType]);
+        /** Capturing the monacoYamlHandlerRef so we can dispose it when unmounting this component */
+        monacoYamlHandlerRef.current = monacoYamlHandler;
+      }
+    },
+  });
 
   const handleEditorDidMount: EditorDidMount = useCallback((editor) => {
     editorRef.current = editor;
@@ -81,6 +79,16 @@ export const SourceCode: FunctionComponent<SourceCodeProps> = (props) => {
     ];
   }, []);
 
+  useEffect(() => {
+    /**
+     * This useEffect acts as an unmount hook for the CodeEditor component
+     * It disposes the monacoYamlHandlerRef.current when the component is unmounted
+     */
+    return () => {
+      monacoYamlHandlerRef.current?.dispose();
+    };
+  }, []);
+
   return (
     <CodeEditor
       className="source-code-editor"
@@ -97,6 +105,7 @@ export const SourceCode: FunctionComponent<SourceCodeProps> = (props) => {
       onCodeChange={props.onCodeChange}
       customControls={customControls}
       language={Language.yaml}
+      editorProps={editorProps.current!}
       options={options.current!}
       onEditorDidMount={handleEditorDidMount}
     />

packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx

@@ -440,7 +440,7 @@ describe('CanvasForm', () => {
           </VisibleFlowsProvider>
         </EntitiesContext.Provider>,
       );
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });
@@ -497,7 +497,7 @@ describe('CanvasForm', () => {
       expect(camelRoute.from.steps[0].marshal!.avro).toBeUndefined();
       expect(camelRoute.from.steps[0].marshal!.id).toEqual('modified');
 
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });
@@ -546,7 +546,7 @@ describe('CanvasForm', () => {
           </VisibleFlowsProvider>
         </EntitiesContext.Provider>,
       );
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });
@@ -603,7 +603,7 @@ describe('CanvasForm', () => {
       expect(camelRoute.from.steps[0].loadBalance!.weighted).toBeUndefined();
       expect(camelRoute.from.steps[0].loadBalance!.id).toEqual('modified');
 
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });