1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { FavoritePanelItem } from './favorite-panel-item';
7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
8 import { DataExplorer } from "../../views-components/data-explorer/data-explorer";
9 import { DispatchProp, connect } from 'react-redux';
10 import { DataColumns } from '../../components/data-table/data-table';
11 import { RouteComponentProps } from 'react-router';
12 import { RootState } from '../../store/store';
13 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
14 import { ContainerRequestState } from '../../models/container-request';
15 import { SortDirection } from '../../components/data-table/data-column';
16 import { ResourceKind } from '../../models/resource';
17 import { resourceLabel } from '../../common/labels';
18 import { ArvadosTheme } from '../../common/custom-theme';
19 import { renderName, renderStatus, renderType, renderOwner, renderFileSize, renderDate } from '../../views-components/data-explorer/renderers';
20 import { FAVORITE_PANEL_ID } from "../../store/favorite-panel/favorite-panel-action";
22 type CssRules = "toolbar" | "button";
24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
26 paddingBottom: theme.spacing.unit * 3,
30 marginLeft: theme.spacing.unit
34 export enum FavoritePanelColumnNames {
39 FILE_SIZE = "File size",
40 LAST_MODIFIED = "Last modified"
43 export interface FavoritePanelFilter extends DataTableFilterItem {
44 type: ResourceKind | ContainerRequestState;
47 export const columns: DataColumns<FavoritePanelItem, FavoritePanelFilter> = [
49 name: FavoritePanelColumnNames.NAME,
52 sortDirection: SortDirection.ASC,
62 name: ContainerRequestState.COMMITTED,
64 type: ContainerRequestState.COMMITTED
67 name: ContainerRequestState.FINAL,
69 type: ContainerRequestState.FINAL
72 name: ContainerRequestState.UNCOMMITTED,
74 type: ContainerRequestState.UNCOMMITTED
81 name: FavoritePanelColumnNames.TYPE,
86 name: resourceLabel(ResourceKind.COLLECTION),
88 type: ResourceKind.COLLECTION
91 name: resourceLabel(ResourceKind.PROCESS),
93 type: ResourceKind.PROCESS
96 name: resourceLabel(ResourceKind.PROJECT),
98 type: ResourceKind.PROJECT
101 render: item => renderType(item.kind),
105 name: FavoritePanelColumnNames.OWNER,
108 render: item => renderOwner(item.owner),
112 name: FavoritePanelColumnNames.FILE_SIZE,
115 render: item => renderFileSize(item.fileSize),
119 name: FavoritePanelColumnNames.LAST_MODIFIED,
122 sortDirection: SortDirection.NONE,
123 render: item => renderDate(item.lastModified),
128 interface FavoritePanelDataProps {
129 currentItemId: string;
132 interface FavoritePanelActionProps {
133 onItemClick: (item: FavoritePanelItem) => void;
134 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: FavoritePanelItem) => void;
135 onDialogOpen: (ownerUuid: string) => void;
136 onItemDoubleClick: (item: FavoritePanelItem) => void;
137 onItemRouteChange: (itemId: string) => void;
140 type FavoritePanelProps = FavoritePanelDataProps & FavoritePanelActionProps & DispatchProp
141 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
143 export const FavoritePanel = withStyles(styles)(
144 connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
145 class extends React.Component<FavoritePanelProps> {
148 id={FAVORITE_PANEL_ID}
150 onRowClick={this.props.onItemClick}
151 onRowDoubleClick={this.props.onItemDoubleClick}
152 onContextMenu={this.props.onContextMenu}
153 extractKey={(item: FavoritePanelItem) => item.uuid} />
157 componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: FavoritePanelProps) {
158 if (match.params.id !== currentItemId) {
159 onItemRouteChange(match.params.id);