SSDM-13579: Added selection.

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

@@ -96,7 +96,9 @@ class DataBrowser extends React.Component {
           lastModifiedTime: new Date('2023-05-30 15:33:14.048038'),
           lastAccessTime: new Date('2023-05-30 15:33:14.048038')
         }
-      ]
+      ],
+      selectedFile: null,
+      multiselectedFiles: new Set([])
     }
   }
 
@@ -104,15 +106,56 @@ class DataBrowser extends React.Component {
     this.setState({ viewType })
   }
 
+  handleClick(file) {
+    // TODO: implement
+  }
+
+  handleSelect(file) {
+    this.setState({selectedFile: file});
+  }
+
+  handleMultiselect(file) {
+    // TODO: implement
+  }
+
   render() {
-    const { viewType, files } = this.state
+    const { viewType, files, selectedFile, multiselectedFiles } = this.state
     const { classes } = this.props
 
     return (
       <Paper className={classes.boundary}>
-        <Toolbar viewType={viewType} onViewTypeChange={this.handleViewTypeChange} />
-        {viewType === 'list' && <ListView configuration={configuration} files={files} />}
-        {viewType === 'grid' && <GridView configuration={configuration} files={files} />}
+        <Toolbar
+          viewType={viewType}
+          onViewTypeChange={this.handleViewTypeChange}
+        />
+        {viewType === 'list' && (
+          <ListView
+            clickable={true}
+            selectable={true}
+            multiselectable={true}
+            onClick={this.handleClick}
+            onSelect={this.handleSelect}
+            onMultiselect={this.handleMultiselect}
+            configuration={configuration}
+            files={files}
+            selectedFile = {selectedFile}
+            multiselectedFiles = {multiselectedFiles}
+          />
+        )}
+        {viewType === 'grid' && (
+          <GridView
+            clickable={true}
+            selectable={true}
+            multiselectable={true}
+            onClick={this.handleClick}
+            onSelect={this.handleSelect}
+            onMultiselect={this.handleMultiselect}
+            configuration={configuration}
+            files={files}
+            selectedFile = {selectedFile}
+            multiselectedFiles = {multiselectedFiles}
+          />
+        )}
       </Paper>
     )
   }

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

-import React from 'react'
-import { withStyles } from '@material-ui/core/styles'
-import GridViewItem from '@src/js/components/database/data-browser/GridViewItem.jsx'
-import Grid from '@material-ui/core/Grid'
-
-const styles = (theme) => ({
-    container: {
-        fontFamily: theme.typography.fontFamily,
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))',
-        gridGap: '0.5rem'
-    }
-})
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import GridViewItem from "@src/js/components/database/data-browser/GridViewItem.jsx";
+import Grid from "@material-ui/core/Grid";
+import autoBind from "auto-bind";
+
+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 {
+  constructor(props, context) {
+    super(props, context);
+    autoBind(this);
+  }
+
+  handleClick(event, file) {
+    const { clickable, onClick } = this.props;
+
+    if (clickable && onClick) {
+      onClick(file);
+    }
+  }
+
+  handleSelect(event, file) {
+    const { selectable, onSelect } = this.props;
 
-    render() {
-        const { classes, configuration, files } = this.props
-        return (
-            <Grid container className={classes.container}>
-                {files.map((file) => <GridViewItem file={file} configuration={configuration}/>)}
-            </Grid>
-        )
+    if (selectable && onSelect) {
+      onSelect(file);
     }
+  }
+
+  handleMultiselect(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const { multiselectable, onMultiselect, file } = this.props;
+
+    if (multiselectable && onMultiselect) {
+      onMultiselect(file);
+    }
+  }
+
+  render() {
+    const { clickable, selectable, multiselectable, classes, configuration, files, selectedFile, multiselectedFiles } = this.props;
+
+    return (
+      <Grid container className={classes.container}>
+        {files.map(file => (
+          <GridViewItem
+            clickable={clickable}
+            selectable={selectable}
+            selected={selectedFile === file}
+            multiselectable={multiselectable}
+            multiselected={multiselectedFiles.has(file)}
+            file={file}
+            configuration={configuration}
+            onClick={this.handleClick}
+            onSelect={this.handleSelect}
+            onMultiselect={this.handleMultiselect}
+          />
+        ))}
+      </Grid>
+    );
+  }
 }
 
-export default withStyles(styles)(GridView)
+export default withStyles(styles)(GridView);

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

 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
-import Card from "@material-ui/core/Card";
-import { CardContent, CardMedia } from "@material-ui/core";
+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'
+import autoBind from "auto-bind";
 
 const styles = (theme) => ({
-    cell: {
-        display: 'block',
-        position: 'relative',
-        width: '8rem',
-        height: '8rem',
-        overflow: 'hidden',
-        margin: '0.25rem',
-        textAlign: 'center',
-        cursor: 'pointer',
-        '&:hover': {
-            backgroundColor: '#0000000a'
-        },
-    },
-    name: {
-        padding: '0'
+  cell: {
+    display: 'block',
+    position: 'relative',
+    width: '8rem',
+    height: '8rem',
+    overflow: 'hidden',
+    margin: '0.25rem',
+    textAlign: 'center',
+    '&:hover': {
+      backgroundColor: '#0000000a'
     }
+  },
+  name: {
+    padding: '0'
+  },
+  clickable: {
+    cursor: 'pointer'
+  },
+  selectable: {
+    cursor: 'pointer'
+  },
+  selected: {
+    backgroundColor: '#e8f7fd'
+  }
 })
 
 class GridViewItem extends React.Component {
 
-    render() {
-        const { classes, file, configuration } = this.props
-
-        return (
-            <Grid item component={Card} variant="outlined" className={classes.cell}>
-                <CardMedia>
-                    <ItemIcon file={file} configuration={configuration} />
-                </CardMedia>
-                <CardContent className={classes.name}>
-                    {file.name}
-                </CardContent>
-            </Grid>
-        )
+
+  constructor(props, context) {
+    super(props, context);
+    autoBind(this);
+  }
+
+  handleClick(event) {
+    const { onClick, onSelect, file } = this.props;
+
+    onClick(event, file);
+    onSelect(event, file);
+  };
+
+  render() {
+    const { classes,
+      file,
+      configuration,
+      clickable,
+      selectable,
+      multiselectable,
+      selected
+    } = this.props
+
+    let itemClasses = [classes.cell]
+
+    if (multiselectable) {
+      itemClasses.push(classes.multiselectable)
+    }
+    if (selectable) {
+      itemClasses.push(classes.selectable)
+    }
+    if (selected) {
+      itemClasses.push(classes.selected)
     }
+    if (clickable) {
+      itemClasses.push(classes.clickable)
+    }
+
+    return (
+      <Grid
+        item
+        component={Card}
+        variant='outlined'
+        className={itemClasses.join(' ')}
+        onClick={this.handleClick}
+      >
+        <CardMedia>
+          <ItemIcon file={file} configuration={configuration} />
+        </CardMedia>
+        <CardContent className={classes.name}>{file.name}</CardContent>
+      </Grid>
+    )
+  }
 }
 
 export default withStyles(styles)(GridViewItem)

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

@@ -55,7 +55,10 @@ const styles = theme => ({
   tableData: {
     padding: theme.spacing(2),
     borderWidth: '0'
-  }
+  },
+  selected: {
+    backgroundColor: '#e8f7fd'
+  },
 })
 
 class ListView extends React.Component {