Chore: Release 11.1.1 (#3854)

* fix: request body input focus issue (#3849)
* fix: request body not shown when first loaded

Author: Highbury1993

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-    ".": "11.1.0"
+    ".": "11.1.1"
 }

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [11.1.1](https://github.com/microsoftgraph/microsoft-graph-explorer-v4/compare/v11.1.0...v11.1.1) (2025-05-14)
+
+
+### Bug Fixes
+
+* request body input focus issue ([#3849](https://github.com/microsoftgraph/microsoft-graph-explorer-v4/issues/3849)) ([4d663e2](https://github.com/microsoftgraph/microsoft-graph-explorer-v4/commit/4d663e2ab8cdc7cc4b0323e2de458a4065abdb53))
+
 ## [11.1.0](https://github.com/microsoftgraph/microsoft-graph-explorer-v4/compare/v11.0.0...v11.1.0) (2025-04-28)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
         "name": "graph-explorer-v2",
-        "version": "11.1.0",
+        "version": "11.1.1",
         "private": true,
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",

package.json

@@ -2,7 +2,7 @@ sonar.projectKey=microsoftgraph_microsoft-graph-explorer-v4
 sonar.organization=microsoftgraph2
 sonar.projectName=microsoft-graph-explorer-v4
 // x-release-please-start-version
-sonar.projectVersion=11.1.0
+sonar.projectVersion=11.1.1
 // x-release-please-end
 sonar.host.url=https://sonarcloud.io
 

sonar-project.properties

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { makeStyles } from '@fluentui/react-components';
 import { Editor, OnChange } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
@@ -32,6 +32,7 @@ const useStyles = makeStyles({
 const Monaco = ({ body, onChange, language, readOnly, extraInfoElement, isVisible }: MonacoProps) => {
   const styles = useStyles();
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const [isEditorReady, setEditorReady] = useState(false);
 
   const editorOptions: editor.IStandaloneEditorConstructionOptions = {
     lineNumbers: 'off',
@@ -48,12 +49,15 @@ const Monaco = ({ body, onChange, language, readOnly, extraInfoElement, isVisibl
     wordSeparators: '"'
   };
 
-  let formattedBody: string | undefined;
-  if (typeof body === 'string') {
-    formattedBody = body;
-  } else if (body) {
-    formattedBody = formatJsonStringForAllBrowsers(body);
-  }
+  const formattedBody = useMemo(() => {
+    if (typeof body === 'string') {
+      return body;
+    }
+    if (body) {
+      return formatJsonStringForAllBrowsers(body);
+    }
+    return '';
+  }, [body]);
 
   // Recalculate layout when the tab becomes visible
   useEffect(() => {
@@ -62,23 +66,41 @@ const Monaco = ({ body, onChange, language, readOnly, extraInfoElement, isVisibl
     }
   }, [isVisible]);
 
+  // Update editor content without resetting cursor
+  useEffect(() => {
+    if (editorRef.current && isEditorReady) {
+      const currentValue = editorRef.current.getValue();
+      if (formattedBody !== currentValue) {
+        const model = editorRef.current.getModel();
+        if (model) {
+          editorRef.current.pushUndoStop();
+          model.pushEditOperations(
+            [],
+            [{ range: model.getFullModelRange(), text: formattedBody ?? '' }],
+            () => null
+          );
+        }
+      }
+    }
+  }, [formattedBody, isEditorReady]);
+
   return (
     <ThemeContext.Consumer>
       {(theme) => (
-        <div id=' monaco-editor'  className={styles.container}>
+        <div id='monaco-editor' className={styles.container}>
           {extraInfoElement}
           <Editor
-            key={formattedBody}
             language={language || 'json'}
             width='100%'
             height='100%'
-            value={formattedBody}
             options={editorOptions}
             onChange={onChange}
             theme={theme === 'light' ? 'vs' : 'vs-dark'}
             onMount={(editorInstance) => {
               editorRef.current = editorInstance;
               editorInstance.layout();
+              editorInstance.setValue(formattedBody ?? '');
+              setEditorReady(true);
             }}
           />
         </div>