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