Remove destroyed mst roots from UI (resolves #48)

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## [Unreleased]
+- Remove destroyed mst roots from UI (resolves #48)
 
 ## [0.9.21] - 2019-3-9
 - mobx-devtools-mst mobx@5 support

packages/playground/src/casablanca/index.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { types } from 'mobx-state-tree';
+import { types, destroy } from 'mobx-state-tree';
 import { observer } from 'mobx-react';
 import { render } from 'react-dom';
 import inspectTree from 'mobx-devtools-mst'; // eslint-disable-line
@@ -61,6 +61,7 @@ class TodoAppComponent extends React.Component {
       <div>
         {storeInstance.todos.map(t => <TodoComponent key={t.id} {...t} />)}
         <input type="test" onKeyDown={this.handleInputKeydown} />
+        <button onClick={() => destroy(storeInstance)}>destroy</button>
       </div>
     );
   }

scripts/webextension/publish.js

@@ -67,6 +67,7 @@ function publishCrhome(target = 'default') {
     }
     const { error, statusDetail } = JSON.parse(body);
     if (error) {
+      console.log({ error });
       throw error;
     }
     console.log('Chrome published', statusDetail); // eslint-disable-line no-console

src/frontend/TabMST/index.jsx

@@ -19,6 +19,7 @@ import LogItemExplorer from './LogItemExplorer';
       'mstLogEnabled',
       'activeRootId',
       'activeLogItemId',
+      'mstRootsUpdated',
     ],
   },
   injectProps: ({ mstLoggerStore, capabilitiesStore }) => {
@@ -103,6 +104,12 @@ export default class TabMST extends React.PureComponent {
   render() {
     if (!this.props.mstFound) return null;
 
+    if (this.props.rootsIds.length === 0) {
+      return (
+        <div className={css(styles.emptyState)}>No roots</div>
+      );
+    }
+
     const tabs = this.props.rootsIds.map(id => ({
       id,
       title: this.props.rootNamesById[id] || String(id),
@@ -147,6 +154,14 @@ export default class TabMST extends React.PureComponent {
 }
 
 const styles = StyleSheet.create({
+  emptyState: {
+    flex: '1 1 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 20,
+    color: '#777',
+    fontWeight: 'bold',
+  },
   tabmst: {
     flex: '1 1 auto',
     display: 'flex',

src/frontend/stores/MSTChangesStore.js

@@ -46,6 +46,12 @@ export default class MSTChangesStore extends AbstractStore {
         roots.forEach(({ id, name }) => {
           this.rootNamesById[id] = name;
         });
+        this.emit('mstRootsUpdated');
+      }),
+      bridge.sub('frontend:remove-mst-root', (rootId) => {
+        delete this.rootNamesById[rootId];
+        delete this.itemsDataByRootId[rootId];
+        this.emit('mstRootsUpdated');
       })
     );