Fix deleting sandboxes (codesandbox#2418)

christianalfoni · SaraVieira · commit bab6f06bbf73 · 2019-09-12T11:20:15.000+02:00
* Fix deleting sandboxes

* Zeit implementation reviewed

* Fix payload on alias

* Fix contributors

* Fix review comments

* fix close of new sandbox dependencies
diff --git a/packages/app/src/app/overmind/effects/http.ts b/packages/app/src/app/overmind/effects/http.ts
@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 
 export default {
   get: axios.get,
@@ -7,4 +7,12 @@ export default {
   delete: axios.delete,
   put: axios.put,
   request: axios.request,
+  async getJson<T>(url: string): Promise<AxiosResponse<T>> {
+    const response = await axios.get(url);
+
+    return {
+      ...response,
+      data: JSON.parse(response.data),
+    };
+  },
 };
diff --git a/packages/app/src/app/overmind/effects/zeit.ts b/packages/app/src/app/overmind/effects/zeit.ts
@@ -27,6 +27,22 @@ export default (() => {
     };
   }
 
+  async function deploysByID(id) {
+    try {
+      const response = await axios.get(
+        `https://api.zeit.co/v2/now/deployments/${id}/aliases`,
+        {
+          headers: getDefaultHeaders(),
+        }
+      );
+
+      return response.data;
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  }
+
   return {
     initialize(options: Options) {
       _options = options;
@@ -53,11 +69,22 @@ export default (() => {
         }
       );
 
-      return response.data
-        .filter(deployment => deployment.name === name)
-        .sort((deploymentA, deploymentB) =>
-          deploymentA.created < deploymentB.created ? 1 : -1
-        );
+      const deploysNoAlias = response.data
+        .filter(d => d.name === name)
+        .sort((a, b) => (a.created < b.created ? 1 : -1));
+
+      const assignAlias = async d => {
+        const alias = await deploysByID(d.uid);
+        if (alias) {
+          // eslint-disable-next-line
+          d.alias = alias.aliases;
+        } else {
+          d.alias = [];
+        }
+        return d;
+      };
+
+      return Promise.all(deploysNoAlias.map(assignAlias));
     },
     async getUser(): Promise<ZeitUser> {
       const response = await axios.get('https://api.zeit.co/www/user', {
@@ -67,32 +94,32 @@ export default (() => {
       return response.data;
     },
     async deleteDeployment(id: string) {
-      return axios.request({
-        url: `https://api.zeit.co/v2/now/deployments/${id}`,
-        method: 'DELETE',
+      return axios.delete(`https://api.zeit.co/v9/now/deployments/${id}`, {
         headers: getDefaultHeaders(),
       });
     },
     async deploy(contents: any, sandbox: Sandbox): Promise<string> {
       const apiData = await getApiData(contents, sandbox);
-      const deploymentVersion = apiData.version === 2 ? 'v6' : 'v3';
+      const deploymentVersion = apiData.version === 2 ? 'v9' : 'v3';
 
-      const response = await axios.request({
-        url: `https://api.zeit.co/${deploymentVersion}/now/deployments?forceNew=1`,
-        data: apiData,
-        method: 'POST',
-        headers: getDefaultHeaders(),
-      });
+      const response = await axios.post(
+        `https://api.zeit.co/${deploymentVersion}/now/deployments?forceNew=1`,
+        apiData,
+        {
+          headers: getDefaultHeaders(),
+        }
+      );
 
       return `https://${response.data.result.url}`;
     },
     async aliasDeployment(id: string, zeitConfig: ZeitConfig): Promise<string> {
-      const response = await axios.request({
-        url: `https://api.zeit.co/v2/now/deployments/${id}/aliases`,
-        data: { alias: zeitConfig.alias },
-        method: 'POST',
-        headers: getDefaultHeaders(),
-      });
+      const response = await axios.post(
+        `https://api.zeit.co/v2/now/deployments/${id}/aliases`,
+        { alias: zeitConfig.alias },
+        {
+          headers: getDefaultHeaders(),
+        }
+      );
 
       return `https://${response.data.result.alias}`;
     },
@@ -147,17 +174,23 @@ async function getApiData(contents: any, sandbox: Sandbox) {
   apiData.public = nowJSON.public || nowDefaults.public;
 
   // if now v2 we need to tell now the version, builds and routes
-  if (nowJSON.version === 2) {
+  if (nowJSON.version === 1) {
+    apiData.config = omit(nowJSON, [
+      'public',
+      'type',
+      'name',
+      'files',
+      'version',
+    ]);
+    apiData.forceNew = true;
+  } else {
     apiData.version = 2;
     apiData.builds = nowJSON.builds;
     apiData.routes = nowJSON.routes;
     apiData.env = nowJSON.env;
     apiData.scope = nowJSON.scope;
     apiData['build.env'] = nowJSON['build.env'];
     apiData.regions = nowJSON.regions;
-  } else {
-    apiData.config = omit(nowJSON, ['public', 'type', 'name', 'files']);
-    apiData.forceNew = true;
   }
 
   if (!nowJSON.files) {
@@ -180,7 +213,7 @@ async function getApiData(contents: any, sandbox: Sandbox) {
     // if person added some files but no package.json
     if (
       filePath === 'package.json' &&
-      !apiData.files.filter(f => f.name === 'package.json')
+      !apiData.files.find(f => f.name === 'package.json')
     ) {
       apiData.files.push({
         file: 'package.json',
diff --git a/packages/app/src/app/overmind/factories.ts b/packages/app/src/app/overmind/factories.ts
@@ -50,7 +50,9 @@ export const withLoadApp = <T>(
   state.isAuthenticating = false;
 
   try {
-    const response = await effects.http.get<{ contributors: Contributor[] }>(
+    const response = await effects.http.getJson<{
+      contributors: Contributor[];
+    }>(
       'https://raw.githubusercontent.com/codesandbox/codesandbox-client/master/.all-contributorsrc'
     );
 
diff --git a/packages/app/src/app/overmind/namespaces/deployment/actions.ts b/packages/app/src/app/overmind/namespaces/deployment/actions.ts
@@ -103,7 +103,16 @@ export const deployClicked: AsyncAction = async ({
 export const deploySandboxClicked: AsyncAction = async ({ state, effects }) => {
   state.currentModal = 'deployment';
 
-  if (!state.user.integrations.zeit.email) {
+  const zeitIntegration = state.user.integrations.zeit;
+
+  if (!zeitIntegration || !zeitIntegration.token) {
+    effects.notificationToast.error(
+      'You are not authorized with Zeit, please refresh and log in again'
+    );
+    return;
+  }
+
+  if (!zeitIntegration.email) {
     try {
       const user = await effects.zeit.getUser();
 
@@ -116,7 +125,9 @@ export const deploySandboxClicked: AsyncAction = async ({ state, effects }) => {
   state.deployment.url = null;
 };
 
-export const setDeploymentToDelete: Action<string> = ({ state }, id) => {
+export const setDeploymentToDelete: Action<{
+  id: string;
+}> = ({ state }, { id }) => {
   state.deployment.deployToDelete = id;
 };
 
@@ -128,33 +139,35 @@ export const deleteDeployment: AsyncAction = async ({
   const id = state.deployment.deployToDelete;
 
   state.currentModal = null;
-  state.deployment.isDeletingDeployment = true;
+  state.deployment.deploysBeingDeleted.push(id);
 
   try {
     await effects.zeit.deleteDeployment(id);
 
     effects.notificationToast.success('Deployment deleted');
-
     actions.deployment.getDeploys();
   } catch (error) {
     effects.notificationToast.error(
       'An unknown error occurred when deleting your deployment'
     );
   }
 
-  state.deployment.isDeletingDeployment = false;
+  state.deployment.deploysBeingDeleted.splice(
+    state.deployment.deploysBeingDeleted.indexOf(id),
+    1
+  );
 };
 
-export const aliasDeployment: AsyncAction<string> = async (
-  { state, effects },
-  id
-) => {
+export const aliasDeployment: AsyncAction<{
+  id: string;
+}> = async ({ state, effects, actions }, { id }) => {
   const zeitConfig = effects.zeit.getConfig(state.editor.currentSandbox);
 
   try {
     const url = await effects.zeit.aliasDeployment(id, zeitConfig);
 
     effects.notificationToast.success(`Deployed to ${url}`);
+    actions.deployment.getDeploys();
   } catch (error) {
     effects.notificationToast.error(
       'An unknown error occurred when aliasing your deployment'
diff --git a/packages/app/src/app/overmind/namespaces/deployment/state.ts b/packages/app/src/app/overmind/namespaces/deployment/state.ts
@@ -6,17 +6,17 @@ type State = {
   netlifyClaimUrl: string;
   netlifyLogs: string;
   netlifySite: NetlifySite;
+  deploysBeingDeleted: string[];
   deployToDelete: string;
   deploying: boolean;
   url: string;
   gettingDeploys: boolean;
   sandboxDeploys: ZeitDeployment[];
-  isDeletingDeployment: boolean;
 };
 
 export const state: State = {
   hasAlias: false,
-  isDeletingDeployment: false,
+  deploysBeingDeleted: [],
   deployToDelete: null,
   deploying: false,
   building: false,
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/folder-drop-target.js b/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/folder-drop-target.js
@@ -17,7 +17,9 @@ function addSandboxesToCollection(props, item) {
     variables: {
       collectionPath: path || '/',
       teamId,
-      sandboxIds: selectedSandboxes.toJS(),
+      sandboxIds: selectedSandboxes.toJS
+        ? selectedSandboxes.toJS()
+        : selectedSandboxes,
     },
     optimisticResponse: {
       __typename: 'Mutation',
diff --git a/packages/app/src/app/pages/Dashboard/queries.js b/packages/app/src/app/pages/Dashboard/queries.js
@@ -356,7 +356,9 @@ export function makeTemplates(selectedSandboxes, teamId, collections) {
       .mutate({
         mutation: MAKE_SANDBOXES_TEMPLATE_MUTATION,
         variables: {
-          sandboxIds: selectedSandboxes.toJS(),
+          sandboxIds: selectedSandboxes.toJS
+            ? selectedSandboxes.toJS()
+            : selectedSandboxes,
         },
         refetchQueries: [
           'DeletedSandboxes',
@@ -412,7 +414,11 @@ export function makeTemplates(selectedSandboxes, teamId, collections) {
                   track('Template - Removed', {
                     source: 'Undo',
                   });
-                  unmakeTemplates(selectedSandboxes.toJS());
+                  unmakeTemplates(
+                    selectedSandboxes.toJS
+                      ? selectedSandboxes.toJS()
+                      : selectedSandboxes
+                  );
                 },
               },
             ],
@@ -426,7 +432,9 @@ export function undeleteSandboxes(selectedSandboxes) {
   client.mutate({
     mutation: ADD_SANDBOXES_TO_FOLDER_MUTATION,
     variables: {
-      sandboxIds: selectedSandboxes.toJS(),
+      sandboxIds: selectedSandboxes.toJS
+        ? selectedSandboxes.toJS()
+        : selectedSandboxes,
       collectionPath: '/',
     },
     optimisticResponse: {
@@ -447,7 +455,9 @@ export function permanentlyDeleteSandboxes(selectedSandboxes) {
   client.mutate({
     mutation: PERMANENTLY_DELETE_SANDBOXES_MUTATION,
     variables: {
-      sandboxIds: selectedSandboxes.toJS(),
+      sandboxIds: selectedSandboxes.toJS
+        ? selectedSandboxes.toJS()
+        : selectedSandboxes,
     },
     update: cache => {
       try {
@@ -480,7 +490,9 @@ export function deleteSandboxes(selectedSandboxes, collections = []) {
   client.mutate({
     mutation: DELETE_SANDBOXES_MUTATION,
     variables: {
-      sandboxIds: selectedSandboxes.toJS(),
+      sandboxIds: selectedSandboxes.toJS
+        ? selectedSandboxes.toJS()
+        : selectedSandboxes,
     },
     refetchQueries: [
       'DeletedSandboxes',
@@ -527,7 +539,9 @@ export function setSandboxesPrivacy(selectedSandboxes, privacy) {
   client.mutate({
     mutation: SET_SANDBOXES_PRIVACY_MUTATION,
     variables: {
-      sandboxIds: selectedSandboxes.toJS(),
+      sandboxIds: selectedSandboxes.toJS
+        ? selectedSandboxes.toJS()
+        : selectedSandboxes,
       privacy,
     },
   });
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/index.js b/packages/app/src/app/pages/Sandbox/Editor/Content/index.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { json } from 'overmind';
 import { ThemeProvider } from 'styled-components';
 import { Prompt } from 'react-router-dom';
 import { TextOperation } from 'ot';
@@ -107,7 +108,12 @@ class EditorPreview extends React.Component {
               .changeSandbox(
                 newSandbox,
                 store.editor.currentModule,
-                parsed ? parsed.dependencies : newSandbox.npmDependencies.toJS()
+                // eslint-disable-next-line
+                parsed
+                  ? parsed.dependencies
+                  : newSandbox.npmDependencies.toJS
+                  ? newSandbox.npmDependencies.toJS()
+                  : json(newSandbox.npmDependencies)
               )
               .then(() => {
                 isChangingSandbox = false;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/DeleteDeploymentButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/DeleteDeploymentButton.tsx
@@ -20,7 +20,11 @@ export const DeleteDeploymentButton = inject('store', 'signals')(
       store: { deployment },
     }: Props) => (
       <Action
-        disabled={deployment[`${id}Deleting`]}
+        disabled={
+          deployment.deploysBeingDeleted
+            ? deployment.deploysBeingDeleted.includes(id)
+            : deployment[`${id}Deleting`]
+        }
         onClick={() => {
           setDeploymentToDelete({ id });
           modalOpened({ modal: 'deleteDeployment' });
