implement view snapshot button

This commit implements issue Raathigesh#186. I can't know if there is a snapshot for each
but I can add a button to the summary that opens the snapshot for the file
in the code editor. That's what this commit does. It adds the button to the
UI and a mutation to send to the server to open the snapshot in the editor.

server/api/app/resolver.ts

@@ -3,6 +3,7 @@ import * as launch from "launch-editor";
 import { App } from "./app";
 import FileWatcher, { WatcherEvents } from "../../services/file-watcher";
 import { pubsub } from "../../event-emitter";
+import { dirname, basename } from "path";
 
 @Resolver(App)
 export default class AppResolver {
@@ -45,6 +46,18 @@ export default class AppResolver {
     return "";
   }
 
+  @Mutation(returns => String)
+  openSnapInEditor(@Arg("path") path: string) {
+    var dir = dirname(path)
+    var file = basename(path);
+
+    var snap = dir + '/__snapshots__/' + file + '.snap'
+    console.log("opening the snapshot:", snap);
+    this.openInEditor(snap);
+
+    return "";
+  }
+
   @Mutation(returns => String)
   openFailure(@Arg("failure") failure: string) {
     // The following regex matches the first line of the form: \w at <some text> (<file path>)

ui/test-file/summary/index.tsx

@@ -11,10 +11,12 @@ import {
   CheckCircle,
   Frown,
   ZapOff,
-  Circle
+  Circle,
+  Eye
 } from "react-feather";
 import Button from "../../components/button";
 import OPEN_IN_EDITOR from "./open-in-editor.gql";
+import OPEN_SNAP_IN_EDITOR from "./open-snap-in-editor.gql";
 import { Tooltip } from "react-tippy";
 import { useMutation } from "react-apollo-hooks";
 
@@ -138,6 +140,12 @@ export default function FileSummary({
     }
   });
 
+  const openSnapshotInEditor = useMutation(OPEN_SNAP_IN_EDITOR, {
+    variables: {
+      path
+    }
+  });
+
   return (
     <Container p={4} bg="slightDark">
       {(isRunning || isLoadingResult) && <ContainerBG />}
@@ -204,6 +212,15 @@ export default function FileSummary({
               Update Snapshot
             </Button>
           </Tooltip>
+        <Tooltip title="Open snapshot in editor" size="small" position="bottom">
+          <Button
+            icon={<Eye size={14} />}
+            minimal
+            onClick={() => {
+              openSnapshotInEditor();
+            }}
+          />
+        </Tooltip>
       </ActionPanel>
     </Container>
   );

ui/test-file/summary/open-snap-in-editor.gql

@@ -0,0 +1,3 @@
+mutation OpenSnapInEditor($path: String!) {
+  openSnapInEditor(path: $path)
+}