Export sandboxes from dashboard (codesandbox#1878)

* exportSandboxes, getSandbox funcs & menu options

* move export above trash and add separator

Author: refarer

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

@@ -45,6 +45,7 @@ type Props = {
   ) => void;
   selectedCount: number;
   deleteSandboxes: () => void;
+  exportSandboxes: () => void;
   permanentlyDeleteSandboxes: () => void;
   collectionPath: string; // eslint-disable-line react/no-unused-prop-types
   collectionTeamId: string | undefined;
@@ -208,6 +209,15 @@ class SandboxItem extends React.PureComponent<Props, State> {
       }
       return [
         ...items,
+        [
+          {
+            title: `Export ${selectedCount} Sandboxes`,
+            action: () => {
+              this.props.exportSandboxes()
+              return true;
+            },
+          },
+        ],
         [
           {
             title: `Move ${selectedCount} Sandboxes To Trash`,
@@ -216,7 +226,7 @@ class SandboxItem extends React.PureComponent<Props, State> {
               return true;
             },
             color: theme.red.darken(0.2)(),
-          },
+          }
         ],
       ];
     }
@@ -229,7 +239,7 @@ class SandboxItem extends React.PureComponent<Props, State> {
             if (this.props.collectionTeamId) {
               history.push(
                 `/dashboard/teams/${this.props.collectionTeamId}/sandboxes${
-                  this.props.collectionPath
+                this.props.collectionPath
                 }`
               );
             } else {
@@ -250,31 +260,38 @@ class SandboxItem extends React.PureComponent<Props, State> {
             return true;
           },
         },
+        {
+          title: 'Export Sandbox',
+          action: () => {
+            this.props.exportSandboxes();
+            return true;
+          },
+        },
       ],
       this.props.isPatron &&
-        [
-          this.props.privacy !== 0 && {
-            title: `Make Sandbox Public`,
-            action: () => {
-              this.props.setSandboxesPrivacy(0);
-              return true;
-            },
+      [
+        this.props.privacy !== 0 && {
+          title: `Make Sandbox Public`,
+          action: () => {
+            this.props.setSandboxesPrivacy(0);
+            return true;
           },
-          this.props.privacy !== 1 && {
-            title: `Make Sandbox Unlisted`,
-            action: () => {
-              this.props.setSandboxesPrivacy(1);
-              return true;
-            },
+        },
+        this.props.privacy !== 1 && {
+          title: `Make Sandbox Unlisted`,
+          action: () => {
+            this.props.setSandboxesPrivacy(1);
+            return true;
           },
-          this.props.privacy !== 2 && {
-            title: `Make Sandbox Private`,
-            action: () => {
-              this.props.setSandboxesPrivacy(2);
-              return true;
-            },
+        },
+        this.props.privacy !== 2 && {
+          title: `Make Sandbox Private`,
+          action: () => {
+            this.props.setSandboxesPrivacy(2);
+            return true;
           },
-        ].filter(Boolean),
+        },
+      ].filter(Boolean),
       [
         {
           title: `Rename Sandbox`,
@@ -533,10 +550,10 @@ class SandboxItem extends React.PureComponent<Props, State> {
                           }}
                         </Mutation>
                       ) : (
-                        <SandboxTitle>
-                          {title} {this.getPrivacyIcon()}
-                        </SandboxTitle>
-                      )}
+                          <SandboxTitle>
+                            {title} {this.getPrivacyIcon()}
+                          </SandboxTitle>
+                        )}
                     </div>
                     <SandboxDetails>{details}</SandboxDetails>
                   </div>

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

@@ -4,12 +4,15 @@ import { inject, observer } from 'mobx-react';
 import moment from 'moment';
 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 Grid from 'react-virtualized/dist/commonjs/Grid';
 import Column from 'react-virtualized/dist/commonjs/Table/Column';
 import Table from 'react-virtualized/dist/commonjs/Table';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+import downloadZip from 'app/store/providers/Utils/create-zip';
 import 'react-virtualized/styles.css';
 
 import SandboxItem from '../SandboxCard';
@@ -45,6 +48,8 @@ class SandboxGrid extends React.Component<*, State> {
     selection: undefined,
   };
 
+  loadedSandboxes = {};
+
   setSandboxesSelected = (ids, { additive = false, range = false } = {}) => {
     const { store, sandboxes, signals } = this.props;
     const selectedSandboxes = store.dashboard.selectedSandboxes;
@@ -116,6 +121,39 @@ class SandboxGrid extends React.Component<*, State> {
     setSandboxesPrivacy(this.props.store.dashboard.selectedSandboxes, privacy);
   };
 
+  getSandbox = async sandboxId => {
+    if (this.loadedSandboxes[sandboxId]) {
+      return Promise.resolve(this.loadedSandboxes[sandboxId]);
+    }
+
+    return fetch(`${protocolAndHost()}/api/v1/sandboxes/${sandboxId}`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${JSON.parse(localStorage.getItem('jwt'))}`,
+      },
+    })
+      .then(x => x.json())
+      .then(x => {
+        const data = camelizeKeys(x.data);
+        this.loadedSandboxes[data.id] = data;
+        return data;
+      });
+  };
+
+  exportSandboxes = async () => {
+    const sandboxIds = uniq(
+      this.props.sandboxes
+        .filter(sandbox => this.selectedSandboxesObject[sandbox.id])
+        .map(s => s.id)
+    );
+    const sandboxes = await Promise.all(
+      sandboxIds.map(s => this.getSandbox(s))
+    );
+    return Promise.all(
+      sandboxes.map(s => downloadZip(s, s.modules, s.directories))
+    );
+  };
+
   onMouseDown = (event: MouseEvent) => {
     this.setState({
       selection: {
@@ -262,6 +300,7 @@ class SandboxGrid extends React.Component<*, State> {
         deleteSandboxes={this.deleteSandboxes}
         undeleteSandboxes={this.undeleteSandboxes}
         permanentlyDeleteSandboxes={this.permanentlyDeleteSandboxes}
+        exportSandboxes={this.exportSandboxes}
         setSandboxesPrivacy={this.setSandboxesPrivacy}
         page={this.props.page}
         privacy={item.privacy}