Merge branch '15557-rerun-workflow' into main. Closes #15557
[arvados.git] / src / components / data-explorer / data-explorer.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button } from '@material-ui/core';
7 import { ColumnSelector } from "components/column-selector/column-selector";
8 import { DataTable, DataColumns, DataTableFetchMode } from "components/data-table/data-table";
9 import { DataColumn } from "components/data-table/data-column";
10 import { SearchInput } from 'components/search-input/search-input';
11 import { ArvadosTheme } from "common/custom-theme";
12 import { createTree } from 'models/tree';
13 import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
14 import {
15     CloseIcon,
16     IconType,
17     MaximizeIcon,
18     UnMaximizeIcon,
19     MoreOptionsIcon
20 } from 'components/icon/icon';
21 import { PaperProps } from '@material-ui/core/Paper';
22 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
23
24 type CssRules = 'searchBox' | 'headerMenu' | "toolbar" | "footer" | "root" | 'moreOptionsButton' | 'title' | 'dataTable' | 'container';
25
26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
27     searchBox: {
28         paddingBottom: 0,
29     },
30     toolbar: {
31         paddingTop: 0,
32         paddingRight: theme.spacing.unit,
33     },
34     footer: {
35         overflow: 'auto'
36     },
37     root: {
38         height: '100%',
39     },
40     moreOptionsButton: {
41         padding: 0
42     },
43     title: {
44         display: 'inline-block',
45         paddingLeft: theme.spacing.unit * 2,
46         paddingTop: theme.spacing.unit * 2,
47         fontSize: '18px'
48     },
49     dataTable: {
50         height: '100%',
51         overflow: 'auto',
52     },
53     container: {
54         height: '100%',
55     },
56     headerMenu: {
57         float: 'right',
58         display: 'inline-block',
59     }
60 });
61
62 interface DataExplorerDataProps<T> {
63     fetchMode: DataTableFetchMode;
64     items: T[];
65     itemsAvailable: number;
66     columns: DataColumns<T>;
67     searchLabel?: string;
68     searchValue: string;
69     rowsPerPage: number;
70     rowsPerPageOptions: number[];
71     page: number;
72     contextMenuColumn: boolean;
73     defaultViewIcon?: IconType;
74     defaultViewMessages?: string[];
75     working?: boolean;
76     currentRefresh?: string;
77     currentRoute?: string;
78     hideColumnSelector?: boolean;
79     paperProps?: PaperProps;
80     actions?: React.ReactNode;
81     hideSearchInput?: boolean;
82     title?: React.ReactNode;
83     paperKey?: string;
84     currentItemUuid: string;
85     elementPath?: string;
86 }
87
88 interface DataExplorerActionProps<T> {
89     onSetColumns: (columns: DataColumns<T>) => void;
90     onSearch: (value: string) => void;
91     onRowClick: (item: T) => void;
92     onRowDoubleClick: (item: T) => void;
93     onColumnToggle: (column: DataColumn<T>) => void;
94     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
95     onSortToggle: (column: DataColumn<T>) => void;
96     onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
97     onChangePage: (page: number) => void;
98     onChangeRowsPerPage: (rowsPerPage: number) => void;
99     onLoadMore: (page: number) => void;
100     extractKey?: (item: T) => React.Key;
101 }
102
103 type DataExplorerProps<T> = DataExplorerDataProps<T> &
104     DataExplorerActionProps<T> & WithStyles<CssRules> & MPVPanelProps;
105
106 export const DataExplorer = withStyles(styles)(
107     class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
108         state = {
109             showLoading: false,
110             prevRefresh: '',
111             prevRoute: '',
112         };
113
114         componentDidUpdate(prevProps: DataExplorerProps<T>) {
115             const currentRefresh = this.props.currentRefresh || '';
116             const currentRoute = this.props.currentRoute || '';
117
118             if (currentRoute !== this.state.prevRoute) {
119                 // Component already mounted, but the user comes from a route change,
120                 // like browsing through a project hierarchy.
121                 this.setState({
122                     showLoading: this.props.working,
123                     prevRoute: currentRoute,
124                 });
125             }
126
127             if (currentRefresh !== this.state.prevRefresh) {
128                 // Component already mounted, but the user just clicked the
129                 // refresh button.
130                 this.setState({
131                     showLoading: this.props.working,
132                     prevRefresh: currentRefresh,
133                 });
134             }
135             if (this.state.showLoading && !this.props.working) {
136                 this.setState({
137                     showLoading: false,
138                 });
139             }
140         }
141
142         componentDidMount() {
143             if (this.props.onSetColumns) {
144                 this.props.onSetColumns(this.props.columns);
145             }
146             // Component just mounted, so we need to show the loading indicator.
147             this.setState({
148                 showLoading: this.props.working,
149                 prevRefresh: this.props.currentRefresh || '',
150                 prevRoute: this.props.currentRoute || '',
151             });
152         }
153
154         render() {
155             const {
156                 columns, onContextMenu, onFiltersChange, onSortToggle, extractKey,
157                 rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch,
158                 items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
159                 defaultViewIcon, defaultViewMessages, hideColumnSelector, actions, paperProps, hideSearchInput,
160                 paperKey, fetchMode, currentItemUuid, title,
161                 doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName, panelMaximized, elementPath
162             } = this.props;
163             return <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={this.props["data-cy"]}>
164                 <Grid container direction="column" wrap="nowrap" className={classes.container}>
165                     <div>
166                         {title && <Grid item xs className={classes.title}>{title}</Grid>}
167                         {
168                             (!hideColumnSelector || !hideSearchInput || !!actions) &&
169                             <Grid className={classes.headerMenu} item xs>
170                                 <Toolbar className={classes.toolbar}>
171                                     {!hideSearchInput && <div className={classes.searchBox}>
172                                         {!hideSearchInput && <SearchInput
173                                             label={searchLabel}
174                                             value={searchValue}
175                                             selfClearProp={''}
176                                             onSearch={onSearch} />}
177                                     </div>}
178                                     {actions}
179                                     {!hideColumnSelector && <ColumnSelector
180                                         columns={columns}
181                                         onColumnToggle={onColumnToggle} />}
182                                     { doUnMaximizePanel && panelMaximized &&
183                                     <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
184                                         <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
185                                     </Tooltip> }
186                                     { doMaximizePanel && !panelMaximized &&
187                                         <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
188                                             <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
189                                         </Tooltip> }
190                                     { doHidePanel &&
191                                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
192                                             <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
193                                         </Tooltip> }
194                                 </Toolbar>
195                             </Grid>
196                         }
197                     </div>
198                 <Grid item xs="auto" className={classes.dataTable}><DataTable
199                     columns={this.props.contextMenuColumn ? [...columns, this.contextMenuColumn] : columns}
200                     items={items}
201                     onRowClick={(_, item: T) => onRowClick(item)}
202                     onContextMenu={onContextMenu}
203                     onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)}
204                     onFiltersChange={onFiltersChange}
205                     onSortToggle={onSortToggle}
206                     extractKey={extractKey}
207                     working={this.state.showLoading}
208                     defaultViewIcon={defaultViewIcon}
209                     defaultViewMessages={defaultViewMessages}
210                     currentItemUuid={currentItemUuid}
211                     currentRoute={paperKey} /></Grid>
212                 <Grid item xs><Toolbar className={classes.footer}>
213                     {
214                         elementPath &&
215                         <Grid container>
216                             <span data-cy="element-path">
217                                 {elementPath}
218                             </span>
219                         </Grid>
220                     }
221                     <Grid container={!elementPath} justify="flex-end">
222                         {fetchMode === DataTableFetchMode.PAGINATED ? <TablePagination
223                             count={itemsAvailable}
224                             rowsPerPage={rowsPerPage}
225                             rowsPerPageOptions={rowsPerPageOptions}
226                             page={this.props.page}
227                             onChangePage={this.changePage}
228                             onChangeRowsPerPage={this.changeRowsPerPage}
229                             // Disable next button on empty lists since that's not default behavior
230                             nextIconButtonProps={(itemsAvailable > 0) ? {} : {disabled: true}}
231                             component="div" /> : <Button
232                                 variant="text"
233                                 size="medium"
234                                 onClick={this.loadMore}
235                             >Load more</Button>}
236                     </Grid>
237                 </Toolbar></Grid>
238                 </Grid>
239             </Paper>;
240         }
241
242         changePage = (event: React.MouseEvent<HTMLButtonElement>, page: number) => {
243             this.props.onChangePage(page);
244         }
245
246         changeRowsPerPage: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> = (event) => {
247             this.props.onChangeRowsPerPage(parseInt(event.target.value, 10));
248         }
249
250         loadMore = () => {
251             this.props.onLoadMore(this.props.page + 1);
252         }
253
254         renderContextMenuTrigger = (item: T) =>
255             <Grid container justify="center">
256                 <Tooltip title="More options" disableFocusListener>
257                     <IconButton className={this.props.classes.moreOptionsButton} onClick={event => this.props.onContextMenu(event, item)}>
258                         <MoreOptionsIcon />
259                     </IconButton>
260                 </Tooltip>
261             </Grid>
262
263         contextMenuColumn: DataColumn<any> = {
264             name: "Actions",
265             selected: true,
266             configurable: false,
267             filters: createTree(),
268             key: "context-actions",
269             render: this.renderContextMenuTrigger
270         };
271     }
272 );