v0.2.0

Author: jfrux

app/actions/file_list_actions.js

@@ -40,6 +40,17 @@ export function UPDATE_CONTENT(filePath,content) {
     }
   };
 }
+export function SAVE_ACTIVE_FILE() {
+  return {
+    type: types.SAVE_ACTIVE_FILE
+  };
+}
+
+export function SAVE_ACTIVE_FILE_SUCCESS() {
+  return {
+    type: types.SAVE_ACTIVE_FILE_SUCCESS
+  };
+}
 export function CLOSE_FILE(file) {
   return {
     type: types.CLOSE_FILE,

app/components/EonDetail/Console/SegmentsTab.js

@@ -57,7 +57,7 @@ function mapDispatchToProps(dispatch) {
 }
 
 const mapStateToProps = ({ eonDetail }) => {
-  const { routes,activeRouteId, routesSorted, routesLoading } = eonDetail;
+  const { routes, activeRouteId, routesSorted, routesLoading } = eonDetail;
   // let routeKeys;
 
   if (!routesSorted || !routesSorted.length) return { loading: true };

app/components/EonDetail/Console/index.js

@@ -13,24 +13,32 @@ import EndpointsTab from './EndpointsTab';
 import * as EonActions from '../../../actions/eon_detail_actions';
 const TABS = {
   'events': {
+    'id': 'events',
     'label': 'Events',
-    'component': EventsTab
+    'component': EventsTab,
+    'requireAuth': false
   },
   'params': {
+    'id': 'params',
     'label': 'Params',
-    'component': DataParamsTab
+    'component': DataParamsTab,
+    'requireAuth': true
   },
   'profile': {
+    'id': 'profile',
     'label': 'Profile',
-    'component': ProfileTab
+    'component': ProfileTab,
+    'requireAuth': true
   },
   // 'routes': {
   //   'label': 'Routes',
   //   'component': RoutesTab
   // },
   'segments': {
+    'id': 'segments',
     'label': 'Drives',
-    'component': SegmentsTab
+    'component': SegmentsTab,
+    'requireAuth': true
   }
   // 'endpoints': {
   //   'label': 'Endpoints',
@@ -50,20 +58,22 @@ class Console extends React.Component {
   }
 
   setTab(tab) {
-    if (this.state.activeTab !== tab) {
+    let disabled = (tab.requireAuth && !this.props.hasAuth);
+    if (this.state.activeTab !== tab.id && !disabled) {
       this.setState({
-        activeTab: tab
+        activeTab: tab.id
       });
     }
   }
 
   render() {
+    const { hasAuth } = this.props;
     const tabButtons = TAB_KEYS.map((tabKey) => {
       const tab = TABS[tabKey];
-
+      const disabled = tab.requireAuth && !hasAuth;
       return (
         <NavItem className="console-tab" key={`tab-item-${tabKey}`}>
-          <NavLink className={classnames({ active: this.state.activeTab === tabKey })} onClick={() => { this.setTab(tabKey); }}>
+          <NavLink className={classnames({ active: this.state.activeTab === tabKey })} onClick={() => { this.setTab(tab); }} disabled={disabled} >
             {tab.label}
           </NavLink>
         </NavItem>
@@ -98,8 +108,18 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(EonActions, dispatch);
 }
 
-const mapStateToProps = (state) => {
-  return {};
+const mapStateToProps = ({eonDetail}) => {
+  const { auth } = eonDetail;
+  let hasAuth;
+  if (auth) {
+    if (auth.commaUser) {
+      hasAuth = true;
+    }
+  } else {
+    hasAuth = false;
+  }
+  console.log("hasAuth:",hasAuth);
+  return { hasAuth };
 };
 
 export default connect(

app/components/EonDetail/Editor/index.js

@@ -18,8 +18,42 @@ class Editor extends React.PureComponent {
   editorDidMount = (editor, monaco) => {
     // console.log('editorDidMount', editor);
     editor.focus();
+    editor.addAction({
+      // An unique identifier of the contributed action.
+      id: 'save-op-file',
+    
+      // A label of the action that will be presented to the user.
+      label: 'Save File',
+    
+      // An optional array of keybindings for the action.
+      keybindings: [
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,
+        // chord
+        monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S)
+      ],
+    
+      // A precondition for this action.
+      precondition: null,
+    
+      // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
+      keybindingContext: null,
+    
+      contextMenuGroupId: 'navigation',
+    
+      contextMenuOrder: 1.5,
+    
+      // Method that will be executed when the action is triggered.
+      // @param editor The editor instance is passed in as a convinience
+      run: (ed) => {
+        this.onSave();
+        return null;
+      }
+    });
+    
+  }
+  onSave = () => {
+    this.props.SAVE_ACTIVE_FILE();
   }
-  
   onChange = (evt, newValue)  => {
     // console.log('onChange', newValue, e);
     // console.log(this);
@@ -29,7 +63,8 @@ class Editor extends React.PureComponent {
     const { fileType, name, content, hidden, allowOpen,  isDirty, _original } = this.props;
     const options = {
       selectOnLineNumbers: true,
-      renderSideBySide: true
+      renderSideBySide: true,
+      
     };
     // console.log("rendering...");
     return (<div className="editor">

app/components/EonDetail/index.js

@@ -42,7 +42,7 @@ class EonDetail extends React.PureComponent {
     this.props.TOGGLE_DATA();
   }
   render() {
-    const { activeTab, connecting, activeCommand, network, eon, serviceIds } = this.props;
+    const { activeTab,activeFile, connecting, activeCommand, network, eon, serviceIds } = this.props;
     const commandKeys = Object.keys(commands);
 
     if (connecting) return (<LoadingOverlay message={"Connecting to EON..."} />);
@@ -80,7 +80,8 @@ class EonDetail extends React.PureComponent {
     if (activeCommand) {
       CommandPane = commands[activeCommand];
     }
-   
+    const editorHeight = activeFile ? "50%" : 0;
+    const editorMinSize = activeFile ? 100 : 0;
     // const ELEMENT_MAP = {
     //   files: <FileList directory="/data/openpilot" />,
     //   states: StateTabs,
@@ -111,7 +112,7 @@ class EonDetail extends React.PureComponent {
             </SplitPane>
           </div>
 
-          <SplitPane split="horizontal" size={"50%"} minSize={100}>
+          <SplitPane split="horizontal" size={editorHeight} minSize={editorMinSize}>
             <div className="editor-container">
               <EditorTabs />
               <Editor />

app/constants/file_list_action_types.js

@@ -7,4 +7,6 @@ export const FETCH_DIRECTORY_SUCCESS = 'fileList/FETCH_DIRECTORY_SUCCESS';
 export const FETCH_FILE = 'fileList/FETCH_FILE';
 export const FETCH_FILE_SUCCESS = 'fileList/FETCH_FILE_SUCCESS';
 export const UPDATE_CONTENT = 'fileList/UPDATE_CONTENT';
+export const SAVE_ACTIVE_FILE = 'fileList/SAVE_ACTIVE_FILE';
+export const SAVE_ACTIVE_FILE_SUCCESS = 'fileList/SAVE_ACTIVE_FILE_SUCCESS';
 export const CLOSE_FILE = 'fileList/CLOSE_FILE';

app/containers/EonDetailPage.js

@@ -7,7 +7,7 @@ import {getHasOpenedFiles} from '../selectors/get_opened_files_keys';
 import getSortedServiceIds from '../selectors/get_sorted_service_ids';
 // import { debugOnlyWastedRenderDetector } from "wastedrendersdetector";
 
-function mapStateToProps({eonDetail,eonList,networkConnection}) {
+function mapStateToProps({eonDetail,eonList,networkConnection,fileList}) {
   // let hasOpenedFiles = getHasOpenedFiles(fileList.openedFiles);
   let serviceIds = getSortedServiceIds();
   return {
@@ -21,7 +21,8 @@ function mapStateToProps({eonDetail,eonList,networkConnection}) {
     connecting: eonDetail.connecting,
     connected: eonDetail.connected,
     serviceIds,
-    services
+    services,
+    activeFile: fileList.activeFile
   };
 }
 

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "workbench",
   "productName": "Workbench",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "The Openpilot Workbench is to help people fix problems with EON, Openpilot, etc.",
   "main": "./main.prod.js",
   "author": {

app/reducers/file_list_reducer.js

@@ -50,11 +50,34 @@ export default function fileListReducer(state = initialState, action) {
           }
         }
       };
+    case types.SAVE_ACTIVE_FILE:
+      return {
+        ...state,
+        openedFiles: {
+          [state.activeFile]: {
+            ...state.openedFiles[state.activeFile],
+            isSaving: true
+          }
+        }
+      };
+    case types.SAVE_ACTIVE_FILE_SUCCESS:
+      return {
+        ...state,
+        openedFiles: {
+          [state.activeFile]: {
+            ...state.openedFiles[state.activeFile],
+            isSaving: false,
+            _original: state.openedFiles[state.activeFile].content,
+            isDirty: false
+          }
+        }
+      };
     case types.CLOSE_FILE:
       delete state.openedFiles[action.payload.filePath];
 
       return {
         ...state,
+        activeFile: null,
         openedFiles: {
           ...state.openedFiles
         }

app/sagas/eon_sagas.js

@@ -119,6 +119,20 @@ function* connect() {
   console.log(`[sftp] Connected to EON (${eon.ip})`);
 }
 
+function* saveActiveFile() {
+  const { fileList } = yield select();
+  const { activeFile, openedFiles } = fileList;
+  const currentFile = openedFiles[activeFile];
+  const contentBuffer = Buffer.from(currentFile.content);
+  yield connect();
+  console.log(`[sftp] Saving ${activeFile}...`);
+  const savedFile = yield app.sftpClient.put(contentBuffer, activeFile);
+  yield put(fileListActions.SAVE_ACTIVE_FILE_SUCCESS());
+  return {
+    savedFile
+  };
+}
+
 function* retrieveFile(remoteFile, mergeWith={}) {
   yield connect();
   console.log(`[sftp] Retrieving file ${remoteFile}...`);
@@ -167,17 +181,11 @@ function* refreshFileList() {
   yield put(eonDetailActions.REFRESH_FILE_LIST_SUCCESS(baseItems));
 }
 
-function* fetchEndpoint(endpoint) {
-  const { eonDetail } = yield select();
-  const { dataParams } = eonDetail;
-  console.log("Fetching endpoint...", endpoint);
-  console.log("dataParams",dataParams);
-}
-
 function* apiRequest(endpointUrl) {
   const { eonDetail } = yield select();
   const { auth } = eonDetail;
   const { commaUser } = auth;
+  
   const { accessToken } = commaUser;
   if (!accessToken) return ;
   // console.log(accessToken);
@@ -199,7 +207,7 @@ function buildEndpointUrl(key, tokens = {}) {
   let endpoint = ENDPOINTS[key];
 
   let tokenKeys = [];
-  console.log(endpoint);
+  // console.log(endpoint);
   if (tokens) {
     tokenKeys = Object.keys(tokens);
   }
@@ -208,7 +216,7 @@ function buildEndpointUrl(key, tokens = {}) {
     tokenKeys.forEach((tokenKey) => {
       const tokenValue = tokens[tokenKey];
       // const length = endpoint.length
-      console.log(`replacing ${tokenKey} with ${tokenValue}`)
+      // console.log(`replacing ${tokenKey} with ${tokenValue}`)
       endpoint = endpoint.replace(/\{\{([a-zA-Z0-9\.]+)\}\}/,tokenValue);
     });
   }
@@ -676,6 +684,7 @@ export function* eonSagas() {
     takeLatest(eonListTypes.SELECT_EON, handleSelectEon),
     // takeEvery(types.CONNECT_FAILED, addEonListError),
     takeEvery(types.BOOTSTRAP_EON, handleBootstrapEON),
+    takeEvery(fileListActionTypes.SAVE_ACTIVE_FILE, saveActiveFile),
     takeEvery(fileListActionTypes.FETCH_DIRECTORY, handleFetchDirectory),
     takeEvery(fileListActionTypes.FETCH_FILE, handleFetchFile),
     // takeEvery(fileListActionTypes.FETCH_DIRECTORY_SUCCESS, handleFetchDirectorySuccess),