feat: integrate new ParserJS with Spectral

craco.config.js

@@ -18,6 +18,11 @@ module.exports = {
         test: /\.yml$/i,
         loader: 'raw-loader',
       });
+
+      webpackConfig.resolve.alias = webpackConfig.resolve.alias || {};
+      webpackConfig.resolve.alias['nimma/fallbacks'] = require.resolve('./node_modules/nimma/dist/legacy/cjs/fallbacks/index.js');
+      webpackConfig.resolve.alias['nimma/legacy'] = require.resolve('./node_modules/nimma/dist/legacy/cjs/index.js');
+
       return webpackConfig;
     }
   }

package.json

@@ -29,12 +29,13 @@
     "@asyncapi/avro-schema-parser": "^1.1.0",
     "@asyncapi/converter": "^1.1.0",
     "@asyncapi/openapi-schema-parser": "^2.0.1",
-    "@asyncapi/parser": "^1.17.1",
+    "@asyncapi/parser": "^2.0.0-next-major.10",
     "@asyncapi/react-component": "^1.0.0-next.44",
     "@asyncapi/specs": "^4.0.0",
     "@headlessui/react": "1.4.1",
     "@hookstate/core": "^3.0.12",
     "@monaco-editor/react": "^4.4.5",
+    "@tippyjs/react": "^4.2.6",
     "js-base64": "^3.7.2",
     "js-file-download": "^0.4.12",
     "js-yaml": "^4.1.0",
