add ui

ui/components/scratchpad/ScratchpadRecordsContainer.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Tabs, { TabPane } from 'rc-tabs';
+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 ScratchpadRecordsTable from './ScratchpadRecordsTableContainer';
+
+const mapDispatchToProps = dispatch => ({
+  loadSubmissions() {
+    dispatch({
+      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)
+export default class ScratchpadRecordsContainer extends React.PureComponent {
+  componentDidMount() {
+    this.props.loadSubmissions();
+  }
+
+  render() {
+    return (
+      <Panel
+        title={(
+          <span>
+            <Icon name="flag" />
+            {' '}
+            {i18n('Records')}
+          </span>
+        )}
+      >
+        <Tabs
+          className="scratchpad__panel-tab flex-col flex-fill"
+          activeKey="all"
+          animation="slide-horizontal"
+          renderTabBar={() => (
+            <ScrollableInkTabBar
+              extraContent={(
+                <span>
+                  <PanelButton
+                    data-tooltip={i18n('Refresh Records')}
+                    data-tooltip-pos="top right"
+                    onClick={() => this.props.handleClickRefresh()}
+                  >
+                    {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>
+    );
+  }
+}