fix: [#9346] Fix memory leak issues in VisualPanel components (#9468)

* Memory leak fixes in VisualPanel components * Update yarn-berry.lock file * Update yarn-berry.lock files Co-authored-by: tracyboehrer <tracyboehrer@users.noreply.github.com>
microsoft · Jan 21, 2023 · 28e7cae · 28e7cae
1 parent f2de658
commit 28e7cae
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 32 deletions.
diff --git a/Composer/packages/adaptive-flow/src/adaptive-flow-editor/AdaptiveFlowEditor.tsx b/Composer/packages/adaptive-flow/src/adaptive-flow-editor/AdaptiveFlowEditor.tsx
@@ -137,14 +137,6 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ onFocus, onBlur, schema
     editorEvent && handleEditorEvent(editorEvent.type, editorEvent.payload);
   };
 
-  const marqueeStyles = (_) => {
-    return {
-      root: {
-        width: '100%',
-        height: '100%',
-      },
-    };
-  };
   return (
     <CacheProvider value={emotionCache}>
       <NodeRendererContext.Provider value={nodeContext}>
@@ -158,15 +150,15 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ onFocus, onBlur, schema
             {...enableKeyboardCommandAttributes(handleCommand)}
             data-testid="visualdesigner-container"
           >
-            <SelectionContext.Provider value={selectionContext}>
-              <MarqueeSelection isDraggingConstrainedToRoot selection={selection} styles={marqueeStyles}>
-                <FlowToolbar
-                  flowCommentsVisible={flowCommentsVisible}
-                  flowZoomRate={flowZoomRate}
-                  focusedId={focusedId}
-                  toggleFlowComments={toggleFlowComments}
-                  updateFlowZoomRate={updateFlowZoomRate}
-                >
+            <FlowToolbar
+              flowCommentsVisible={flowCommentsVisible}
+              flowZoomRate={flowZoomRate}
+              focusedId={focusedId}
+              toggleFlowComments={toggleFlowComments}
+              updateFlowZoomRate={updateFlowZoomRate}
+            >
+              <SelectionContext.Provider value={selectionContext}>
+                <MarqueeSelection isDraggingConstrainedToRoot selection={selection}>
                   <div
                     className="flow-editor-container"
                     css={{
@@ -200,9 +192,9 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ onFocus, onBlur, schema
                       }}
                     />
                   </div>
-                </FlowToolbar>
-              </MarqueeSelection>
-            </SelectionContext.Provider>
+                </MarqueeSelection>
+              </SelectionContext.Provider>
+            </FlowToolbar>
           </div>
         </SelfHostContext.Provider>
       </NodeRendererContext.Provider>

diff --git a/Composer/packages/intellisense/src/hooks/useLanguageServer.ts b/Composer/packages/intellisense/src/hooks/useLanguageServer.ts
@@ -52,6 +52,10 @@ export const useLanguageServer = (
     ws.current.onmessage = (messageText) => {
       handleMessage(messageText);
     };
+
+    return () => {
+      ws.current.close();
+    };
   }, [url]);
 
   // If scopes change, update backend with info

diff --git a/Composer/packages/lib/code-editor/src/BaseEditor.tsx b/Composer/packages/lib/code-editor/src/BaseEditor.tsx
@@ -170,12 +170,24 @@ const BaseEditor: React.FC<BaseEditorProps> = (props) => {
 
   const onEditorMount: EditorDidMount = (getValue, editor) => {
     editorRef.current = editor;
+    const action = editorRef.current.addAction({
+      id: 'escape',
+      label: 'Escape editor',
+      keybindings: [MonacoKeyCode.Escape],
+      keybindingContext: null,
+      contextMenuGroupId: 'navigation',
+      contextMenuOrder: 1.5,
+      run: () => {
+        (document.activeElement as HTMLElement)?.blur();
+      },
+    });
 
     if (typeof editorDidMount === 'function') {
       editorDidMount(getValue, editor);
     }
 
     editor.onDidDispose(() => {
+      action.dispose();
       editorRef.current = undefined;
     });
   };
@@ -220,14 +232,6 @@ const BaseEditor: React.FC<BaseEditorProps> = (props) => {
     }
   }, [onChange, editorRef.current]);
 
