re-add module recovery logic (#6846)

sannek · web-flow · commit 0752669f1a4c · 2022-09-07T18:51:08.000+02:00
Added back in order to only enable live by default for PRO users to ease server load
diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts
@@ -34,6 +34,13 @@ export const onInitializeOvermind = async (
 
   effects.flows.initialize(overmindInstance.reaction);
 
+  // We consider recover mode something to be done when browser actually crashes, meaning there is no unmount
+  effects.browser.onUnload(() => {
+    if (state.editor.currentSandbox && state.connected) {
+      effects.moduleRecover.clearSandbox(state.editor.currentSandbox.id);
+    }
+  });
+
   effects.api.initialize({
     getParsedConfigurations() {
       return state.editor.parsedConfigurations;
diff --git a/packages/app/src/app/overmind/effects/index.ts b/packages/app/src/app/overmind/effects/index.ts
@@ -5,6 +5,7 @@ export { default as browser } from './browser';
 export { default as connection } from './connection';
 export { default as jsZip } from './jsZip';
 export { default as live } from './live';
+export { default as moduleRecover } from './moduleRecover';
 export { default as notifications } from './notifications';
 export { default as router } from './router';
 export { default as settingsStore } from './settingsStore';
diff --git a/packages/app/src/app/overmind/effects/moduleRecover.ts b/packages/app/src/app/overmind/effects/moduleRecover.ts
@@ -0,0 +1,85 @@
+import { Module } from '@codesandbox/common/lib/types';
+
+const getKey = (id: string, moduleShortid: string) =>
+  `recover:${id}:${moduleShortid}:code`;
+
+export type RecoverData = {
+  code: string;
+  version: number;
+  timestamp: number;
+  sandboxId: string;
+};
+
+export default {
+  save(sandboxId: string, version: number, module: Module) {
+    try {
+      localStorage.setItem(
+        getKey(sandboxId, module.shortid),
+        JSON.stringify({
+          code: module.code,
+          version,
+          timestamp: new Date().getTime(),
+          sandboxId,
+        })
+      );
+    } catch (e) {
+      // Too bad
+    }
+  },
+
+  get(sandboxId: string, moduleShortid: string): RecoverData | null {
+    return JSON.parse(
+      localStorage.getItem(getKey(sandboxId, moduleShortid)) || 'null'
+    );
+  },
+
+  remove(sandboxId: string, module: Module) {
+    try {
+      const recoverData = this.get(sandboxId, module.shortid);
+      if (recoverData && recoverData.code === module.code) {
+        localStorage.removeItem(getKey(sandboxId, module.shortid));
+      }
+    } catch (e) {
+      // Too bad
+    }
+  },
+
+  clearSandbox(sandboxId: string) {
+    try {
+      Object.keys(localStorage)
+        .filter(key => key.startsWith(`recover:${sandboxId}`))
+        .forEach(key => {
+          localStorage.removeItem(key);
+        });
+    } catch (e) {
+      // Too bad
+    }
+  },
+
+  getRecoverList(sandboxId: string, modules: Module[]) {
+    const localKeys = Object.keys(localStorage).filter(key =>
+      key.startsWith(`recover:${sandboxId}`)
+    );
+
+    return modules
+      .filter(m => localKeys.includes(getKey(sandboxId, m.shortid)))
+      .map(module => {
+        const key = getKey(sandboxId, module.shortid);
+
+        try {
+          const recoverData: RecoverData = JSON.parse(
+            localStorage.getItem(key) || 'null'
+          );
+
+          if (recoverData) {
+            return { recoverData, module };
+          }
+        } catch (e) {
+          // Too bad
+        }
+
+        return null;
+      })
+      .filter(Boolean) as Array<{ recoverData: RecoverData; module: Module }>;
+  },
+};
diff --git a/packages/app/src/app/overmind/namespaces/editor/actions.ts b/packages/app/src/app/overmind/namespaces/editor/actions.ts
@@ -352,6 +352,15 @@ export const sandboxChanged = 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 (
+    !state.live.isLive &&
+    hasPermission(sandbox.authorization, 'write_code')
+  ) {
+    actions.files.internal.recoverFiles();
+  }
+
   if (state.editor.currentModule.id) {
     effects.vscode.openModule(state.editor.currentModule);
   } else {
@@ -657,6 +666,7 @@ export const saveClicked = 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
             // this case we put it in. There is an edge case here where the user
diff --git a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts
@@ -187,6 +187,7 @@ export const saveCode = async (
 
     if (savedCode === null) {
       // If the savedCode is also module.code
+      effects.moduleRecover.remove(sandbox.id, module);
       effects.vscode.syncModule(module);
     }
 
@@ -402,6 +403,8 @@ export const updateModuleCode = (
   }
 
   module.code = code;
+  // Save the code to localStorage so we can recover in case of a crash
+  effects.moduleRecover.save(currentSandbox.id, currentSandbox.version, module);
 };
 
 export const forkSandbox = async (
diff --git a/packages/app/src/app/overmind/namespaces/editor/state.ts b/packages/app/src/app/overmind/namespaces/editor/state.ts
@@ -20,6 +20,7 @@ import {
 } from '@codesandbox/common/lib/types';
 import { getSandboxOptions } from '@codesandbox/common/lib/url';
 import { CollaboratorFragment, InvitationFragment } from 'app/graphql/types';
+import { RecoverData } from 'app/overmind/effects/moduleRecover';
 import immer from 'immer';
 import { derived } from 'overmind';
 
@@ -85,6 +86,7 @@ type State = {
   currentDevToolsPosition: DevToolsTabPosition;
   sessionFrozen: boolean;
   hasLoadedInitialModule: boolean;
+  recoveredFiles: Array<{ recoverData: RecoverData; module: Module }>;
 };
 
 export const state: State = {
@@ -125,6 +127,7 @@ export const state: State = {
   quickActionsOpen: false,
   previewWindowVisible: true,
   statusBar: true,
+  recoveredFiles: [],
   previewWindowOrientation:
     window.innerHeight / window.innerWidth > 0.9
       ? WindowOrientation.HORIZONTAL
diff --git a/packages/app/src/app/overmind/namespaces/files/actions.ts b/packages/app/src/app/overmind/namespaces/files/actions.ts
@@ -8,6 +8,7 @@ import { Directory, Module, UploadFile } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { Context } from 'app/overmind';
+import { RecoverData } from 'app/overmind/effects/moduleRecover';
 import { withOwnedSandbox } from 'app/overmind/factories';
 import { createOptimisticModule } from 'app/overmind/utils/common';
 import { INormalizedModules } from 'codesandbox-import-util-types';
@@ -21,6 +22,64 @@ import * as internalActions from './internalActions';
 
 export const internal = internalActions;
 
+export const applyRecover = (
+  { state, effects, actions }: Context,
+  recoveredList: Array<{
+    module: Module;
+    recoverData: RecoverData;
+  }>
+) => {
+  if (!state.editor.currentSandbox) {
+    return;
+  }
+
+  effects.moduleRecover.clearSandbox(state.editor.currentSandbox.id);
+  recoveredList.forEach(({ recoverData, module }) => {
+    actions.editor.codeChanged({
+      moduleShortid: module.shortid,
+      code: recoverData.code,
+    });
+    effects.vscode.setModuleCode(module);
+  });
+
+  effects.analytics.track('Files Recovered', {
+    fileCount: recoveredList.length,
+  });
+};
+
+export const createRecoverDiffs = (
+  { state, effects, actions }: Context,
+  recoveredList: Array<{
+    module: Module;
+    recoverData: RecoverData;
+  }>
+) => {
+  const sandbox = state.editor.currentSandbox;
+  if (!sandbox) {
+    return;
+  }
+  effects.moduleRecover.clearSandbox(sandbox.id);
+  recoveredList.forEach(({ recoverData, module }) => {
+    const oldCode = module.code;
+    actions.editor.codeChanged({
+      moduleShortid: module.shortid,
+      code: recoverData.code,
+    });
+    effects.vscode.openDiff(sandbox.id, module, oldCode);
+  });
+
+  effects.analytics.track('Files Recovered', {
+    fileCount: recoveredList.length,
+  });
+};
+
+export const discardRecover = ({ effects, state }: Context) => {
+  if (!state.editor.currentSandbox) {
+    return;
+  }
+  effects.moduleRecover.clearSandbox(state.editor.currentSandbox.id);
+};
+
 export const moduleRenamed = withOwnedSandbox(
   async (
     { state, actions, effects }: Context,
diff --git a/packages/app/src/app/overmind/namespaces/files/internalActions.ts b/packages/app/src/app/overmind/namespaces/files/internalActions.ts
@@ -16,6 +16,37 @@ function b64DecodeUnicode(file: string) {
   );
 }
 
+export const recoverFiles = ({ effects, state }: Context) => {
+  const sandbox = state.editor.currentSandbox;
+
+  if (!sandbox) {
+    return;
+  }
+
+  const recoverList = effects.moduleRecover.getRecoverList(
+    sandbox.id,
+    sandbox.modules
+  );
+
+  const recoveredList = recoverList.reduce((aggr, item) => {
+    if (!item) {
+      return aggr;
+    }
+    const { recoverData, module } = item;
+
+    if (module.code !== recoverData.code) {
+      return aggr.concat(item);
+    }
+
+    return aggr;
+  }, [] as typeof recoverList);
+
+  if (recoveredList.length > 0) {
+    state.editor.recoveredFiles = recoveredList;
+    state.currentModal = 'recoveredFiles';
+  }
+};
+
 export const uploadFiles = async (
   { effects }: Context,
   {
diff --git a/packages/app/src/app/overmind/namespaces/live/internalActions.ts b/packages/app/src/app/overmind/namespaces/live/internalActions.ts
@@ -191,6 +191,8 @@ export const initializeModuleState = (
       moduleInfo,
     });
   });
+  // TODO: enable once we know exactly when we want to recover
+  // actions.files.internal.recoverFiles();
   actions.editor.internal.updatePreviewCode();
 };
 
diff --git a/packages/app/src/app/pages/common/Modals/RecoverFilesModal/index.tsx b/packages/app/src/app/pages/common/Modals/RecoverFilesModal/index.tsx
@@ -0,0 +1,60 @@
+import React, { FunctionComponent } from 'react';
+
+import { Button, Stack } from '@codesandbox/components';
+import { useAppState, useActions } from 'app/overmind';
+import css from '@styled-system/css';
+import { Alert } from '../Common/Alert';
+
+export const RecoverFilesModal: FunctionComponent = () => {
+  const { files, modalClosed } = useActions();
+  const { recoveredFiles } = useAppState().editor;
+
+  return (
+    <Alert
+      title="Recovered Files"
+      description={`We recovered ${recoveredFiles.length} unsaved ${
+        recoveredFiles.length > 1 ? 'files' : 'file'
+      } from a previous session, what do you want to do?`}
+    >
+      <Stack justify="flex-end" gap={2}>
+        <Button
+          variant="secondary"
+          css={css({
+            width: 'auto',
+          })}
+          onClick={() => {
+            files.applyRecover(recoveredFiles);
+            modalClosed();
+          }}
+        >
+          Apply Changes
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            files.createRecoverDiffs(recoveredFiles);
+            modalClosed();
+          }}
+          type="submit"
+          css={css({
+            width: 'auto',
+          })}
+        >
+          Compare
+        </Button>
+        <Button
+          onClick={() => {
+            files.discardRecover();
+            modalClosed();
+          }}
+          type="submit"
+          css={css({
+            width: 'auto',
+          })}
+        >
+          Discard
+        </Button>
+      </Stack>
+    </Alert>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/index.tsx b/packages/app/src/app/pages/common/Modals/index.tsx
@@ -26,6 +26,7 @@ import { LiveVersionMismatch } from './LiveSessionVersionMismatch';
 import { NetlifyLogs } from './NetlifyLogs';
 import { PickSandboxModal } from './PickSandboxModal';
 import { PreferencesModal } from './PreferencesModal';
+import { RecoverFilesModal } from './RecoverFilesModal';
 import { PilotPaymentModal } from './PilotPaymentModal';
 import { SandboxPickerModal } from './SandboxPickerModal';
 import { SearchDependenciesModal } from './SearchDependenciesModal';
@@ -73,6 +74,10 @@ const modals = {
     Component: DeleteWorkspace,
     width: 400,
   },
+  recoveredFiles: {
+    Component: RecoverFilesModal,
+    width: 400,
+  },
   teamInvite: {
     Component: TeamInviteModal,
     width: 400,

Original file line number	Diff line number	Diff line change
`@@ -187,6 +187,7 @@ export const saveCode = async (`
`187`	`187`
`188`	`188`	`if (savedCode === null) {`
`189`	`189`	`// If the savedCode is also module.code`
	`190`	`+ effects.moduleRecover.remove(sandbox.id, module);`
`190`	`191`	`effects.vscode.syncModule(module);`
`191`	`192`	`}`
`192`	`193`
`@@ -402,6 +403,8 @@ export const updateModuleCode = (`
`402`	`403`	`}`
`403`	`404`
`404`	`405`	`module.code = code;`
	`406`	`+ // Save the code to localStorage so we can recover in case of a crash`
	`407`	`+ effects.moduleRecover.save(currentSandbox.id, currentSandbox.version, module);`
`405`	`408`	`};`
`406`	`409`
`407`	`410`	`export const forkSandbox = async (`