replace braces with monaco (#677)

Azure · Dec 10, 2024 · 7c81fa5 · 7c81fa5
1 parent 9d5b1f0
commit 7c81fa5
Show file tree

Hide file tree

Showing 26 changed files with 477 additions and 374 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,7 +80,6 @@
     "azure-iot-common": "1.12.14",
     "azure-iothub": "1.16.5",
     "body-parser": "1.20.3",
-    "brace": "0.11.1",
     "cors": "2.8.5",
     "crypto-browserify": "3.12.0",
     "date-fns": "2.14.0",
@@ -97,6 +96,7 @@
     "react-dom": "16.13.1",
     "react-i18next": "11.11.1",
     "react-jsonschema-form": "1.8.1",
+    "react-monaco-editor": "0.54.0",
     "react-router-dom": "5.2.0",
     "react-smooth-dnd": "0.11.0",
     "react-toastify": "4.4.0",

diff --git a/src/__snapshots__/themer.spec.tsx.snap b/src/__snapshots__/themer.spec.tsx.snap
@@ -305,7 +305,7 @@ exports[`themer matches snapshot 1`] = `
     <ContextProvider
       value={
         Object {
-          "editorTheme": "xcode",
+          "editorTheme": "light",
           "fabricTheme": Object {
             "palette": Object {
               "black": "#1d1d1d",

diff --git a/src/app/__mocks__/react-monaco-editor.js b/src/app/__mocks__/react-monaco-editor.js
@@ -0,0 +1,15 @@
+// eslint-disable-next-line unicorn/filename-case
+'use strict';
+import * as React from 'react';
+
+const MonacoEditor = () => React.createElement('div', null, 'MonacoEditorMock');
+export const EditorWillMount = jest.fn();
+export const monaco = {
+  editor: {
+    create: jest.fn(),
+    defineTheme: jest.fn(),
+    setModelLanguage: jest.fn(),
+  },
+};
+export default MonacoEditor;
+
diff --git a/src/app/css/_deviceDetail.scss b/src/app/css/_deviceDetail.scss
@@ -33,11 +33,6 @@
     }
 }
 
-.direct-method-json-editor {
-    height: 200px;
-    margin-bottom: 15px;
-}
-
 .cloud-to-device-message-text-field {
     margin-bottom: 15px;
 }

diff --git a/src/app/css/_deviceInterface.scss b/src/app/css/_deviceInterface.scss
@@ -20,14 +20,6 @@
 
             article {
                 height: 100%;
-
-                .interface-definition-json-editor
-                {
-                    height: 100%;
-                }
-                .invalid-interface-definition-json-editor {
-                    height: 100%;
-                }
             }
         }
     }

diff --git a/src/app/css/_deviceTwin.scss b/src/app/css/_deviceTwin.scss
@@ -6,10 +6,6 @@
 
 @media screen and (min-width: $screenSize) {
     .device-twin {
-        .json-editor {
-            height: 100%;
-        }
-
         article {
             height: 95%;
         }

diff --git a/src/app/devices/deviceTwin/components/__snapshots__/deviceTwin.spec.tsx.snap b/src/app/devices/deviceTwin/components/__snapshots__/deviceTwin.spec.tsx.snap
@@ -36,8 +36,8 @@ exports[`devices/components/deviceTwin snapshot matches snapshot 1`] = `
   <article
     className="device-twin device-detail"
   >
-    <JSONEditor
-      className="json-editor"
+    <MonacoEditorComponent
+      ariaLabel="deviceTwin.editorAriaLabel"
       content="{
 	\\"deviceEtag\\": \\"\\",
 	\\"deviceId\\": \\"test\\",
@@ -58,6 +58,7 @@ exports[`devices/components/deviceTwin snapshot matches snapshot 1`] = `
 	},
 	\\"version\\": 1
 }"
+      height={700}
       onChange={[Function]}
     />
   </article>

diff --git a/src/app/devices/deviceTwin/components/deviceTwin.tsx b/src/app/devices/deviceTwin/components/deviceTwin.tsx
@@ -14,14 +14,14 @@ import { SynchronizationStatus } from '../../../api/models/synchronizationStatus
 import { MultiLineShimmer } from '../../../shared/components/multiLineShimmer';
 import { HeaderView } from '../../../shared/components/headerView';
 import { useAsyncSagaReducer } from '../../../shared/hooks/useAsyncSagaReducer';
-import { JSONEditor } from '../../../shared/components/jsonEditor';
+import { MonacoEditorComponent } from '../../../shared/components/monacoEditor';
 import { deviceTwinReducer } from '../reducer';
 import { deviceTwinSaga } from '../saga';
 import { deviceTwinStateInitial } from '../state';
 import { useBreadcrumbEntry } from '../../../navigation/hooks/useBreadcrumbEntry';
-import '../../../css/_deviceTwin.scss';
 import { AppInsightsClient } from '../../../shared/appTelemetry/appInsightsClient';
 import { TELEMETRY_PAGE_NAMES, TELEMETRY_USER_ACTIONS } from '../../../../app/constants/telemetry';
+import '../../../css/_deviceTwin.scss';
 
 export const DeviceTwin: React.FC = () => {
     const { t } = useTranslation();
@@ -90,14 +90,16 @@ export const DeviceTwin: React.FC = () => {
         if (twinState === SynchronizationStatus.working || twinState === SynchronizationStatus.updating) {
             return <MultiLineShimmer className="device-detail"/>;
         }
+        const editorHeight = 700;
 
         return (
             <article className="device-twin device-detail">
                 { twin &&
-                    <JSONEditor
-                        className="json-editor"
+                    <MonacoEditorComponent
+                        height={editorHeight}
                         content={JSON.stringify(twin, null, '\t')}
                         onChange={onChange}
+                        ariaLabel={ResourceKeys.deviceTwin.editorAriaLabel}
                     />
                 }
             </article>

diff --git a/...vices/module/moduleIdentityTwin/components/__snapshots__/moduleIdentityTwin.spec.tsx.snap b/...vices/module/moduleIdentityTwin/components/__snapshots__/moduleIdentityTwin.spec.tsx.snap
@@ -31,9 +31,14 @@ exports[`moduleIdentityTwin snapshot matches snapshot after module twin is fetch
   />
   <article
     className="device-twin device-detail"
+    style={
+      Object {
+        "paddingTop": 10,
+      }
+    }
   >
-    <JSONEditor
-      className="json-editor"
+    <MonacoEditorComponent
+      ariaLabel="moduleIdentity.detail.twin"
       content="{
 	\\"authenticationType\\": \\"sas\\",
 	\\"cloudToDeviceMessageCount\\": 0,
@@ -52,6 +57,7 @@ exports[`moduleIdentityTwin snapshot matches snapshot after module twin is fetch
 		\\"secondaryThumbprint\\": null
 	}
 }"
+      height={700}
       onChange={[Function]}
     />
   </article>

diff --git a/src/app/devices/module/moduleIdentityTwin/components/moduleIdentityTwin.tsx b/src/app/devices/module/moduleIdentityTwin/components/moduleIdentityTwin.tsx
@@ -13,13 +13,13 @@ import { SynchronizationStatus } from '../../../../api/models/synchronizationSta
 import { getModuleIdentityTwinAction, updateModuleIdentityTwinAction } from '../actions';
 import { MultiLineShimmer } from '../../../../shared/components/multiLineShimmer';
 import { useAsyncSagaReducer } from '../../../../shared/hooks/useAsyncSagaReducer';
-import { JSONEditor } from '../../../../shared/components/jsonEditor';
+import { MonacoEditorComponent } from '../../../../shared/components/monacoEditor';
 import { moduleTwinReducer } from '../reducer';
 import { moduleIdentityTwinSagas } from '../saga';
 import { moduleTwinStateInitial } from '../state';
-import '../../../../css/_deviceDetail.scss';
 import { AppInsightsClient } from '../../../../shared/appTelemetry/appInsightsClient';
 import { TELEMETRY_PAGE_NAMES, TELEMETRY_USER_ACTIONS } from '../../../../../app/constants/telemetry';
+import '../../../../css/_deviceDetail.scss';
 
 export const ModuleIdentityTwin: React.FC = () => {
     const { t } = useTranslation();
@@ -87,14 +87,16 @@ export const ModuleIdentityTwin: React.FC = () => {
         if (moduleIdentityTwinSyncStatus === SynchronizationStatus.working || moduleIdentityTwinSyncStatus === SynchronizationStatus.updating) {
             return <MultiLineShimmer/>;
         }
+        const editorHeight = 700;
 
         return (
-            <article className="device-twin device-detail">
+            <article className="device-twin device-detail" style={{paddingTop: 10}}>
                 {moduleIdentityTwin &&
-                    <JSONEditor
+                    <MonacoEditorComponent
                         content={JSON.stringify(moduleIdentityTwin, null, '\t')}
-                        className="json-editor"
+                        height={editorHeight}
                         onChange={onChange}
+                        ariaLabel={ResourceKeys.moduleIdentity.detail.twin}
                     />
                 }
             </article>

diff --git a/src/app/devices/pnp/components/deviceInterfaces/__snapshots__/deviceInterfaces.spec.tsx.snap b/src/app/devices/pnp/components/deviceInterfaces/__snapshots__/deviceInterfaces.spec.tsx.snap
@@ -67,8 +67,8 @@ exports[`deviceInterfaces shows interface information when status is fetched 1`]
       <div
         className="pnp-interface-info-editor"
       >
-        <JSONEditor
-          className="interface-definition-json-editor"
+        <MonacoEditorComponent
+          ariaLabel="deviceInterfaces.jsonViewerArialLabel"
           content="{
 	\\"@id\\": \\"urn:azureiot:ModelDiscovery:DigitalTwin:1\\",
 	\\"@type\\": \\"Interface\\",
@@ -105,6 +105,7 @@ exports[`deviceInterfaces shows interface information when status is fetched 1`]
 	],
 	\\"@context\\": \\"https://azureiot.com/v1/contexts/Interface.json\\"
 }"
+          height={500}
         />
       </div>
     </section>

diff --git a/src/app/devices/pnp/components/deviceInterfaces/deviceInterfaces.tsx b/src/app/devices/pnp/components/deviceInterfaces/deviceInterfaces.tsx
@@ -14,7 +14,7 @@ import { ErrorBoundary } from '../../../shared/components/errorBoundary';
 import { getLocalizedData } from '../../../../api/dataTransforms/modelDefinitionTransform';
 import { MultiLineShimmer } from '../../../../shared/components/multiLineShimmer';
 import { MaskedCopyableTextField } from '../../../../shared/components/maskedCopyableTextField';
-import { JSONEditor } from '../../../../shared/components/jsonEditor';
+import { MonacoEditorComponent } from '../../../../shared/components/monacoEditor';
 import { ModelDefinitionSourceView } from '../../../shared/components/modelDefinitionSource';
 import { usePnpStateContext } from '../../context/pnpStateContext';
 import { SynchronizationStatus } from '../../../../api/models/synchronizationStatus';
@@ -94,12 +94,14 @@ export const DeviceInterfaces: React.FC = () => {
     };
 
     const renderInterfaceViewer = (isValidInterface: boolean) => {
+        const jsonViewerHeight = 500;
         return (
             <div className="pnp-interface-info-editor">
                 { modelDefinitionWithSource && modelDefinitionWithSource.modelDefinition &&
-                    <JSONEditor
-                        className={`${isValidInterface ? 'interface-definition-json-editor' : 'invalid-interface-definition-json-editor'}`}
+                    <MonacoEditorComponent
+                        height={jsonViewerHeight}
                         content={JSON.stringify(modelDefinitionWithSource.modelDefinition, null, '\t')}
+                        ariaLabel={ResourceKeys.deviceInterfaces.jsonViewerArialLabel}
                     />
                 }
             </div>

diff --git a/...es/pnp/components/modelConfiguration/__snapshots__/digitalTwinComponentList.spec.tsx.snap b/...es/pnp/components/modelConfiguration/__snapshots__/digitalTwinComponentList.spec.tsx.snap
@@ -31,15 +31,16 @@ exports[`DigitalTwinComponentList matches snapshot when empty model id is retrie
       className="modelContent"
       headerText="digitalTwin.pivot.content"
     >
-      <JSONEditor
-        className="interface-definition-json-editor"
+      <MonacoEditorComponent
+        ariaLabel="digitalTwin.pivot.content"
         content="{
 	\\"@context\\": \\"dtmi:dtdl:context;2\\",
 	\\"@id\\": \\"dtmi:plugnplay:hube2e:cm;1\\",
 	\\"@type\\": \\"Interface\\",
 	\\"contents\\": [],
 	\\"displayName\\": \\"IoT Hub E2E Tests\\"
 }"
+        height={400}
       />
     </PivotItem>
   </StyledPivot>

diff --git a/src/app/devices/pnp/components/modelConfiguration/digitalTwinComponentList.tsx b/src/app/devices/pnp/components/modelConfiguration/digitalTwinComponentList.tsx
@@ -14,7 +14,7 @@ import { getDeviceIdFromQueryString, getModuleIdentityIdFromQueryString } from '
 import { ROUTE_PARAMS, ROUTE_PARTS } from '../../../../constants/routes';
 import { DEFAULT_COMPONENT_FOR_DIGITAL_TWIN } from '../../../../constants/devices';
 import { ErrorBoundary } from '../../../shared/components/errorBoundary';
-import { JSONEditor } from '../../../../shared/components/jsonEditor';
+import { MonacoEditorComponent } from '../../../../shared/components/monacoEditor';
 import './digitalTwinDetail.scss';
 
 interface ModelContent {
@@ -23,6 +23,7 @@ interface ModelContent {
     modelId: string;
 }
 
+const jsonViewerHeight = 400;
 export const DigitalTwinComponentList: React.FC = () => {
     const { t } = useTranslation();
     const { url } = useRouteMatch();
@@ -133,9 +134,10 @@ export const DigitalTwinComponentList: React.FC = () => {
                     </ErrorBoundary>
                 </PivotItem>
                 <PivotItem headerText={t(ResourceKeys.digitalTwin.pivot.content)} className="modelContent">
-                    <JSONEditor
-                        className="interface-definition-json-editor"
+                    <MonacoEditorComponent
+                        height={jsonViewerHeight}
                         content={JSON.stringify(modelDefinitionWithSource.modelDefinition, null, '\t')}
+                        ariaLabel={ResourceKeys.digitalTwin.pivot.content}
                     />
                 </PivotItem>
             </Pivot>

diff --git a/src/app/devices/pnp/components/modelConfiguration/digitalTwinModelDefinition.tsx b/src/app/devices/pnp/components/modelConfiguration/digitalTwinModelDefinition.tsx
@@ -11,7 +11,7 @@ import { SynchronizationStatus } from '../../../../api/models/synchronizationSta
 import { ModelDefinitionSourceView } from '../../../shared/components/modelDefinitionSource';
 import { InterfaceNotFoundMessageBar } from '../../../shared/components/interfaceNotFoundMessageBar';
 import { MultiLineShimmer } from '../../../../shared/components/multiLineShimmer';
-import { JSONEditor } from '../../../../shared/components/jsonEditor';
+import { MonacoEditorComponent } from '../../../../shared/components/monacoEditor';
 import { DigitalTwinComponentList } from './digitalTwinComponentList';
 import './digitalTwinDetail.scss';
 
@@ -28,6 +28,7 @@ export const DigitalTwinModelDefinition: React.FC = () => {
         if (isModelDefinitionLoading) {
             return <MultiLineShimmer/>;
         }
+        const jsonViewerHeight = 400;
 
         return (
             <>
@@ -46,9 +47,10 @@ export const DigitalTwinModelDefinition: React.FC = () => {
                                     <MessageBar messageBarType={MessageBarType.error}>
                                         {t(ResourceKeys.deviceInterfaces.interfaceNotValid)}
                                     </MessageBar>
-                                    <JSONEditor
-                                        className="interface-definition-json-editor"
+                                    <MonacoEditorComponent
+                                        height={jsonViewerHeight}
                                         content={JSON.stringify(modelDefinitionWithSource.modelDefinition, null, '\t')}
+                                        ariaLabel={ResourceKeys.digitalTwin.pivot.content}
                                     />
                                 </>
                             }

diff --git a/src/app/devices/pnp/components/modelConfiguration/digitaltwinPnpConfigurationSteps.spec.tsx b/src/app/devices/pnp/components/modelConfiguration/digitaltwinPnpConfigurationSteps.spec.tsx
@@ -51,7 +51,7 @@ describe('DigitaltwinPnpConfigurationSteps', () => {
                 synchronizationStatus: SynchronizationStatus.fetched
             },
             modelDefinitionWithSource: {
-                payload: null,
+                payload: undefined,
                 synchronizationStatus: SynchronizationStatus.fetched
             }
         });
@@ -91,7 +91,7 @@ describe('DigitaltwinPnpConfigurationSteps', () => {
                 synchronizationStatus: SynchronizationStatus.fetched
             },
             modelDefinitionWithSource: {
-                payload: null,
+                payload: undefined,
                 synchronizationStatus: SynchronizationStatus.fetched
             }
         });

diff --git a/src/app/shared/components/__snapshots__/monacoEditor.spec.tsx.snap b/src/app/shared/components/__snapshots__/monacoEditor.spec.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MonacoEditorComponent matches snapshot 1`] = `
+<MonacoEditor
+  aria-label="test label"
+  className="editorStyleDark-109"
+  editorDidMount={[Function]}
+  height={100}
+  language="json"
+  options={
+    Object {
+      "automaticLayout": true,
+      "minimap": Object {
+        "enabled": false,
+      },
+      "readOnly": undefined,
+      "wordWrap": "on",
+      "wrappingIndent": "indent",
+    }
+  }
+  theme="vs-dark"
+  value="test"
+  width="98%"
+/>
+`;