Added spectral

Added lint panel

Fixed: core spec according to new oas schema
Added: Close button to lint panel
Added: Reaction to autolint spec on changes
Added: Basic search functionality in panel
Added: Minor improvements in panel
Fixed: Minor mobx issues

Author: codeasashu

package-lock.json

@@ -29,6 +29,7 @@
     "@blueprintjs/select": "^3.18.3",
     "@reduxjs/toolkit": "^1.6.1",
     "@stoplight/path": "^1.3.2",
+    "@stoplight/spectral-cli": "^6.1.0",
     "class-autobind-decorator": "^3.0.1",
     "classnames": "^2.3.1",
     "highlight.js": "^11.3.1",

package.json

@@ -1,4 +1,4 @@
-import {observable, action, makeObservable, runInAction} from 'mobx';
+import {observable, action, makeObservable, runInAction, reaction} from 'mobx';
 import {join} from 'lodash';
 import Graph from './graph';
 import {recomputeGraphNodes} from './graph/addNode';
@@ -82,6 +82,13 @@ class GraphStore {
       ]);
     };
 
+    reaction(
+      () => this.rootNode && this.rootNode.data.parsed,
+      (spec) => {
+        this.props.lintStore.lint(spec);
+      },
+    );
+
     this.removeNode = (nodeId) => {
       //e
       const node = this.getNodeById(nodeId); //t

src/Stores/graphStore.js

@@ -0,0 +1,51 @@
+import {makeObservable, observable, action} from 'mobx';
+import {DiagnosticSeverity} from '@stoplight/types';
+
+class LintStore {
+  errors = [];
+  warning = [];
+  info = [];
+  hints = [];
+
+  constructor(stores) {
+    makeObservable(this, {
+      errors: observable,
+      warning: observable,
+      info: observable,
+      hints: observable,
+      handleWorkerMessage: action.bound,
+      activate: action,
+    });
+
+    this.stores = stores;
+    this.info = [];
+    this.worker = new Worker(new URL('../worker/lint.worker', import.meta.url));
+  }
+
+  activate() {
+    this.worker.onmessage = this.handleWorkerMessage;
+  }
+
+  get spec() {
+    return this.stores.graphStore.rootNode.data.parsed;
+  }
+
+  lint(doc) {
+    const spec = doc || this.spec;
+    this.worker.postMessage({msg: 'abc', spec});
+  }
+
+  handleWorkerMessage({data}) {
+    const results = data.results;
+    this.errors = results.filter(
+      (r) => r.severity === DiagnosticSeverity.Error,
+    );
+    this.warning = results.filter(
+      (r) => r.severity === DiagnosticSeverity.Warning,
+    );
+    this.hints = results.filter((r) => r.severity === DiagnosticSeverity.Hint);
+    this.info = results.filter((r) => r.severity === DiagnosticSeverity.Info);
+  }
+}
+
+export default LintStore;

src/Stores/lintStore.js

@@ -7,6 +7,7 @@ import JsonSchemaStore from './jsonSchemaStore';
 import OasSchemaStore from './oasSchemaStore';
 import BrowserStore from './browserStore';
 import EventEmitter from '../EventEmitter';
+import LintStore from './lintStore';
 
 class Stores {
   constructor() {
@@ -19,6 +20,7 @@ class Stores {
     this.jsonSchemaCollection = this.generateJsonSchemaCollection(this);
     this.oasSchemaCollection = this.generateOasSchemaCollection(this);
     this.editorStore = new EditorStore(this);
+    this.lintStore = new LintStore(this);
 
     this.registerEventListeners();
     this.activate();
@@ -120,6 +122,7 @@ class Stores {
     this.oasStore.activate();
     this.designTreeStore.activate();
     this.editorStore.doActivate();
+    this.lintStore.activate();
   }
 }
 

src/Stores/stores.js

@@ -12,12 +12,18 @@ class UiStore {
   activeSymbolNode;
   fullscreen;
   activeView;
+  activeWidget;
+
   views = {
     code: 'code',
     form: 'form',
     preview: 'preview',
   };
 
+  widgets = {
+    lint: 'lint',
+  };
+
   constructor(stores) {
     makeObservable(this, {
       toggleFullscreen: action.bound,
@@ -41,7 +47,10 @@ class UiStore {
       activeNode: computed,
       activeNodeId: computed,
       activeView: observable,
+      activeWidget: observable,
       setActiveView: action,
+      setActiveWidget: action,
+      toggleWidget: action,
     });
 
     this.stores = stores;
@@ -52,6 +61,7 @@ class UiStore {
     this._chosenSourceNodeUri = undefined;
     this._chosenSymbolNodeUri = undefined;
     this.activeView = this.views.form;
+    this.activeWidget = null;
     this._preferences = observable.object(
       {
         activeSidebarTree: 'design',
@@ -282,6 +292,22 @@ class UiStore {
     }
   }
 
+  setActiveWidget(widget) {
+    if (Object.keys(this.widgets).indexOf(widget) >= 0) {
+      this.activeWidget = widget;
+    }
+  }
+
+  toggleWidget(widget) {
+    if (Object.keys(this.widgets).indexOf(widget) >= 0) {
+      if (widget === this.activeWidget) {
+        this.activeWidget = null;
+      } else {
+        this.activeWidget = widget;
+      }
+    }
+  }
+
   get _storageKey() {
     return 'oasdesigner-ui';
   }

src/Stores/uiStore.js

@@ -12,6 +12,7 @@ import Parameter from './parameter';
 import Response from './response';
 import RequestBody from './RequestBody';
 import MonacoEditor from '../Editor/Monaco';
+import LintWidget from '../Widgets/Lint';
 import {StoresContext} from '../Context';
 import {NodeCategories, NodeTypes} from '../../datasets/tree';
 
@@ -39,12 +40,23 @@ const getComponentForNode = (node) => {
 };
 
 const SubContent = observer(({node}) => {
+  const stores = React.useContext(StoresContext);
+  const {activeWidget, widgets} = stores.uiStore;
   let relativeJsonPath = [];
   if (node.category === NodeCategories.SourceMap) {
     relativeJsonPath = node.relativeJsonPath;
   }
   const RenderSubContent = getComponentForNode(node);
-  return <RenderSubContent relativeJsonPath={relativeJsonPath} node={node} />;
+  return activeWidget ? (
+    <div className="flex-1 relative flex">
+      <RenderSubContent relativeJsonPath={relativeJsonPath} node={node} />
+      <div className="relative flex-1 border-l">
+        {activeWidget === widgets.lint && <LintWidget />}
+      </div>
+    </div>
+  ) : (
+    <RenderSubContent relativeJsonPath={relativeJsonPath} node={node} />
+  );
 });
 
 SubContent.propTypes = {
@@ -56,14 +68,13 @@ const Content = observer(() => {
   const {activeNode, activeView, views} = stores.uiStore;
   const sourceNode = stores.graphStore.rootNode;
 
-  const toggleView = (view) => stores.uiStore.setActiveView(view);
-
   return (
     <StyledContent className={'flex flex-col flex-1'}>
       <div className="bp3-dark relative flex flex-1 flex-col bg-canvas">
         <Options
           view={activeView}
-          onToggleView={toggleView}
+          onToggleView={(v) => stores.uiStore.setActiveView(v)}
+          onToggleWidget={(w) => stores.uiStore.setActiveWidget(w)}
           onDelete={() => {
             stores.graphStore.removeNode(activeNode.id);
           }}

src/components/Content/index.js

@@ -48,21 +48,6 @@ const Info = observer(() => {
               }
             />
           </div>
-          <div className="font-semibold text-gray-6 dark:text-lighten-8 ml-1 mb-2">
-            Summary
-          </div>
-          <InputGroup
-            className="mx-1 -mb-2 StudioInput"
-            placeholder="summary"
-            value={getValueFromStore(['info', 'summary']) || ''}
-            onChange={(e) =>
-              handlePatch(
-                nodeOperations.Replace,
-                ['info', 'summary'],
-                e.target.value,
-              )
-            }
-          />
           <div className="font-semibold text-gray-6 dark:text-lighten-8 ml-1 mt-8 mb-2">
             Description
           </div>

src/components/Content/info/index.js

@@ -1,17 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {observer} from 'mobx-react-lite';
-import {Button, ButtonGroup, Icon} from '@blueprintjs/core';
+import classnames from 'classnames';
+import {Button, ButtonGroup, Icon, Intent} from '@blueprintjs/core';
 import {StoresContext} from '../Context';
 import {NodeCategories} from '../../datasets/tree';
 
 const Options = observer((props) => {
   const stores = React.useContext(StoresContext);
-  const {activeNode} = stores.uiStore;
+  const {activeNode, activeWidget, widgets} = stores.uiStore;
   const [confirmDelete, setConfirmDelete] = React.useState(false);
+  const {errors, hints, info, warning} = stores.lintStore;
+
+  const lintSpec = () => {
+    if (activeWidget === widgets.lint) {
+      stores.uiStore.toggleWidget(stores.uiStore.widgets.lint);
+    } else {
+      stores.uiStore.setActiveWidget(stores.uiStore.widgets.lint);
+    }
+  };
 
   return (
-    <div className="border-b border-transparent PanelActionBar w-full flex items-center px-5 py-2">
+    <div
+      className={classnames(
+        'border-b  PanelActionBar w-full flex items-center px-5 py-2',
+        {
+          'border-transparent': !activeWidget,
+        },
+      )}>
       {activeNode && activeNode.category === NodeCategories.SourceMap && (
         <div className="flex items-center">
           <Button
@@ -50,13 +66,54 @@ const Options = observer((props) => {
             text="Code"
             onClick={() => props.onToggleView('code')}
           />
+        </ButtonGroup>
+      </div>
+      <div className="ml-3">
+        <ButtonGroup>
           <Button
             active={props.view === 'docs'}
             small
             icon={<Icon size={14} icon="book" />}
             text="Preview"
             onClick={() => props.onToggleView('preview')}
           />
+          <Button
+            active={stores.uiStore.activeWidget === stores.uiStore.widgets.lint}
+            small
+            text={
+              <div className="flex justify-center">
+                <Icon
+                  size={14}
+                  icon="error"
+                  intent={Intent.DANGER}
+                  className="m-auto pl-2 pr-1"
+                />
+                <span className="counter m-auto">{errors.length}</span>
+                <Icon
+                  size={14}
+                  intent={Intent.WARNING}
+                  icon="warning-sign"
+                  className="m-auto pl-2 pr-1"
+                />
+                <span className="counter m-auto">{warning.length}</span>
+                <Icon
+                  size={14}
+                  icon="info-sign"
+                  intent={Intent.PRIMARY}
+                  className="m-auto pl-2 pr-1"
+                />
+                <span className="counter m-auto">{info.length}</span>
+                <Icon
+                  size={14}
+                  icon="lightbulb"
+                  intent={Intent.SUCCESS}
+                  className="m-auto pl-2 pr-1"
+                />
+                <span className="counter m-auto">{hints.length}</span>
+              </div>
+            }
+            onClick={() => lintSpec()}
+          />
         </ButtonGroup>
       </div>
       <div className="ml-3">