diff --git a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
index 16dd363323c8a912aa48d6b11a7c8030642219df..a1b0a0af0ec9104b4e86dfd117144a3d00809b4b 100644
--- a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
@@ -1,11 +1,9 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
-import FolderIcon from '@material-ui/icons/FolderOpen'
-import FileIcon from '@material-ui/icons/InsertDriveFileOutlined'
import Grid from '@material-ui/core/Grid'
-import autoBind from 'auto-bind'
import Card from "@material-ui/core/Card";
import { CardContent, CardMedia } from "@material-ui/core";
+import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx'
const styles = (theme) => ({
cell: {
@@ -29,39 +27,16 @@ const styles = (theme) => ({
class GridViewItem extends React.Component {
- constructor(props, context) {
- super(props, context)
- autoBind(this)
-
- const { configuration } = this.props
-
- this.extensionToIconType = new Map(
- configuration.flatMap(
- (configObject) => configObject.extensions.map(extension => [extension, configObject.icon])
- )
- )
- }
-
- // TODO: move out this method in favour of using a utility method from DataBrowser for example
- getIcon(file) {
- const { classes } = this.props
-
- if (file.folder) {
- return <FolderIcon className={classes.icon} />
- } else {
- const iconType = this.extensionToIconType.get(file.name.substring(file.name.lastIndexOf(".") + 1))
- return iconType ? React.createElement(iconType, { className: classes.icon }) : <FileIcon className={classes.icon} />
- }
- }
-
render() {
- const { classes, file } = this.props
+ const { classes, file, configuration } = this.props
return (
<Grid item component={Card} variant="outlined" className={classes.cell}>
- <CardMedia>{this.getIcon(file)}</CardMedia>
+ <CardMedia>
+ <ItemIcon classes={classes} file={file} configuration={configuration} />
+ </CardMedia>
<CardContent>
- {file.name}
+ {file.name}
</CardContent>
</Grid>
)
diff --git a/ui-admin/src/js/components/database/data-browser/ItemIcon.jsx b/ui-admin/src/js/components/database/data-browser/ItemIcon.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..709cf11d07e69097213b68120ddd7dbf9f291031
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/ItemIcon.jsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright ETH 2023 Zürich, Scientific IT Services
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React from "react";
+import FolderIcon from "@material-ui/icons/FolderOpen.js";
+import FileIcon from "@material-ui/icons/InsertDriveFileOutlined.js";
+import autoBind from "auto-bind";
+
+class ItemIcon extends React.Component {
+
+ constructor(props, context) {
+ super(props, context)
+ autoBind(this)
+
+ const { configuration } = this.props
+
+ this.extensionToIconType = new Map(
+ configuration.flatMap(
+ (configObject) => configObject.extensions.map(extension => [extension, configObject.icon])
+ )
+ )
+ }
+
+ render() {
+ const { classes, file } = this.props
+
+ if (file.folder) {
+ return <FolderIcon className={classes.icon} />
+ } else {
+ const iconType = this.extensionToIconType.get(file.name.substring(file.name.lastIndexOf(".") + 1))
+ return iconType ? React.createElement(iconType, { className: classes.icon }) : <FileIcon className={classes.icon} />
+ }
+ }
+
+}
+
+export default ItemIcon
\ No newline at end of file
diff --git a/ui-admin/src/js/components/database/data-browser/ListView.jsx b/ui-admin/src/js/components/database/data-browser/ListView.jsx
index 0a93e8dc491ef6680c0ba373531edbdd252f58ce..314f183af8465a49986cb015beb0068d97ba6c6d 100644
--- a/ui-admin/src/js/components/database/data-browser/ListView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/ListView.jsx
@@ -1,7 +1,5 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
-import FolderIcon from '@material-ui/icons/FolderOpen'
-import FileIcon from '@material-ui/icons/InsertDriveFileOutlined'
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -9,6 +7,7 @@ import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import autoBind from 'auto-bind'
+import ItemIcon from "@src/js/components/database/data-browser/ItemIcon.jsx";
const styles = theme => ({
content: {
@@ -62,32 +61,8 @@ const styles = theme => ({
class ListView extends React.Component {
- constructor(props, context) {
- super(props, context)
- autoBind(this)
-
- const { configuration } = this.props
-
- this.extensionToIconType = new Map(
- configuration.flatMap(
- (configObject) => configObject.extensions.map(extension => [extension, configObject.icon])
- )
- )
- }
-
- getIcon(file) {
- const { classes } = this.props
-
- if (file.folder) {
- return <FolderIcon className={classes.icon} />
- } else {
- const iconType = this.extensionToIconType.get(file.name.substring(file.name.lastIndexOf(".") + 1))
- return iconType ? React.createElement(iconType, { className: classes.icon }) : <FileIcon className={classes.icon} />
- }
- }
-
render() {
- const { classes, files } = this.props
+ const { classes, files, configuration } = this.props
/* Create strings in messages. */
return (
@@ -103,7 +78,9 @@ class ListView extends React.Component {
<TableBody>
{files.map((file, index) =>
<TableRow key={index} className={classes.tableRow}>
- <TableCell className={`${classes.tableData} ${classes.nameColumn}`}>{<>{this.getIcon(file)} {file.name}</>}</TableCell>
+ <TableCell className={`${classes.tableData} ${classes.nameColumn}`}>
+ {<><ItemIcon classes = {classes} file={file} configuration={configuration} />{file.name}</>}
+ </TableCell>
<TableCell className={`${classes.tableData} ${classes.sizeColumn}`}>{file.folder ? '-' : file.size}</TableCell>
<TableCell className={`${classes.tableData} ${classes.modifiedColumn}`}>{file.lastModifiedTime.toLocaleString()}</TableCell>
</TableRow>