content: 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>
      );
    }
  }
  