Merge branch 'master' into prototype-common-sync

Author: Saeris

packages/app/scripts/deploy.js

@@ -1,6 +1,6 @@
 const fetch = require('cross-fetch');
 
-fetch('https://deployment-api.lbogdan.ro/image', {
+fetch('https://deploy-api.ops.csb.dev/image', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',

packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/elements.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import SyncIcon from 'react-icons/lib/go/sync';
 
 export const Container = styled.div`
@@ -49,13 +49,9 @@ export const TestData = styled.div`
 `;
 
 export const SyncIconStyled = styled(SyncIcon)<{ watching: boolean }>`
-  opacity: 0.7;
-  color: ${props => props.theme['button.hoverBackground']};
-  ${props =>
-    props.watching &&
-    css`
-      opacity: 1;
-    `}
+  && {
+    opacity: ${props => (props.watching ? 1 : undefined)};
+  }
 `;
 
 export const Actions = styled.div`
@@ -69,7 +65,6 @@ export const Actions = styled.div`
     cursor: pointer;
     opacity: 0.8;
     color: ${props => props.theme['button.hoverBackground']};
-
     margin-left: 0.5rem;
 
     &:hover {

packages/app/src/app/overmind/effects/zip/create-zip/index.ts

@@ -196,8 +196,6 @@ export async function createDirectoryWithFiles(
   );
 }
 
-const DEFAULT_IGNORE = ['yarn.lock', 'package-lock.json'];
-
 export async function createZip(
   sandbox: Sandbox,
   modules: Array<Module>,
@@ -206,7 +204,7 @@ export async function createZip(
   useGitIgnore: boolean = false
 ) {
   const zip = new JSZip();
-  const ignorer = ignore().add(DEFAULT_IGNORE);
+  const ignorer = ignore();
 
   if (useGitIgnore) {
     const gitIgnore = modules.find(
@@ -270,33 +268,39 @@ export async function createZip(
         // For the new vue cli we want to use the full promise
         promise = fullPromise();
       } else {
-        promise = import(/* webpackChunkName: 'vue-zip' */ './vue-cli').then(
-          generator =>
-            generator.default(zip, sandbox, filteredModules, directories)
+        promise = import(
+          /* webpackChunkName: 'vue-zip' */ './vue-cli'
+        ).then(generator =>
+          generator.default(zip, sandbox, filteredModules, directories)
         );
       }
     } catch (e) {
       promise = fullPromise();
     }
   } else if (sandbox.template === preact.name) {
-    promise = import(/* webpackChunkName: 'preact-zip' */ './preact-cli').then(
-      generator => generator.default(zip, sandbox, filteredModules, directories)
+    promise = import(
+      /* webpackChunkName: 'preact-zip' */ './preact-cli'
+    ).then(generator =>
+      generator.default(zip, sandbox, filteredModules, directories)
     );
   } else if (sandbox.template === svelte.name) {
-    promise = import(/* webpackChunkName: 'svelte-zip' */ './svelte').then(
-      generator => generator.default(zip, sandbox, filteredModules, directories)
+    promise = import(
+      /* webpackChunkName: 'svelte-zip' */ './svelte'
+    ).then(generator =>
+      generator.default(zip, sandbox, filteredModules, directories)
     );
   } else {
     // If no specific zip generator is found we will default to the full generator
-    promise = import(/* webpackChunkName: 'full-zip' */ './full').then(
-      generator =>
-        generator.default(
-          zip,
-          sandbox,
-          filteredModules,
-          directories,
-          downloadBlobs
-        )
+    promise = import(
+      /* webpackChunkName: 'full-zip' */ './full'
+    ).then(generator =>
+      generator.default(
+        zip,
+        sandbox,
+        filteredModules,
+        directories,
+        downloadBlobs
+      )
     );
   }
 

packages/app/src/app/overmind/internalActions.ts

@@ -371,7 +371,9 @@ export const onApiError: Action<ApiError> = (
   const result = response.data;
 
   if (result) {
-    if ('errors' in result) {
+    if (typeof result === 'string') {
+      error.message = result;
+    } else if ('errors' in result) {
       const errors = values(result.errors)[0];
       if (Array.isArray(errors)) {
         if (errors[0]) {

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

@@ -1,8 +1,17 @@
+import { AxiosError } from 'axios';
+import { get } from 'lodash-es';
 import { Action, AsyncAction } from 'app/overmind';
 import * as internalActions from './internalActions';
 
 export const internal = internalActions;
 
+const getZeitErrorMessage = (error: AxiosError) =>
+  get(
+    error,
+    'response.data.error.message',
+    'An unknown error occurred when connecting to ZEIT'
+  );
+
 export const deployWithNetlify: AsyncAction = async ({
   effects,
   actions,
@@ -67,9 +76,7 @@ export const getDeploys: AsyncAction = async ({ state, effects }) => {
       zeitConfig.name
     );
   } catch (error) {
-    effects.notificationToast.error(
-      'An unknown error occurred when connecting to ZEIT'
-    );
+    effects.notificationToast.error(getZeitErrorMessage(error));
   }
 
   state.deployment.gettingDeploys = false;
@@ -80,19 +87,16 @@ export const deployClicked: AsyncAction = async ({
   effects,
   actions,
 }) => {
-  state.deployment.deploying = true;
-  const zip = await effects.zip.create(state.editor.currentSandbox);
-  const contents = await effects.jsZip.loadAsync(zip.file);
-
   try {
+    state.deployment.deploying = true;
+    const zip = await effects.zip.create(state.editor.currentSandbox);
+    const contents = await effects.jsZip.loadAsync(zip.file);
     state.deployment.url = await effects.zeit.deploy(
       contents,
       state.editor.currentSandbox
     );
   } catch (error) {
-    effects.notificationToast.error(
-      'An unknown error occurred when connecting to ZEIT'
-    );
+    effects.notificationToast.error(getZeitErrorMessage(error));
   }
 
   state.deployment.deploying = false;

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

@@ -574,13 +574,17 @@ export const previewActionReceived: Action<{
 
       if (newErrors.length !== currentErrors.length) {
         state.editor.errors.forEach(error => {
-          const module = resolveModule(
-            error.path,
-            state.editor.currentSandbox.modules,
-            state.editor.currentSandbox.directories
-          );
+          try {
+            const module = resolveModule(
+              error.path,
+              state.editor.currentSandbox.modules,
+              state.editor.currentSandbox.directories
+            );
 
-          module.errors = [];
+            module.errors = [];
+          } catch (e) {
+            // Module doesn't exist anymore
+          }
         });
         state.editor.errors = newErrors;
       }

packages/app/src/app/overmind/namespaces/files/internalActions.ts

@@ -42,16 +42,17 @@ export const recoverFiles: Action = ({ effects, actions, state }) => {
       return false;
     })
     .filter(Boolean);
+  const numRecoveredFiles = recoveredList.length;
 
-  if (recoveredList.length > 0) {
+  if (numRecoveredFiles > 0) {
     effects.analytics.track('Files Recovered', {
-      fileCount: recoveredList.length,
+      fileCount: numRecoveredFiles,
     });
 
     effects.notificationToast.add({
-      message: `We recovered ${
-        recoveredList.length
-      } unsaved files from a previous session`,
+      message: `We recovered ${numRecoveredFiles} unsaved ${
+        numRecoveredFiles > 1 ? 'files' : 'file'
+      } from a previous session`,
       status: NotificationStatus.NOTICE,
     });
   }

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

@@ -82,25 +82,29 @@ export const CreateNewSandbox: FunctionComponent<Props> = ({
     setCreating(true);
   };
 
-  const buttonName = `Create ${mostUsedSandboxTemplate.niceName} Sandbox`;
-  const mostUsedSandboxComponent = collectionId ? (
-    <Container
-      color={mostUsedSandboxTemplate.color}
-      onClick={() => createSandbox(mostUsedSandboxTemplate)}
-      ref={ref}
-      role="button"
-      tabIndex={0}
-    >
-      {buttonName}
-    </Container>
-  ) : (
-    <ContainerLink
-      color={mostUsedSandboxTemplate.color}
-      to={sandboxUrl({ id: mostUsedSandboxTemplate.shortid })}
-    >
-      {buttonName}
-    </ContainerLink>
-  );
+  let mostUsedSandboxComponent = null;
+
+  if (mostUsedSandboxTemplate) {
+    const buttonName = `Create ${mostUsedSandboxTemplate.niceName} Sandbox`;
+    mostUsedSandboxComponent = collectionId ? (
+      <Container
+        color={mostUsedSandboxTemplate.color}
+        onClick={() => createSandbox(mostUsedSandboxTemplate)}
+        ref={ref}
+        role="button"
+        tabIndex={0}
+      >
+        {buttonName}
+      </Container>
+    ) : (
+      <ContainerLink
+        color={mostUsedSandboxTemplate.color}
+        to={sandboxUrl({ id: mostUsedSandboxTemplate.shortid })}
+      >
+        {buttonName}
+      </ContainerLink>
+    );
+  }
 
   const fromRectDOM = ref.current
     ? ref.current.getBoundingClientRect()