feat(content-explorer): Add ability to sort contents by size column (#1239)

Author: murny

flow-typed/box-ui-elements.js

@@ -46,6 +46,7 @@ import {
     SIZE_LARGE,
     FIELD_DATE,
     FIELD_NAME,
+    FIELD_SIZE,
     FIELD_RELEVANCE,
     DEFAULT_VIEW_RECENTS,
     DEFAULT_VIEW_FILES,
@@ -120,7 +121,7 @@ type View =
     | typeof VIEW_UPLOAD_EMPTY
     | typeof VIEW_UPLOAD_IN_PROGRESS
     | typeof VIEW_UPLOAD_SUCCESS;
-type SortBy = typeof FIELD_DATE | typeof FIELD_NAME | typeof FIELD_RELEVANCE;
+type SortBy = typeof FIELD_DATE | typeof FIELD_NAME | typeof FIELD_RELEVANCE | typeof FIELD_SIZE;
 type SortDirection = typeof SORT_ASC | typeof SORT_DESC;
 type ItemType = typeof TYPE_FILE | typeof TYPE_FOLDER | typeof TYPE_WEBLINK;
 type UploadStatus = typeof STATUS_PENDING | typeof STATUS_IN_PROGRESS | typeof STATUS_COMPLETE | typeof STATUS_ERROR;

src/elements/common/sub-header/Sort.js

@@ -12,7 +12,7 @@ import MenuItem from '../../../components/menu/MenuItem';
 import IconCheck from '../../../icons/general/IconCheck';
 import SortButton from './SortButton';
 import messages from '../messages';
-import { FIELD_NAME, FIELD_DATE, SORT_ASC, SORT_DESC } from '../../../constants';
+import { FIELD_NAME, FIELD_DATE, FIELD_SIZE, SORT_ASC, SORT_DESC } from '../../../constants';
 import './Sort.scss';
 
 type Props = {
@@ -26,6 +26,8 @@ const SORT_ITEMS: Array<Array<SortBy>> = [
     [FIELD_NAME, SORT_DESC],
     [FIELD_DATE, SORT_ASC],
     [FIELD_DATE, SORT_DESC],
+    [FIELD_SIZE, SORT_ASC],
+    [FIELD_SIZE, SORT_DESC],
 ];
 
 const Sort = ({ sortBy, sortDirection, onSortChange }: Props) => (

src/elements/common/sub-header/__tests__/Sort-test.js

@@ -14,14 +14,14 @@ describe('elements/SubHeader/Sort', () => {
         expect(wrapper.find(SortButton)).toHaveLength(1);
         expect(wrapper.find(DropdownMenu)).toHaveLength(1);
         expect(wrapper.find(Menu)).toHaveLength(1);
-        expect(wrapper.find(MenuItem)).toHaveLength(4);
+        expect(wrapper.find(MenuItem)).toHaveLength(6);
     });
 
-    test('should render a select with 4 options', () => {
+    test('should render a select with 6 options', () => {
         const wrapper = shallow(<Sort onSortChange={jest.fn()} sortBy="name" sortDirection={SORT_ASC} />);
         const options = wrapper.find(MenuItem);
 
-        expect(options).toHaveLength(4);
+        expect(options).toHaveLength(6);
         expect(
             options
                 .at(0)
@@ -73,6 +73,32 @@ describe('elements/SubHeader/Sort', () => {
                 .childAt(1)
                 .prop('id'),
         ).toBe(messages.dateDESC.id);
+
+        expect(
+            options
+                .at(4)
+                .childAt(0)
+                .text(),
+        ).toBe('');
+        expect(
+            options
+                .at(4)
+                .childAt(1)
+                .prop('id'),
+        ).toBe(messages.sizeASC.id);
+
+        expect(
+            options
+                .at(5)
+                .childAt(0)
+                .text(),
+        ).toBe('');
+        expect(
+            options
+                .at(5)
+                .childAt(1)
+                .prop('id'),
+        ).toBe(messages.sizeDESC.id);
     });
 
     test('should pass correct parameters when clicked', () => {
@@ -91,13 +117,19 @@ describe('elements/SubHeader/Sort', () => {
 
         options.at(3).simulate('click');
         expect(sort).toHaveBeenCalledWith('date', SORT_DESC);
+
+        options.at(4).simulate('click');
+        expect(sort).toHaveBeenCalledWith('size', SORT_ASC);
+
+        options.at(5).simulate('click');
+        expect(sort).toHaveBeenCalledWith('size', SORT_DESC);
     });
 
     test('should render a select with correct option selected', () => {
         const wrapper = shallow(<Sort onSortChange={jest.fn()} sortBy="date" sortDirection={SORT_DESC} />);
         const options = wrapper.find(MenuItem);
 
-        expect(options).toHaveLength(4);
+        expect(options).toHaveLength(6);
         expect(
             options
                 .at(3)

src/elements/content-explorer/ItemList.js

@@ -194,7 +194,7 @@ const ItemList = ({
                             {isSmall || isMedium ? null : (
                                 <Column
                                     className="bce-item-coloumn"
-                                    disableSort
+                                    disableSort={!hasSort}
                                     label={intl.formatMessage(messages.size)}
                                     dataKey={FIELD_SIZE}
                                     cellRenderer={sizeAccessCell}