EIWFY23Q4-1 Add validation tab, fix up webpack dev server

Author: slatlasdev

.github/workflows/node-lint.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, and run linting
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ $default-branch ]
+  pull_request:
+    branches: [ $default-branch ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint

.npmrc

@@ -0,0 +1,2 @@
+# Use public registry instead of Atlassian internal
+registry=https://registry.yarnpkg.com

.nvmrc

@@ -1 +1 @@
-12
+16

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 100
+}

package.json

@@ -18,14 +18,15 @@
     "@atlaskit/menu": "^0.7.0",
     "@atlaskit/popup": "^1.0.6",
     "@atlaskit/spinner": "^15.0.6",
+    "@atlaskit/table": "^0.4.6",
     "@atlaskit/tabs": "^12.1.2",
     "@atlaskit/textfield": "^5.0.0",
     "@atlaskit/theme": "^11.0.2",
     "@atlaskit/tooltip": "^17.1.2",
-    "@monaco-editor/react": "^4.0.7",
+    "@monaco-editor/react": "^4.5.1",
     "js-yaml": "^4.0.0",
     "jsonpointer": "^4.1.0",
-    "monaco-editor": "^0.21.3",
+    "monaco-editor": "^0.39.0",
     "react": "^16.8",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.8",
@@ -60,18 +61,22 @@
     "http-server-spa": "^1.3.0",
     "json-schema-to-typescript": "^10.1.2",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
     "source-map-loader": "^2.0.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.14",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3",
     "webpack": "^5.12.2",
