Merge pull request #136 from carlosms/issue-131

Issue 131

frontend/package.json

@@ -14,6 +14,7 @@
     "react-helmet": "^5.2.0",
     "react-scripts": "1.1.4",
     "react-split-pane": "^0.1.77",
+    "react-switch": "^3.0.4",
     "react-table": "^6.8.2",
     "uast-viewer": "^0.0.4"
   },

frontend/src/App.js

@@ -9,7 +9,6 @@ import initButtonStyles from './utils/bootstrap';
 import Sidebar from './components/Sidebar';
 import QueryBox from './components/QueryBox';
 import TabbedResults from './components/TabbedResults';
-import CodeViewer from './components/CodeViewer';
 import api from './api';
 import { STATUS_LOADING, STATUS_ERROR, STATUS_SUCCESS } from './state/query';
 import './App.less';
@@ -66,7 +65,6 @@ class App extends Component {
     this.handleSetActiveResult = this.handleSetActiveResult.bind(this);
     this.handleReload = this.handleReload.bind(this);
 
-    this.showCode = this.showCode.bind(this);
     this.showUAST = this.showUAST.bind(this);
 
     this.uniqueKey = 0;
@@ -235,14 +233,6 @@ FROM ( SELECT MONTH(committer_when) as month,
     this.setState({ showModal: false, modalTitle: null, modalContent: null });
   }
 
-  showCode(code) {
-    this.setState({
-      showModal: true,
-      modalTitle: 'Source code',
-      modalContent: <CodeViewer code={code} languages={this.state.languages} />
-    });
-  }
-
   showUAST(uast) {
     this.setState({
       showModal: true,
@@ -392,8 +382,8 @@ FROM ( SELECT MONTH(committer_when) as month,
                 handleResetHistory={this.handleResetHistory}
                 handleSetActiveResult={this.handleSetActiveResult}
                 handleReload={this.handleReload}
-                showCode={this.showCode}
                 showUAST={this.showUAST}
+                languages={this.state.languages}
               />
             </SplitPane>
           </Row>

frontend/src/components/CodeViewer.js

@@ -1,18 +1,13 @@
 import React, { Component } from 'react';
+import { Modal } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import SplitPane from 'react-split-pane';
 import UASTViewer, { Editor, withUASTEditor } from 'uast-viewer';
+import Switch from 'react-switch';
 import api from '../api';
 import './CodeViewer.less';
 
-function EditorPane({
-  languages,
-  language,
-  showUast,
-  handleLangChange,
-  handleShowUastChange,
-  editorProps
-}) {
+function EditorPane({ languages, language, handleLangChange, editorProps }) {
   return (
     <div className="editor-pane">
       Language:{' '}
@@ -24,14 +19,6 @@ function EditorPane({
           </option>
         ))}
       </select>
-      <label>
-        <input
-          type="checkbox"
-          checked={showUast}
-          onChange={handleShowUastChange}
-          disabled={!language}
-        />UAST
-      </label>
       <Editor {...editorProps} theme="default" />
     </div>
   );
@@ -43,30 +30,24 @@ EditorPane.propTypes = {
       id: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired
     })
-  ),
+  ).isRequired,
   language: PropTypes.string,
-  showUast: PropTypes.bool,
   handleLangChange: PropTypes.func.isRequired,
-  handleShowUastChange: PropTypes.func.isRequired,
   editorProps: PropTypes.object
 };
 
 function EditorUASTSpitPane({
   languages,
   editorProps,
   uastViewerProps,
-  showUast,
-  handleLangChange,
-  handleShowUastChange
+  handleLangChange
 }) {
   return (
     <SplitPane split="vertical" defaultSize={250} minSize={175}>
       <EditorPane
         languages={languages}
         language={editorProps.languageMode}
-        showUast={showUast}
         handleLangChange={handleLangChange}
-        handleShowUastChange={handleShowUastChange}
         editorProps={editorProps}
       />
       {uastViewerProps.uast ? <UASTViewer {...uastViewerProps} /> : <div />}
@@ -78,9 +59,7 @@ EditorUASTSpitPane.propTypes = {
   languages: EditorPane.propTypes.languages,
   editorProps: PropTypes.object,
   uastViewerProps: PropTypes.object,
-  showUast: PropTypes.bool,
-  handleLangChange: PropTypes.func.isRequired,
-  handleShowUastChange: PropTypes.func.isRequired
+  handleLangChange: PropTypes.func.isRequired
 };
 
 const EditorWithUAST = withUASTEditor(EditorUASTSpitPane);
@@ -156,51 +135,74 @@ class CodeViewer extends Component {
 
   render() {
     const { loading, language, showUast, uast, error } = this.state;
+    const { showModal, onHide, code, languages } = this.props;
 
     if (loading) {
       return 'loading';
     }
 
-    if (showUast) {
-      return (
-        <div className="code-viewer">
-          <EditorWithUAST
-            languages={this.props.languages}
-            code={this.props.code}
-            languageMode={language}
-            showUast={showUast}
-            handleLangChange={this.handleLangChange}
-            handleShowUastChange={this.handleShowUastChange}
-            uast={uast}
-          />
-          {error ? (
-            <div className="error">
-              <button onClick={this.removeError} className="close">
-                close
-              </button>
-              {error}
-            </div>
-          ) : null}
-        </div>
-      );
-    }
-
     return (
-      <EditorPane
-        languages={this.props.languages}
-        language={language}
-        showUast={showUast}
-        handleLangChange={this.handleLangChange}
-        handleShowUastChange={this.handleShowUastChange}
-        editorProps={{ code: this.props.code, languageMode: language }}
-      />
+      <Modal show={showModal} onHide={onHide} bsSize="large">
+        <Modal.Header closeButton>
+          <Modal.Title>
+            CODE
+            <Switch
+              checked={showUast}
+              onChange={this.handleShowUastChange}
+              disabled={!language}
+              checkedIcon={<span className="switch-text checked">UAST</span>}
+              uncheckedIcon={
+                <span className="switch-text unchecked">UAST</span>
+              }
+              width={100}
+              handleDiameter={20}
+              className={`code-toggler ${showUast ? 'checked' : 'unchecked'}`}
+              aria-label="Toggle UAST view"
+            />
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {showUast ? (
+            <div className="code-viewer">
+              <EditorWithUAST
+                languages={languages}
+                code={code}
+                languageMode={language}
+                showUast={showUast}
+                handleLangChange={this.handleLangChange}
+                handleShowUastChange={this.handleShowUastChange}
+                uast={uast}
+              />
+              {error ? (
+                <div className="error">
+                  <button onClick={this.removeError} className="close">
+                    close
+                  </button>
+                  {error}
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <EditorPane
+              languages={languages}
+              language={language}
+              showUast={showUast}
+              handleLangChange={this.handleLangChange}
+              handleShowUastChange={this.handleShowUastChange}
+              editorProps={{ code, languageMode: language }}
+            />
+          )}
+        </Modal.Body>
+      </Modal>
     );
   }
 }
 
 CodeViewer.propTypes = {
-  code: PropTypes.string.isRequired,
-  languages: EditorPane.propTypes.languages
+  code: PropTypes.string,
+  languages: EditorPane.propTypes.languages,
+  showModal: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired
 };
 
 export default CodeViewer;

frontend/src/components/CodeViewer.less

@@ -1,3 +1,5 @@
+@import '../variables.less';
+
 .code-viewer {
     position: relative;
     height: 100%;
@@ -21,3 +23,34 @@
 .editor-pane {
     height: 100%;
 }
+
+.code-toggler {
+    margin-left: 40px;
+
+    .switch-text {
+        font-size: 18px;
+        font-weight: @btn-font-weight;
+    }
+
+    .switch-text.checked {
+        color: @btn-gbpl-tertiary-color;
+        padding-left: 28px;
+    }
+
+    .switch-text.unchecked {
+        color: #979797;
+        margin-left: -29px;
+    }
+
+    &.checked {
+        .react-switch-bg {
+            background: @tertiary !important;
+        }
+    }
+
+    &.unchecked {
+        .react-switch-bg {
+            background: #e1e1e1 !important;
+        }
+    }
+}

frontend/src/components/TabbedResults.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import DivTabs from './DivTabs';
 import ResultsTable from './ResultsTable';
 import HistoryTable from './HistoryTable';
+import CodeViewer from './CodeViewer';
 import './TabbedResults.less';
 import PencilIcon from '../icons/edit-query-tab-name.svg';
 import CloseIcon from '../icons/close-query-tab.svg';
@@ -104,10 +105,14 @@ class TabbedResults extends Component {
     super(props);
     this.state = {
       activeKey: 0,
-      nTabs: 0
+      nTabs: 0,
+      codeModalShow: false,
+      codeModalContent: null
     };
 
     this.handleSelect = this.handleSelect.bind(this);
+    this.showCode = this.showCode.bind(this);
+    this.handleModalClose = this.handleModalClose.bind(this);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -137,8 +142,23 @@ class TabbedResults extends Component {
     this.props.handleSetActiveResult(activeKey);
   }
 
+  showCode(code) {
+    this.setState({
+      codeModalShow: true,
+      codeModalContent: code
+    });
+  }
+
+  handleModalClose() {
+    this.setState({
+      codeModalShow: false,
+      codeModalContent: null
+    });
+  }
+
   render() {
-    const { showCode, showUAST, history } = this.props;
+    const { codeModalShow, codeModalContent } = this.state;
+    const { showUAST, history, languages } = this.props;
 
     return (
       <div className="results-padding full-height full-width">
@@ -181,7 +201,7 @@ class TabbedResults extends Component {
                 content = (
                   <ResultsTable
                     response={query.response}
-                    showCode={showCode}
+                    showCode={this.showCode}
                     showUAST={showUAST}
                   />
                 );
@@ -266,6 +286,12 @@ class TabbedResults extends Component {
             </Tab>
           )}
         </DivTabs>
+        <CodeViewer
+          showModal={codeModalShow}
+          code={codeModalContent}
+          onHide={this.handleModalClose}
+          languages={languages}
+        />
       </div>
     );
   }
@@ -284,8 +310,8 @@ TabbedResults.propTypes = {
   handleResetHistory: PropTypes.func.isRequired,
   handleSetActiveResult: PropTypes.func.isRequired,
   handleReload: PropTypes.func.isRequired,
-  showCode: PropTypes.func.isRequired,
-  showUAST: PropTypes.func.isRequired
+  showUAST: PropTypes.func.isRequired,
+  languages: CodeViewer.propTypes.languages
 };
 
 export default TabbedResults;

frontend/yarn.lock

@@ -5944,6 +5944,12 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
+react-switch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-3.0.4.tgz#52958b2736b4d21b4f0050997955c5365019ca7b"
+  dependencies:
+    prop-types "^15.6.1"
+
 react-table@^6.8.2:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.8.2.tgz#3a5aefabc85953300d16786fa307c30610db9adc"