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