Merge remote-tracking branch 'origin/main' into 17579-Clear-table-filter-when-changin...

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

diff --combined src/components/collection-panel-files/collection-panel-files.tsx
index 97ec3bf9e1e4a72a9a5d251fbf8e8cd55363613d,e33b7df0dc438100ac7e2f2f5eaaf75e840f9e6a..1ef6b5c94cdf117ea52a932c47a085957ce6c2d2
--- 1/src/components/collection-panel-files/collection-panel-files.tsx
--- 2/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@@ -48,7 -48,6 +48,6 @@@ const styles: StyleRulesCallback<CssRul
      wrapper: {
          display: 'flex',
          minHeight: '600px',
-         marginBottom: '1rem',
          color: 'rgba(0, 0, 0, 0.87)',
          fontSize: '0.875rem',
          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
@@@ -463,7 -462,7 +462,7 @@@ export const CollectionPanelFiles = wit
                          </IconButton>
                      </Tooltip>
                      <div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
 -                        <SearchInput label="Search" value={leftSearch} onSearch={setLeftSearch} />
 +                        <SearchInput selfClearProp={leftKey} label="Search" value={leftSearch} onSearch={setLeftSearch} />
                      </div>
                      <div className={classes.dataWrapper}>
                          {
@@@ -490,7 -489,7 +489,7 @@@
                                                          data-parent-path={name}
                                                          className={classNames(classes.row, getActiveClass(name))}
                                                          key={id}>
-                                                             {getItemIcon(type, getActiveClass(name))} 
+                                                             {getItemIcon(type, getActiveClass(name))}
                                                              <div className={classes.rowName}>
                                                                  {name}
                                                              </div>
@@@ -510,7 -509,7 +509,7 @@@
                  </div>
                  <div className={classes.rightPanel}>
                      <div className={classes.searchWrapper}>
 -                        <SearchInput label="Search" value={rightSearch} onSearch={setRightSearch} />
 +                        <SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
                      </div>
                      {
                          isWritable &&

diff --combined src/components/data-explorer/data-explorer.tsx
index 78aae35051a078e1f80aa9e580af5c79a24f8422,d3d26708dfe7124441752cebf5c12ee2f0b4dca8..05125f12c7311b8a4fe700a7dd61923ce6e682c8
--- 1/src/components/data-explorer/data-explorer.tsx
--- 2/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@@ -11,17 -11,19 +11,19 @@@ import { SearchInput } from 'components
  import { ArvadosTheme } from "common/custom-theme";
  import { createTree } from 'models/tree';
  import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
- import { MoreOptionsIcon } from 'components/icon/icon';
+ import { CloseIcon, MaximizeIcon, MoreOptionsIcon } from 'components/icon/icon';
  import { PaperProps } from '@material-ui/core/Paper';
+ import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  
- type CssRules = 'searchBox' | "toolbar" | "toolbarUnderTitle" | "footer" | "root" | 'moreOptionsButton' | 'title';
+ type CssRules = 'searchBox' | "toolbar" | "toolbarUnderTitle" | "footer" | "root" | 'moreOptionsButton' | 'title' | 'dataTable' | 'container';
  
  const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
      searchBox: {
          paddingBottom: theme.spacing.unit * 2
      },
      toolbar: {
-         paddingTop: theme.spacing.unit * 2
+         paddingTop: theme.spacing.unit,
+         paddingRight: theme.spacing.unit * 2,
      },
      toolbarUnderTitle: {
          paddingTop: 0
@@@ -30,7 -32,7 +32,7 @@@
          overflow: 'auto'
      },
      root: {
-         height: '100%'
+         height: '100%',
      },
      moreOptionsButton: {
          padding: 0
@@@ -39,7 -41,14 +41,14 @@@
          paddingLeft: theme.spacing.unit * 3,
          paddingTop: theme.spacing.unit * 3,
          fontSize: '18px'
-     }
+     },
+     dataTable: {
+         height: '100%',
+         overflow: 'auto',
+     },
+     container: {
+         height: '100%',
+     },
  });
  
  interface DataExplorerDataProps<T> {
@@@ -79,35 -88,34 +88,38 @@@ interface DataExplorerActionProps<T> 
      extractKey?: (item: T) => React.Key;
  }
  
- type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules>;
+ type DataExplorerProps<T> = DataExplorerDataProps<T> &
+     DataExplorerActionProps<T> & WithStyles<CssRules> & MPVPanelProps;
  
  export const DataExplorer = withStyles(styles)(
      class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
 +
          componentDidMount() {
              if (this.props.onSetColumns) {
                  this.props.onSetColumns(this.props.columns);
              }
          }
 +
          render() {
              const {
                  columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey,
                  rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch,
                  items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
                  dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
-                 paperKey, fetchMode, currentItemUuid, title
+                 paperKey, fetchMode, currentItemUuid, title,
+                 doHidePanel, doMaximizePanel, panelName, panelMaximized
              } = this.props;
 +
              return <Paper className={classes.root} {...paperProps} key={paperKey}>
-                 {title && <div className={classes.title}>{title}</div>}
-                 {(!hideColumnSelector || !hideSearchInput) && <Toolbar className={title ? classes.toolbarUnderTitle : classes.toolbar}>
+                 <Grid container direction="column" wrap="nowrap" className={classes.container}>
+                 {title && <Grid item xs className={classes.title}>{title}</Grid>}
+                 {(!hideColumnSelector || !hideSearchInput) && <Grid item xs><Toolbar className={title ? classes.toolbarUnderTitle : classes.toolbar}>
                      <Grid container justify="space-between" wrap="nowrap" alignItems="center">
                          <div className={classes.searchBox}>
                              {!hideSearchInput && <SearchInput
                                  label={searchLabel}
                                  value={searchValue}
 +                                selfClearProp={currentItemUuid}
                                  onSearch={onSearch} />}
                          </div>
                          {actions}
@@@ -115,8 -123,16 +127,16 @@@
                              columns={columns}
                              onColumnToggle={onColumnToggle} />}
                      </Grid>
-                 </Toolbar>}
-                 <DataTable
+                     { doMaximizePanel && !panelMaximized &&
+                         <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
+                             <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
+                         </Tooltip> }
+                     { doHidePanel &&
+                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
+                         </Tooltip> }
+                 </Toolbar></Grid>}
+                 <Grid item xs="auto" className={classes.dataTable}><DataTable
                      columns={this.props.contextMenuColumn ? [...columns, this.contextMenuColumn] : columns}
                      items={items}
                      onRowClick={(_, item: T) => onRowClick(item)}
@@@ -128,8 -144,8 +148,8 @@@
                      working={working}
                      defaultView={dataTableDefaultView}
                      currentItemUuid={currentItemUuid}
-                     currentRoute={paperKey} />
-                 <Toolbar className={classes.footer}>
+                     currentRoute={paperKey} /></Grid>
+                 <Grid item xs><Toolbar className={classes.footer}>
                      <Grid container justify="flex-end">
                          {fetchMode === DataTableFetchMode.PAGINATED ? <TablePagination
                              count={itemsAvailable}
@@@ -146,7 -162,8 +166,8 @@@
                                  onClick={this.loadMore}
                              >Load more</Button>}
                      </Grid>
-                 </Toolbar>
+                 </Toolbar></Grid>
+                 </Grid>
              </Paper>;
          }