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