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 { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   7 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
   8 import { DispatchProp, connect } from 'react-redux';
   9 import { DataColumns } from '~/components/data-table/data-table';
  10 import { RouteComponentProps } from 'react-router';
  11 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
  12 import { SortDirection } from '~/components/data-table/data-column';
  13 import { ResourceKind } from '~/models/resource';
  14 import { resourceLabel } from '~/common/labels';
  15 import { ArvadosTheme } from '~/common/custom-theme';
  16 import { FAVORITE_PANEL_ID } from "~/store/favorite-panel/favorite-panel-action";
  17 import { ResourceFileSize, ResourceLastModifiedDate, ProcessStatus, ResourceType, ResourceOwner, ResourceName } from '~/views-components/data-explorer/renderers';
  18 import { FavoriteIcon } from '~/components/icon/icon';
  19 import { Dispatch } from 'redux';
  20 import { openContextMenu, resourceKindToContextMenuKind } from '~/store/context-menu/context-menu-actions';
  21 import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
  22 import { navigateTo } from '~/store/navigation/navigation-action';
  23 import { ContainerRequestState } from "~/models/container-request";
  24
  25 type CssRules = "toolbar" | "button";
  26
  27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     toolbar: {
  29         paddingBottom: theme.spacing.unit * 3,
  30         textAlign: "right"
  31     },
  32     button: {
  33         marginLeft: theme.spacing.unit
  34     },
  35 });
  36
  37 export enum FavoritePanelColumnNames {
  38     NAME = "Name",
  39     STATUS = "Status",
  40     TYPE = "Type",
  41     OWNER = "Owner",
  42     FILE_SIZE = "File size",
  43     LAST_MODIFIED = "Last modified"
  44 }
  45
  46 export interface FavoritePanelFilter extends DataTableFilterItem {
  47     type: ResourceKind | ContainerRequestState;
  48 }
  49
  50 export const favoritePanelColumns: DataColumns<string, FavoritePanelFilter> = [
  51     {
  52         name: FavoritePanelColumnNames.NAME,
  53         selected: true,
  54         configurable: true,
  55         sortDirection: SortDirection.ASC,
  56         filters: [],
  57         render: uuid => <ResourceName uuid={uuid} />,
  58         width: "450px"
  59     },
  60     {
  61         name: "Status",
  62         selected: true,
  63         configurable: true,
  64         sortDirection: SortDirection.NONE,
  65         filters: [
  66             {
  67                 name: ContainerRequestState.COMMITTED,
  68                 selected: true,
  69                 type: ContainerRequestState.COMMITTED
  70             },
  71             {
  72                 name: ContainerRequestState.FINAL,
  73                 selected: true,
  74                 type: ContainerRequestState.FINAL
  75             },
  76             {
  77                 name: ContainerRequestState.UNCOMMITTED,
  78                 selected: true,
  79                 type: ContainerRequestState.UNCOMMITTED
  80             }
  81         ],
  82         render: uuid => <ProcessStatus uuid={uuid} />,
  83         width: "75px"
  84     },
  85     {
  86         name: FavoritePanelColumnNames.TYPE,
  87         selected: true,
  88         configurable: true,
  89         sortDirection: SortDirection.NONE,
  90         filters: [
  91             {
  92                 name: resourceLabel(ResourceKind.COLLECTION),
  93                 selected: true,
  94                 type: ResourceKind.COLLECTION
  95             },
  96             {
  97                 name: resourceLabel(ResourceKind.PROCESS),
  98                 selected: true,
  99                 type: ResourceKind.PROCESS
 100             },
 101             {
 102                 name: resourceLabel(ResourceKind.PROJECT),
 103                 selected: true,
 104                 type: ResourceKind.PROJECT
 105             }
 106         ],
 107         render: uuid => <ResourceType uuid={uuid} />,
 108         width: "125px"
 109     },
 110     {
 111         name: FavoritePanelColumnNames.OWNER,
 112         selected: true,
 113         configurable: true,
 114         sortDirection: SortDirection.NONE,
 115         filters: [],
 116         render: uuid => <ResourceOwner uuid={uuid} />,
 117         width: "200px"
 118     },
 119     {
 120         name: FavoritePanelColumnNames.FILE_SIZE,
 121         selected: true,
 122         configurable: true,
 123         sortDirection: SortDirection.NONE,
 124         filters: [],
 125         render: uuid => <ResourceFileSize uuid={uuid} />,
 126         width: "50px"
 127     },
 128     {
 129         name: FavoritePanelColumnNames.LAST_MODIFIED,
 130         selected: true,
 131         configurable: true,
 132         sortDirection: SortDirection.NONE,
 133         filters: [],
 134         render: uuid => <ResourceLastModifiedDate uuid={uuid} />,
 135         width: "150px"
 136     }
 137 ];
 138
 139 interface FavoritePanelDataProps {
 140     currentItemId: string;
 141 }
 142
 143 interface FavoritePanelActionProps {
 144     onItemClick: (item: string) => void;
 145     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
 146     onDialogOpen: (ownerUuid: string) => void;
 147     onItemDoubleClick: (item: string) => void;
 148 }
 149
 150 const mapDispatchToProps = (dispatch: Dispatch): FavoritePanelActionProps => ({
 151     onContextMenu: (event, resourceUuid) => {
 152         const kind = resourceKindToContextMenuKind(resourceUuid);
 153         if (kind) {
 154             dispatch<any>(openContextMenu(event, { name: '', uuid: resourceUuid, kind }));
 155         }
 156     },
 157     onDialogOpen: (ownerUuid: string) => { return; },
 158     onItemClick: (resourceUuid: string) => {
 159         dispatch<any>(loadDetailsPanel(resourceUuid));
 160     },
 161     onItemDoubleClick: uuid => {
 162         dispatch<any>(navigateTo(uuid));
 163     }
 164 });
 165
 166 type FavoritePanelProps = FavoritePanelDataProps & FavoritePanelActionProps & DispatchProp
 167     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 168
 169 export const FavoritePanel = withStyles(styles)(
 170     connect(undefined, mapDispatchToProps)(
 171         class extends React.Component<FavoritePanelProps> {
 172             render() {
 173                 return <DataExplorer
 174                     id={FAVORITE_PANEL_ID}
 175                     onRowClick={this.props.onItemClick}
 176                     onRowDoubleClick={this.props.onItemDoubleClick}
 177                     onContextMenu={this.props.onContextMenu}
 178                     defaultIcon={FavoriteIcon}
 179                     defaultMessages={['Your favorites list is empty.']} />;
 180             }
 181         }
 182     )
 183 );