Merge branch '17573-edit-storage-classes' into main. Closes #17573

[arvados-workbench2.git] / src / views-components / details-panel / file-details.tsx

diff --git a/src/views-components/details-panel/file-details.tsx b/src/views-components/details-panel/file-details.tsx
index 2801ce9b156bf07ece9a7c8602ad27e0bc866068..7c11eb8baa263a80b3890428c42995bb9390e5e8 100644 (file)
--- a/src/views-components/details-panel/file-details.tsx
+++ b/src/views-components/details-panel/file-details.tsx
@@ -2,18 +2,34 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { ProjectIcon } from '~/components/icon/icon';
+import 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';
+import isImage from 'is-image';
 
 export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
 
-    getIcon(className?: string){
-        return <ProjectIcon className={className} />;
+    getIcon(className?: string) {
+        const Icon = getIcon(this.item.type);
+        return <Icon className={className} />;
     }
 
     getDetails() {
-        return <div>File details</div>;
+        const { item } = this;
+        return item.type === CollectionFileType.FILE
+            ? <>
+                <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
+                {
+                    isImage(item.url) && <>
+                        <DetailsAttribute label='Preview' />
+                        <FileThumbnail file={item} />
+                    </>
+                }
+            </>
+            : <div />;
     }
 }