🦺 Error validation change

package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@monaco-editor/react": "^4.5.1",
+    "@monaco-editor/react": "^4.5.2",
     "@types/classnames": "^2.3.0",
     "@types/faker": "^5.5.8",
     "@types/file-saver": "^2.0.5",
@@ -51,7 +51,7 @@
     "eslint-plugin-react": "^7.22.0",
     "husky": "^7.0.2",
     "jest": "^27.2.0",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.43.0",
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -80,4 +80,4 @@
       "./packages/socket-live-test"
     ]
   }
-}
+}

packages/editor-worker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "6.9.5",
+  "version": "6.9.6",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

packages/editor-worker/src/validation.ts

@@ -2,49 +2,47 @@ import { buildSchema, validateSchema, parse, GraphQLError } from "graphql";
 import { validateSDL } from "graphql/validation/validate";
 import { mergeSDLs } from "graphql-js-tree";
 
-export interface EditorError {
-  type: "error";
+export type GlobalGraphQLError = {
+  __typename: "global";
   text: string;
-  row?: number;
-  column?: number;
-  position?: number;
-  libraryError?: string;
-}
+};
+
+export type LocalGraphQLError = {
+  __typename: "local";
+  error: GraphQLError;
+};
 
-const GraphQLErrorToEditorErrors = (e: GraphQLError): EditorError[] => [
-  ...(e.locations || []).map(
-    (l) =>
-      ({
-        column: l.column,
-        row: l.line - 2,
-        position: 1,
-        text: e.message,
-        type: "error",
-      } as EditorError)
-  ),
-];
+export type EditorError = GlobalGraphQLError | LocalGraphQLError;
 
-const validateSDLErrors = (s: string): EditorError[] => {
+const validateSDLErrors = (s: string) => {
   const schema = parse(s);
   const errors = validateSDL(schema);
-  return errors.map(GraphQLErrorToEditorErrors).flat(1);
+  return errors;
 };
 
-const validateTypes = (s: string): EditorError[] => {
+const validateTypes = (s: string) => {
   const schema = buildSchema(s);
   const errors = validateSchema(schema);
-  return errors.map(GraphQLErrorToEditorErrors).flat(1);
+  return errors;
 };
 
 /**
  * Extend code with library and remember library line size to move the error later
  */
 const moveErrorsByLibraryPadding = (libraries: string) => {
   const libraryPadding = libraries.split("\n").length;
-  return (error: EditorError): EditorError => {
+  const libraryLength = libraries.length;
+  return (error: LocalGraphQLError): LocalGraphQLError => {
     return {
       ...error,
-      row: (error.row || 0) - libraryPadding,
+      error: {
+        ...error.error,
+        locations: error.error.locations?.map((l) => ({
+          ...l,
+          line: l.line - libraryPadding,
+        })),
+        positions: error.error.positions?.map((p) => p - libraryLength),
+      },
     };
   };
 };
@@ -63,8 +61,8 @@ export const catchSchemaErrors = (
       const mergeResult = mergeSDLs(schema, libraries);
       if (mergeResult.__typename === "error") {
         return mergeResult.errors.map((e) => ({
-          type: "error",
           text: `There is a conflict with library schema on Type.field: ${e.conflictingNode}.${e.conflictingField}`,
+          __typename: "global",
         }));
       }
       code = mergeResult.sdl;
@@ -73,10 +71,20 @@ export const catchSchemaErrors = (
 
     if (errors.length > 0) {
       return errors
-        .filter((e) => allowMultipleDirectivesAtLocation(e.text))
-        .map(paddingFunction);
+        .filter((e) => allowMultipleDirectivesAtLocation(e.message))
+        .map((e) => {
+          return paddingFunction({
+            __typename: "local",
+            error: e,
+          });
+        });
     }
-    return validateTypes(code).map(paddingFunction);
+    return validateTypes(code).map((e) => {
+      return paddingFunction({
+        __typename: "local",
+        error: e,
+      });
+    });
   } catch (error) {
     if (
       typeof error === "object" &&
@@ -91,16 +99,14 @@ export const catchSchemaErrors = (
         message: string;
       };
       return [
-        paddingFunction({
+        {
+          __typename: "global",
           text: e.message as string,
-          type: "error",
-          column: 0,
-          row: 0,
-        } as EditorError),
+        },
       ];
     }
     const er = error as GraphQLError;
-    return GraphQLErrorToEditorErrors(er).map(paddingFunction);
+    return [{ __typename: "local", error: er }];
   }
   return [];
 };

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "6.9.5",
+  "version": "6.9.6",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -45,7 +45,7 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^10.12.16",
     "fuzzyjs": "^5.0.1",
-    "graphql-editor-worker": "^6.9.5",
+    "graphql-editor-worker": "^6.9.6",
     "graphql-js-tree": "^1.0.5",
     "graphql-language-service": "3.1.4",
     "html-to-image": "^1.10.8",

packages/editor/src/Relation/PanZoom/PanZoom.tsx

@@ -120,7 +120,6 @@ export const PanZoom: React.FC<{
             link.click();
           })
           .catch((e) => {
-            console.log(e);
             createToast({
               message: "Export failed. Check browser console for details",
               variant: "error",

packages/editor/src/Relation/Relation.tsx

@@ -1,6 +1,5 @@
 import { PanZoom } from "@/Relation/PanZoom/PanZoom";
 import {
-  useErrorsState,
   useRelationNodesState,
   useRelationsState,
   useTreesState,
@@ -9,7 +8,6 @@ import React, { useMemo, useState } from "react";
 import { TransformWrapper } from "react-zoom-pan-pinch";
 import { Graf } from "@/Graf/Graf";
 import styled from "@emotion/styled";
-import { Chip } from "@aexol-studio/styling-system";
 import { AnimatePresence } from "framer-motion";
 import { BackgroundFTUX } from "@/Relation/FTUX/BackgroundFTUX";
 import { useRouter } from "@/state/containers/router";
@@ -23,7 +21,6 @@ export const Relation: React.FC<{ setInitialSchema: (s: string) => void }> = ({
     useRelationNodesState();
   const { editMode, ctrlToZoom } = useRelationsState();
   const { set, routes } = useRouter();
-  const { grafErrors } = useErrorsState();
   const [popupsState, setPopupsState] = useState({
     import: false,
   });
@@ -71,11 +68,6 @@ export const Relation: React.FC<{ setInitialSchema: (s: string) => void }> = ({
           </TransformWrapper>
         </FocusOverlay>
       )}
-      {grafErrors && (
-        <ErrorContainer>
-          <Chip label={grafErrors} variant="warning" />
-        </ErrorContainer>
-      )}
       <AnimatePresence>
         {!!editMode && activeNode && <Graf node={activeNode} />}
       </AnimatePresence>
@@ -114,13 +106,7 @@ const RelationContainer = styled.div`
   height: 100%;
   position: relative;
 `;
-const ErrorContainer = styled.div`
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  padding: 1rem;
-  z-index: 2;
-`;
+
 const FocusOverlay = styled.div`
   z-index: 2;
   width: 100%;