Fix showing message of readonly shell on every shell

Author: CompuIves

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

@@ -5,9 +5,6 @@ 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';
 
@@ -39,37 +36,6 @@ 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/index.tsx

@@ -1,11 +1,13 @@
 import './styles.css';
 
-import { listen } from 'codesandbox-api';
+import { listen, dispatch } from 'codesandbox-api';
 import React from 'react';
 import PlusIcon from 'react-icons/lib/md/add';
 import { withTheme } from 'styled-components';
 import uuid from 'uuid';
 
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
+import { NotificationStatus } from '@codesandbox/notifications';
 import { Shell } from './Shell';
 import { TerminalComponent } from './Shell/Term';
 import { ShellTabs } from './ShellTabs';
@@ -36,6 +38,7 @@ class DevToolTerminal extends React.Component<
   listener: () => void;
   node?: HTMLElement;
   timeout?: number;
+  shownReadonlyNotification: boolean = false;
 
   componentDidMount() {
     createShell = this.createShell;
@@ -48,6 +51,32 @@ class DevToolTerminal extends React.Component<
 
     this.messageQueue.forEach(this.handleMessage);
     this.messageQueue.length = 0;
+
+    terminal.on('data', () => {
+      if (this.props.owned) {
+        if (!this.shownReadonlyNotification) {
+          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',
+                    });
+                  },
+                },
+              ],
+            },
+          });
+        }
+        this.shownReadonlyNotification = true;
+      }
+    });
   };
 
   handleMessage = (data: any) => {