21364: css tweaks Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

[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 36ae5fd6ed61eec249863c0186b612a9721ea914..91ece48c3a34d18cea25e6c3e74181f133bf0123 100644 (file)
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from "react";
-import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button } from "@material-ui/core";
+import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button, Typography } from "@material-ui/core";
 import { ColumnSelector } from "components/column-selector/column-selector";
 import { DataTable, DataColumns, DataTableFetchMode } from "components/data-table/data-table";
 import { DataColumn } from "components/data-table/data-column";
@@ -17,7 +17,7 @@ import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreVerticalIcon } f
 import { PaperProps } from "@material-ui/core/Paper";
 import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view";
 
-type CssRules = "titleWrapper" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container";
+type CssRules = "titleWrapper" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "loadMoreContainer" | "numResults" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     titleWrapper: {
@@ -35,12 +35,22 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     footer: {
         overflow: "auto",
     },
+    loadMoreContainer: {
+        minWidth: '8rem',
+    },
     root: {
         height: "100%",
     },
     moreOptionsButton: {
         padding: 0,
     },
+    numResults: {
+        marginTop: 0,
+        fontSize: "10px",
+        marginLeft: "10px",
+        marginBottom: '-0.5rem',
+        minWidth: '8.5rem',
+    },
     title: {
         display: "inline-block",
         paddingLeft: theme.spacing.unit * 2,
@@ -96,7 +106,7 @@ interface DataExplorerDataProps<T> {
     elementPath?: string;
     isMSToolbarVisible: boolean;
     checkedList: TCheckedList;
-    isNotFound?: boolean;
+    isNotFound: boolean;
 }
 
 interface DataExplorerActionProps<T> {
@@ -284,7 +294,7 @@ export const DataExplorer = withStyles(styles)(
                                 setCheckedListOnStore={setCheckedListOnStore}
                                 checkedList={checkedList}
                                 working={working}
-                                isNotFound={this.props.isNotFound || false}
+                                isNotFound={this.props.isNotFound}
                             />
                         </Grid>
                         <Grid
@@ -294,7 +304,7 @@ export const DataExplorer = withStyles(styles)(
                             <Toolbar className={classes.footer}>
                                 {elementPath && (
                                     <Grid container>
-                                        <span data-cy="element-path">{elementPath}</span>
+                                        <span data-cy="element-path">{elementPath.length > 2 ? elementPath : ''}</span>
                                     </Grid>
                                 )}
                                 <Grid
@@ -314,13 +324,21 @@ export const DataExplorer = withStyles(styles)(
                                             component="div"
                                         />
                                     ) : (
-                                        <Button
-                                            variant="text"
-                                            size="medium"
-                                            onClick={this.loadMore}
-                                        >
-                                            Load more
-                                        </Button>
+                                        <Grid className={classes.loadMoreContainer}>
+                                            <Typography  className={classes.numResults}>
+                                                Showing {items.length} / {itemsAvailable} results
+                                            </Typography>
+                                            <Button
+                                                size="small"
+                                                onClick={this.loadMore}
+                                                variant="contained"
+                                                color="primary"  
+                                                style={{width: '100%', margin: '10px'}}
+                                                disabled={working || items.length >= itemsAvailable}
+                                            >
+                                                Load more
+                                            </Button>
+                                        </Grid>
                                     )}
                                 </Grid>
                             </Toolbar>