21224: toolbar now toggles between details card and data explorer Arvados-DCO-1.1...

[arvados.git] / services / workbench2 / src / components / data-explorer / data-explorer.tsx

diff --git a/services/workbench2/src/components/data-explorer/data-explorer.tsx b/services/workbench2/src/components/data-explorer/data-explorer.tsx
index b9816721f9aebeae32621f515fef0941b08bdd8e..c2d8214fe91228099ded3da0b48cbafe6c0cff87 100644 (file)
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -128,10 +128,11 @@ export const DataExplorer = withStyles(styles)(
             showLoading: false,
             prevRefresh: "",
             prevRoute: "",
+            msToolbarInDetailsCard: false,
         };
 
         multiSelectToolbarInTitle = !this.props.title && !this.props.progressBar;
-
+        
         componentDidUpdate(prevProps: DataExplorerProps<T>) {
             const currentRefresh = this.props.currentRefresh || "";
             const currentRoute = this.props.currentRoute || "";
@@ -158,6 +159,11 @@ export const DataExplorer = withStyles(styles)(
                     showLoading: false,
                 });
             }
+            if (this.props.selectedResourceUuid !== prevProps.selectedResourceUuid) {
+                this.setState({
+                    msToolbarInDetailsCard: this.props.selectedResourceUuid === this.props.currentRouteUuid,
+                });
+            }
         }
 
         componentDidMount() {
@@ -236,7 +242,7 @@ export const DataExplorer = withStyles(styles)(
                                 </Grid>
                             )}
                             {!!progressBar && progressBar}
-                            {this.multiSelectToolbarInTitle && !!selectedResourceUuid && <MultiselectToolbar />}
+                            {this.multiSelectToolbarInTitle && !this.state.msToolbarInDetailsCard && <MultiselectToolbar />}
                             {(!hideColumnSelector || !hideSearchInput || !!actions) && (
                                 <Grid
                                     className={classes.headerMenu}
@@ -302,7 +308,7 @@ export const DataExplorer = withStyles(styles)(
                                 </Grid>
                             )}
                         </div>
-                        {!this.multiSelectToolbarInTitle && !!selectedResourceUuid && <MultiselectToolbar />}
+                        {!this.multiSelectToolbarInTitle && <MultiselectToolbar />}
                         <Grid
                             item
                             xs="auto"