merge

Author: christianalfoni

packages/app/config/build.js

@@ -29,6 +29,13 @@ const staticAssets = [
     from: 'packages/app/static',
     to: 'static',
   },
+  {
+    from: isDev
+      ? 'standalone-packages/codesandbox-browserfs/build'
+      : 'standalone-packages/codesandbox-browserfs/dist',
+    to: 'static/browserfs6',
+  },
+  // For caching purposes
   {
     from: isDev
       ? 'standalone-packages/codesandbox-browserfs/build'

packages/app/src/app/components/CodeEditor/Monaco/workers/linter/index.js

@@ -3,7 +3,7 @@ import Linter from 'eslint/lib/linter';
 import monkeypatch from './monkeypatch-babel-eslint';
 
 self.importScripts(
-  `${process.env.CODESANDBOX_HOST}/static/browserfs5/browserfs.min.js`
+  `${process.env.CODESANDBOX_HOST}/static/browserfs6/browserfs.min.js`
 );
 
 /* eslint-disable global-require */

packages/app/src/app/components/Preview/DevTools/Terminal/Shell/Term.tsx

@@ -5,11 +5,15 @@ import * as fit from 'xterm/lib/addons/fit/fit';
 
 import ResizeObserver from 'resize-observer-polyfill';
 
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
+import { dispatch } from 'codesandbox-api';
+import { NotificationStatus } from '@codesandbox/notifications';
 import getTerminalTheme, { VSTheme } from '../terminal-theme';
 import { TerminalWithFit } from '../types';
 
 type Props = {
   theme: VSTheme;
+  owned: boolean;
   hidden: boolean;
   onTerminalInitialized: (term: TerminalWithFit) => void;
 };
@@ -35,6 +39,37 @@ export class TerminalComponentNoTheme extends React.PureComponent<Props> {
     this.resizeTerminal();
     window.addEventListener('resize', this.listenForResize);
 
+    let shownNotification = false;
+
+    this.term.on('data', () => {
+      // This is readonly, so let the user know they need to open a new
+      // terminal
+
+      if (!shownNotification) {
+        if (this.props.owned) {
+          notificationState.addNotification({
+            title: 'Terminal Read-Only',
+            message:
+              "The main terminal is read-only and runs what's defined in package.json#start, you can create a new terminal to input commands",
+            status: NotificationStatus.NOTICE,
+            actions: {
+              primary: [
+                {
+                  label: 'Create Terminal',
+                  run: () => {
+                    dispatch({
+                      type: 'codesandbox:create-shell',
+                    });
+                  },
+                },
+              ],
+            },
+          });
+        }
+        shownNotification = true;
+      }
+    });
+
     this.props.onTerminalInitialized(this.term);
   };
 

packages/app/src/app/components/Preview/DevTools/Terminal/Shell/index.tsx

@@ -10,6 +10,7 @@ import { TerminalComponent } from './Term';
 type Props = {
   id: string;
   theme: VSTheme;
+  owned: boolean;
   script?: string;
   closeShell: () => void;
   endShell: () => void;
@@ -107,9 +108,10 @@ class ShellComponent extends React.PureComponent<Props> {
   }
 
   render() {
-    const { hidden, theme } = this.props;
+    const { hidden, theme, owned } = this.props;
     return (
       <TerminalComponent
+        owned={owned}
         hidden={hidden}
         theme={theme}
         onTerminalInitialized={this.initializeTerminal}

packages/app/src/app/components/Preview/DevTools/Terminal/index.tsx

@@ -152,6 +152,7 @@ class DevToolTerminal extends React.Component<
         <div style={{ position: 'relative', flex: 'auto' }}>
           <TerminalComponent
             hidden={hidden || selectedShell !== undefined}
+            owned={this.props.owned}
             theme={theme}
             onTerminalInitialized={this.setTerminal}
           />
@@ -161,6 +162,7 @@ class DevToolTerminal extends React.Component<
               id={shell.id}
               script={shell.script}
               ended={shell.ended}
+              owned={this.props.owned}
               hidden={hidden || shell.id !== this.state.selectedShell}
               closeShell={() => this.closeShell(shell.id)}
               endShell={() => this.endShell(shell.id)}

packages/app/src/app/index.html

@@ -48,7 +48,7 @@
 	</script>
 	<!-- End Google Tag Manager -->
 	<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
-	<script src="<%= webpackConfig.output.publicPath %>static/browserfs5/browserfs<%=process.env.NODE_ENV
+	<script src="<%= webpackConfig.output.publicPath %>static/browserfs6/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
 	 type="text/javascript"></script>
 

packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts

@@ -20,7 +20,7 @@ export const initializePolyfills = () => {
 
 export const loadBrowserFS = () => {
   ctx.importScripts(
-    `${process.env.CODESANDBOX_HOST}/static/browserfs5/browserfs.js`
+    `${process.env.CODESANDBOX_HOST}/static/browserfs6/browserfs.min.js`
   );
 };
 

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

@@ -121,11 +121,15 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
   };
 
   checkScreenshot() {
-    if (this.props.screenshotOutdated && this.hasScreenshot()) {
-      // We only request the screenshot if the sandbox card is in view for > 1 second
-      this.screenshotTimeout = window.setTimeout(() => {
-        this.requestScreenshot();
-      }, 1000);
+    if (this.props.screenshotOutdated) {
+      if (this.hasScreenshot()) {
+        // We only request the screenshot if the sandbox card is in view for > 1 second
+        this.screenshotTimeout = window.setTimeout(() => {
+          this.requestScreenshot();
+        }, 1000);
+      }
+    } else {
+      this.setState({ screenshotUrl: this.props.screenshotUrl });
     }
   }
 
@@ -266,9 +270,7 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
           action: () => {
             if (this.props.collectionTeamId) {
               history.push(
-                `/dashboard/teams/${this.props.collectionTeamId}/sandboxes${
-                  this.props.collectionPath
-                }`
+                `/dashboard/teams/${this.props.collectionTeamId}/sandboxes${this.props.collectionPath}`
               );
             } else {
               history.push(`/dashboard/sandboxes${this.props.collectionPath}`);

packages/app/src/embed/components/Content/index.tsx

@@ -454,6 +454,7 @@ export default class Content extends React.PureComponent<Props, State> {
           onToggleProjectView={this.onToggleProjectView}
           onResize={this.handleResize}
           dragging={this.state.dragging}
+          showScreenshotOverlay
         />
       ),
       actions: [],

packages/app/src/embed/components/Sidebar/ExternalResources/index.js

@@ -1,7 +1,20 @@
 import React from 'react';
 import { Container, Row } from './elements';
 
+function getFontFamily(search) {
+  const hashes = search.slice(search.indexOf('?') + 1).split('&');
+  const family = hashes
+    .find(hash => hash.split('=')[0] === 'family')
+    .split('=')[1];
+
+  return family.split('+').join(' ');
+}
+
 function getName(resource) {
+  if (resource.includes('https://fonts.googleapis.com/css')) {
+    return `${getFontFamily(resource)} (Google Fonts)`;
+  }
+
   if (resource.endsWith('.css') || resource.endsWith('.js')) {
     const match = resource.match(/.*\/(.*)/);
     if (match && match[1]) {