src/views/collection-content-address-panel/collection-content-address-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 { Link } from 'react-router-dom';
   7 import {
   8     StyleRulesCallback, WithStyles, withStyles, Grid
   9 } from '@material-ui/core';
  10 import { CollectionIcon } from '~/components/icon/icon';
  11 import { ArvadosTheme } from '~/common/custom-theme';
  12 import { BackIcon } from '~/components/icon/icon';
  13 import { CollectionResource } from '~/models/collection';
  14 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
  15 import { COLLECTIONS_CONTENT_ADDRESS_PANEL_ID } from '~/store/collections-content-address-panel/collections-content-address-panel-actions';
  16 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
  17 import { Dispatch } from 'redux';
  18 import { getIsAdmin } from '~/store/public-favorites/public-favorites-actions';
  19 import { resourceKindToContextMenuKind, openContextMenu } from '~/store/context-menu/context-menu-actions';
  20 import { ResourceKind } from '~/models/resource';
  21 import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
  22 import { connect, DispatchProp } from 'react-redux';
  23 import { navigateTo } from '~/store/navigation/navigation-action';
  24
  25 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
  26
  27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     backLink: {
  29         fontSize: '1rem',
  30         fontWeight: 600,
  31         display: 'flex',
  32         alignItems: 'center',
  33         textDecoration: 'none',
  34         padding: theme.spacing.unit,
  35         color: theme.palette.grey["700"],
  36     },
  37     backIcon: {
  38         marginRight: theme.spacing.unit
  39     },
  40     card: {
  41         width: '100%'
  42     },
  43     title: {
  44         color: theme.palette.grey["700"]
  45     },
  46     iconHeader: {
  47         fontSize: '1.875rem',
  48         color: theme.customs.colors.green700
  49     },
  50     link: {
  51         fontSize: '0.875rem',
  52         color: theme.palette.primary.main,
  53         textAlign: 'right',
  54         '&:hover': {
  55             cursor: 'pointer'
  56         }
  57     }
  58 });
  59
  60
  61 export interface CollectionContentAddressMainCardActionProps {
  62     onContextMenu: (event: React.MouseEvent<any>, uuid: string) => void;
  63     onItemClick: (item: string) => void;
  64     onItemDoubleClick: (item: string) => void;
  65 }
  66
  67 const mapDispatchToProps = (dispatch: Dispatch): CollectionContentAddressMainCardActionProps => ({
  68     onContextMenu: (event, resourceUuid) => {
  69         const isAdmin = dispatch<any>(getIsAdmin());
  70         const kind = resourceKindToContextMenuKind(resourceUuid, isAdmin);
  71         if (kind) {
  72             dispatch<any>(openContextMenu(event, {
  73                 name: '',
  74                 uuid: resourceUuid,
  75                 ownerUuid: '',
  76                 kind: ResourceKind.NONE,
  77                 menuKind: kind
  78             }));
  79         }
  80         dispatch<any>(loadDetailsPanel(resourceUuid));
  81     },
  82     onItemClick: (uuid: string) => {
  83         dispatch<any>(loadDetailsPanel(uuid));
  84     },
  85     onItemDoubleClick: uuid => {
  86         dispatch<any>(navigateTo(uuid));
  87     }
  88 });
  89
  90 export const CollectionsContentAddressPanel = withStyles(styles)(
  91     connect(null, mapDispatchToProps)(
  92         class extends React.Component<CollectionContentAddressMainCardActionProps & WithStyles<CssRules>> {
  93             render() {
  94                 return <Grid item xs={12}>
  95                     {/* <Link to={`/collections/${this.props.collection.uuid}`} className={this.props.classes.backLink}>
  96                         <BackIcon className={this.props.classes.backIcon} />
  97                         Back test
  98                     </Link> */}
  99                     <DataExplorer
 100                         id={COLLECTIONS_CONTENT_ADDRESS_PANEL_ID}
 101                         onRowClick={this.props.onItemClick}
 102                         onRowDoubleClick={this.props.onItemDoubleClick}
 103                         onContextMenu={this.props.onContextMenu}
 104                         contextMenuColumn={true}
 105                         dataTableDefaultView={
 106                             <DataTableDefaultView
 107                                 icon={CollectionIcon}
 108                                 messages={['Collections with this content address not found.']} />
 109                         } />;
 110                     </Grid >;
 111             }
 112         }
 113     )
 114 );