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