X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/4ad6191d53207a8b2d4c0c8a30b18119daaa5fbc..1e9e1e556f51abaa2f001b1c280f1d4a09ca75e2:/services/workbench2/src/components/data-explorer/data-explorer.tsx?ds=sidebyside

diff --git a/services/workbench2/src/components/data-explorer/data-explorer.tsx b/services/workbench2/src/components/data-explorer/data-explorer.tsx
index ad5762dfeb..4e89b752a6 100644
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -17,15 +17,20 @@ 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 = "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | "dataTable" | "container";
+type CssRules = "titleWrapper" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    titleWrapper: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
     searchBox: {
         paddingBottom: 0,
     },
     toolbar: {
         paddingTop: 0,
         paddingRight: theme.spacing.unit,
+        paddingLeft: "10px",
     },
     footer: {
         overflow: "auto",
@@ -41,6 +46,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         paddingLeft: theme.spacing.unit * 2,
         paddingTop: theme.spacing.unit * 2,
         fontSize: "18px",
+        paddingRight: "10px",
+    },
+    subProcessTitle: {
+        display: "inline-block",
+        paddingLeft: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 2,
+        fontSize: "18px",
+        flexGrow: 0,
+        paddingRight: "10px",
     },
     dataTable: {
         height: "100%",
@@ -50,11 +64,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         height: "100%",
     },
     headerMenu: {
-        width: "100%",
-        float: "right",
-        display: "flex",
-        flexDirection: "row-reverse",
-        justifyContent: "space-between",
+        marginLeft: "auto",
+        flexBasis: "initial",
+        flexGrow: 0,
     },
 });
 
@@ -79,11 +91,13 @@ interface DataExplorerDataProps<T> {
     actions?: React.ReactNode;
     hideSearchInput?: boolean;
     title?: React.ReactNode;
+    progressBar?: React.ReactNode;
     paperKey?: string;
     currentItemUuid: string;
     elementPath?: string;
     isMSToolbarVisible: boolean;
     checkedList: TCheckedList;
+    isNotFound?: boolean;
 }
 
 interface DataExplorerActionProps<T> {
@@ -105,14 +119,20 @@ 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 = {
-            showLoading: false,
+        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 || "";
@@ -121,7 +141,6 @@ export const DataExplorer = withStyles(styles)(
                 // 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,
                 });
             }
@@ -130,15 +149,9 @@ export const DataExplorer = withStyles(styles)(
                 // 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,
-                });
-            }
         }
 
         componentDidMount() {
@@ -147,7 +160,6 @@ export const DataExplorer = withStyles(styles)(
             }
             // 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 || "",
             });
@@ -180,7 +192,9 @@ export const DataExplorer = withStyles(styles)(
                 paperKey,
                 fetchMode,
                 currentItemUuid,
+                currentRoute,
                 title,
+                progressBar,
                 doHidePanel,
                 doMaximizePanel,
                 doUnMaximizePanel,
@@ -190,6 +204,7 @@ export const DataExplorer = withStyles(styles)(
                 toggleMSToolbar,
                 setCheckedListOnStore,
                 checkedList,
+                working,
             } = this.props;
             return (
                 <Paper
@@ -204,16 +219,18 @@ export const DataExplorer = withStyles(styles)(
                         wrap="nowrap"
                         className={classes.container}
                     >
-                        <div>
+                        <div className={classes.titleWrapper} style={currentRoute?.includes('search-results') || !!progressBar ? {marginBottom: '-20px'} : {}}>
                             {title && (
                                 <Grid
                                     item
                                     xs
-                                    className={classes.title}
+                                    className={!!progressBar ? classes.subProcessTitle : classes.title}
                                 >
                                     {title}
                                 </Grid>
                             )}
+                            {!!progressBar && progressBar}
+                            {this.multiSelectToolbarInTitle && <MultiselectToolbar />}
                             {(!hideColumnSelector || !hideSearchInput || !!actions) && (
                                 <Grid
                                     className={classes.headerMenu}
@@ -221,25 +238,27 @@ export const DataExplorer = withStyles(styles)(
                                     xs
                                 >
                                     <Toolbar className={classes.toolbar}>
-                                        {!hideSearchInput && (
-                                            <div className={classes.searchBox}>
-                                                {!hideSearchInput && (
-                                                    <SearchInput
-                                                        label={searchLabel}
-                                                        value={searchValue}
-                                                        selfClearProp={""}
-                                                        onSearch={onSearch}
-                                                    />
-                                                )}
-                                            </div>
-                                        )}
-                                        {actions}
-                                        {!hideColumnSelector && (
-                                            <ColumnSelector
-                                                columns={columns}
-                                                onColumnToggle={onColumnToggle}
-                                            />
-                                        )}
+                                        <Grid container justify="space-between" wrap="nowrap" alignItems="center">
+                                            {!hideSearchInput && (
+                                                <div className={classes.searchBox}>
+                                                    {!hideSearchInput && (
+                                                        <SearchInput
+                                                            label={searchLabel}
+                                                            value={searchValue}
+                                                            selfClearProp={""}
+                                                            onSearch={onSearch}
+                                                        />
+                                                    )}
+                                                </div>
+                                            )}
+                                            {actions}
+                                            {!hideColumnSelector && (
+                                                <ColumnSelector
+                                                    columns={columns}
+                                                    onColumnToggle={onColumnToggle}
+                                                />
+                                            )}
+                                        </Grid>
                                         {doUnMaximizePanel && panelMaximized && (
                                             <Tooltip
                                                 title={`Unmaximize ${panelName || "panel"}`}
@@ -274,14 +293,15 @@ export const DataExplorer = withStyles(styles)(
                                             </Tooltip>
                                         )}
                                     </Toolbar>
-                                    <MultiselectToolbar />
                                 </Grid>
                             )}
                         </div>
+                        {!this.multiSelectToolbarInTitle && <MultiselectToolbar />}
                         <Grid
                             item
                             xs="auto"
                             className={classes.dataTable}
+                            style={currentRoute?.includes('search-results')  || !!progressBar ? {marginTop: '-10px'} : {}}
                         >
                             <DataTable
                                 columns={this.props.contextMenuColumn ? [...columns, this.contextMenuColumn] : columns}
@@ -292,7 +312,6 @@ export const DataExplorer = withStyles(styles)(
                                 onFiltersChange={onFiltersChange}
                                 onSortToggle={onSortToggle}
                                 extractKey={extractKey}
-                                working={this.state.showLoading}
                                 defaultViewIcon={defaultViewIcon}
                                 defaultViewMessages={defaultViewMessages}
                                 currentItemUuid={currentItemUuid}
@@ -300,6 +319,8 @@ export const DataExplorer = withStyles(styles)(
                                 toggleMSToolbar={toggleMSToolbar}
                                 setCheckedListOnStore={setCheckedListOnStore}
                                 checkedList={checkedList}
+                                working={working}
+                                isNotFound={this.props.isNotFound || false}
                             />
                         </Grid>
                         <Grid
@@ -368,7 +389,10 @@ export const DataExplorer = withStyles(styles)(
                 >
                     <IconButton
                         className={this.props.classes.moreOptionsButton}
-                        onClick={event => this.props.onContextMenu(event, item)}
+                        onClick={event => {
+                            event.stopPropagation()
+                            this.props.onContextMenu(event, item)
+                        }}
                     >
                         <MoreVerticalIcon />
                     </IconButton>