src/views/link-panel/link-panel-root.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 { LINK_PANEL_ID } from 'store/link-panel/link-panel-actions';
   7 import { DataExplorer } from 'views-components/data-explorer/data-explorer';
   8 import { SortDirection } from 'components/data-table/data-column';
   9 import { DataColumns } from 'components/data-table/data-table';
  10 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
  11 import { ResourcesState } from 'store/resources/resources';
  12 import { ShareMeIcon } from 'components/icon/icon';
  13 import { createTree } from 'models/tree';
  14 import {
  15     ResourceLinkUuid, ResourceLinkHead, ResourceLinkTail,
  16     ResourceLinkClass, ResourceLinkName }
  17 from 'views-components/data-explorer/renderers';
  18 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
  19 import { ArvadosTheme } from 'common/custom-theme';
  20
  21 type CssRules = "root";
  22
  23 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  24     root: {
  25         width: '100%',
  26     }
  27 });
  28
  29 export enum LinkPanelColumnNames {
  30     NAME = "Name",
  31     LINK_CLASS = "Link Class",
  32     TAIL = "Tail",
  33     HEAD = 'Head',
  34     UUID = "UUID"
  35 }
  36
  37 export const linkPanelColumns: DataColumns<string> = [
  38     {
  39         name: LinkPanelColumnNames.NAME,
  40         selected: true,
  41         configurable: true,
  42         sortDirection: SortDirection.NONE,
  43         filters: createTree(),
  44         render: uuid => <ResourceLinkName uuid={uuid} />
  45     },
  46     {
  47         name: LinkPanelColumnNames.LINK_CLASS,
  48         selected: true,
  49         configurable: true,
  50         filters: createTree(),
  51         render: uuid => <ResourceLinkClass uuid={uuid} />
  52     },
  53     {
  54         name: LinkPanelColumnNames.TAIL,
  55         selected: true,
  56         configurable: true,
  57         filters: createTree(),
  58         render: uuid => <ResourceLinkTail uuid={uuid} />
  59     },
  60     {
  61         name: LinkPanelColumnNames.HEAD,
  62         selected: true,
  63         configurable: true,
  64         filters: createTree(),
  65         render: uuid => <ResourceLinkHead uuid={uuid} />
  66     },
  67     {
  68         name: LinkPanelColumnNames.UUID,
  69         selected: true,
  70         configurable: true,
  71         filters: createTree(),
  72         render: uuid => <ResourceLinkUuid uuid={uuid} />
  73     }
  74 ];
  75
  76 export interface LinkPanelRootDataProps {
  77     resources: ResourcesState;
  78 }
  79
  80 export interface LinkPanelRootActionProps {
  81     onItemClick: (item: string) => void;
  82     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
  83     onItemDoubleClick: (item: string) => void;
  84 }
  85
  86 export type LinkPanelRootProps = LinkPanelRootDataProps & LinkPanelRootActionProps & WithStyles<CssRules>;
  87
  88 export const LinkPanelRoot = withStyles(styles)((props: LinkPanelRootProps) => {
  89     return <div className={props.classes.root}><DataExplorer
  90         id={LINK_PANEL_ID}
  91         onRowClick={props.onItemClick}
  92         onRowDoubleClick={props.onItemDoubleClick}
  93         onContextMenu={props.onContextMenu}
  94         contextMenuColumn={true}
  95         hideColumnSelector
  96         hideSearchInput
  97         dataTableDefaultView={
  98             <DataTableDefaultView
  99                 icon={ShareMeIcon}
 100                 messages={['Your link list is empty.']} />
 101         }/></div>;
 102 });