Make column headers sort properly in files

This also converts the column header spec from
coffeescript to javascript (JSX)

fixes CNVS-29308

Test Plan:
  - Go to files
  - Click the various column headers across the top
    of the files area
  - The files should sort as expected

Change-Id: Ib8bd0040c06b45a095bce3960c6ff1cc4d39a99b
Reviewed-on: https://gerrit.instructure.com/79358
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Deepeeca Soundarrajan <dsoundarrajan@instructure.com>
Product-Review: Clay Diffrient <cdiffrient@instructure.com>

app/coffeescripts/models/Folder.coffee

@@ -117,9 +117,9 @@ define [
       if sortProp is 'name' and not (model instanceof Folder)
         model.get('display_name')
       else if sortProp is 'user'
-        model.get('user')?.display_name
+        model.get('user')?.display_name || ''
       else if sortProp is 'usage_rights'
-        model.get('usage_rights')?.license_name
+        model.get('usage_rights')?.license_name || ''
       else
         model.get(sortProp)
 

app/coffeescripts/react_files/components/ColumnHeaders.coffee

@@ -39,12 +39,9 @@ define [
     columns: columns
 
     propTypes:
-      to: React.PropTypes.string.isRequired
       query: React.PropTypes.object.isRequired
-      params: React.PropTypes.object.isRequired
       toggleAllSelected: React.PropTypes.func.isRequired
       areAllItemsSelected: React.PropTypes.func.isRequired
-      splat: React.PropTypes.string
 
     getInitialState: ->
       return {

app/jsx/files/ColumnHeaders.jsx

@@ -1,10 +1,11 @@
 define([
+  'jquery',
   'underscore',
   'i18n!react_files',
   'react',
   'classnames',
   'compiled/react_files/components/ColumnHeaders',
-  ], function(_, I18n, React, classnames, ColumnHeaders) {
+  ], function($, _, I18n, React, classnames, ColumnHeaders) {
 
     ColumnHeaders.renderColumns = function (sort, order) {
       return this.columns.map((column) => {
@@ -21,9 +22,12 @@ define([
           'visible-desktop': column.displayNameShort,
           'ef-usage-rights-col-offset': (column.property === 'usage_rights')
         });
+
+        const href = `${this.props.pathname}?${$.param(this.queryParamsFor(this.props.query, column.property))}`;
         var linkProps = _.defaults({
               query: this.queryParamsFor(this.props.query, column.property),
-              className: 'ef-plain-link'
+              className: 'ef-plain-link',
+              href
             }, this.props);
         var linkText;
         if (column.property === 'select') {

app/jsx/files/ShowFolder.jsx

@@ -104,13 +104,11 @@ define([
         <CurrentUploads />
         <ColumnHeaders
           ref='columnHeaders'
-          to={folderOrRootFolder}
           query={this.props.query}
-          params={this.props.params}
+          pathname={this.props.pathname}
           toggleAllSelected={this.props.toggleAllSelected}
           areAllItemsSelected={this.props.areAllItemsSelected}
           usageRightsRequiredForContext={this.props.usageRightsRequiredForContext}
-          splat={this.props.params.splat}
         />
         { this.renderFolderChildOrEmptyContainer() }
         <LoadingIndicator isLoading={foldersNextPageOrFilesNextPage} />

spec/javascripts/jsx/files/components/ColumnHeaderSpec.jsx

@@ -0,0 +1,40 @@
+define([
+  'react',
+  'jsx/files/ColumnHeaders'
+], (React, ColumnHeaders) => {
+
+  const { TestUtils } = React.addons;
+
+  module('ColumnHeaders');
+
+  test('`queryParamsFor` returns correct values', () => {
+    const SORT_UPDATED_AT_DESC = {sort: 'updated_at', order: 'desc'};
+    const queryParamsFor = ColumnHeaders.prototype.queryParamsFor;
+
+    deepEqual(queryParamsFor({}, 'updated_at'), SORT_UPDATED_AT_DESC, 'was not sorted by anything');
+    deepEqual(queryParamsFor({sort: 'created_at', order: 'desc'}, 'updated_at'), SORT_UPDATED_AT_DESC, 'was sorted by other column');
+    deepEqual(queryParamsFor({sort: 'updated_at', order: 'asc' }, 'updated_at'), SORT_UPDATED_AT_DESC, 'was sorted by this column ascending');
+    deepEqual(queryParamsFor({sort: 'updated_at', order: 'desc'}, 'updated_at'), {sort: 'updated_at', order: 'asc'});
+  });
+
+  test('headers have the proper href', () => {
+    const props = {
+      pathname: '/some/path/to/files',
+      query: {
+        sort: 'something',
+        order: 'asc'
+      },
+      areAllItemsSelected () {},
+      toggleAllSelected () {}
+    };
+
+    const component = TestUtils.renderIntoDocument(<ColumnHeaders {...props} />);
+    const nameLink = TestUtils.scryRenderedDOMComponentsWithTag(component, 'a')[0];
+    equal(nameLink.props.href, `${props.pathname}?sort=name&order=desc`, 'the href is correct');
+  });
+
+});
+
+
+
+