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 * as 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         // sortDirection: SortDirection.NONE,
  41         filters: createTree(),
  42         render: uuid => <ResourceLinkClass uuid={uuid} />
  43     },
  44     {
  45         name: LinkPanelColumnNames.TAIL,
  46         selected: true,
  47         configurable: true,
  48         // sortDirection: SortDirection.NONE,
  49         filters: createTree(),
  50         render: uuid => <ResourceLinkTail uuid={uuid} />
  51     },
  52     {
  53         name: LinkPanelColumnNames.HEAD,
  54         selected: true,
  55         configurable: true,
  56         // sortDirection: SortDirection.NONE,
  57         filters: createTree(),
  58         render: uuid => <ResourceLinkHead uuid={uuid} />
  59     },
  60     {
  61         name: LinkPanelColumnNames.UUID,
  62         selected: true,
  63         configurable: true,
  64         // sortDirection: SortDirection.NONE,
  65         filters: createTree(),
  66         render: uuid => <ResourceLinkUuid uuid={uuid} />
  67     }
  68 ];
  69
  70 export interface LinkPanelDataProps {
  71     resources: ResourcesState;
  72 }
  73
  74 export interface LinkPanelActionProps {
  75     onItemClick: (item: string) => void;
  76     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
  77     onItemDoubleClick: (item: string) => void;
  78 }
  79
  80 export type LinkPanelProps = LinkPanelDataProps & LinkPanelActionProps;
  81
  82 export const LinkPanelRoot = (props: LinkPanelProps) => {
  83     return <DataExplorer
  84         id={LINK_PANEL_ID}
  85         onRowClick={props.onItemClick}
  86         onRowDoubleClick={props.onItemDoubleClick}
  87         onContextMenu={props.onContextMenu}
  88         contextMenuColumn={true}
  89         hideColumnSelector
  90         hideSearchInput
  91         dataTableDefaultView={
  92             <DataTableDefaultView
  93                 icon={ShareMeIcon}
  94                 messages={['Your link list is empty.']} />
  95         }/>;
  96 };