SSDM-13579: Implemented proper grid view for files.

ui-admin/src/js/components/database/DatabaseComponent.jsx

@@ -79,7 +79,7 @@ class DatabaseComponent extends React.PureComponent {
     return (
       this.state.showDataBrowser
         ?
-          <DataBrowser viewType='list'/>
+          <DataBrowser viewType='grid'/>
         :
           <Container>
             <pre>{JSON.stringify(this.state.json || {}, null, 2)}</pre>

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

@@ -3,7 +3,13 @@ import { withStyles } from '@material-ui/core/styles'
 import GridViewItem from "@src/js/components/database/data-browser/GridViewItem.jsx";
 import Container from "@src/js/components/common/form/Container.jsx";
 
-const styles = theme => ({
+const styles = (theme) => ({
+    container: {
+        fontFamily: theme.typography.fontFamily,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))',
+        gridGap: '0.5rem'
+    }
 })
 
 class GridView extends React.Component {
@@ -11,7 +17,7 @@ class GridView extends React.Component {
     render() {
         const { classes, configuration, files } = this.props
         return (
-            <Container>
+            <Container className={classes.container}>
                 {files.map((file) => <GridViewItem file={file} configuration={configuration}/>)}
             </Container>
         )

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

@@ -3,11 +3,22 @@ import { withStyles } from '@material-ui/core/styles'
 import FolderIcon from "@material-ui/icons/FolderOpen";
 import FileIcon from "@material-ui/icons/InsertDriveFileOutlined";
 import autoBind from "auto-bind";
-
-const styles = theme => ({
+import Container from "@src/js/components/common/form/Container.jsx";
+
+const styles = (theme) => ({
+    cell: {
+        display: 'block',
+        position: 'relative',
+        width: '6rem',
+        height: '8rem',
+        overflow: 'hidden',
+        margin: '0.25rem',
+        // border: '1px solid black',
+        textAlign: 'center'
+    },
     icon: {
         verticalAlign: 'middle',
-        fontSize: '4rem'
+        fontSize: '6rem'
     },
 })
 
@@ -42,9 +53,9 @@ class GridViewItem extends React.Component {
         const { classes, file } = this.props
 
         return (
-            <div>
+            <Container className={classes.cell}>
                 <>{this.getIcon(file)} {file.name}</>
-            </div>
+            </Container>
         )
     }
 }