15768: cleaned up toolbar types Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox...

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

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 373ff2e08ef66f1305c920f770c1b0449ab7b89f..0446ee6f3565169eef18cce0d669a7b8dfde29b4 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -14,6 +14,7 @@ import { DataTableFilters } from 'components/data-table-filters/data-table-filte
 import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreOptionsIcon } from 'components/icon/icon';
 import { PaperProps } from '@material-ui/core/Paper';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+import { MultiselectToolbar, defaultActions } from 'components/multiselectToolbar/MultiselectToolbar';
 
 type CssRules = 'searchBox' | 'headerMenu' | 'toolbar' | 'footer' | 'root' | 'moreOptionsButton' | 'title' | 'dataTable' | 'container';
 
@@ -48,8 +49,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         height: '100%',
     },
     headerMenu: {
+        width: '100%',
         float: 'right',
-        display: 'inline-block',
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between',
     },
 });
 
@@ -77,6 +81,7 @@ interface DataExplorerDataProps<T> {
     paperKey?: string;
     currentItemUuid: string;
     elementPath?: string;
+    isMSToolbarVisible: boolean;
 }
 
 interface DataExplorerActionProps<T> {
@@ -92,6 +97,7 @@ interface DataExplorerActionProps<T> {
     onChangeRowsPerPage: (rowsPerPage: number) => void;
     onLoadMore: (page: number) => void;
     extractKey?: (item: T) => React.Key;
+    toggleMSToolbar: (isVisible: boolean) => void;
 }
 
 type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules> & MPVPanelProps;
@@ -178,6 +184,8 @@ export const DataExplorer = withStyles(styles)(
                 panelName,
                 panelMaximized,
                 elementPath,
+                isMSToolbarVisible,
+                toggleMSToolbar,
             } = this.props;
             return (
                 <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={this.props['data-cy']}>
@@ -220,6 +228,7 @@ export const DataExplorer = withStyles(styles)(
                                             </Tooltip>
                                         )}
                                     </Toolbar>
+                                    {isMSToolbarVisible && <MultiselectToolbar buttons={defaultActions} />}
                                 </Grid>
                             )}
                         </div>
@@ -238,7 +247,7 @@ export const DataExplorer = withStyles(styles)(
                                 defaultViewMessages={defaultViewMessages}
                                 currentItemUuid={currentItemUuid}
                                 currentRoute={paperKey}
-                                // checkedList={{}}
+                                toggleMSToolbar={toggleMSToolbar}
                             />
                         </Grid>
                         <Grid item xs>