21225: Move progressWrapper to data explorer for conditional styles

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/services/workbench2/src/components/data-explorer/data-explorer.tsx b/services/workbench2/src/components/data-explorer/data-explorer.tsx
index 0867a9cbece0583bf94da69d96cbb2b5bfc332bb..94deff0462bfcf6dbf312f02a56841bf3f381653 100644 (file)
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -16,8 +16,9 @@ import { DataTableFilters } from "components/data-table-filters/data-table-filte
 import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreVerticalIcon } from "components/icon/icon";
 import { PaperProps } from "@material-ui/core/Paper";
 import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view";
+import classNames from "classnames";
 
-type CssRules = "titleWrapper" | "msToolbarStyles" | "subpanelToolbarStyles" | "searchBox" | "headerMenu" | "toolbar" | "footer"| "loadMoreContainer" | "numResults" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container";
+type CssRules = "titleWrapper" | "msToolbarStyles" | "subpanelToolbarStyles" | "searchBox" | "headerMenu" | "toolbar" | "footer"| "loadMoreContainer" | "numResults" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | 'progressWrapper' | 'progressWrapperNoTitle' | "dataTable" | "container";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     titleWrapper: {
@@ -74,6 +75,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         flexGrow: 0,
         paddingRight: "10px",
     },
+    progressWrapper: {
+        margin: "28px 0 0",
+        flexGrow: 1,
+        flexBasis: "100px",
+    },
+    progressWrapperNoTitle: {
+        paddingLeft: "10px",
+    },
     dataTable: {
         height: "100%",
         overflow: "auto",
@@ -233,7 +242,12 @@ export const DataExplorer = withStyles(styles)(
                                     {title}
                                 </Grid>
                             )}
-                            {!!progressBar && progressBar}
+                            {!!progressBar &&
+                                <div className={classNames({
+                                    [classes.progressWrapper]: true,
+                                    [classes.progressWrapperNoTitle]: !title,
+                                })}>{progressBar}</div>
+                            }
                             {this.multiSelectToolbarInTitle && !this.state.msToolbarInDetailsCard && <MultiselectToolbar injectedStyles={classes.msToolbarStyles} />}
                             {(!hideColumnSelector || !hideSearchInput || !!actions) && (
                                 <Grid
@@ -364,7 +378,7 @@ export const DataExplorer = withStyles(styles)(
                                                 size="small"
                                                 onClick={this.loadMore}
                                                 variant="contained"
-                                                color="primary"  
+                                                color="primary"
                                                 style={{width: '100%', margin: '10px'}}
                                                 disabled={working || items.length >= itemsAvailable}
                                             >

diff --git a/services/workbench2/src/components/subprocess-progress-bar/subprocess-progress-bar.tsx b/services/workbench2/src/components/subprocess-progress-bar/subprocess-progress-bar.tsx
index 44629385cd7ed0ddf75a30e156cea7a29d7a4141..78df83f6ca86f39deeb98b39ac9050e99707d1ad 100644 (file)
--- a/services/workbench2/src/components/subprocess-progress-bar/subprocess-progress-bar.tsx
+++ b/services/workbench2/src/components/subprocess-progress-bar/subprocess-progress-bar.tsx
@@ -19,14 +19,9 @@ import { getDataExplorerColumnFilters } from "store/data-explorer/data-explorer-
 import { ProjectPanelRunColumnNames } from "views/project-panel/project-panel-run";
 import { DataColumns } from "components/data-table/data-table";
 
-type CssRules = 'progressWrapper' | 'progressStacked';
+type CssRules = 'progressStacked';
 
 const styles: StyleRulesCallback<CssRules> = (theme) => ({
-    progressWrapper: {
-        margin: "28px 0 0",
-        flexGrow: 1,
-        flexBasis: "100px",
-    },
     progressStacked: {
         border: "1px solid gray",
         height: "10px",
@@ -129,20 +124,18 @@ export const SubprocessProgressBar = connect(mapStateToProps, mapDispatchToProps
             }
         }
 
-        return progressCounts !== undefined && getStatusTotal(progressCounts) > 0 ? <div className={classes.progressWrapper}>
-            <Tooltip title={tooltip}>
-                <CProgressStacked className={classes.progressStacked}>
-                    <CProgress height={10} color="success"
-                        value={getStatusPercent(progressCounts, ProcessStatusFilter.COMPLETED)} />
-                    <CProgress height={10} color="success" variant="striped"
-                        value={getStatusPercent(progressCounts, ProcessStatusFilter.RUNNING)} />
-                    <CProgress height={10} color="danger"
-                        value={getStatusPercent(progressCounts, ProcessStatusFilter.FAILED)} />
-                    <CProgress height={10} color="secondary" variant="striped"
-                        value={getStatusPercent(progressCounts, ProcessStatusFilter.QUEUED)} />
-                </CProgressStacked>
-            </Tooltip>
-        </div> : <></>;
+        return progressCounts !== undefined && getStatusTotal(progressCounts) > 0 ? <Tooltip title={tooltip}>
+            <CProgressStacked className={classes.progressStacked}>
+                <CProgress height={10} color="success"
+                    value={getStatusPercent(progressCounts, ProcessStatusFilter.COMPLETED)} />
+                <CProgress height={10} color="success" variant="striped"
+                    value={getStatusPercent(progressCounts, ProcessStatusFilter.RUNNING)} />
+                <CProgress height={10} color="danger"
+                    value={getStatusPercent(progressCounts, ProcessStatusFilter.FAILED)} />
+                <CProgress height={10} color="secondary" variant="striped"
+                    value={getStatusPercent(progressCounts, ProcessStatusFilter.QUEUED)} />
+            </CProgressStacked>
+        </Tooltip> : <></>;
     }
 ));