From eda8c2ea7e38030af5a47fdf8f06394bd25c5806 Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Fri, 23 Jun 2023 15:27:43 +0200
Subject: [PATCH] SSDM-13579: Added show info toggle button.
---
.../database/data-browser/DataBrowser.jsx | 10 ++++++++--
.../database/data-browser/InfoPanel.jsx | 6 +++++-
.../database/data-browser/Toolbar.jsx | 20 +++++++++++++++++--
3 files changed, 31 insertions(+), 5 deletions(-)
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index 4a7e73bc405..c000e053e40 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -147,15 +147,21 @@ class DataBrowser extends React.Component {
await AppController.getInstance().errorChange(error)
}
+ handleShowInfoChange() {
+ this.setState({showInfo: !this.state.showInfo})
+ }
+
render() {
- const { viewType, files, selectedFile, multiselectedFiles } = this.state
const { classes } = this.props
+ const { viewType, files, selectedFile, multiselectedFiles, showInfo } = this.state
return (
<Paper className={classes.boundary}>
<Toolbar
viewType={viewType}
onViewTypeChange={this.handleViewTypeChange}
+ onShowInfoChange={this.handleShowInfoChange}
+ showInfo={showInfo}
/>
<div className={[classes.flexContainer, classes.boundary].join(' ')}>
{viewType === 'list' && (
@@ -214,7 +220,7 @@ class DataBrowser extends React.Component {
multiselectedFiles = {multiselectedFiles}
/>
)}
- {selectedFile && <InfoPanel file={selectedFile} configuration={configuration} />}
+ {showInfo && selectedFile && <InfoPanel file={selectedFile} configuration={configuration} />}
</div>
</Paper>
)
diff --git a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
index 51bb16d7d52..e5f798debf8 100644
--- a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
+++ b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
@@ -41,7 +41,11 @@ class InfoPanel extends React.Component {
}
render() {
- const { classes, file, configuration } = this.props
+ const {
+ classes,
+ file,
+ configuration
+ } = this.props
return (file &&
<Container>
diff --git a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
index 314eb292250..e2a9ee15a6d 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -26,16 +26,32 @@ import SettingsIcon from '@material-ui/icons/Settings'
import SearchIcon from '@material-ui/icons/Search'
import InfoIcon from '@material-ui/icons/InfoOutlined'
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined'
+import autoBind from "auto-bind";
+import { ToggleButton } from "@material-ui/lab";
const styles = () => ({})
class Toolbar extends React.Component {
+
+ constructor(props, context) {
+ super(props, context)
+ autoBind(this)
+ }
+
render() {
- const { viewType, onViewTypeChange, classes } = this.props
+ const {
+ viewType,
+ onViewTypeChange,
+ classes,
+ showInfo,
+ onShowInfoChange
+ } = this.props
return (
<>
+ <ToggleButton styles={{ root: classes.button }} selected={showInfo} onChange={onShowInfoChange} aria-label='Info'>
+ <InfoIcon />
+ </ToggleButton>
<Button styles={{ root: classes.button }} label='New folder' startIcon={<CreateNewFolderIcon />} />
- <Button styles={{ root: classes.button }} startIcon={<InfoIcon />} />
<Button styles={{ root: classes.button }} label='Search' startIcon={<SearchIcon />} />
{viewType === 'list' && <Button styles={{ root: classes.button }} label={<ViewComfyIcon />} onClick={() => onViewTypeChange('grid')} />}
{viewType === 'grid' && <Button styles={{ root: classes.button }} label={<ViewListIcon />} onClick={() => onViewTypeChange('list')} />}
--
GitLab