vscode-apollo 1.19.3 → 1.20.1

package/src/extension.ts

@@ -9,14 +9,17 @@ import {
   commands,
   QuickPickItem,
   Disposable,
-  OutputChannel
+  OutputChannel,
+  MarkdownString,
+  Range,
 } from "vscode";
 import StatusBar from "./statusBar";
 import { getLanguageServerClient } from "./languageServerClient";
-import { LanguageClient, NotificationType } from "vscode-languageclient";
+import { NotificationType } from "vscode-languageclient";
+import type { EngineDecoration, LanguageClient } from "./messages";
 import {
   printNoFileOpenMessage,
-  printStatsToClientOutputChannel
+  printStatsToClientOutputChannel,
 } from "./utils";
 import { Debug } from "./debug";
 
@@ -43,7 +46,7 @@ function isError(response: any): response is ErrorShape {
 
 export function activate(context: ExtensionContext) {
   const serverModule = context.asAbsolutePath(
-    join("node_modules/apollo-language-server/lib", "server.js")
+    join("lib/language-server", "server.js")
   );
 
   // Initialize language client
@@ -52,7 +55,7 @@ export function activate(context: ExtensionContext) {
 
   // Initialize disposables
   statusBar = new StatusBar({
-    hasActiveTextEditor: Boolean(window.activeTextEditor)
+    hasActiveTextEditor: Boolean(window.activeTextEditor),
   });
   outputChannel = window.createOutputChannel("Apollo GraphQL");
   Debug.SetOutputConsole(outputChannel);
@@ -68,7 +71,7 @@ export function activate(context: ExtensionContext) {
 
   // Once client is ready, we can send messages and add listeners for various notifications
   client.onReady().then(() => {
-    client.onNotification(serverDebugMessage, message => {
+    client.onNotification(serverDebugMessage, (message) => {
       switch (message.type) {
         case "info":
           Debug.info(message.message, message.stack);
@@ -103,7 +106,7 @@ export function activate(context: ExtensionContext) {
       client.outputChannel.show();
     });
 
-    client.onNotification("apollographql/statsLoaded", params => {
+    client.onNotification("apollographql/statsLoaded", (params) => {
       printStatsToClientOutputChannel(client, params, version);
       client.outputChannel.show();
     });
@@ -118,14 +121,14 @@ export function activate(context: ExtensionContext) {
         if (isError(response)) {
           statusBar.showWarningState({
             hasActiveTextEditor,
-            tooltip: "Configuration Error"
+            tooltip: "Configuration Error",
           });
           outputChannel.append(response.stack);
 
           const infoButtonText = "More Info";
           window
             .showInformationMessage(response.message, infoButtonText)
-            .then(clicked => {
+            .then((clicked) => {
               if (clicked === infoButtonText) {
                 outputChannel.show();
               }
@@ -134,7 +137,7 @@ export function activate(context: ExtensionContext) {
           if (response.length === 0) {
             statusBar.showWarningState({
               hasActiveTextEditor,
-              tooltip: "No apollo.config.js file found"
+              tooltip: "No apollo.config.js file found",
             });
           } else {
             statusBar.showLoadedState({ hasActiveTextEditor });
@@ -158,12 +161,12 @@ export function activate(context: ExtensionContext) {
 
     // For some reason, non-strings can only be sent in one direction. For now, messages
     // coming from the language server just need to be stringified and parsed.
-    client.onNotification("apollographql/tagsLoaded", params => {
+    client.onNotification("apollographql/tagsLoaded", (params) => {
       const [serviceID, tags]: [string, string[]] = JSON.parse(params);
-      const items = tags.map(tag => ({
+      const items = tags.map((tag) => ({
         label: tag,
         description: "",
-        detail: serviceID
+        detail: serviceID,
       }));
 
       schemaTagItems = [...items, ...schemaTagItems];
@@ -178,9 +181,9 @@ export function activate(context: ExtensionContext) {
 
     let currentLoadingResolve: Map<number, () => void> = new Map();
 
-    client.onNotification("apollographql/loadingComplete", token => {
+    client.onNotification("apollographql/loadingComplete", (token) => {
       statusBar.showLoadedState({
-        hasActiveTextEditor: Boolean(window.activeTextEditor)
+        hasActiveTextEditor: Boolean(window.activeTextEditor),
       });
       const inMap = currentLoadingResolve.get(token);
       if (inMap) {
@@ -194,46 +197,112 @@ export function activate(context: ExtensionContext) {
         {
           location: ProgressLocation.Notification,
           title: message,
-          cancellable: false
+          cancellable: false,
         },
         () => {
-          return new Promise<void>(resolve => {
+          return new Promise<void>((resolve) => {
             currentLoadingResolve.set(token, resolve);
           });
         }
       );
     });
 
-    const engineDecoration = window.createTextEditorDecorationType({});
-    let latestDecs: any[] | undefined = undefined;
+    const runIconOnDiskPath = Uri.file(
+      join(context.extensionPath, "images", "IconRun.svg")
+    );
+
+    const textDecorationType = window.createTextEditorDecorationType({});
+    const runGlyphDecorationType = window.createTextEditorDecorationType({});
+    let latestDecorations: EngineDecoration[] | undefined = undefined;
 
     const updateDecorations = () => {
-      if (window.activeTextEditor && latestDecs) {
+      if (window.activeTextEditor && latestDecorations) {
         const editor = window.activeTextEditor!;
-        const decorations: DecorationOptions[] = latestDecs
-          .filter(
-            d => d.document === window.activeTextEditor!.document.uri.toString()
-          )
-          .map(dec => {
+
+        const decorationsForDocument = latestDecorations.filter(
+          (decoration) =>
+            decoration.document ===
+            window.activeTextEditor!.document.uri.toString()
+        );
+
+        const textDecorations = decorationsForDocument.flatMap(
+          (decoration): DecorationOptions | DecorationOptions[] => {
+            if (decoration.type !== "text") {
+              return [];
+            }
+
             return {
-              range: editor.document.lineAt(dec.range.start.line).range,
+              range: editor.document.lineAt(decoration.range.start.line).range,
               renderOptions: {
                 after: {
-                  contentText: `${dec.message}`,
-                  textDecoration: "none; padding-left: 15px; opacity: .5"
-                }
-              }
+                  contentText: decoration.message,
+                  textDecoration: "none; padding-left: 15px; opacity: .5",
+                },
+              },
             };
-          });
+          }
+        );
+
+        const runGlyphDecorations = decorationsForDocument.flatMap(
+          (decoration): DecorationOptions | DecorationOptions[] => {
+            if (decoration.type !== "runGlyph") {
+              return [];
+            }
+
+            const hoverMessage =
+              decoration.hoverMessage === undefined
+                ? undefined
+                : new MarkdownString(decoration.hoverMessage);
+            if (hoverMessage) {
+              hoverMessage.isTrusted = true;
+            }
+
+            const endOfLinePosition = editor.document.lineAt(
+              decoration.range.start.line
+            ).range.end;
+            return {
+              // Hover range of just the end of the line (and the icon) so the hover shows above the icon,
+              // not over at the start of the line
+              range: new Range(endOfLinePosition, endOfLinePosition),
+              renderOptions: {
+                after: {
+                  contentIconPath: runIconOnDiskPath,
+                  textDecoration:
+                    "none; border-radius: .20rem; margin-left: 8px; text-align: center;",
+                  backgroundColor: "#2075D6",
+                  width: "18px",
+                  height: "18px",
+                },
+              },
+              hoverMessage,
+            };
+          }
+        );
 
-        window.activeTextEditor!.setDecorations(engineDecoration, decorations);
+        window.activeTextEditor!.setDecorations(
+          textDecorationType,
+          textDecorations
+        );
+        if (
+          workspace
+            .getConfiguration("apollographql")
+            .get("display.showRunInStudioButton")
+        ) {
+          window.activeTextEditor!.setDecorations(
+            runGlyphDecorationType,
+            runGlyphDecorations
+          );
+        }
       }
     };
 
-    client.onNotification("apollographql/engineDecorations", (...decs) => {
-      latestDecs = decs;
-      updateDecorations();
-    });
+    client.onNotification(
+      "apollographql/engineDecorations",
+      ({ decorations }) => {
+        latestDecorations = decorations;
+        updateDecorations();
+      }
+    );
 
     window.onDidChangeActiveTextEditor(() => {
       updateDecorations();
@@ -243,7 +312,7 @@ export function activate(context: ExtensionContext) {
       provideTextDocumentContent(uri: Uri) {
         // the schema source is provided inside the URI, just return that here
         return uri.query;
-      }
+      },
     });
   });
 }

package/src/language-server/__tests__/diagnostics.test.ts

@@ -0,0 +1,86 @@
+import { Source, buildClientSchema } from "graphql";
+import { GraphQLDocument } from "../document";
+import { collectExecutableDefinitionDiagnositics } from "../diagnostics";
+import { starwarsSchema } from "./fixtures/starwarsSchema";
+
+const schema = buildClientSchema(starwarsSchema);
+
+const validDocument = new GraphQLDocument(
+  new Source(`
+    query HeroAndFriendsNames {
+      hero {
+        name
+        friends {
+          name
+        }
+      }
+    }`)
+);
+const invalidDocument = new GraphQLDocument(
+  new Source(`
+    query HeroAndFriendsNames {
+      hero {
+        nam         # Missing letter 'e'
+        friend {    # Missing letter 's'
+          name
+        }
+      }
+    }`)
+);
+const documentWithTypes = new GraphQLDocument(
+  new Source(`
+    type SomeType {
+      thing: String
+    }
+     enum SomeEnum {
+      THING_ONE
+      THING_TWO
+    }
+     query HeroAndFriendsNames {
+      hero {
+        name
+        friends {
+          name
+        }
+      }
+    }`)
+);
+const documentWithOffset = new GraphQLDocument(
+  new Source(`query QueryWithOffset { hero { nam } }`, "testDocument", {
+    line: 5,
+    column: 10,
+  })
+);
+describe("Language server diagnostics", () => {
+  describe("#collectExecutableDefinitionDiagnositics", () => {
+    it("returns no diagnostics for a correct document", () => {
+      const diagnostics = collectExecutableDefinitionDiagnositics(
+        schema,
+        validDocument
+      );
+      expect(diagnostics.length).toEqual(0);
+    });
+    it("returns two diagnostics for a document with two errors", () => {
+      const diagnostics = collectExecutableDefinitionDiagnositics(
+        schema,
+        invalidDocument
+      );
+      expect(diagnostics.length).toEqual(2);
+    });
+    it("returns no diagnostics for a document that includes type definitions", () => {
+      const diagnostics = collectExecutableDefinitionDiagnositics(
+        schema,
+        documentWithTypes
+      );
+      expect(diagnostics.length).toEqual(0);
+    });
+    it("correctly offsets locations", () => {
+      const diagnostics = collectExecutableDefinitionDiagnositics(
+        schema,
+        documentWithOffset
+      );
+      expect(diagnostics.length).toEqual(1);
+      expect(diagnostics[0].range.start.character).toEqual(40);
+    });
+  });
+});

package/src/language-server/__tests__/document.test.ts

@@ -0,0 +1,187 @@
+import { extractGraphQLDocuments } from "../document";
+import { TextDocument, Position } from "vscode-languageserver";
+
+describe("extractGraphQLDocuments", () => {
+  describe("extracting documents from JavaScript template literals", () => {
+    const mockTextDocument = (text: string): TextDocument => ({
+      getText: jest.fn().mockReturnValue(text),
+      offsetAt(): number {
+        return 0;
+      },
+      positionAt(): Position {
+        return {
+          character: 0,
+          line: 0,
+        };
+      },
+      languageId: "javascript",
+      lineCount: 0,
+      uri: "",
+      version: 1,
+    });
+
+    it("works with placeholders that span multiple rows", () => {
+      const textDocument = mockTextDocument(`
+      gql\`
+        {
+          hero {
+            ...Hero_character
+          }
+        }
+
+        \${Hero.fragments
+          .character}
+      \`
+    `);
+      const documents = extractGraphQLDocuments(textDocument);
+
+      expect(documents?.length).toEqual(1);
+      expect(documents?.[0].syntaxErrors.length).toBe(0);
+      expect(documents?.[0].ast?.definitions.length).toBe(1);
+    });
+
+    it("works with multiple placeholders in a document", () => {
+      const textDocument = mockTextDocument(`
+      gql\`
+        {
+          hero {
+            ...Hero_character
+          }
+        }
+
+        \${Hero.fragments.character}
+
+        {
+          reviews(episode: NEWHOPE) {
+            ...ReviewList_reviews
+          }
+        }
+
+        \${ReviewList.fragments.reviews}
+      \`
+    `);
+      const documents = extractGraphQLDocuments(textDocument);
+
+      expect(documents?.length).toEqual(1);
+      expect(documents?.[0].syntaxErrors.length).toBe(0);
+      expect(documents?.[0].ast?.definitions.length).toBe(2);
+    });
+
+    it("works with a custom tagname", () => {
+      const textDocument = mockTextDocument(`
+      gqltag\`
+        {
+          hero {
+            ...Hero_character
+          }
+        }
+
+        \${Hero.fragments.character}
+
+        {
+          reviews(episode: NEWHOPE) {
+            ...ReviewList_reviews
+          }
+        }
+
+        \${ReviewList.fragments.reviews}
+      \`
+    `);
+      const documents = extractGraphQLDocuments(textDocument, "gqltag");
+
+      expect(documents?.length).toEqual(1);
+      expect(documents?.[0].syntaxErrors.length).toBe(0);
+      expect(documents?.[0].ast?.definitions.length).toBe(2);
+    });
+
+    it("works with parens", () => {
+      const textDocument = mockTextDocument(`
+      gql(\`
+        {
+          hero {
+            ...Hero_character
+          }
+        }
+
+        \${Hero.fragments.character}
+
+        {
+          reviews(episode: NEWHOPE) {
+            ...ReviewList_reviews
+          }
+        }
+
+      \${ReviewList.fragments.reviews}
+    \`)
+    `);
+      const documents = extractGraphQLDocuments(textDocument);
+
+      expect(documents?.length).toEqual(1);
+      expect(documents?.[0].syntaxErrors.length).toBe(0);
+      expect(documents?.[0].ast?.definitions.length).toBe(2);
+    });
+  });
+
+  describe("extracting documents from ReasonML extension nodes", () => {
+    const mockTextDocument = (text: string): TextDocument => ({
+      getText: jest.fn().mockReturnValue(text),
+      offsetAt(): number {
+        return 0;
+      },
+      positionAt(): Position {
+        return {
+          character: 0,
+          line: 0,
+        };
+      },
+      languageId: "reason",
+      lineCount: 0,
+      uri: "",
+      version: 1,
+    });
+
+    it("works with ReasonRelay nodes", () => {
+      const textDocument = mockTextDocument(`
+      module Query = [%relay.query
+      {|
+        query SomeQuery {
+          id
+        }
+      |}
+      ];
+
+      module Fragment = [%relay.fragment
+      {|
+        fragment X on Hero {
+          id
+        }
+      |}
+      ];
+    `);
+      const documents = extractGraphQLDocuments(textDocument);
+
+      expect(documents?.length).toEqual(2);
+      expect(documents?.[0].syntaxErrors.length).toBe(0);
+      expect(documents?.[1].syntaxErrors.length).toBe(0);
+      expect(documents?.[0].ast?.definitions.length).toBe(1);
+      expect(documents?.[1].ast?.definitions.length).toBe(1);
+    });
+
+    it("works with graphql_ppx style node", () => {
+      const textDocument = mockTextDocument(`
+      module Query = [%graphql
+      {|
+        query SomeQuery {
+          id
+        }
+      |}
+      ];
+    `);
+      const documents = extractGraphQLDocuments(textDocument);
+
+      expect(documents?.length).toEqual(1);
+      expect(documents?.[0].syntaxErrors.length).toBe(0);
+      expect(documents?.[0].ast?.definitions.length).toBe(1);
+    });
+  });
+});

package/src/language-server/__tests__/fileSet.test.ts

@@ -0,0 +1,46 @@
+import { FileSet } from "../fileSet";
+import URI from "vscode-uri";
+
+describe("fileSet", () => {
+  describe("includesFile", () => {
+    it("matches includes starting with ./", () => {
+      const fileSet = new FileSet({
+        excludes: [],
+        includes: ["./src/**/*.tsx"],
+        rootURI: URI.parse("/project"),
+      });
+      const file = "file:///project/src/Component.tsx";
+      expect(fileSet.includesFile(file)).toBe(true);
+    });
+
+    it("matches includes not starting with ./", () => {
+      const fileSet = new FileSet({
+        excludes: [],
+        includes: ["src/**/*.tsx"],
+        rootURI: URI.parse("/project"),
+      });
+      const file = "file:///project/src/Component.tsx";
+      expect(fileSet.includesFile(file)).toBe(true);
+    });
+
+    it("does not match excludes starting with ./", () => {
+      const fileSet = new FileSet({
+        excludes: ["./src/Component.tsx"],
+        includes: ["./src/**/*.tsx"],
+        rootURI: URI.parse("/project"),
+      });
+      const file = "file:///project/src/Component.tsx";
+      expect(fileSet.includesFile(file)).toBe(false);
+    });
+
+    it("does not match excludes not starting with ./", () => {
+      const fileSet = new FileSet({
+        excludes: ["src/Component.tsx"],
+        includes: ["src/**/*.tsx"],
+        rootURI: URI.parse("/project"),
+      });
+      const file = "file:///project/src/Component.tsx";
+      expect(fileSet.includesFile(file)).toBe(false);
+    });
+  });
+});