Fix: Expand/Collapse button on Response Preview editor (#1349)

* update moaco package

* update editor settings

* disable unique landmark rule

* show expand/collapse controls

package.json

@@ -12,6 +12,7 @@
         "@microsoft/applicationinsights-react-js": "2.3.1",
         "@microsoft/applicationinsights-web": "2.7.1",
         "@microsoft/microsoft-graph-client": "2.1.0",
+        "@monaco-editor/react": "4.3.1",
         "@ms-ofb/officebrowserfeedbacknpm": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
         "@svgr/webpack": "4.1.0",
         "adaptivecards": "1.2.3",
@@ -50,8 +51,8 @@
         "localforage": "1.7.3",
         "markdown-it": "10.0.0",
         "mini-css-extract-plugin": "0.5.0",
-        "monaco-editor": "0.15.6",
-        "monaco-editor-webpack-plugin": "1.7.0",
+        "monaco-editor": "^0.25.2",
+        "monaco-editor-webpack-plugin": "^4.0.0",
         "node-sass": "4.14.1",
         "optimize-css-assets-webpack-plugin": "5.0.1",
         "pnp-webpack-plugin": "1.2.1",
@@ -64,7 +65,6 @@
         "react-app-polyfill": "0.2.1",
         "react-dom": "16.8.2",
         "react-intl": "2.8.0",
-        "react-monaco-editor": "0.24.1",
         "react-redux": "7.1.0",
         "redux": "4.0.1",
         "redux-thunk": "2.3.0",

src/app/views/common/monaco/Monaco.tsx

@@ -1,14 +1,14 @@
 import { FocusZone } from '@fluentui/react';
+import Editor, { OnChange } from '@monaco-editor/react';
 import React from 'react';
-import MonacoEditor, { ChangeHandler } from 'react-monaco-editor';
 
 import { ThemeContext } from '../../../../themes/theme-context';
 import './monaco.scss';
 import { formatJsonStringForAllBrowsers } from './util/format-json';
 
 interface IMonaco {
   body: object | string | undefined;
-  onChange?: ChangeHandler | undefined;
+  onChange?: OnChange | undefined;
   verb?: string;
   language?: string;
   readOnly?: boolean;
@@ -29,7 +29,7 @@ export function Monaco(props: IMonaco) {
     <FocusZone disabled={true}>
       <div className='monaco-editor'>
         <ThemeContext.Consumer >
-          {(theme) => (<MonacoEditor
+          {(theme) => (<Editor
             width='800 !important'
             height={itemHeight}
             // @ts-ignore
@@ -45,7 +45,10 @@ export function Monaco(props: IMonaco) {
                 horizontal: 'visible',
                 horizontalScrollbarSize: 17
               },
-              wordWrap: 'on'
+              wordWrap: 'on',
+              folding: true,
+              foldingStrategy: 'indentation',
+              showFoldingControls: 'always'
             }}
             onChange={onChange}
             theme={theme === 'light' ? 'vs' : 'vs-dark'}

src/app/views/common/monaco/monaco.scss

@@ -2,7 +2,7 @@
 
 .monaco-editor {
   margin-left: 1px;
-  padding-top: $gutter;
+  margin-top: 5px;
   padding-bottom: $gutter;
   width: inherit !important;
 

src/app/views/query-runner/request/Request.tsx

@@ -49,6 +49,7 @@ export class Request extends Component<IRequestComponent, any> {
     const containerStyle: CSSProperties = {
       height: convertVhToPx(height, heightAdjustment),
       overflowY: 'hidden',
+      overflowX: 'hidden',
       borderBottom: '1px solid #ddd'
     };
 

src/tests/accessibility/accessibility.spec.ts

@@ -42,7 +42,8 @@ describe('Graph Explorer accessibility', () => {
         'document-title',
         'html-has-lang',
         'page-has-heading-one',
-        'button-name'
+        'button-name',
+        'landmark-unique'
       ])
       .analyze();
     expect(accessibilityScanResults.violations).toStrictEqual([]);