SSDM-13579: Added support of different icons for different content types.

ui-admin/src/js/components/database/data-browser/DataBrowser.jsx

@@ -4,6 +4,10 @@ import autoBind from 'auto-bind'
 import Toolbar from '@src/js/components/database/data-browser/Toolbar.jsx'
 import ListView from '@src/js/components/database/data-browser/ListView.jsx'
 import GridView from '@src/js/components/database/data-browser/GridView.jsx'
+import DescriptionIcon from '@material-ui/icons/DescriptionOutlined'
+import AudioIcon from '@material-ui/icons/MusicNoteOutlined'
+import VideoIcon from '@material-ui/icons/LocalMovies'
+import ImageIcon from '@material-ui/icons/Image'
 
 const styles = theme => ({
   boundary: {
@@ -15,6 +19,26 @@ const styles = theme => ({
   }
 })
 
+const configuration =
+  [
+    {
+      icon: AudioIcon,
+      extensions: ['wav', 'mp3', 'acc', 'ogg']
+    },
+    {
+      icon: DescriptionIcon,
+      extensions: ['txt', 'rtf', 'doc', 'pdf']
+    },
+    {
+      icon: VideoIcon,
+      extensions: ['mp4', 'mkv', 'avi']
+    },
+    {
+      icon: ImageIcon,
+      extensions: ['tif', 'gif', 'jpg', 'jpeg', 'png']
+    }
+  ]
+
 class DataBrowser extends React.Component {
 
   constructor(props, context) {
@@ -62,6 +86,14 @@ class DataBrowser extends React.Component {
           creationTime: new Date('2020-08-13 14:45:54.034563'),
           lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
           lastAccessTime: new Date('2023-05-25 14:55:31.902857')
+        },
+        {
+          name: 'lock',
+          folder: false,
+          size: 0,
+          creationTime: new Date('2020-08-13 14:45:54.034563'),
+          lastModifiedTime: new Date('2023-05-30 15:33:14.048038'),
+          lastAccessTime: new Date('2023-05-30 15:33:14.048038')
         }
       ]
     }
@@ -78,8 +110,8 @@ class DataBrowser extends React.Component {
     return (
       <div className={classes.boundary}>
         <Toolbar viewType={viewType} onViewTypeChange={this.handleViewTypeChange} />
-        {viewType === 'list' && <ListView files={files} />}
-        {viewType === 'grid' && <GridView files={files} />}
+        {viewType === 'list' && <ListView configuration={configuration} files={files} />}
+        {viewType === 'grid' && <GridView configuration={configuration} files={files} />}
       </div>
     )
   }

ui-admin/src/js/components/database/data-browser/ListView.jsx

@@ -2,13 +2,13 @@ import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Container from '@src/js/components/common/form/Container.jsx'
 import FolderIcon from '@material-ui/icons/FolderOpen'
-import FileIcon from '@material-ui/icons/DescriptionOutlined'
+import FileIcon from '@material-ui/icons/InsertDriveFileOutlined'
 import autoBind from 'auto-bind'
 
 const styles = theme => ({
   content: {
     width: '100%',
-    fontFamily: theme.typography.fontFamily,
+    fontFamily: theme.typography.fontFamily
   },
   tableHeader: {
     textAlign: 'left'
@@ -39,7 +39,7 @@ const styles = theme => ({
     height: '2em'
   },
   tableData: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(2)
   }
 })
 
@@ -48,6 +48,14 @@ 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) {
@@ -56,12 +64,14 @@ class ListView extends React.Component {
     if (file.folder) {
       return <FolderIcon className={classes.icon} />
     } else {
-      return <FileIcon className={classes.icon} />
+      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
+
     /* Create strings in messages. */
     return (
       <Container>