-  // Add a command to escape from editor
-  useEffect(() => {
-    if (!editorRef.current) return;
-    editorRef.current.addCommand(MonacoKeyCode.Escape, () => {
-      (document.activeElement as HTMLElement)?.blur();
-    });
-  }, [editorRef.current]);
-
   const errorMsgFromDiagnostics = useMemo(() => {
     const errors = findErrors(diagnostics);
     return errors.length ? combineSimpleMessage(errors) : '';

diff --git a/Composer/packages/lib/code-editor/src/LuEditor.tsx b/Composer/packages/lib/code-editor/src/LuEditor.tsx
@@ -193,9 +193,10 @@ const LuEditor: React.FC<LULSPEditorProps> = (props) => {
 
     const uri = get(editor.getModel(), 'uri._formatted', '');
 
+    let webSocket: WebSocket;
     if (!window.monacoLUEditorInstance) {
       const url = createUrl(luServer);
-      const webSocket: WebSocket = createWebSocket(url);
+      webSocket = createWebSocket(url);
       listen({
         webSocket,
         onConnection: (connection: MessageConnection) => {
@@ -242,6 +243,10 @@ const LuEditor: React.FC<LULSPEditorProps> = (props) => {
       }
       sendRequestWithRetry(languageClient, 'initializeDocuments', { luOption, uri });
     }
+
+    return () => {
+      webSocket.close();
+    };
   }, [editor, onNavigateToLuPage]);
 
   const onInit: OnInit = (monaco) => {

diff --git a/Composer/packages/lib/code-editor/src/lg/LgCodeEditor.tsx b/Composer/packages/lib/code-editor/src/lg/LgCodeEditor.tsx
@@ -133,10 +133,11 @@ export const LgCodeEditor = (props: LgCodeEditorProps) => {
     }
 
     const uri = get(editor.getModel(), 'uri._formatted', '');
+    let webSocket: WebSocket;
 
     if (!window.monacoLGEditorInstance) {
       const url = createUrl(lgServer);
-      const webSocket: WebSocket = createWebSocket(url);
+      webSocket = createWebSocket(url);
       listen({
         webSocket,
         onConnection: (connection: MessageConnection) => {
@@ -172,6 +173,10 @@ export const LgCodeEditor = (props: LgCodeEditorProps) => {
         })
       );
     }
+
+    return () => {
+      webSocket.close();
+    };
   }, [editor, onNavigateToLgPage]);
 
   const onInit: OnInit = (monaco) => {

diff --git a/extensions/azurePublish/yarn-berry.lock b/extensions/azurePublish/yarn-berry.lock
@@ -1879,7 +1879,7 @@ __metadata:
 
 "@bfc/code-editor@file:../../Composer/packages/lib/code-editor::locator=azurePublish%40workspace%3A.":
   version: 0.0.0
-  resolution: "@bfc/code-editor@file:../../Composer/packages/lib/code-editor#../../Composer/packages/lib/code-editor::hash=8a2009&locator=azurePublish%40workspace%3A."
+  resolution: "@bfc/code-editor@file:../../Composer/packages/lib/code-editor#../../Composer/packages/lib/code-editor::hash=55cec5&locator=azurePublish%40workspace%3A."
   dependencies:
     "@emotion/react": ^11.1.3
     "@emotion/styled": ^11.1.3
@@ -1902,7 +1902,7 @@ __metadata:
     "@bfc/ui-shared": "*"
     react: 16.13.1
     react-dom: 16.13.1
-  checksum: 31372a3e7712e3ceecd68b084c2bd48695a5ebb5d82e1b6d773e901a5a0ad0c62be4c4bb99d7c11381a52b0e07b7a2346c8594b7f3285d46a01718a3df1bcb7c
+  checksum: 70f20aaf5321a7de6430f60a31fbb1fd7c43446e36c1b49ba24687522e004d9714975af24b44c2ac8938e7c5c62d921d1dc11efca7306281bfe80dd4094c29e7
   languageName: node
   linkType: hard