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