21364: changed button disable to track itemsAvailable.length Arvados-DCO-1.1-Signed...

[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 1b3e7f31d45697ede6f06b785100f6b83af3cf65..e29ff9c55ea121d86aa06db06795d81d8a309723 100644 (file)
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -84,7 +84,6 @@ interface DataExplorerDataProps<T> {
     defaultViewIcon?: IconType;
     defaultViewMessages?: string[];
     working?: boolean;
-    currentRefresh?: string;
     currentRoute?: string;
     hideColumnSelector?: boolean;
     paperProps?: PaperProps;
@@ -97,7 +96,7 @@ interface DataExplorerDataProps<T> {
     elementPath?: string;
     isMSToolbarVisible: boolean;
     checkedList: TCheckedList;
-    isNotFound?: boolean;
+    isNotFound: boolean;
 }
 
 interface DataExplorerActionProps<T> {
@@ -119,50 +118,15 @@ interface DataExplorerActionProps<T> {
 
 type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules> & MPVPanelProps;
 
-type DataExplorerState = {
-    prevRefresh: string;
-    prevRoute: string;
-};
-
 export const DataExplorer = withStyles(styles)(
     class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
-        state: DataExplorerState = {
-            prevRefresh: "",
-            prevRoute: "",
-        };
 
         multiSelectToolbarInTitle = !this.props.title && !this.props.progressBar;
 
-        componentDidUpdate(prevProps: DataExplorerProps<T>) {
-            const currentRefresh = this.props.currentRefresh || "";
-            const currentRoute = this.props.currentRoute || "";
-
-            if (currentRoute !== this.state.prevRoute) {
-                // Component already mounted, but the user comes from a route change,
-                // like browsing through a project hierarchy.
-                this.setState({
-                    prevRoute: currentRoute,
-                });
-            }
-
-            if (currentRefresh !== this.state.prevRefresh) {
-                // Component already mounted, but the user just clicked the
-                // refresh button.
-                this.setState({
-                    prevRefresh: currentRefresh,
-                });
-            }
-        }
-
         componentDidMount() {
             if (this.props.onSetColumns) {
                 this.props.onSetColumns(this.props.columns);
             }
-            // Component just mounted, so we need to show the loading indicator.
-            this.setState({
-                prevRefresh: this.props.currentRefresh || "",
-                prevRoute: this.props.currentRoute || "",
-            });
         }
 
         render() {
@@ -205,6 +169,7 @@ export const DataExplorer = withStyles(styles)(
                 setCheckedListOnStore,
                 checkedList,
                 working,
+                page,
             } = this.props;
             return (
                 <Paper
@@ -330,7 +295,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
@@ -351,9 +316,12 @@ export const DataExplorer = withStyles(styles)(
                                         />
                                     ) : (
                                         <Button
-                                            variant="text"
-                                            size="medium"
+                                            size="small"
                                             onClick={this.loadMore}
+                                            variant="contained"
+                                            color="primary"  
+                                            style={{width: '100%', margin: '10px'}}
+                                            disabled={working || items.length >= itemsAvailable}
                                         >
                                             Load more
                                         </Button>