feat(features): Show preview upon clicking the item name (#1620)

manishPh · web-flow · commit 74e46b2383ea · 2019-09-17T11:30:03.000-07:00
diff --git a/src/common/types/metadataQueries.js b/src/common/types/metadataQueries.js
@@ -46,6 +46,7 @@ type FlattenedMetadataQueryResponseEntry = {
     id: string,
     metadata: FlattenedMetadataQueryResponseEntryMetadata,
     name?: string,
+    permissions?: BoxItemPermission,
     size?: number,
 };
 
diff --git a/src/features/metadata-based-view/MetadataBasedItemList.js b/src/features/metadata-based-view/MetadataBasedItemList.js
@@ -5,19 +5,27 @@ import classNames from 'classnames';
 import { injectIntl, type IntlShape } from 'react-intl';
 import MultiGrid from 'react-virtualized/dist/es/MultiGrid/MultiGrid';
 import AutoSizer from 'react-virtualized/dist/es/AutoSizer';
+import getProp from 'lodash/get';
 import FileIcon from '../../icons/file-icon';
 import messages from '../../elements/common/messages';
+import PlainButton from '../../components/plain-button';
 import { getFileExtension } from '../../utils/file';
 import './MetadataBasedItemList.scss';
 
-import type { FlattenedMetadataQueryResponseCollection } from '../../common/types/metadataQueries';
+import type {
+    FlattenedMetadataQueryResponseCollection,
+    FlattenedMetadataQueryResponseEntry,
+} from '../../common/types/metadataQueries';
 
-const FILE_ICON_SIZE = 32;
+const FILE_ICON_COLUMN_INDEX = 0;
 const FILE_ICON_COLUMN_WIDTH = 54;
-const FILENAME_COLUMN_WIDTH = 350;
-const MIN_METADATA_COLUMN_WIDTH = 250;
+const FILE_ICON_SIZE = 32;
+const FILE_NAME_COLUMN_INDEX = 1;
+const FILE_NAME_COLUMN_WIDTH = 350;
 const FIXED_COLUMNS_NUMBER = 2; // 2 Sticky columns - 1. file-icon, 2. file-name for each row
 const FIXED_ROW_NUMBER = 1; // Header row
+const HEADER_ROW_INDEX = 0;
+const MIN_METADATA_COLUMN_WIDTH = 250;
 
 type State = {
     hoveredRowIndex: number,
@@ -27,6 +35,7 @@ type Props = {
     currentCollection: FlattenedMetadataQueryResponseCollection,
     intl: IntlShape,
     metadataColumnsToShow: Array<string>,
+    onItemClick: FlattenedMetadataQueryResponseEntry => void,
 } & InjectIntlProvidedProps;
 
 type CellRendererArgs = {
@@ -53,35 +62,55 @@ class MetadataBasedItemList extends React.Component<Props, State> {
         const { metadataColumnsToShow }: Props = this.props;
 
         return ({ index }: { index: number }): number => {
-            if (index === 0) {
+            if (index === FILE_ICON_COLUMN_INDEX) {
                 return FILE_ICON_COLUMN_WIDTH;
             }
 
-            if (index === 1) {
-                return FILENAME_COLUMN_WIDTH;
+            if (index === FILE_NAME_COLUMN_INDEX) {
+                return FILE_NAME_COLUMN_WIDTH;
             }
 
-            const availableWidth = width - FILENAME_COLUMN_WIDTH - FILE_ICON_COLUMN_WIDTH; // total width minus width of sticky columns
+            const availableWidth = width - FILE_NAME_COLUMN_WIDTH - FILE_ICON_COLUMN_WIDTH; // total width minus width of sticky columns
             // Maintain min column width, else occupy the rest of the space equally
             return Math.max(availableWidth / metadataColumnsToShow.length, MIN_METADATA_COLUMN_WIDTH);
         };
     }
 
-    getGridCellData(columnIndex: number, rowIndex: number): Element<typeof FileIcon> | string {
-        const { currentCollection, metadataColumnsToShow }: Props = this.props;
-        const { items } = currentCollection;
-        const { name = '', metadata = {} } = items[rowIndex - 1];
+    handleOnClick(item: FlattenedMetadataQueryResponseEntry): void {
+        const { onItemClick }: Props = this.props;
+        /*
+            - @TODO: Remove permissions object once its part of API response.
+            - In Content Explorer element, if can_preview permission is false, there is no action taken onClick(item).
+            - Until the response has permissions, add "can_preview: true" so that users can click to launch the Preview modal. If users don't have access, they will see the error when Preview loads.
+        */
+        const permissions = { can_preview: true };
+        const itemWithPreviewPermission = { ...item, permissions };
+
+        onItemClick(itemWithPreviewPermission);
+    }
+
+    getGridCellData(columnIndex: number, rowIndex: number): Element<typeof FileIcon | typeof PlainButton> | string {
+        const {
+            currentCollection: { items },
+            metadataColumnsToShow,
+        }: Props = this.props;
+        const item = items[rowIndex - 1];
+        const { name } = item;
         let cellData;
 
         switch (columnIndex) {
-            case 0:
+            case FILE_ICON_COLUMN_INDEX:
                 cellData = <FileIcon dimension={FILE_ICON_SIZE} extension={getFileExtension(name)} />;
                 break;
-            case 1:
-                cellData = name;
+            case FILE_NAME_COLUMN_INDEX:
+                cellData = (
+                    <PlainButton type="button" onClick={() => this.handleOnClick(item)}>
+                        {name}
+                    </PlainButton>
+                );
                 break;
             default: {
-                const { data = {} } = metadata;
+                const data = getProp(item, 'metadata.data', {});
                 const mdFieldName = metadataColumnsToShow[columnIndex - FIXED_COLUMNS_NUMBER];
                 cellData = data[mdFieldName];
             }
@@ -95,11 +124,11 @@ class MetadataBasedItemList extends React.Component<Props, State> {
 
         let headerData;
 
-        if (columnIndex === 1) {
+        if (columnIndex === FILE_NAME_COLUMN_INDEX) {
             headerData = intl.formatMessage(messages.name); // "Name" column header
         }
 
-        if (columnIndex > 1) {
+        if (columnIndex > FILE_NAME_COLUMN_INDEX) {
             headerData = metadataColumnsToShow[columnIndex - FIXED_COLUMNS_NUMBER]; // column header
         }
 
@@ -112,11 +141,17 @@ class MetadataBasedItemList extends React.Component<Props, State> {
 
     cellRenderer = ({ columnIndex, rowIndex, key, style }: CellRendererArgs): Element<'div'> => {
         const { hoveredRowIndex } = this.state;
-        const data = rowIndex === 0 ? this.getGridHeaderData(columnIndex) : this.getGridCellData(columnIndex, rowIndex);
+        const isHeaderRow = rowIndex === HEADER_ROW_INDEX;
+        const isFileIconCell = !isHeaderRow && columnIndex === FILE_ICON_COLUMN_INDEX;
+        const isFileNameCell = !isHeaderRow && columnIndex === FILE_NAME_COLUMN_INDEX;
+        const isGridRowHovered = !isHeaderRow && rowIndex === hoveredRowIndex;
+
+        const data = isHeaderRow ? this.getGridHeaderData(columnIndex) : this.getGridCellData(columnIndex, rowIndex);
+
         const classes = classNames('bdl-MetadataBasedItemList-cell', {
-            'bdl-MetadataBasedItemList-cell--fileIcon': rowIndex > 0 && columnIndex === 0, // file icon cell
-            'bdl-MetadataBasedItemList-cell--filename': columnIndex === 1, // file name cell
-            'bdl-MetadataBasedItemList-cell--hover': rowIndex > 0 && rowIndex === hoveredRowIndex,
+            'bdl-MetadataBasedItemList-cell--fileIcon': isFileIconCell,
+            'bdl-MetadataBasedItemList-cell--filename': isFileNameCell,
+            'bdl-MetadataBasedItemList-cell--hover': isGridRowHovered,
         });
 
         return (
diff --git a/src/features/metadata-based-view/MetadataBasedItemList.scss b/src/features/metadata-based-view/MetadataBasedItemList.scss
@@ -21,6 +21,10 @@
 
 .bdl-MetadataBasedItemList-cell--filename {
     color: $bdl-gray;
+
+    & .btn-plain {
+        outline: none;
+    }
 }
 
 .bdl-MetadataBasedItemList-cell--hover {
diff --git a/src/features/metadata-based-view/__tests__/MetadataBasedItemList-test.js b/src/features/metadata-based-view/__tests__/MetadataBasedItemList-test.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import FileIcon from '../../../icons/file-icon';
+import PlainButton from '../../../components/plain-button';
 
 import { MetadataBasedItemListComponent as MetadataBasedItemList } from '../MetadataBasedItemList';
 
@@ -9,6 +10,8 @@ describe('features/metadata-based-view/MetadataBasedItemList', () => {
     let wrapper;
     let instance;
     const intl = { formatMessage: jest.fn().mockReturnValue('Name') };
+    const onItemClick = jest.fn();
+    const onClick = expect.any(Function);
     const currentCollection = {
         items: [
             {
@@ -27,13 +30,25 @@ describe('features/metadata-based-view/MetadataBasedItemList', () => {
         nextMarker: 'abc',
     };
     const metadataColumnsToShow = ['type', 'amount'];
+
+    const pdfNameButton = (
+        <PlainButton onClick={onClick} type="button">
+            {currentCollection.items[0].name}
+        </PlainButton>
+    );
+    const mp4NameButton = (
+        <PlainButton onClick={onClick} type="button">
+            {currentCollection.items[1].name}
+        </PlainButton>
+    );
     const pdfIcon = <FileIcon dimension={32} extension="pdf" />;
     const mp4Icon = <FileIcon dimension={32} extension="mp4" />;
 
     const defaultProps = {
         currentCollection,
         metadataColumnsToShow,
         intl,
+        onItemClick,
     };
 
     const getWrapper = (props = defaultProps) => mount(<MetadataBasedItemList {...props} />);
@@ -60,11 +75,11 @@ describe('features/metadata-based-view/MetadataBasedItemList', () => {
         test.each`
             columnIndex | rowIndex | cellData
             ${0}        | ${1}     | ${pdfIcon}
-            ${1}        | ${1}     | ${'name1.pdf'}
+            ${1}        | ${1}     | ${pdfNameButton}
             ${2}        | ${1}     | ${'bill'}
             ${3}        | ${1}     | ${500}
             ${0}        | ${2}     | ${mp4Icon}
-            ${1}        | ${2}     | ${'name2.mp4'}
+            ${1}        | ${2}     | ${mp4NameButton}
             ${2}        | ${2}     | ${'receipt'}
             ${3}        | ${2}     | ${200}
         `('cellData for row: $rowIndex, column: $columnIndex', ({ columnIndex, rowIndex, cellData }) => {
@@ -86,6 +101,16 @@ describe('features/metadata-based-view/MetadataBasedItemList', () => {
         });
     });
 
+    describe('handleOnClick(item)', () => {
+        test('should invoke the onItemClick after adding can_preview permissions', () => {
+            const permissions = { can_preview: true };
+            const item = currentCollection.items[0];
+            const itemWithPreviewPermission = { ...item, ...{ permissions } };
+            instance.handleOnClick(item);
+            expect(onItemClick).toHaveBeenCalledWith(itemWithPreviewPermission);
+        });
+    });
+
     describe('handleMouseEnter()', () => {
         test('should handle mouse over event by setting state accordingly', () => {
             instance.handleMouseEnter(5);
diff --git a/src/features/metadata-based-view/__tests__/__snapshots__/MetadataBasedItemList-test.js.snap b/src/features/metadata-based-view/__tests__/__snapshots__/MetadataBasedItemList-test.js.snap
@@ -38,6 +38,7 @@ exports[`features/metadata-based-view/MetadataBasedItemList render() should rend
       "amount",
     ]
   }
+  onItemClick={[MockFunction]}
 >
   <Component>
     AutoSizer

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,10 @@`
`21`	`21`
`22`	`22`	`.bdl-MetadataBasedItemList-cell--filename {`
`23`	`23`	`color: $bdl-gray;`
	`24`	`+`
	`25`	`+ & .btn-plain {`
	`26`	`+ outline: none;`
	`27`	`+ }`
`24`	`28`	`}`
`25`	`29`
`26`	`30`	`.bdl-MetadataBasedItemList-cell--hover {`
Original file line number	Diff line number	Diff line change
@@ -38,6 +38,7 @@ exports[`features/metadata-based-view/MetadataBasedItemList render() should rend
`38`	`38`	`"amount",`
`39`	`39`	`]`
`40`	`40`	`}`
	`41`	`+ onItemClick={[MockFunction]}`
`41`	`42`	`>`
`42`	`43`	`<Component>`
`43`	`44`	`AutoSizer`