[sqllab] add column sort feature to TableElement (#1467)

apache · Oct 28, 2016 · c492261 · c492261
1 parent 7307dda
commit c492261
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
@@ -18,6 +18,12 @@ const defaultProps = {
 };
 
 class TableElement extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sortColumns: false,
+    };
+  }
 
   popSelectStar() {
     const qe = {
@@ -55,6 +61,9 @@ class TableElement extends React.PureComponent {
     };
     this.props.actions.runQuery(query);
   }
+  toggleSortColumns() {
+    this.setState({ sortColumns: !this.state.sortColumns });
+  }
 
   render() {
     const table = this.props.table;
@@ -102,18 +111,22 @@ class TableElement extends React.PureComponent {
           <small className="m-l-5"><i className="fa fa-minus" /></small>
         </a>
       );
+      const cols = table.columns.slice();
+      if (this.state.sortColumns) {
+        cols.sort((a, b) => a.name.toUpperCase() > b.name.toUpperCase());
+      }
       metadata = (
         <div>
           {header}
           <div className="table-columns">
-            {table.columns.map((col) => {
+            {cols.map((col) => {
               let name = col.name;
               if (col.indexed) {
                 name = <strong>{col.name}</strong>;
               }
               return (
                 <div className="clearfix table-column" key={shortid.generate()}>
-                  <div className="pull-left m-l-10">
+                  <div className="pull-left m-l-10 col-name">
                     {name}
                   </div>
                   <div className="pull-right text-muted">
@@ -166,6 +179,17 @@ class TableElement extends React.PureComponent {
           <div className="pull-right">
             <ButtonGroup className="ws-el-controls pull-right">
               {keyLink}
+              <Link
+                className={
+                  `fa fa-sort-${!this.state.sortColumns ? 'alpha' : 'numeric'}-asc ` +
+                  'pull-left sort-cols m-l-2'}
+                onClick={this.toggleSortColumns.bind(this)}
+                tooltip={
+                  !this.state.sortColumns ?
+                  'Sort columns alphabetically' :
+                  'Original table column order'}
+                href="#"
+              />
               <Link
                 className="fa fa-search-plus pull-left m-l-2"
                 onClick={this.dataPreviewModal.bind(this)}

diff --git a/caravel/assets/spec/javascripts/sqllab/TableElement_spec.jsx b/caravel/assets/spec/javascripts/sqllab/TableElement_spec.jsx
@@ -23,7 +23,7 @@ describe('TableElement', () => {
   });
   it('has 3 Link elements', () => {
     const wrapper = shallow(<TableElement {...mockedProps} />);
-    expect(wrapper.find(Link)).to.have.length(2);
+    expect(wrapper.find(Link)).to.have.length(3);
   });
   it('has 14 columns', () => {
     const wrapper = shallow(<TableElement {...mockedProps} />);
@@ -32,4 +32,12 @@ describe('TableElement', () => {
   it('mounts', () => {
     mount(<TableElement {...mockedProps} />);
   });
+  it('sorts columns', () => {
+    const wrapper = mount(<TableElement {...mockedProps} />);
+    expect(wrapper.state().sortColumns).to.equal(false);
+    expect(wrapper.find('.col-name').first().text()).to.equal('id');
+    wrapper.find('.sort-cols').simulate('click');
+    expect(wrapper.state().sortColumns).to.equal(true);
+    expect(wrapper.find('.col-name').first().text()).to.equal('last_login');
+  });
 });