Implement JSON formatting and syntax highlighting

Enhance UX in Dashboard with JSON text editor using Monaco Editor
(@monaco-editor/react) for improved formatting, syntax highlighting,
and validation error reporting.

Signed-off-by: AmerMesanovic <amer.mesanovic@secomind.com>

Author: AmerMesanovic

package-lock.json

@@ -49,6 +49,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@monaco-editor/react": "^4.6.0",
     "@projectstorm/react-canvas-core": "^7.0.2",
     "@projectstorm/react-diagrams": "^7.0.4",
     "@reduxjs/toolkit": "^2.5.0",

package.json

@@ -30,6 +30,7 @@ import AstarteProvider, { useAstarte } from './AstarteManager';
 import type { DashboardConfig } from './types';
 import Snackbar from './ui/Snackbar';
 import createReduxStore from './store';
+import { MonacoProvider } from 'components/MonacoContext';
 
 const DashboardSidebar = () => {
   const config = useConfig();
@@ -142,15 +143,17 @@ interface Props {
 export default ({ config }: Props): React.ReactElement => (
   <AlertsProvider>
     <RouterProvider>
-      {config ? (
-        <ConfigProvider config={config}>
-          <AstarteProvider config={config}>
-            <Dashboard />
-          </AstarteProvider>
-        </ConfigProvider>
-      ) : (
-        <StandaloneEditor />
-      )}
+      <MonacoProvider>
+        {config ? (
+          <ConfigProvider config={config}>
+            <AstarteProvider config={config}>
+              <Dashboard />
+            </AstarteProvider>
+          </ConfigProvider>
+        ) : (
+          <StandaloneEditor />
+        )}
+      </MonacoProvider>
     </RouterProvider>
     <Snackbar />
   </AlertsProvider>

src/App.tsx

@@ -35,6 +35,8 @@ import _ from 'lodash';
 
 import Icon from './Icon';
 import MappingEditor from './MappingEditor';
+import JsonEditor from './JsonEditor';
+import { AstarteInterfaceSchema } from '../schemas/jsonSchemas';
 
 interface FormControlWarningProps {
   message?: string;
@@ -777,7 +779,7 @@ export default ({
 
   return (
     <Row>
-      <Col md={isSourceVisible ? 6 : 12}>
+      <Col md={isSourceVisible ? 6 : 12} className="z-1">
         <Container fluid className="bg-white rounded p-3">
           <Form>
             <Stack gap={3}>
@@ -1103,16 +1105,22 @@ export default ({
         <Col md={6}>
           <Form.Group controlId="interfaceSource" className="h-100 d-flex flex-column">
             <Form.Control
-              as="textarea"
-              className="flex-grow-1 font-monospace"
-              value={interfaceSource}
-              onChange={handleInterfaceSourceChange}
+              as="div"
               autoComplete="off"
               required
               isValid={isValidInterfaceSource}
               isInvalid={!isValidInterfaceSource}
-            />
-            <Form.Control.Feedback type="invalid">{interfaceSourceError}</Form.Control.Feedback>
+              className="flex-grow-1 font-monospace"
+            >
+              <JsonEditor
+                resource={AstarteInterfaceSchema}
+                value={interfaceSource}
+                onChange={handleInterfaceSourceChange}
+              />
+            </Form.Control>
+            {!isValidInterfaceSource && (
+              <Form.Control.Feedback type="invalid">{interfaceSourceError}</Form.Control.Feedback>
+            )}
           </Form.Group>
         </Col>
       )}

src/components/InterfaceEditor.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback } from 'react';
+import MonacoEditor from '@monaco-editor/react';
+
+interface JsonEditorProps {
+  resource: {};
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const JsonEditor: React.FC<JsonEditorProps> = React.memo(({ resource, value, onChange }) => {
+  const handleChange = useCallback(
+    (newValue: any) => {
+      const e = { target: { value: newValue } } as React.ChangeEvent<HTMLInputElement>;
+      onChange(e);
+    },
+    [onChange],
+  );
+
+  const handleEditorMount = (editor: any, monaco: any) => {
+    if (monaco) {
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        schemas: [
+          {
+            fileMatch: ['*'],
+            schema: resource,
+            uri: '',
+          },
+        ],
+      });
+
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ strict: true });
+
+      monaco.languages.registerCompletionItemProvider('json', {
+        provideCompletionItems: (
+          model: {
+            getValueInRange: (arg0: {
+              startLineNumber: any;
+              startColumn: number;
+              endLineNumber: any;
+              endColumn: any;
+            }) => any;
+          },
+          position: { lineNumber: any; column: any },
+        ) => {
+          const textUntilPosition = model.getValueInRange({
+            startLineNumber: position.lineNumber,
+            startColumn: 1,
+            endLineNumber: position.lineNumber,
+            endColumn: position.column,
+          });
+
+          if (!/\"type\"\s*:\s*\"?$/.test(textUntilPosition)) {
+            return { suggestions: [] };
+          }
+
+          return { suggestions: [] };
+        },
+      });
+    }
+  };
+
+  return (
+    <MonacoEditor
+      language="json"
+      value={value}
+      onChange={handleChange}
+      options={{
+        theme: 'light',
+        quickSuggestions: true,
+        suggestOnTriggerCharacters: true,
+      }}
+      onMount={handleEditorMount}
+    />
+  );
+});
+
+export default JsonEditor;

src/components/JsonEditor.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import monaco from '@monaco-editor/react';
+
+interface MonacoContextType {
+  monaco: typeof monaco | null;
+}
+
+const MonacoContext = createContext<MonacoContextType | undefined>(undefined);
+
+export const MonacoProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [monacoInstance, setMonacoInstance] = useState<typeof monaco | null>(null);
+
+  useEffect(() => {
+    if (!monacoInstance) {
+      setMonacoInstance(monaco);
+    }
+  }, [monacoInstance]);
+
+  return (
+    <MonacoContext.Provider value={{ monaco: monacoInstance }}>{children}</MonacoContext.Provider>
+  );
+};
+
+export const useMonacoContext = (): MonacoContextType => {
+  const context = useContext(MonacoContext);
+  if (!context) {
+    throw new Error('useMonacoContext must be used within a MonacoProvider');
+  }
+  return context;
+};

src/components/MonacoContext.tsx

@@ -24,6 +24,8 @@ import { AstarteTriggerDeliveryPolicyDTO } from 'astarte-client/types/dto';
 import * as yup from 'yup';
 import { AstarteTriggerDeliveryPolicy } from 'astarte-client/models/Policy';
 import TriggerDeliveryPolicyHandler from './TriggerDeliveryPolicyHandler';
+import { DeliveryPoliciesSchema } from 'schemas/jsonSchemas';
+import JsonEditor from './JsonEditor';
 
 const validateName = (name: string) => {
   const regex = /^(?!@).{1,128}$/;
@@ -250,17 +252,20 @@ export default ({
         <Col md={6}>
           <Form.Group controlId="policySource" className="h-100 d-flex flex-column">
             <Form.Control
-              as="textarea"
+              as="div"
               className="flex-grow-1 font-monospace"
-              value={policySource}
-              onChange={handlePolicySourceChange}
               autoComplete="off"
               required
               readOnly={isReadOnly}
               isValid={isValidPolicySource}
               isInvalid={!isValidPolicySource}
               spellCheck={false}
             />
+            <JsonEditor
+              resource={DeliveryPoliciesSchema}
+              value={policySource}
+              onChange={handlePolicySourceChange}
+            />
             <Form.Control.Feedback type="invalid">{policySourceError}</Form.Control.Feedback>
           </Form.Group>
         </Col>

src/components/TriggerDeliveryPolicyEditor.tsx

@@ -29,6 +29,8 @@ import EditAmqpHeaderModal from './EditAmqpHeaderModal';
 import EditHttpHeaderModal from './EditHttpHeaderModal';
 import DeleteAmqpHeaderModal from './DeleteAmqpHeaderModal';
 import DeleteHttpHeaderModal from './DeleteHttpHeaderModal';
+import JsonEditor from 'components/JsonEditor';
+import { AstarteTriggerSchema } from 'schemas/jsonSchemas';
 
 const defaultTrigger: AstarteTrigger = {
   name: '',
@@ -203,22 +205,25 @@ export default ({
 
   const handleFetchInterfacesForTrigger = useCallback(
     async (trigger: AstarteTrigger) => {
-      await handleFetchInterfacesName();
+      const names = await handleFetchInterfacesName();
       const interfaceName = _.get(trigger, 'simpleTriggers[0].interfaceName') as string | undefined;
       if (!interfaceName || interfaceName === '*') {
         return trigger;
       }
-      const ifaceMajors = await handleFetchInterfaceMajors(interfaceName);
-      let ifaceMajor: number | undefined = _.get(trigger, 'simpleTriggers[0].interfaceMajor');
-      if (ifaceMajor == null) {
-        if (ifaceMajors.length === 0) {
-          return trigger;
+      if (interfaceName in names) {
+        const ifaceMajors = await handleFetchInterfaceMajors(interfaceName);
+        let ifaceMajor: number | undefined = _.get(trigger, 'simpleTriggers[0].interfaceMajor');
+        if (ifaceMajor == null) {
+          if (ifaceMajors.length === 0) {
+            return trigger;
+          }
+          ifaceMajor = Math.max(...ifaceMajors);
+          _.set(trigger as AstarteTrigger, 'simpleTriggers[0].interfaceMajor', ifaceMajor);
         }
-        ifaceMajor = Math.max(...ifaceMajors);
-        _.set(trigger as AstarteTrigger, 'simpleTriggers[0].interfaceMajor', ifaceMajor);
+
+        const interfaceMajor = ifaceMajor;
+        await handleFetchInterface({ interfaceName, interfaceMajor });
       }
-      const interfaceMajor = ifaceMajor;
-      await handleFetchInterface({ interfaceName, interfaceMajor });
       return trigger;
     },
     [handleFetchInterfacesName, handleFetchInterfaceMajors, handleFetchInterface],
@@ -384,6 +389,7 @@ export default ({
       const { value } = e.target;
       setTriggerSource(value);
       let triggerSourceJSON: Record<string, unknown> | null = null;
+
       try {
         triggerSourceJSON = JSON.parse(value);
       } catch {
@@ -533,15 +539,17 @@ export default ({
         <Col md={6}>
           <Form.Group controlId="triggerSource" className="h-100 d-flex flex-column">
             <Form.Control
-              as="textarea"
+              as="div"
               className="flex-grow-1 font-monospace"
               autoComplete="off"
               spellCheck={false}
               required
-              readOnly={isReadOnly}
+              isInvalid={!!triggerSourceError}
+            />
+            <JsonEditor
+              resource={AstarteTriggerSchema(interfacesName, realm, policiesName)}
               value={triggerSource}
               onChange={handleTriggerSourceChange}
-              isInvalid={!!triggerSourceError}
             />
             <Form.Control.Feedback type="invalid">{triggerSourceError}</Form.Control.Feedback>
           </Form.Group>