Add notice about main terminal (codesandbox#2984)

* Add notice about main terminal

* Fix typecheck

Author: CompuIves

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)}