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