X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/bd90d772a159901336b119b0ad82109e3ec1d9fc..fb2234b444c735c11b38a291749f2e4703da7aec:/src/components/file-tree/file-thumbnail.tsx

diff --git a/src/components/file-tree/file-thumbnail.tsx b/src/components/file-tree/file-thumbnail.tsx
index cb071adc..9c651e76 100644
--- a/src/components/file-tree/file-thumbnail.tsx
+++ b/src/components/file-tree/file-thumbnail.tsx
@@ -2,11 +2,14 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
+import React from "react";
 import isImage from 'is-image';
 import { withStyles, WithStyles } from '@material-ui/core';
-import { FileTreeData } from '~/components/file-tree/file-tree-data';
-import { CollectionFileType } from '~/models/collection-file';
+import { FileTreeData } from 'components/file-tree/file-tree-data';
+import { CollectionFileType } from 'models/collection-file';
+import { getInlineFileUrl, sanitizeToken } from "views-components/context-menu/actions/helpers";
+import { connect } from "react-redux";
+import { RootState } from "store/store";
 
 export interface FileThumbnailProps {
     file: FileTreeData;
@@ -20,18 +23,27 @@ export const FileThumbnail =
 
 type ImageFileThumbnailCssRules = 'thumbnail';
 
-const imageFileThumbnailStyle = withStyles<ImageFileThumbnailCssRules>({
+const imageFileThumbnailStyle = withStyles<ImageFileThumbnailCssRules>(theme => ({
     thumbnail: {
         maxWidth: 250,
+        margin: `${theme.spacing.unit}px 0`,
     }
+}));
+
+interface ImageFileThumbnailProps {
+    keepWebServiceUrl: string;
+    keepWebInlineServiceUrl: string;
+}
+
+const mapStateToProps = ({ auth }: RootState): ImageFileThumbnailProps => ({
+    keepWebServiceUrl: auth.config.keepWebServiceUrl,
+    keepWebInlineServiceUrl: auth.config.keepWebInlineServiceUrl,
 });
 
-const ImageFileThumbnail = imageFileThumbnailStyle(
-    ({ classes, file }: WithStyles<ImageFileThumbnailCssRules> & FileThumbnailProps) =>
-        file.type === CollectionFileType.DIRECTORY
-            ? null
-            : <img
-                className={classes.thumbnail}
-                alt={file.name}
-                src={file.url} />
-);
+const ImageFileThumbnail = connect(mapStateToProps)(imageFileThumbnailStyle(
+    ({ classes, file, keepWebServiceUrl, keepWebInlineServiceUrl }: WithStyles<ImageFileThumbnailCssRules> & FileThumbnailProps & ImageFileThumbnailProps) =>
+        <img
+            className={classes.thumbnail}
+            alt={file.name}
+            src={sanitizeToken(getInlineFileUrl(file.url, keepWebServiceUrl, keepWebInlineServiceUrl))} />
+));