add fork to context menu (codesandbox#2586)

* add fork to context menu

* simplify code

Author: SaraVieira

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

@@ -219,6 +219,15 @@ export const createZipClicked: Action = ({ state, effects }) => {
   effects.zip.download(state.editor.currentSandbox);
 };
 
+export const forkExternalSandbox: AsyncAction<string> = async (
+  { actions },
+  sandboxId
+) => {
+  await actions.editor.internal.forkSandbox({
+    sandboxId,
+  });
+};
+
 export const forkSandboxClicked: AsyncAction = async ({
   state,
   effects,

packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx

@@ -17,6 +17,7 @@ import theme from '@codesandbox/common/lib/theme';
 import track from '@codesandbox/common/lib/utils/analytics';
 
 import { ESC, ENTER } from '@codesandbox/common/lib/utils/keycodes';
+import { Sandbox } from '@codesandbox/common/lib/types';
 import { RENAME_SANDBOX_MUTATION } from '../../queries';
 
 import {
@@ -48,7 +49,7 @@ type Props = {
   selectedCount: number;
   collectionPath: string; // eslint-disable-line react/no-unused-prop-types
   collectionTeamId: string | undefined;
-  sandbox: Object;
+  sandbox: Sandbox;
   page: string | undefined;
   privacy: number;
   isPatron: boolean;
@@ -63,6 +64,7 @@ type Props = {
   permanentlyDeleteSandboxes: () => void;
   undeleteSandboxes: () => void;
   makeTemplates: (teamId?: string) => void;
+  forkSandbox: (id: string) => void;
 
   // React-DnD, lazy typings
   connectDragSource: any;
@@ -280,6 +282,13 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
             return true;
           },
         },
+        {
+          title: 'Fork Sandbox',
+          action: () => {
+            this.props.forkSandbox(this.props.sandbox.id);
+            return true;
+          },
+        },
         {
           title: 'Export Sandbox',
           action: () => {

packages/app/src/app/pages/Dashboard/Content/SandboxGrid/index.js

@@ -6,8 +6,9 @@ import { uniq } from 'lodash-es';
 import { basename } from 'path';
 import { camelizeKeys } from 'humps';
 
-import track from '@codesandbox/common/lib/utils/analytics';
 import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
+import track from '@codesandbox/common/lib/utils/analytics';
+
 import Grid from 'react-virtualized/dist/commonjs/Grid';
 import Column from 'react-virtualized/dist/commonjs/Table/Column';
 import Table from 'react-virtualized/dist/commonjs/Table';
@@ -170,6 +171,10 @@ class SandboxGridComponent extends React.Component<*, State> {
     );
   };
 
+  forkSandbox = id => {
+    this.props.signals.editor.forkExternalSandbox(id);
+  };
+
   onMouseDown = (event: MouseEvent) => {
     this.setState({
       selection: {
@@ -317,6 +322,7 @@ class SandboxGridComponent extends React.Component<*, State> {
         }
         collectionPath={item.collection.path}
         collectionTeamId={item.collection.teamId}
+        forkSandbox={this.forkSandbox}
         deleteSandboxes={this.deleteSandboxes}
         undeleteSandboxes={this.undeleteSandboxes}
         permanentlyDeleteSandboxes={this.permanentlyDeleteSandboxes}