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