Cleanup process editor

frontend/app-development/features/processEditor/ProcessEditor.tsx

@@ -60,6 +60,7 @@
     false,
   );
   const { data: layoutSets } = useLayoutSetsQuery(org, app);
+  console.log('layoutSets processeditor', layoutSets?.sets);
 
   const pendingApiOperations: boolean =
     mutateBpmnPending ||
@@ -88,6 +89,7 @@
   };
 
   const onProcessTaskAdd = (taskMetadata: OnProcessTaskEvent): void => {
+    console.log('add', layoutSets.sets);
     const onProcessTaskAddHandler = new OnProcessTaskAddHandler(
       org,
       app,

frontend/libs/studio-hooks/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useDebounce';
 export * from './useForwardedRef';
 export * from './usePropState';
 export * from './useUniqueKeys';
+export * from './useUnmount';

frontend/libs/studio-hooks/src/hooks/useUnmount.test.ts

@@ -0,0 +1,46 @@
+import type { RenderHookResult } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
+import { useUnmount } from './useUnmount';
+
+describe('useUnmount', () => {
+  it('Does not call the function on first render', () => {
+    const fun = jest.fn();
+    renderUseUnmount(fun);
+    expect(fun).not.toHaveBeenCalled();
+  });
+
+  it('Does not call the function on rerender', () => {
+    const fun = jest.fn();
+    const { rerender } = renderUseUnmount(fun);
+    rerender({ fun });
+    expect(fun).not.toHaveBeenCalled();
+  });
+
+  it('Calls the function on unmount', () => {
+    const fun = jest.fn();
+    const { unmount } = renderUseUnmount(fun);
+    unmount();
+    expect(fun).toHaveBeenCalledTimes(1);
+  });
+
+  it('Calls the most recent function on unmount when it has rendered with different functions', () => {
+    const firstFun = jest.fn();
+    const secondFun = jest.fn();
+    const { rerender, unmount } = renderUseUnmount(firstFun);
+    rerender({ fun: secondFun });
+    unmount();
+    expect(firstFun).not.toHaveBeenCalled();
+    expect(secondFun).toHaveBeenCalledTimes(1);
+  });
+});
+
+type RenderUseUnmountProps = {
+  fun: () => void;
+};
+
+function renderUseUnmount(fun: () => void): RenderHookResult<void, RenderUseUnmountProps> {
+  const props: RenderUseUnmountProps = { fun };
+  return renderHook<void, RenderUseUnmountProps>((props) => useUnmount(props.fun), {
+    initialProps: props,
+  });
+}

frontend/libs/studio-hooks/src/hooks/useUnmount.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function useUnmount(fun: () => void): void {
+  const functionRef = useRef<() => void>(fun);
+
+  useEffect(() => {
+    functionRef.current = fun;
+  }, [fun]);
+
+  useEffect(() => () => functionRef.current(), []);
+}

frontend/packages/process-editor/src/components/Canvas/BPMNEditor/BPMNEditor.test.tsx

@@ -6,9 +6,7 @@ import { BpmnConfigPanelFormContextProvider } from '../../../contexts/BpmnConfig
 import { textMock } from '@studio/testing/mocks/i18nMock';
 
 jest.mock('../../../hooks/useBpmnEditor', () => ({
-  useBpmnEditor: jest.fn().mockReturnValue({
-    canvasRef: { current: document.createElement('div') },
-  }),
+  useBpmnEditor: jest.fn(),
 }));
 
 describe('BPMNEditor', () => {

frontend/packages/process-editor/src/components/Canvas/BPMNEditor/BPMNEditor.tsx

@@ -4,7 +4,6 @@ import { useBpmnEditor } from '../../../hooks/useBpmnEditor';
 import './BPMNEditor.css';
 
 export const BPMNEditor = (): React.ReactElement => {
-  const { canvasRef } = useBpmnEditor();
-
-  return <div className={classes.editorContainer} ref={canvasRef}></div>;
+  const ref = useBpmnEditor();
+  return <div className={classes.editorContainer} ref={ref} />;
 };

frontend/packages/process-editor/src/contexts/BpmnContext.tsx

@@ -12,6 +12,9 @@ export type BpmnContextProps = {
   appLibVersion: string;
   bpmnDetails: BpmnDetails;
   setBpmnDetails: React.Dispatch<React.SetStateAction<BpmnDetails>>;
+  isInitialized: boolean;
+  setIsInitialized: React.Dispatch<React.SetStateAction<boolean>>;
+  initialBpmnXml: string;
 };
 
 export const BpmnContext = createContext<Partial<BpmnContextProps>>(undefined);
@@ -27,6 +30,8 @@ export const BpmnContextProvider = ({
   appLibVersion,
 }: Partial<BpmnContextProviderProps>) => {
   const [bpmnDetails, setBpmnDetails] = useState<BpmnDetails>(null);
+  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+  const [initialBpmnXml] = useState<string>(bpmnXml);
 
   const isEditAllowed =
     supportsProcessEditor(appLibVersion) ||
@@ -56,6 +61,9 @@ export const BpmnContextProvider = ({
         appLibVersion,
         bpmnDetails,
         setBpmnDetails,
+        isInitialized,
+        setIsInitialized,
+        initialBpmnXml,
       }}
     >
       {children}