Change behaviour of devtools counter (codesandbox#2653)

Before we would clear the counter of a devtool (unread count) whenever the devtools opens, also for problems and tests. It only makes sense to do this for the console though, so I moved this logic from the base devtools to the console devtools.

Author: CompuIves

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

@@ -142,7 +142,7 @@ class ConsoleComponent extends React.Component<StyledProps> {
   };
 
   addMessage(method, data) {
-    if (this.props.updateStatus) {
+    if (this.props.updateStatus && this.props.hidden) {
       this.props.updateStatus(this.getType(method));
     }
 
@@ -190,7 +190,10 @@ class ConsoleComponent extends React.Component<StyledProps> {
     });
   };
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: StyledProps) {
+    if (prevProps.hidden && !this.props.hidden) {
+      this.props.updateStatus('clear');
+    }
     this.scrollToBottom();
   }
 

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

@@ -226,10 +226,6 @@ export class DevTools extends React.PureComponent<Props, State> {
     status: 'success' | 'warning' | 'error' | 'info' | 'clear',
     count?: number
   ) => {
-    if (!this.state.hidden && this.getCurrentPane().id === id) {
-      return;
-    }
-
     const currentStatus = (status !== 'clear' && this.state.status[id]) || {
       unread: 0,
       type: 'info',
@@ -402,15 +398,6 @@ export class DevTools extends React.PureComponent<Props, State> {
       devToolIndex: this.props.devToolIndex,
       tabPosition: index,
     });
-    this.setState(state => ({
-      status: {
-        ...state.status,
-        [this.props.viewConfig.views[index].id]: {
-          type: 'info',
-          unread: 0,
-        },
-      },
-    }));
   };
 
   /**