-    "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.7.3"
   },
   "scripts": {
+    "start": "webpack serve -c webpack.dev.js",
+    "lint": "tsc --noEmit",
+    "postinstall": "npm run gen-schema",
     "build-dev": "webpack -c webpack.dev.js",
     "build-prod": "webpack -c webpack.prod.js",
     "build": "rm -fr dist && webpack -c webpack.prod.js",

src/SchemaApp.tsx

@@ -56,9 +56,9 @@ const RecentlyViewedMenu: React.FC<RecentlyViewedMenuProps> = (props) => {
 const ExampleMenu: React.FC<ContentPropsWithClose> = (props) => (
   <PopupMenuGroup>
     {Array.from(Object.entries(exampleSchemas)).map(([title, links]) => (
-      <Section title={title}>
+      <Section key={title} title={title}>
         {Array.from(Object.entries(links)).map(([linkTitle, url]) => (
-          <NavigationButtonItem onClick={props.closePopup} exampleUrl={url}>{linkTitle}</NavigationButtonItem>
+          <NavigationButtonItem key={url} onClick={props.closePopup} exampleUrl={url}>{linkTitle}</NavigationButtonItem>
           ))}
       </Section>
     ))}
@@ -169,4 +169,4 @@ class SchemaAppWR extends React.PureComponent<RouteComponentProps, SchemaAppStat
   }
 }
 
-export const SchemaApp = withRouter<RouteComponentProps, typeof SchemaAppWR>(SchemaAppWR);
+export const SchemaApp = withRouter<RouteComponentProps, typeof SchemaAppWR>(SchemaAppWR);

src/SchemaEditor.tsx

@@ -1,11 +1,15 @@
 import React, { useEffect } from 'react';
 import { JsonSchema } from './schema';
-import Editor, { useMonaco } from "@monaco-editor/react";
+import Editor, { OnValidate, useMonaco } from '@monaco-editor/react';
+import type { IRange } from 'monaco-editor';
+import { ScrollType } from "./monaco-helpers";
 
 export type SchemaEditorProps = {
-   initialContent: unknown;
-   schema: JsonSchema;
-}
+  initialContent: unknown;
+  schema: JsonSchema;
+  validationRange?: IRange;
+  onValidate: OnValidate;
+};
 
 /**
  * No more than 50 characters per line.
@@ -17,6 +21,7 @@ const editorPreamble = `
 `.trim();
 
 export const SchemaEditor: React.FC<SchemaEditorProps> = (props) => {
+  const { initialContent, schema, validationRange, onValidate } = props;
    const monaco = useMonaco();
 
    useEffect(() => {
@@ -26,19 +31,30 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = (props) => {
          schemas: [{
             uri: "https://json-schema.app/example.json", // id of the first schema
             fileMatch: ['a://b/example.json'],
-            schema: props.schema
+            schema: schema
          }]
      });
-   }, [monaco, props.schema]);
+   }, [monaco, schema]);
+   useEffect(() => {
+     if (!validationRange || !monaco) {
+       return;
+     }
+      monaco.editor.getEditors()
+        .forEach((codeEditor) => {
+          codeEditor.setSelection(validationRange)
+          codeEditor.revealRangeAtTop(validationRange, ScrollType.Smooth)
+        });
+   }, [monaco, validationRange])
 
    return (
       <Editor
          height="97vh"
          defaultLanguage="json"
-         value={editorPreamble + '\n' + JSON.stringify(props.initialContent, null, 2)}
+         value={editorPreamble + '\n' + JSON.stringify(initialContent, null, 2)}
          path="a://b/example.json"
          theme="vs-dark"
          saveViewState={false}
+         onValidate={onValidate}
       />
    );
-};
+};

src/SchemaExplorer.tsx

@@ -20,6 +20,8 @@ import { getTitle, findTitle } from './title';
 import { LinkPreservingSearch, NavLinkPreservingSearch } from './search-preserving-link';
 import { dump } from 'js-yaml';
 import { isExternalReference } from './type-inference';
+import { SchemaValidator } from './SchemaValidator';
+import type { editor, IRange } from 'monaco-editor';
 
 interface SEPHeadProps {
   basePathSegments: Array<string>;
@@ -416,29 +418,19 @@ export type SchemaExplorerProps = {
   schema: JsonSchema1;
   stage: Stage;
   lookup: Lookup;
+  onSelectValidationRange: (range: IRange) => void;
+  validationResults: editor.IMarker[]
 };
 
-export type ViewType = 'details' | 'example-json' | 'example-yaml';
+export type ViewType = 'details' | 'example-json' | 'example-yaml' | 'validator';
 
 export type SchemaExplorerState = {
   pathExpanded: boolean;
   view: ViewType;
 };
 
-const LabelToViewType: { [label: string]: ViewType } = {
-  'Details': 'details',
-  'Example (JSON)': 'example-json',
-  'Example (YAML)': 'example-yaml'
-};
-
-const ViewTypeToTab: { [viewType: string]: number } = {
-  'details': 0,
-  'example-json': 1,
-  'example-yaml': 2
-};
-
 export class SchemaExplorer extends React.PureComponent<SchemaExplorerProps, SchemaExplorerState> {
-  private static Container = styled.section`
+  public static Container = styled.section`
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -447,61 +439,79 @@ export class SchemaExplorer extends React.PureComponent<SchemaExplorerProps, Sch
     max-width: 100%;
   `;
 
-  private static HeadingContainer = styled.div`
+  public static HeadingContainer = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   `;
 
-  private static Heading = styled.h1`
+  public static Heading = styled.h1`
     font-size: 16px;
     font-weight: 600;
     padding-top: 24px;
     margin: 5px 8px;
   `;
 
-  UNSAFE_componentWillMount() {
-    this.setState({
+  constructor(props: SchemaExplorerProps) {
+    super(props);
+    this.state = {
       pathExpanded: false,
       view: 'details'
-    });
+    }
   }
 
   render() {
-    const { path, schema, lookup, stage, basePathSegments } = this.props;
+    const { path, schema, lookup, stage, basePathSegments, validationResults, onSelectValidationRange } = this.props;
     const { pathExpanded } = this.state;
     if (path.length === 0) {
       return <div>TODO What do we do when the reference could not be found? Error maybe?</div>;
     }
 
     const currentPathElement = path[path.length - 1];
 
-    const tabData: TabData[] = [{
-      label: 'Details',
-      content: (
-        <SchemaExplorerDetails
-          schema={schema}
-          reference={currentPathElement.reference}
-          lookup={lookup}
-          stage={stage}
-          clickElement={createClickElement({ basePathSegments, path })}
-        />
-      )
-    }, {
-      label: 'Example (JSON)',
-      content: (
-        <SchemaExplorerExample schema={schema} lookup={lookup} stage={stage} format="json" />
-      )
-    }, {
-      label: 'Example (YAML)',
-      content: (
-        <SchemaExplorerExample schema={schema} lookup={lookup} stage={stage} format="yaml" />
-      )
-    }];
-
-    const onTabSelect: OnSelectCallback = tab => {
+    type ExtendedTabData = TabData & {
+      view: ViewType;
+    }
+    const tabData: ExtendedTabData[] = [
+      {
+        view: 'details',
+        label: 'Details',
+        content: (
+          <SchemaExplorerDetails
+            schema={schema}
+            reference={currentPathElement.reference}
+            lookup={lookup}
+            stage={stage}
+            clickElement={createClickElement({ basePathSegments, path })}
+          />
+        ),
+      },
+      {
+        view: 'example-json',
+        label: 'Example (JSON)',
+        content: (
+          <SchemaExplorerExample schema={schema} lookup={lookup} stage={stage} format="json" />
+        ),
+      },
+      {
+        view: 'example-yaml',
+        label: 'Example (YAML)',
+        content: (
+          <SchemaExplorerExample schema={schema} lookup={lookup} stage={stage} format="yaml" />
+        ),
+      },
+      {
+        view: 'validator',
+        label: `Validation results (${validationResults.length})`,
+        content: (
+          <SchemaValidator results={validationResults} onSelectRange={onSelectValidationRange} />
+        ),
+      },
+    ];
+
+    const onTabSelect: OnSelectCallback = (tab) => {
       this.setState({
-        view: LabelToViewType[tab.label || 'Details']
+        view: (tab as ExtendedTabData).view
       });
     };
 
@@ -517,7 +527,11 @@ export class SchemaExplorer extends React.PureComponent<SchemaExplorerProps, Sch
           <SchemaExplorer.Heading>{getTitle(currentPathElement.reference, schema)}</SchemaExplorer.Heading>
           <Permalink />
         </SchemaExplorer.HeadingContainer>
-        <Tabs tabs={tabData} selected={ViewTypeToTab[this.state.view || 'details']} onSelect={onTabSelect} />
+        <Tabs
+          tabs={tabData}
+          onSelect={onTabSelect}
+          selected={tabData.findIndex((tab) => tab.view === (this.state.view || 'details'))}
+        />
       </SchemaExplorer.Container>
     );
   }