21224: merged main to pass int tests

[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 604856a85224d7a619f6bde2490bbd4513a961f1..d1e55b7c8b530ef30f15f8ba01cde16f4fd04876 100644 (file)
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -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" | "msToolbarStyles" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container";
+type CssRules = "titleWrapper" | "msToolbarStyles" | "subpanelToolbarStyles" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     titleWrapper: {
@@ -27,6 +27,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     msToolbarStyles: {
         paddingTop: "0.6rem",
     },
+    subpanelToolbarStyles: {
+        paddingTop: "1.2rem",
+    },
     searchBox: {
         paddingBottom: 0,
     },
@@ -89,7 +92,6 @@ interface DataExplorerDataProps<T> {
     defaultViewIcon?: IconType;
     defaultViewMessages?: string[];
     working?: boolean;
-    currentRefresh?: string;
     currentRoute?: string;
     hideColumnSelector?: boolean;
     paperProps?: PaperProps;
@@ -103,6 +105,7 @@ interface DataExplorerDataProps<T> {
     elementPath?: string;
     isMSToolbarVisible: boolean;
     checkedList: TCheckedList;
+    isNotFound: boolean;
 }
 
 interface DataExplorerActionProps<T> {
@@ -128,57 +131,24 @@ type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T
 export const DataExplorer = withStyles(styles)(
     class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
         state = {
-            showLoading: false,
-            prevRefresh: "",
-            prevRoute: "",
-            msToolbarInDetailsCard: false,
+            msToolbarInDetailsCard: true,
         };
 
         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({
-                    showLoading: this.props.working,
-                    prevRoute: currentRoute,
-                });
-            }
-
-            if (currentRefresh !== this.state.prevRefresh) {
-                // Component already mounted, but the user just clicked the
-                // refresh button.
-                this.setState({
-                    showLoading: this.props.working,
-                    prevRefresh: currentRefresh,
-                });
-            }
-            if (this.state.showLoading && !this.props.working) {
-                this.setState({
-                    showLoading: false,
-                });
-            }
-            if (this.props.selectedResourceUuid !== prevProps.selectedResourceUuid || this.props.currentRouteUuid !== prevProps.currentRouteUuid) {
-                this.setState({
-                    msToolbarInDetailsCard: this.props.selectedResourceUuid === this.props.currentRouteUuid,
-                });
-            }
-        }
 
         componentDidMount() {
             if (this.props.onSetColumns) {
                 this.props.onSetColumns(this.props.columns);
             }
-            // Component just mounted, so we need to show the loading indicator.
-            this.setState({
-                showLoading: this.props.working,
-                prevRefresh: this.props.currentRefresh || "",
-                prevRoute: this.props.currentRoute || "",
-            });
+        }
+
+        componentDidUpdate( prevProps: Readonly<DataExplorerProps<T>>, prevState: Readonly<{}>, snapshot?: any ): void {
+            const { selectedResourceUuid, currentRouteUuid } = this.props;
+            if(selectedResourceUuid !== prevProps.selectedResourceUuid || currentRouteUuid !== prevProps.currentRouteUuid) {
+                this.setState({
+                    msToolbarInDetailsCard: selectedResourceUuid === this.props.currentRouteUuid,
+                })
+            }
         }
 
         render() {
@@ -220,6 +190,7 @@ export const DataExplorer = withStyles(styles)(
                 toggleMSToolbar,
                 setCheckedListOnStore,
                 checkedList,
+                working,
             } = this.props;
             return (
                 <Paper
@@ -234,7 +205,7 @@ export const DataExplorer = withStyles(styles)(
                         wrap="nowrap"
                         className={classes.container}
                     >
-                        <div className={classes.titleWrapper} style={currentRoute?.includes('search-results') || !!progressBar ? {marginBottom: '-20px'} : {}}>
+                        <div data-cy="title-wrapper" className={classes.titleWrapper} style={currentRoute?.includes('search-results') || !!progressBar ? {marginBottom: '-20px'} : {}}>
                             {title && (
                                 <Grid
                                     item
@@ -311,7 +282,7 @@ export const DataExplorer = withStyles(styles)(
                                 </Grid>
                             )}
                         </div>
-                        {!this.multiSelectToolbarInTitle && <MultiselectToolbar isSubPanel={true}/>}
+                        {!this.multiSelectToolbarInTitle && <MultiselectToolbar isSubPanel={true} injectedStyles={classes.subpanelToolbarStyles}/>}
                         <Grid
                             item
                             xs="auto"
@@ -327,7 +298,6 @@ export const DataExplorer = withStyles(styles)(
                                 onFiltersChange={onFiltersChange}
                                 onSortToggle={onSortToggle}
                                 extractKey={extractKey}
-                                working={this.state.showLoading}
                                 defaultViewIcon={defaultViewIcon}
                                 defaultViewMessages={defaultViewMessages}
                                 currentRoute={paperKey}
@@ -337,6 +307,8 @@ export const DataExplorer = withStyles(styles)(
                                 selectedResourceUuid={selectedResourceUuid}
                                 setSelectedUuid={this.props.setSelectedUuid}
                                 currentRouteUuid={this.props.currentRouteUuid}
+                                working={working}
+                                isNotFound={this.props.isNotFound}
                             />
                         </Grid>
                         <Grid