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