feat(metadata-views): Update metadata columns prop type in metadata view (#1666)

Author: manishPh

src/common/types/metadataQueries.js

@@ -31,7 +31,12 @@ type MetadataQuery = {
     query_params: Object,
 };
 
-type MetadataColumnsToShow = Array<string>;
+type MetadataColumnConfig = {
+    canEdit?: boolean,
+    name: string,
+};
+
+type MetadataColumnsToShow = Array<MetadataColumnConfig | string>;
 
 type FlattenedMetadataQueryResponseEntryMetadata = {
     data?: StringAnyMap,
@@ -66,6 +71,7 @@ export type {
     FlattenedMetadataQueryResponseCollection,
     FlattenedMetadataQueryResponseEntry,
     FlattenedMetadataQueryResponseEntryMetadata,
+    MetadataColumnConfig,
     MetadataColumnsToShow,
     MetadataQuery,
     MetadataQueryOrderByClause,

src/features/metadata-based-view/MetadataBasedItemList.js

@@ -15,6 +15,8 @@ import './MetadataBasedItemList.scss';
 import type {
     FlattenedMetadataQueryResponseCollection,
     FlattenedMetadataQueryResponseEntry,
+    MetadataColumnConfig,
+    MetadataColumnsToShow,
 } from '../../common/types/metadataQueries';
 
 const FILE_ICON_COLUMN_INDEX = 0;
@@ -34,7 +36,7 @@ type State = {
 type Props = {
     currentCollection: FlattenedMetadataQueryResponseCollection,
     intl: IntlShape,
-    metadataColumnsToShow: Array<string>,
+    metadataColumnsToShow: MetadataColumnsToShow,
     onItemClick: FlattenedMetadataQueryResponseEntry => void,
 } & InjectIntlProvidedProps;
 
@@ -58,6 +60,10 @@ class MetadataBasedItemList extends React.Component<Props, State> {
         };
     }
 
+    getMetadataColumnName(column: MetadataColumnConfig | string): string {
+        return typeof column === 'string' ? column : getProp(column, 'name');
+    }
+
     getColumnWidth(width: number): ColumnWidthCallback {
         const { metadataColumnsToShow }: Props = this.props;
 
@@ -111,7 +117,9 @@ class MetadataBasedItemList extends React.Component<Props, State> {
                 break;
             default: {
                 const data = getProp(item, 'metadata.data', {});
-                const mdFieldName = metadataColumnsToShow[columnIndex - FIXED_COLUMNS_NUMBER];
+                const mdFieldName = this.getMetadataColumnName(
+                    metadataColumnsToShow[columnIndex - FIXED_COLUMNS_NUMBER],
+                );
                 cellData = data[mdFieldName];
             }
         }
@@ -129,7 +137,7 @@ class MetadataBasedItemList extends React.Component<Props, State> {
         }
 
         if (columnIndex > FILE_NAME_COLUMN_INDEX) {
-            headerData = metadataColumnsToShow[columnIndex - FIXED_COLUMNS_NUMBER]; // column header
+            headerData = this.getMetadataColumnName(metadataColumnsToShow[columnIndex - FIXED_COLUMNS_NUMBER]); // column header
         }
 
         return headerData;

src/features/metadata-based-view/__tests__/MetadataBasedItemList-test.js

@@ -29,7 +29,7 @@ describe('features/metadata-based-view/MetadataBasedItemList', () => {
         ],
         nextMarker: 'abc',
     };
-    const metadataColumnsToShow = ['type', 'amount'];
+    const metadataColumnsToShow = ['type', { name: 'amount', canEdit: true }];
 
     const pdfNameButton = (
         <PlainButton onClick={onClick} type="button">

src/features/metadata-based-view/__tests__/__snapshots__/MetadataBasedItemList-test.js.snap

@@ -35,7 +35,10 @@ exports[`features/metadata-based-view/MetadataBasedItemList render() should rend
   metadataColumnsToShow={
     Array [
       "type",
-      "amount",
+      Object {
+        "canEdit": true,
+        "name": "amount",
+      },
     ]
   }
   onItemClick={[MockFunction]}