src/views/favorite-panel/favorite-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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";
  21
  22 type CssRules = "toolbar" | "button";
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     toolbar: {
  26         paddingBottom: theme.spacing.unit * 3,
  27         textAlign: "right"
  28     },
  29     button: {
  30         marginLeft: theme.spacing.unit
  31     },
  32 });
  33
  34 export enum FavoritePanelColumnNames {
  35     NAME = "Name",
  36     STATUS = "Status",
  37     TYPE = "Type",
  38     OWNER = "Owner",
  39     FILE_SIZE = "File size",
  40     LAST_MODIFIED = "Last modified"
  41 }
  42
  43 export interface FavoritePanelFilter extends DataTableFilterItem {
  44     type: ResourceKind | ContainerRequestState;
  45 }
  46
  47 export const columns: DataColumns<FavoritePanelItem, FavoritePanelFilter> = [
  48     {
  49         name: FavoritePanelColumnNames.NAME,
  50         selected: true,
  51         sortDirection: SortDirection.ASC,
  52         render: renderName,
  53         width: "450px"
  54     },
  55     {
  56         name: "Status",
  57         selected: true,
  58         filters: [
  59             {
  60                 name: ContainerRequestState.COMMITTED,
  61                 selected: true,
  62                 type: ContainerRequestState.COMMITTED
  63             },
  64             {
  65                 name: ContainerRequestState.FINAL,
  66                 selected: true,
  67                 type: ContainerRequestState.FINAL
  68             },
  69             {
  70                 name: ContainerRequestState.UNCOMMITTED,
  71                 selected: true,
  72                 type: ContainerRequestState.UNCOMMITTED
  73             }
  74         ],
  75         render: renderStatus,
  76         width: "75px"
  77     },
  78     {
  79         name: FavoritePanelColumnNames.TYPE,
  80         selected: true,
  81         filters: [
  82             {
  83                 name: resourceLabel(ResourceKind.COLLECTION),
  84                 selected: true,
  85                 type: ResourceKind.COLLECTION
  86             },
  87             {
  88                 name: resourceLabel(ResourceKind.PROCESS),
  89                 selected: true,
  90                 type: ResourceKind.PROCESS
  91             },
  92             {
  93                 name: resourceLabel(ResourceKind.PROJECT),
  94                 selected: true,
  95                 type: ResourceKind.PROJECT
  96             }
  97         ],
  98         render: item => renderType(item.kind),
  99         width: "125px"
 100     },
 101     {
 102         name: FavoritePanelColumnNames.OWNER,
 103         selected: true,
 104         render: item => renderOwner(item.owner),
 105         width: "200px"
 106     },
 107     {
 108         name: FavoritePanelColumnNames.FILE_SIZE,
 109         selected: true,
 110         render: item => renderFileSize(item.fileSize),
 111         width: "50px"
 112     },
 113     {
 114         name: FavoritePanelColumnNames.LAST_MODIFIED,
 115         selected: true,
 116         sortDirection: SortDirection.NONE,
 117         render: item => renderDate(item.lastModified),
 118         width: "150px"
 119     }
 120 ];
 121
 122 interface FavoritePanelDataProps {
 123     currentItemId: string;
 124 }
 125
 126 interface FavoritePanelActionProps {
 127     onItemClick: (item: FavoritePanelItem) => void;
 128     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: FavoritePanelItem) => void;
 129     onDialogOpen: (ownerUuid: string) => void;
 130     onItemDoubleClick: (item: FavoritePanelItem) => void;
 131     onItemRouteChange: (itemId: string) => void;
 132 }
 133
 134 type FavoritePanelProps = FavoritePanelDataProps & FavoritePanelActionProps & DispatchProp
 135                         & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 136
 137 export const FavoritePanel = withStyles(styles)(
 138     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 139         class extends React.Component<FavoritePanelProps> {
 140             render() {
 141                 return <DataExplorer
 142                     id={FAVORITE_PANEL_ID}
 143                     onRowClick={this.props.onItemClick}
 144                     onRowDoubleClick={this.props.onItemDoubleClick}
 145                     onContextMenu={this.props.onContextMenu}
 146                     extractKey={(item: FavoritePanelItem) => item.uuid} />
 147                 ;
 148             }
 149
 150             componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: FavoritePanelProps) {
 151                 if (match.params.id !== currentItemId) {
 152                     onItemRouteChange(match.params.id);
 153                 }
 154             }
 155         }
 156     )
 157 );