- return <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={this.props["data-cy"]}>
- <Grid container direction="column" wrap="nowrap" className={classes.container}>
- <div>
- {title && <Grid item xs className={classes.title}>{title}</Grid>}
- {
- (!hideColumnSelector || !hideSearchInput || !!actions) &&
- <Grid className={classes.headerMenu} item 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} />}
- { doUnMaximizePanel && panelMaximized &&
- <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
- <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
- </Tooltip> }
- { doMaximizePanel && !panelMaximized &&
- <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
- <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
- </Tooltip> }
- { doHidePanel &&
- <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
- <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
- </Tooltip> }
- </Toolbar>
- </Grid>
- }
- </div>
- <Grid item xs="auto" className={classes.dataTable}><DataTable
- columns={this.props.contextMenuColumn ? [...columns, this.contextMenuColumn] : columns}
- items={items}
- onRowClick={(_, item: T) => onRowClick(item)}
- onContextMenu={onContextMenu}
- onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)}
- onFiltersChange={onFiltersChange}
- onSortToggle={onSortToggle}
- extractKey={extractKey}
- working={this.state.showLoading}
- defaultViewIcon={defaultViewIcon}
- defaultViewMessages={defaultViewMessages}
- currentItemUuid={currentItemUuid}
- currentRoute={paperKey} /></Grid>
- <Grid item xs><Toolbar className={classes.footer}>
- {
- elementPath &&
- <Grid container>
- <span data-cy="element-path">
- {elementPath}
- </span>
+ return (
+ <Paper
+ className={classes.root}
+ {...paperProps}
+ key={paperKey}
+ data-cy={this.props["data-cy"]}
+ >
+ <Grid
+ container
+ direction="column"
+ wrap="nowrap"
+ className={classes.container}
+ >
+ <div className={classes.titleWrapper} style={currentRoute?.includes('search-results') || !!progressBar ? {marginBottom: '-20px'} : {}}>
+ {title && (
+ <Grid
+ item
+ xs
+ className={!!progressBar ? classes.subProcessTitle : classes.title}
+ >
+ {title}
+ </Grid>
+ )}
+ {!!progressBar && progressBar}
+ {this.multiSelectToolbarInTitle && <MultiselectToolbar injectedStyles={classes.msToolbarStyles} />}
+ {(!hideColumnSelector || !hideSearchInput || !!actions) && (
+ <Grid
+ className={classes.headerMenu}
+ item
+ xs
+ >
+ <Toolbar className={classes.toolbar}>
+ <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"}`}
+ disableFocusListener
+ >
+ <IconButton onClick={doUnMaximizePanel}>
+ <UnMaximizeIcon />
+ </IconButton>
+ </Tooltip>
+ )}
+ {doMaximizePanel && !panelMaximized && (
+ <Tooltip
+ title={`Maximize ${panelName || "panel"}`}
+ disableFocusListener
+ >
+ <IconButton onClick={doMaximizePanel}>
+ <MaximizeIcon />
+ </IconButton>
+ </Tooltip>
+ )}
+ {doHidePanel && (
+ <Tooltip
+ title={`Close ${panelName || "panel"}`}
+ disableFocusListener
+ >
+ <IconButton
+ disabled={panelMaximized}
+ onClick={doHidePanel}
+ >
+ <CloseIcon />
+ </IconButton>
+ </Tooltip>
+ )}
+ </Toolbar>
+ </Grid>
+ )}
+ </div>
+ {!this.multiSelectToolbarInTitle && <MultiselectToolbar isSubPanel={true} injectedStyles={classes.subpanelToolbarStyles}/>}
+ <Grid
+ item
+ xs="auto"
+ className={classes.dataTable}
+ style={currentRoute?.includes('search-results') || !!progressBar ? {marginTop: '-10px'} : {}}
+ >
+ <DataTable
+ columns={this.props.contextMenuColumn ? [...columns, this.contextMenuColumn] : columns}
+ items={items}
+ onRowClick={(_, item: T) => onRowClick(item)}
+ onContextMenu={onContextMenu}
+ onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)}
+ onFiltersChange={onFiltersChange}
+ onSortToggle={onSortToggle}
+ extractKey={extractKey}
+ defaultViewIcon={defaultViewIcon}
+ defaultViewMessages={defaultViewMessages}
+ currentRoute={paperKey}
+ toggleMSToolbar={toggleMSToolbar}
+ setCheckedListOnStore={setCheckedListOnStore}
+ checkedList={checkedList}
+ selectedResourceUuid={selectedResourceUuid}
+ setSelectedUuid={this.props.setSelectedUuid}
+ currentRouteUuid={this.props.currentRouteUuid}
+ working={working}
+ isNotFound={this.props.isNotFound}
+ />
+ </Grid>
+ <Grid
+ item
+ xs
+ >
+ <Toolbar className={classes.footer}>
+ {elementPath && (
+ <Grid container>
+ <span data-cy="element-path">{elementPath}</span>
+ </Grid>
+ )}
+ <Grid
+ container={!elementPath}
+ justify="flex-end"
+ >
+ {fetchMode === DataTableFetchMode.PAGINATED ? (
+ <TablePagination
+ count={itemsAvailable}
+ rowsPerPage={rowsPerPage}
+ rowsPerPageOptions={rowsPerPageOptions}
+ page={this.props.page}
+ onChangePage={this.changePage}
+ onChangeRowsPerPage={this.changeRowsPerPage}
+ // Disable next button on empty lists since that's not default behavior
+ nextIconButtonProps={itemsAvailable > 0 ? {} : { disabled: true }}
+ component="div"
+ />
+ ) : (
+ <Button
+ variant="text"
+ size="medium"
+ onClick={this.loadMore}
+ >
+ Load more
+ </Button>
+ )}
+ </Grid>
+ </Toolbar>