Module recover fixes (codesandbox#3716)

* a bit further but do not know why it is not working

* hmf

* better, but out of sync when saving

* fixed

* fix double message and want second button on toast

* infinite and better text

* allow multiple primary and secondary on toast

* apply all as thrid choirce

* fix type issues

* update from comments

* fix unique recover

* fix recover only to run on crash

* remove clearing recover

* bring back module recover

* fix typing

* now only does it when connected, meaning offline mode also gives reciver

* Fix resetting code on save

* Fix reopening a room

* Nullcheck

* Undo a file that was not changed

Co-authored-by: Ives van Hoorne <[email protected]>

Author: christianalfoni

packages/app/src/app/overmind/effects/browser.ts

@@ -30,7 +30,7 @@ export default {
     return confirm(message); // eslint-disable-line no-alert,no-restricted-globals
   },
   onUnload(cb) {
-    window.onbeforeunload = cb;
+    window.addEventListener('beforeunload', cb);
   },
   openWindow(url) {
     window.open(url, '_blank');

packages/app/src/app/overmind/effects/live/clients.ts

@@ -155,24 +155,17 @@ export class CodeSandboxOTClient extends OTClient {
 export default (
   sendOperation: SendOperation,
   applyOperation: ApplyOperation
-): {
-  getAll(): CodeSandboxOTClient[];
-  get(
-    moduleShortid: string,
-    revision?: number,
-    force?: boolean
-  ): CodeSandboxOTClient;
-  create(moduleShortid: string, revision: number): CodeSandboxOTClient;
-  clear(): void;
-  reset(moduleShortid: string, revision: number): void;
-} => {
+) => {
   const modules = new Map<string, CodeSandboxOTClient>();
 
   return {
     getAll() {
       return Array.from(modules.values());
     },
-    get(moduleShortid, revision = 0, force = false) {
+    has(moduleShortid: string) {
+      return modules.has(moduleShortid);
+    },
+    get(moduleShortid: string, revision = 0, force = false) {
       let client = modules.get(moduleShortid);
 
       if (!client || force) {
@@ -181,7 +174,7 @@ export default (
 
       return client!;
     },
-    create(moduleShortid, initialRevision) {
+    create(moduleShortid: string, initialRevision: number) {
       const client = new CodeSandboxOTClient(
         initialRevision || 0,
         moduleShortid,
@@ -195,7 +188,7 @@ export default (
 
       return client;
     },
-    reset(moduleShortid, revision) {
+    reset(moduleShortid: string, revision: number) {
       modules.delete(moduleShortid);
       this.create(moduleShortid, revision);
     },

packages/app/src/app/overmind/effects/live/index.ts

@@ -17,6 +17,7 @@ import { SerializedTextOperation, TextOperation } from 'ot';
 import { Channel, Presence, Socket } from 'phoenix';
 import uuid from 'uuid';
 
+import { IModuleStateModule } from 'app/overmind/namespaces/live/types';
 import { OPTIMISTIC_ID_PREFIX } from '../utils';
 import clientsFactory from './clients';
 
@@ -39,6 +40,13 @@ type JoinChannelResponse = {
   liveUserId: string;
   reconnectToken: string;
   roomInfo: RoomInfo;
+  moduleState: {
+    [moduleId: string]: IModuleStateModule;
+  };
+};
+
+type JoinChannelErrorResponse = {
+  reason: 'room not found' | string;
 };
 
 declare global {
@@ -229,7 +237,10 @@ class Live {
     });
   }
 
-  joinChannel(roomId: string): Promise<JoinChannelResponse> {
+  joinChannel(
+    roomId: string,
+    onError: (reason: string) => void
+  ): Promise<JoinChannelResponse> {
     return new Promise((resolve, reject) => {
       this.channel = this.getSocket().channel(`live:${roomId}`, { version: 2 });
 
@@ -257,6 +268,7 @@ class Live {
         .join()
         .receive('ok', resp => {
           const result = camelizeKeys(resp) as JoinChannelResponse;
+          result.moduleState = resp.module_state; // Don't camelize this!!
 
           // We rewrite what our reconnect params are by adding the reconnect token.
           // This token makes sure that you can retain state between reconnects and restarts
@@ -269,7 +281,15 @@ class Live {
 
           resolve(result);
         })
-        .receive('error', resp => reject(camelizeKeys(resp)));
+        .receive('error', (resp: JoinChannelErrorResponse) => {
+          if (resp.reason === 'room not found') {
+            if (this.channel) {
+              this.channel.leave();
+            }
+            onError(resp.reason);
+          }
+          reject(camelizeKeys(resp));
+        });
     });
   }
 
@@ -517,6 +537,10 @@ class Live {
     this.clients.reset(moduleShortid, revision);
   }
 
+  hasClient(moduleShortid: string) {
+    return this.clients.has(moduleShortid);
+  }
+
   getAllClients() {
     return this.clients.getAll();
   }

packages/app/src/app/overmind/effects/moduleRecover.ts

@@ -1,43 +1,53 @@
 import { Module } from '@codesandbox/common/lib/types';
 
-const getKey = (id, moduleShortid) => `recover:${id}:${moduleShortid}:code`;
+const getKey = (id: string, moduleShortid: string) =>
+  `recover:${id}:${moduleShortid}:code`;
+
+export type RecoverData = {
+  code: string;
+  version: number;
+  timestamp: number;
+  sandboxId: string;
+};
 
 export default {
-  save(
-    currentId: string,
-    version: number,
-    module: Module,
-    code: string,
-    savedCode: string | null
-  ) {
+  save(sandboxId: string, version: number, module: Module) {
     try {
       localStorage.setItem(
-        getKey(currentId, module.shortid),
+        getKey(sandboxId, module.shortid),
         JSON.stringify({
-          code,
-          savedCode,
+          code: module.code,
           version,
           timestamp: new Date().getTime(),
-          sandboxId: currentId,
+          sandboxId,
         })
       );
     } catch (e) {
       // Too bad
     }
   },
 
-  remove(currentId: string, module: Module) {
+  get(sandboxId: string, moduleShortid: string): RecoverData | null {
+    return JSON.parse(
+      localStorage.getItem(getKey(sandboxId, moduleShortid)) || 'null'
+    );
+  },
+
+  remove(sandboxId: string, module: Module) {
     try {
-      localStorage.removeItem(getKey(currentId, module.shortid));
+      const recoverData = this.get(sandboxId, module.shortid);
+      if (recoverData && recoverData.code === module.code) {
+        localStorage.removeItem(getKey(sandboxId, module.shortid));
+      }
     } catch (e) {
       // Too bad
     }
   },
 
-  clearSandbox(currentId: string) {
+  clearSandbox(sandboxId: string) {
     try {
       Object.keys(localStorage)
-        .filter(key => key.startsWith(`recover:${currentId}`))
+        .filter(key => key.startsWith(`recover:${sandboxId}`))
         .forEach(key => {
           localStorage.removeItem(key);
         });
@@ -46,19 +56,22 @@ export default {
     }
   },
 
-  getRecoverList(currentId: string, modules: Module[]) {
+  getRecoverList(sandboxId: string, modules: Module[]) {
     const localKeys = Object.keys(localStorage).filter(key =>
-      key.startsWith(`recover:${currentId}`)
+      key.startsWith(`recover:${sandboxId}`)
     );
 
     return modules
-      .filter(m => localKeys.includes(getKey(currentId, m.shortid)))
+      .filter(m => localKeys.includes(getKey(sandboxId, m.shortid)))
       .map(module => {
-        const key = getKey(currentId, module.shortid);
+        const key = getKey(sandboxId, module.shortid);
 
         try {
-          const recoverData = JSON.parse(localStorage.getItem(key) || 'null');
-          if (recoverData && recoverData.code !== module.code) {
+          const recoverData: RecoverData = JSON.parse(
+            localStorage.getItem(key) || 'null'
+          );
+
+          if (recoverData) {
             return { recoverData, module };
           }
         } catch (e) {
@@ -67,6 +80,6 @@ export default {
 
         return null;
       })
-      .filter(Boolean);
+      .filter(Boolean) as Array<{ recoverData: RecoverData; module: Module }>;
   },
 };

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -568,6 +568,40 @@ export class VSCodeEffect {
     }
   };
 
+  public async openDiff(sandboxId: string, module: Module, oldCode: string) {
+    if (!module.path) {
+      return;
+    }
+
+    const recoverPath = `/recover/${sandboxId}/recover-${module.path.replace(
+      /\//g,
+      ' '
+    )}`;
+    const filePath = `/sandbox${module.path}`;
+    const fileSystem = window.BrowserFS.BFSRequire('fs');
+
+    // We have to write a recover file to the filesystem, we save it behind
+    // the sandboxId
+    if (!fileSystem.existsSync(`/recover/${sandboxId}`)) {
+      fileSystem.mkdirSync(`/recover/${sandboxId}`);
+    }
+    // We write the recover file with the old code, as the new code is already applied
+    fileSystem.writeFileSync(recoverPath, oldCode);
+
+    // We open a conflict resolution editor for the files
+    this.editorApi.editorService.openEditor({
+      leftResource: this.monaco.Uri.from({
+        scheme: 'conflictResolution',
+        path: recoverPath,
+      }),
+      rightResource: this.monaco.Uri.file(filePath),
+      label: `Recover - ${module.path}`,
+      options: {
+        pinned: true,
+      },
+    });
+  }
+
   public setCorrections = (corrections: ModuleCorrection[]) => {
     const activeEditor = this.editorApi.getActiveCodeEditor();
     if (activeEditor) {
@@ -785,9 +819,18 @@ export class VSCodeEffect {
         )
       ),
       this.createFileSystem('InMemory', {}),
+      this.createFileSystem('InMemory', {}),
     ]);
 
-    const [root, sandbox, vscode, home, extensions, customTheme] = fileSystems;
+    const [
+      root,
+      sandbox,
+      vscode,
+      home,
+      extensions,
+      customTheme,
+      recover,
+    ] = fileSystems;
 
     const mfs = await this.createFileSystem('MountableFileSystem', {
       '/': root,
@@ -796,6 +839,7 @@ export class VSCodeEffect {
       '/home': home,
       '/extensions': extensions,
       '/extensions/custom-theme': customTheme,
+      '/recover': recover,
     });
 
     window.BrowserFS.initialize(mfs);

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -24,7 +24,6 @@ import {
 } from 'app/graphql/types';
 import { Action, AsyncAction } from 'app/overmind';
 import { withLoadApp, withOwnedSandbox } from 'app/overmind/factories';
-import { getSavedCode } from 'app/overmind/utils/sandbox';
 import {
   addDevToolsTab as addDevToolsTabUtil,
   closeDevToolsTab as closeDevToolsTabUtil,
@@ -91,6 +90,10 @@ export const loadCursorFromUrl: AsyncAction = async ({
 
   await actions.editor.moduleSelected({ id: module.id });
 
+  if (!selection) {
+    return;
+  }
+
   const [parsedHead, parsedAnchor] = selection.split('-').map(Number);
   if (!isNaN(parsedHead) && !isNaN(parsedAnchor)) {
     effects.vscode.setSelection(parsedHead, parsedAnchor);
@@ -143,20 +146,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
       state.editor.currentSandbox
     );
 
-    // We now need to send all dirty files that came over from the last sandbox.
-    // There is the scenario where you edit a file and press fork. Then the server
-    // doesn't know about how you got to that dirty state.
-    const changedModules = state.editor.currentSandbox.modules.filter(
-      m => getSavedCode(m.code, m.savedCode) !== m.code
-    );
-    changedModules.forEach(m => {
-      // Update server with latest data
-      effects.live.sendCodeUpdate(
-        m.shortid,
-        getTextOperation(m.savedCode || '', m.code || '')
-      );
-    });
-
     state.editor.isForkingSandbox = false;
     return;
   }
@@ -263,13 +252,13 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
 
   await actions.editor.internal.initializeSandbox(sandbox);
 
+  // We only recover files at this point if we are not live. When live we recover them
+  // when the module_state is received
   if (
-    hasPermission(sandbox.authorization, 'write_code') &&
-    !state.live.isLive
+    !state.live.isLive &&
+    hasPermission(sandbox.authorization, 'write_code')
   ) {
     actions.files.internal.recoverFiles();
-  } else if (state.live.isLive) {
-    await effects.live.sendModuleStateSyncRequest();
   }
 
   effects.vscode.openModule(state.editor.currentModule);
@@ -348,13 +337,14 @@ export const onOperationApplied: Action<{
     return;
   }
 
-  actions.editor.internal.setStateModuleCode({
+  actions.editor.internal.updateModuleCode({
     module,
     code,
   });
 
   actions.editor.internal.updatePreviewCode();
 
+  // If we are in a state of sync, we set "revertModule" to set it as saved
   if (module.savedCode !== null && module.code === module.savedCode) {
     effects.vscode.syncModule(module);
   }
@@ -416,10 +406,11 @@ export const codeChanged: Action<{
     });
   }
 
-  actions.editor.internal.setStateModuleCode({
+  actions.editor.internal.updateModuleCode({
     module,
     code,
   });
+
   if (module.savedCode !== null && module.code === module.savedCode) {
     effects.vscode.syncModule(module);
   }
@@ -469,6 +460,7 @@ export const saveClicked: AsyncAction = withOwnedSandbox(
             state.editor.modulesByPath,
             module
           );
+
           effects.moduleRecover.remove(sandbox.id, module);
         } else {
           // We might not have the module, as it was created by the server. In