SSDM-13579: Added changing logic for GridView and ListView buttons on the toolbar.

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

 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+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'
@@ -22,23 +23,27 @@ const styles = theme => ({
 
 class DataBrowser extends React.Component {
 
-
   constructor(props, context) {
     super(props, context)
+    autoBind(this)
     this.state = {
       viewType: props.viewType
     }
   }
 
+  handleViewTypeChange(viewType) {
+    this.setState({ viewType })
+  }
+
   render() {
     const { viewType } = this.state
     const { classes } = this.props
 
     return (
-      <div className={ classes.boundary }>
-        <Toolbar viewType={viewType} />
-        {viewType === 'list' ? <ListView /> : null}
-        {viewType === 'grid' ? <GridView /> : null}
+      <div className={classes.boundary}>
+        <Toolbar viewType={viewType} onViewTypeChange={this.handleViewTypeChange} />
+        {viewType === 'list' && <ListView />}
+        {viewType === 'grid' && <GridView />}
       </div>
     )
   }

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

@@ -13,7 +13,7 @@ const styles = theme => ({
 class GridView extends React.Component {
     render() {
         return (
-            <div>GalleryBrowser</div>
+            <div>GridView</div>
         )
     }
 }

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

-import React from "react";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
 
 const styles = theme => ({
     containerDefault: {
@@ -13,7 +13,7 @@ const styles = theme => ({
 class ListView extends React.Component {
     render() {
         return (
-            <div>ListBrowser</div>
+            <div>ListView</div>
         )
     }
 }

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

@@ -16,11 +16,11 @@ const styles = theme => ({
 
 class Toolbar extends React.Component {
   render() {
-    const { viewType } = this.props
+    const { viewType, onViewTypeChange } = this.props
     return (
       <Container>
-        {viewType === 'list' && <Button label={<ViewComfyIcon/>}/>}
-        {viewType === 'grid' && <Button label={<ViewListIcon/>}/>}
+        {viewType === 'list' && <Button label={<ViewComfyIcon/>} onClick={() => onViewTypeChange('grid')} />}
+        {viewType === 'grid' && <Button label={<ViewListIcon/>} onClick={() => onViewTypeChange('list')} />}
       </Container>
     )
   }