From dbd2dcaeb2c4f3f3df83c3d127e99ce4705a4723 Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Fri, 28 Dec 2018 12:37:09 +0100
Subject: [PATCH] Add size info and preview to FileDetails

Feature #14684

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 .../details-panel/file-details.tsx                 | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/views-components/details-panel/file-details.tsx b/src/views-components/details-panel/file-details.tsx
index 86c63eb35b..7d43bd4b3b 100644
--- a/src/views-components/details-panel/file-details.tsx
+++ b/src/views-components/details-panel/file-details.tsx
@@ -4,8 +4,11 @@
 
 import * as React from 'react';
 import { DetailsData } from "./details-data";
-import { CollectionFile, CollectionDirectory } from '~/models/collection-file';
+import { CollectionFile, CollectionDirectory, CollectionFileType } from '~/models/collection-file';
 import { getIcon } from '~/components/file-tree/file-tree-item';
+import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { formatFileSize } from '~/common/formatters';
+import { FileThumbnail } from '~/components/file-tree/file-thumbnail';
 
 export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
 
@@ -15,6 +18,13 @@ export class FileDetails extends DetailsData<CollectionFile | CollectionDirector
     }
 
     getDetails() {
-        return <div>File details</div>;
+        const { item } = this;
+        return item.type === CollectionFileType.FILE
+            ? <>
+                <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
+                <DetailsAttribute label='Preview' />
+                <FileThumbnail file={item}/>
+            </>
+            : <div />;
     }
 }
-- 
2.30.2