@@ -122,7 +123,11 @@
   "jest": {
     "transformIgnorePatterns": [
       "node_modules/(?!(monaco-editor)/)"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^nimma/legacy$": "<rootDir>/node_modules/nimma/dist/legacy/cjs/index.js",
+      "^nimma/(.*)": "<rootDir>/node_modules/nimma/dist/cjs/$1"
+    }
   },
   "publishConfig": {
     "access": "public"

src/components/Editor/EditorDropdown.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import toast from 'react-hot-toast';
 import { FaEllipsisH } from 'react-icons/fa';
+import { hasErrorDiagnostic } from '@asyncapi/parser/cjs/utils';
 
 import {
   ConvertModal,
@@ -20,7 +21,7 @@ export const EditorDropdown: React.FunctionComponent<EditorDropdownProps> = () =
   const parserState = state.useParserState();
 
   const language = editorState.language.get();
-  const hasParserErrors = parserState.errors.get().length > 0;
+  const hasParserErrors = hasErrorDiagnostic(parserState.diagnostics.get());
 
   const importFileButton = (
     <label

src/components/Editor/MonacoWrapper.tsx

@@ -60,6 +60,7 @@ export const MonacoWrapper: React.FunctionComponent<MonacoWrapperProps> = ({
       options={{
         wordWrap: 'on',
         smoothScrolling: true,
+        glyphMargin: true,
       }}
       {...(props || {})}
     />

src/components/Modals/Settings/SettingsModal.tsx

@@ -7,46 +7,118 @@ import { SettingsTabs, SettingTab } from './SettingsTabs';
 import { ConfirmModal } from '../index';
 import { Switch } from '../../common';
 
+import { isDeepEqual } from '../../../helpers';
+import { EditorService } from '../../../services';
+
 import state from '../../../state';
-import { SettingsState } from '../../../state/settings';
 
-function saveOptions(settings: SettingsState = {} as any) {
-  state.settings.merge({
-    ...settings,
-  });
-  localStorage.setItem('studio-settings', JSON.stringify(state.settings.get()));
+import type { SettingsState } from '../../../state/settings';
+
+interface ShowGovernanceOptionProps {
+  label: 'warning' | 'information' | 'hint';
+  state: boolean;
+  setState: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+const ShowGovernanceOption: React.FunctionComponent<ShowGovernanceOptionProps> = ({
+  label,
+  state,
+  setState
+}) => {
+  return (
+    <div>
+      <div className="flex flex-col mt-4 text-sm">
+        <div className="flex flex-row content-center justify-between">
+          <label
+            htmlFor={`settings-governance-show-${label}`}
+            className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
+          >
+            Show&nbsp;<strong>{label}</strong>&nbsp;governance issues
+          </label>
+          <Switch
+            toggle={state}
+            onChange={setState}
+          />
+        </div>
+        <div className='text-gray-400 text-xs'>
+          Show {label} governance issues in the editor&apos;s&nbsp;<strong>Diagnostics</strong>&nbsp;tab.
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const SettingsModal: React.FunctionComponent = () => {
   const settingsState = state.useSettingsState();
   const [autoSaving, setAutoSaving] = useState(settingsState.editor.autoSaving.get());
   const [savingDelay, setSavingDelay] = useState(settingsState.editor.savingDelay.get());
+  const [governanceWarnings, setGovernanceWarnings] = useState(settingsState.governance.show.warnings.get());
+  const [governanceInformations, setGovernanceInformations] = useState(settingsState.governance.show.informations.get());
+  const [governanceHints, setGovernanceHints] = useState(settingsState.governance.show.hints.get());
   const [autoRendering, setAutoRendering] = useState(settingsState.templates.autoRendering.get());
   const [confirmDisabled, setConfirmDisabled] = useState(true);
 
   useEffect(() => {
-    const disable = JSON.stringify({
+    const newState: Partial<SettingsState> = {
       editor: {
         autoSaving,
         savingDelay,
       },
+      governance: {
+        show: {
+          warnings: governanceWarnings,
+          informations: governanceInformations,
+          hints: governanceHints,
+        },
+      },
       templates: {
         autoRendering,
       }
-    }) === localStorage.getItem('studio-settings');
-    setConfirmDisabled(disable);
-  }, [autoSaving, savingDelay, autoRendering]);
+    }; 
+    let oldState: Partial<SettingsState> = JSON.parse(localStorage.getItem('studio-settings') || '');
+    oldState = {
+      editor: oldState.editor,
+      governance: oldState.governance,
+      templates: oldState.templates,
+    };
+
+    const isThisSameObjects = isDeepEqual(newState, oldState);
+    setConfirmDisabled(isThisSameObjects);
+  }, [autoSaving, savingDelay, autoRendering, governanceWarnings, governanceInformations, governanceHints]);
+
+  const saveOptions = (settings: Partial<SettingsState> = {}) => {
+    settingsState.merge({
+      ...settings,
+    });
+    localStorage.setItem('studio-settings', JSON.stringify(settingsState.get()));
+  };
+
+  const onCancel = () => {
+    settingsState.merge({
+      showModal: false,
+      activeTab: '',
+    });
+  };
 
   const onSubmit = () => {
     saveOptions({
       editor: {
         autoSaving,
         savingDelay,
       },
+      governance: {
+        show: {
+          warnings: governanceWarnings,
+          informations: governanceInformations,
+          hints: governanceHints,
+        }
+      },
       templates: {
         autoRendering,
       }
     });
+
+    EditorService.applyMarkers(state.parser.diagnostics.get());
     setConfirmDisabled(true);
     toast.success(
       <div>
@@ -55,6 +127,7 @@ export const SettingsModal: React.FunctionComponent = () => {
         </span>
       </div>
     );
+    onCancel();
   };
 
   const tabs: Array<SettingTab> = [
@@ -66,10 +139,10 @@ export const SettingsModal: React.FunctionComponent = () => {
           <div className="flex flex-col mt-4 text-sm">
             <div className="flex flex-row content-center justify-between">
               <label
-                htmlFor="asyncapi-version"
+                htmlFor="settings-auto-saving"
                 className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
               >
-                Auto saving:
+                Auto saving
               </label>
               <Switch
                 toggle={autoSaving}
@@ -83,13 +156,13 @@ export const SettingsModal: React.FunctionComponent = () => {
           <div className={`flex flex-col mt-4 text-sm pl-8 ${autoSaving ? 'opacity-1' : 'opacity-25'}`}>
             <div className="flex flex-row content-center justify-between">
               <label
-                htmlFor="template-delay"
+                htmlFor="settings-template-delay"
                 className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
               >
-                Delay (in miliseconds):
+                Delay (in miliseconds)
               </label>
               <select
-                name="asyncapi-version"
+                name="settings-template-delay"
                 className="shadow-sm focus:ring-pink-500 focus:border-pink-500 w-1/4 block sm:text-sm rounded-md py-2 px-1 text-gray-700 border-pink-300 border-2"
                 onChange={e => setSavingDelay(JSON.parse(e.target.value))}
                 value={autoSaving ? savingDelay : ''}
@@ -110,6 +183,17 @@ export const SettingsModal: React.FunctionComponent = () => {
         </div>
       ),
     },
+    {
+      name: 'Governance',
+      tab: <span>Governance</span>,
+      content: (
+        <>
+          <ShowGovernanceOption label='warning' state={governanceWarnings} setState={setGovernanceWarnings} />
+          <ShowGovernanceOption label='information' state={governanceInformations} setState={setGovernanceInformations} />
+          <ShowGovernanceOption label='hint' state={governanceHints} setState={setGovernanceHints} />
+        </>
+      ),
+    },
     {
       name: 'Templates',
       tab: <span>Templates</span>,
@@ -121,7 +205,7 @@ export const SettingsModal: React.FunctionComponent = () => {
                 htmlFor="asyncapi-version"
                 className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
               >
-                Auto rendering:
+                Auto rendering
               </label>
               <Switch
                 toggle={autoRendering}
@@ -141,6 +225,7 @@ export const SettingsModal: React.FunctionComponent = () => {
       title={'Studio settings'}
       confirmText="Save"
       confirmDisabled={confirmDisabled}
+      show={settingsState.showModal.get()}
       opener={
         <button
           className={'flex border-l-2 text-gray-500 hover:text-white border-gray-800 focus:outline-none border-box p-4'}
@@ -151,6 +236,7 @@ export const SettingsModal: React.FunctionComponent = () => {
         </button>
       }
       onSubmit={onSubmit}
+      onCancel={onCancel}
     >
       <SettingsTabs tabs={tabs} />
     </ConfirmModal>

src/components/Modals/Settings/SettingsTabs.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import state from '../../../state';
+
 export interface SettingTab {
   name: string;
   tab: React.ReactNode;
@@ -8,14 +10,14 @@ export interface SettingTab {
 
 interface SettingTabsProps {
   tabs: Array<SettingTab>;
-  active?: string;
 }
 
 export const SettingsTabs: React.FunctionComponent<SettingTabsProps> = ({
   tabs = [],
-  active = '',
 }) => {
-  const [activeTab, setActiveTab] = useState(active || tabs[0]?.name);
+  const settingsState = state.useSettingsState();
+  const stateActiveTab = settingsState.activeTab.get();
+  const [activeTab, setActiveTab] = useState(tabs.some(tab => tab.name === stateActiveTab) ? stateActiveTab : tabs[0]?.name);
 
   if (tabs.length === 0) {
     return null;