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
  19 export enum LinkPanelColumnNames {
  20     NAME = "Name",
  21     LINK_CLASS = "Link Class",
  22     TAIL = "Tail",
  23     HEAD = 'Head',
  24     UUID = "UUID"
  25 }
  26
  27 export const linkPanelColumns: DataColumns<string> = [
  28     {
  29         name: LinkPanelColumnNames.NAME,
  30         selected: true,
  31         configurable: true,
  32         sortDirection: SortDirection.NONE,
  33         filters: createTree(),
  34         render: uuid => <ResourceLinkName uuid={uuid} />
  35     },
  36     {
  37         name: LinkPanelColumnNames.LINK_CLASS,
  38         selected: true,
  39         configurable: true,
  40         filters: createTree(),
  41         render: uuid => <ResourceLinkClass uuid={uuid} />
  42     },
  43     {
  44         name: LinkPanelColumnNames.TAIL,
  45         selected: true,
  46         configurable: true,
  47         filters: createTree(),
  48         render: uuid => <ResourceLinkTail uuid={uuid} />
  49     },
  50     {
  51         name: LinkPanelColumnNames.HEAD,
  52         selected: true,
  53         configurable: true,
  54         filters: createTree(),
  55         render: uuid => <ResourceLinkHead uuid={uuid} />
  56     },
  57     {
  58         name: LinkPanelColumnNames.UUID,
  59         selected: true,
  60         configurable: true,
  61         filters: createTree(),
  62         render: uuid => <ResourceLinkUuid uuid={uuid} />
  63     }
  64 ];
  65
  66 export interface LinkPanelRootDataProps {
  67     resources: ResourcesState;
  68 }
  69
  70 export interface LinkPanelRootActionProps {
  71     onItemClick: (item: string) => void;
  72     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
  73     onItemDoubleClick: (item: string) => void;
  74 }
  75
  76 export type LinkPanelRootProps = LinkPanelRootDataProps & LinkPanelRootActionProps;
  77
  78 export const LinkPanelRoot = (props: LinkPanelRootProps) => {
  79     return <DataExplorer
  80         id={LINK_PANEL_ID}
  81         onRowClick={props.onItemClick}
  82         onRowDoubleClick={props.onItemDoubleClick}
  83         onContextMenu={props.onContextMenu}
  84         contextMenuColumn={true}
  85         hideColumnSelector
  86         hideSearchInput
  87         dataTableDefaultView={
  88             <DataTableDefaultView
  89                 icon={ShareMeIcon}
  90                 messages={['Your link list is empty.']} />
  91         }/>;
  92 };