feat(timeline): Timeline export

* timeline export

* change icon place within gui

* cleanup

* Move file to new location

Author: robinfehr

App/Dialogs/ExportTimelineDialog.js

@@ -0,0 +1,125 @@
+import React from "react"
+import Modal from "react-modal"
+import { inject, observer } from "mobx-react"
+import AppStyles from "../Theme/AppStyles"
+import Colors from "../Theme/Colors"
+import Checkbox from "../Shared/Checkbox"
+import Keystroke from "../Lib/Keystroke"
+
+import { remote } from 'electron'
+
+
+const FIELD_LABEL = "File path"
+const INPUT_PLACEHOLDER = "e.g. /Documents/timeline.log"
+
+const ESCAPE_HINT = "Close"
+const ESCAPE_KEYSTROKE = "ESC"
+const ENTER_KEYSTROKE = `${Keystroke.modifierName} + Enter`
+const ENTER_HINT = "Save File"
+const BUTTON_TEXT = "Choose Path"
+const DIALOG_TITLE = "Export Timeline"
+
+const Styles = {
+  error: {
+    color: Colors.tag,
+    padding: "1em 2em 0em"
+  },
+  success: {
+    color: Colors.string,
+    padding: "1em 2em 0em"
+  },
+  link: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    padding: 20,
+    cursor: 'pointer',
+    backgroundColor: Colors.chrome,
+    borderRadius: 8,
+    width: 110,
+    border: `1px solid ${Colors.chromeLine}`,
+    color: Colors.foregroundLight
+  },
+  path: {
+    marginLeft: 20,
+    color: Colors.foregroundLight,
+    alignSelf: "center",
+    fontSize: "9pt"
+  },
+  body: {
+    ...AppStyles.Modal.body,
+    flexDirection: "row",
+    padding: "1em 2em 1em"
+  },
+  keyStrokes: {
+    ...AppStyles.Modal.keystrokes,
+    marginTop: 40
+  }
+}
+
+@inject("session")
+@observer
+class ExportTimelineDialog extends React.Component {
+  constructor(props) {
+    super()
+    const { session } = props
+    const { ui } = session
+    ui.writingFileError = ""
+    ui.writingFileSuccess = false
+    this.path = ""
+  }
+
+  render() {
+    const { session } = this.props
+    const { ui } = session
+
+    return (
+      <Modal
+        isOpen={ui.showTimelineExportDialog}
+        onRequestClose={ui.closeExportTimelineDialog}
+        onAfterOpen={this.onAfterOpenModal}
+        style={{
+          content: AppStyles.Modal.content,
+          overlay: AppStyles.Modal.overlay,
+        }}
+      >
+        <div style={AppStyles.Modal.container}>
+          <div style={AppStyles.Modal.header}>
+
+            <h1 style={AppStyles.Modal.title}>{DIALOG_TITLE}</h1>
+            <div>
+              <p>The filters you applied to the timeline will be applied for the export too.</p>
+            </div>
+          </div>
+          <div style={Styles.body}>
+            <button style={Styles.link} onClick={() => {
+              const path = remote.dialog.showOpenDialog({properties: ['openDirectory']})
+              ui.setExportFilePath(path[0]);
+            }}>
+              {BUTTON_TEXT}
+            </button>
+            <p style={Styles.path}>{ui.exportFilePath}</p>
+          </div>
+          { ui.writingFileError !== "" ?
+            <p style={Styles.error}>The file could not be exported. {ui.writingFileError}</p>
+            : null
+          }
+          { ui.writingFileSuccess ?
+            <p style={Styles.success}>The file was exported.</p>
+              : null
+          }
+          <div style={Styles.keyStrokes}>
+            <div style={AppStyles.Modal.hotkey}>
+              <span style={AppStyles.Modal.keystroke}>{ESCAPE_KEYSTROKE}</span> {ESCAPE_HINT}
+            </div>
+            <div style={AppStyles.Modal.hotkey}  onClick={() => session.exportCommands(this.path) }>
+              <span style={AppStyles.Modal.keystroke}>{ENTER_KEYSTROKE}</span> {ENTER_HINT}
+            </div>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
+
+export default ExportTimelineDialog

App/Foundation/App.js

@@ -2,6 +2,7 @@ import { Provider, observer } from "mobx-react"
 import React, { Component } from "react"
 import { ipcRenderer } from "electron"
 import FilterTimelineDialog from "../Dialogs/FilterTimelineDialog"
+import ExportTimelineDialog from "../Dialogs/ExportTimelineDialog"
 import RenameStateDialog from "../Dialogs/RenameStateDialog"
 import SendCustomDialog from "../Dialogs/SendCustomDialog"
 import StateDispatchDialog from "../Dialogs/StateDispatchDialog"
@@ -88,6 +89,7 @@ export default class App extends Component {
           <StateWatchDialog />
           <RenameStateDialog />
           <FilterTimelineDialog />
+          <ExportTimelineDialog />
           <SendCustomDialog />
         </div>
       </Provider>

App/Lib/commands.js

@@ -1,5 +1,5 @@
-import { action, observable } from "mobx"
-import { pipe, reject } from "ramda"
+import { action, observable, computed } from "mobx"
+import { pipe, reject, contains, propEq } from "ramda"
 import { dotPath } from "ramdasauce"
 
 export const MAX_COMMANDS = 500
@@ -19,8 +19,9 @@ class Commands {
   /**
    * Constructor with an optional overrideable max list size.
    */
-  constructor() {
+  constructor(session) {
     setTimeout(() => this.flush(), FLUSH_TIME)
+    this.session = session
   }
 
   /**
@@ -55,6 +56,29 @@ class Commands {
     this.all.clear()
     this.all.push(...newCommands)
   }
+
+  @computed
+  get commands() {
+    const isSubscription = propEq("type", "state.values.change")
+    const isSubscriptionCommandWithEmptyChanges = command => {
+      return isSubscription(command) && dotPath("payload.changes.length", command) === 0
+    }
+
+    const result = pipe(
+      () => this.all,
+      reject(this.rejectCommandsFromOtherConnections),
+      reject(isSubscriptionCommandWithEmptyChanges),
+      reject(command => contains(command.type, this.session.commandsHiddenInTimeline)),
+      reject(this.session.rejectCommandWhenSearching)
+    )(this);
+    return result;
+  }
+
+  rejectCommandsFromOtherConnections = command => {
+    if (!this.session.selectedConnection) return false
+
+    return this.session.selectedConnection.clientId !== command.clientId
+  }
 }
 
 export default Commands

App/Stores/SessionStore.js

@@ -249,7 +249,7 @@ class Session {
     this.server.on("disconnect", this.handleConnectionsChange)
 
     this.stateBackupStore = new StateBackupStore(this.server)
-    this.ui = new UiStore(this.server, this.commandsManager, this.stateBackupStore, this.getSelectedConnection)
+    this.ui = new UiStore(this, this.server, this.commandsManager, this.stateBackupStore, this.getSelectedConnection)
 
     // hide or show the watch panel depending if we have watches
     reaction(

App/Stores/UiStore.js

@@ -4,6 +4,7 @@ import { trim } from "ramda"
 import { isNilOrEmpty } from "ramdasauce"
 import Keystroke from "../Lib/Keystroke"
 import Mousetrap from "../Lib/Mousetrap.min.js"
+import fs from "fs";
 
 /**
  * Handles UI state.
@@ -19,6 +20,7 @@ class UI {
   @observable showHelpDialog = false
   @observable showStateWatchDialog = false
   @observable showFilterTimelineDialog = false
+  @observable showTimelineExportDialog = false
   @observable statusBarExpanded = false
   @observable watchToAdd
   @observable actionToDispatch
@@ -30,13 +32,17 @@ class UI {
   @observable isSidebarVisible = true
   @observable isStorybookShown = false
   @observable searchPhrase = ""
+  @observable exportFilePath = ""
+  @observable writingFileError = ""
+  @observable writingFileSuccess = false
   zoomLevel = 0
 
   // additional properties that some commands may want... a way to communicate
   // from the command toolbar to the command
   commandProperties = {}
 
-  constructor(server, commandsManager, stateBackupStore, getSelectedConnection) {
+  constructor(session, server, commandsManager, stateBackupStore, getSelectedConnection) {
+    this.session = session
     this.server = server
     this.commandsManager = commandsManager
     this.stateBackupStore = stateBackupStore
@@ -47,6 +53,7 @@ class UI {
     Mousetrap.bind(`${Keystroke.mousetrap}+backspace`, this.reset)
     Mousetrap.bind(`${Keystroke.mousetrap}+k`, this.openStateFindDialog)
     Mousetrap.bind(`${Keystroke.mousetrap}+shift+f`, this.openFilterTimelineDialog)
+    Mousetrap.bind(`${Keystroke.mousetrap}+shift+e`, this.openExportTimelineDialog)
     Mousetrap.bind(`${Keystroke.mousetrap}+d`, this.openStateDispatchDialog)
     Mousetrap.bind(`${Keystroke.mousetrap}+s`, () => this.stateBackupStore.sendBackup())
     Mousetrap.bind(`tab`, this.toggleKeysValues)
@@ -188,6 +195,7 @@ class UI {
       this.showStateFindDialog ||
       this.showStateDispatchDialog ||
       this.showFilterTimelineDialog ||
+      this.showTimelineExportDialog ||
       this.stateBackupStore.renameDialogVisible ||
       this.showSendCustomDialog
     )
@@ -219,6 +227,9 @@ class UI {
     if (this.showStateDispatchDialog) {
       this.submitStateDispatch()
     }
+    if (this.showTimelineExportDialog)  {
+      this.exportCommands();
+    }
   }
 
   @action
@@ -323,6 +334,24 @@ class UI {
     this.showFilterTimelineDialog = false
   }
 
+  @action
+  openExportTimelineDialog = () => {
+    this.showTimelineExportDialog = true
+  }
+
+  @action
+  closeExportTimelineDialog = () => {
+    this.showTimelineExportDialog = false
+    this.exportFilePath = ""
+    this.writingFileError = ""
+    this.writingFileSuccess = false
+  }
+
+  @action
+  setExportFilePath = (path) => {
+    this.exportFilePath = path;
+  }
+
   @action
   openSendCustomDialog = () => {
     this.showSendCustomDialog = true
@@ -469,6 +498,31 @@ class UI {
     this.server.send("storybook", this.isStorybookShown, clientId)
   }
 
+  exportCommands = () => {
+
+    if  (!this.exportFilePath) {
+      this.writingFileError = "Please choose a path."
+      return
+    }
+    const formatCommand = (command) => ({
+        clientId: command.clientId,
+        payload: {
+          name: command.payload.name,
+          action: command.payload.action
+        },
+        type: command.type
+    })
+    const commands = JSON.stringify(this.session.commands.map(formatCommand))
+    fs.writeFile(this.exportFilePath + "/reactotron_timeline.txt", commands, (err) => {
+      if (err) {
+        console.log(err)
+        this.writingFileError = err.message
+      } else {
+        this.writingFileSuccess = true;
+        this.writingFileError = ""
+      }
+    })
+  }
 }
 
 export default UI

App/Timeline/TimelineHeader.js

@@ -3,6 +3,7 @@ import { inject, observer } from "mobx-react"
 import React, { Component } from "react"
 import IconClear from "react-icons/lib/md/delete-sweep"
 import IconFilter from "react-icons/lib/md/filter-list"
+import IconDownload from "react-icons/lib/md/file-download"
 import IconSearch from "react-icons/lib/md/search"
 import IconReverseOrder from "react-icons/lib/md/swap-vert"
 import AppStyles from "../Theme/AppStyles"
@@ -138,6 +139,11 @@ class TimelineHeader extends Component {
               style={Styles.reverseOrderIcon}
               onClick={ui.toggleTimelineOrder}
             />
+            <IconDownload
+              size={Styles.iconSize}
+              style={Styles.toolbarFilter}
+              onClick={ui.openExportTimelineDialog}
+            />
             <IconClear size={Styles.iconSize} style={Styles.toolbarClear} onClick={ui.reset} />
           </div>
         </div>