修复pretest界面元件溢出的问题

ui/components/scratchpad/ScratchpadRecordsContainer.js

@@ -1,44 +1,22 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import Tabs, { TabPane } from 'rc-tabs';
+import classNames from 'classnames';
-import TabContent from 'rc-tabs/lib/TabContent';
-import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
-
 import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
 import Icon from 'vj/components/react/IconComponent';
 import Panel from './PanelComponent';
-import PanelButton from './PanelButtonComponent';
+import ScratchpadRecordsRow from './ScratchpadRecordsRowContainer';
-import ScratchpadRecordsTable from './ScratchpadRecordsTableContainer';
 
-const mapDispatchToProps = (dispatch) => ({
+const mapStateToProps = (state) => ({
-  loadSubmissions() {
+  rows: state.records.rows,
-    dispatch({
+  isLoading: state.ui.records.isLoading,
-      type: 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS',
-      payload: request.get(Context.getSubmissionsUrl),
-    });
-  },
-  handleClickClose() {
-    dispatch({
-      type: 'SCRATCHPAD_UI_SET_VISIBILITY',
-      payload: {
-        uiElement: 'records',
-        visibility: false,
-      },
-    });
-  },
-  handleClickRefresh() {
-    this.loadSubmissions();
-  },
 });
 
-@connect(null, mapDispatchToProps)
+@connect(mapStateToProps)
 export default class ScratchpadRecordsContainer extends React.PureComponent {
-  componentDidMount() {
-    this.props.loadSubmissions();
-  }
-
   render() {
+    const cn = classNames('data-table is--full-row scratchpad__records__table', {
+      loading: this.props.isLoading,
+    });
     return (
       <Panel
         title={(
@@ -49,36 +27,19 @@ export default class ScratchpadRecordsContainer extends React.PureComponent {
           </span>
         )}
       >
-        <Tabs
+        <table className={cn}>
-          className="scratchpad__panel-tab flex-col flex-fill"
+          <colgroup>
-          activeKey="all"
+            <col className="col--detail" />
-          animation="slide-horizontal"
+            <col className="col--memory" />
-          renderTabBar={() => (
+            <col className="col--time" />
-            <ScrollableInkTabBar
+            <col className="col--at" />
-              extraContent={(
+          </colgroup>
-                <span>
+          <tbody>
-                  <PanelButton
+            {this.props.rows.map((rowId) => (
-                    data-tooltip={i18n('Refresh Records')}
+              <ScratchpadRecordsRow key={rowId} id={rowId} />
-                    data-tooltip-pos="top right"
+            ))}
-                    onClick={() => this.props.handleClickRefresh()}
+          </tbody>
-                  >
+        </table>
-                    {i18n('Refresh')}
-                  </PanelButton>
-                  <PanelButton
-                    onClick={() => this.props.handleClickClose()}
-                  >
-                    <Icon name="close" />
-                  </PanelButton>
-                </span>
-              )}
-            />
-          )}
-          renderTabContent={() => <TabContent />}
-        >
-          <TabPane tab={<span>{i18n('All')}</span>} key="all">
-            <ScratchpadRecordsTable />
-          </TabPane>
-        </Tabs>
       </Panel>
     );
   }

ui/components/scratchpad/ScratchpadRecordsTableContainer.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { connect } from 'react-redux';
-import ScratchpadRecordsRow from './ScratchpadRecordsRowContainer';
-
-const mapStateToProps = (state) => ({
-  rows: state.records.rows,
-  isLoading: state.ui.records.isLoading,
-});
-
-@connect(mapStateToProps)
-export default class ScratchpadRecordsTableContainer extends React.PureComponent {
-  render() {
-    const cn = classNames('data-table is--full-row scratchpad__records__table', {
-      loading: this.props.isLoading,
-    });
-    return (
-      <table className={cn}>
-        <colgroup>
-          <col className="col--detail" />
-          <col className="col--memory" />
-          <col className="col--time" />
-          <col className="col--at" />
-        </colgroup>
-        <tbody>
-          {this.props.rows.map((rowId) => (
-            <ScratchpadRecordsRow key={rowId} id={rowId} />
-          ))}
-        </tbody>
-      </table>
-    );
-  }
-}

ui/components/scratchpad/ScratchpadToolbarContainer.js

@@ -59,6 +59,15 @@ const mapDispatchToProps = (dispatch) => ({
       payload: req,
     });
   },
+  loadSubmissions() {
+    dispatch({
+      type: 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS',
+      payload: request.get(Context.getSubmissionsUrl),
+    });
+  },
+  handleClickRefresh() {
+    this.loadSubmissions();
+  },
 });
 
 @connect(mapStateToProps, mapDispatchToProps)
@@ -67,6 +76,10 @@ export default class ScratchpadToolbarContainer extends React.PureComponent {
     store: PropTypes.object,
   };
 
+  componentDidMount() {
+    this.props.loadSubmissions();
+  }
+
   render() {
     return (
       <Toolbar>
@@ -96,6 +109,18 @@ export default class ScratchpadToolbarContainer extends React.PureComponent {
           {' '}
           (F10)
         </ToolbarButton>
+        <ToolbarButton
+          data-tooltip={i18n('Refresh Records')}
+          className="scratchpad__toolbar__refresh"
+          data-global-hotkey="alt+f"
+          onClick={() => this.props.handleClickRefresh()}
+        >
+          <Icon name="refresh" />
+          {' '}
+          {i18n('Refresh')}
+          {' '}
+          (Alt+F)
+        </ToolbarButton>
         <ToolbarItem>
           <select
             className="select"