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