Handle opening collection detail panel on click on collection panel title
[arvados-workbench2.git] / src / views / workflow-panel / workflow-panel-view.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 { DataExplorer } from "~/views-components/data-explorer/data-explorer";
7 import { WorkflowIcon } from '~/components/icon/icon';
8 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
9 import { WORKFLOW_PANEL_ID } from '~/store/workflow-panel/workflow-panel-actions';
10 import {
11     ResourceLastModifiedDate,
12     RosurceWorkflowName,
13     ResourceWorkflowStatus,
14     ResourceShare,
15     ResourceRunProcess
16 } from "~/views-components/data-explorer/renderers";
17 import { SortDirection } from '~/components/data-table/data-column';
18 import { DataColumns } from '~/components/data-table/data-table';
19 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
20 import { Grid, Paper } from '@material-ui/core';
21 import { WorkflowDetailsCard } from './workflow-description-card';
22 import { WorkflowResource } from '~/models/workflow';
23 import { createTree } from '~/models/tree';
24
25 export enum WorkflowPanelColumnNames {
26     NAME = "Name",
27     AUTHORISATION = "Authorisation",
28     LAST_MODIFIED = "Last modified",
29     SHARE = 'Share'
30 }
31
32 export interface WorkflowPanelFilter extends DataTableFilterItem {
33     type: ResourceStatus;
34 }
35
36 export interface WorkflowPanelDataProps {
37     workflow?: WorkflowResource;
38 }
39
40 export interface WorfklowPanelActionProps {
41     handleRowDoubleClick: (workflowUuid: string) => void;
42     handleRowClick: (workflowUuid: string) => void;
43 }
44
45 export type WorkflowPanelProps = WorkflowPanelDataProps & WorfklowPanelActionProps;
46
47 export enum ResourceStatus {
48     PUBLIC = "Public",
49     PRIVATE = "Private",
50     SHARED = "Shared"
51 }
52
53 const resourceStatus = (type: string) => {
54     switch (type) {
55         case ResourceStatus.PUBLIC:
56             return "Public";
57         case ResourceStatus.PRIVATE:
58             return "Private";
59         case ResourceStatus.SHARED:
60             return "Shared";
61         default:
62             return "Unknown";
63     }
64 };
65
66 export const workflowPanelColumns: DataColumns<string> = [
67     {
68         name: WorkflowPanelColumnNames.NAME,
69         selected: true,
70         configurable: true,
71         sortDirection: SortDirection.ASC,
72         filters: createTree(),
73         render: (uuid: string) => <RosurceWorkflowName uuid={uuid} />
74     },
75     {
76         name: WorkflowPanelColumnNames.AUTHORISATION,
77         selected: true,
78         configurable: true,
79         filters: createTree(),
80         // TODO: restore filters
81         // filters: [
82         //     {
83         //         name: resourceStatus(ResourceStatus.PUBLIC),
84         //         selected: true,
85         //         type: ResourceStatus.PUBLIC
86         //     },
87         //     {
88         //         name: resourceStatus(ResourceStatus.PRIVATE),
89         //         selected: true,
90         //         type: ResourceStatus.PRIVATE
91         //     },
92         //     {
93         //         name: resourceStatus(ResourceStatus.SHARED),
94         //         selected: true,
95         //         type: ResourceStatus.SHARED
96         //     }
97         // ],
98         render: (uuid: string) => <ResourceWorkflowStatus uuid={uuid} />,
99     },
100     {
101         name: WorkflowPanelColumnNames.LAST_MODIFIED,
102         selected: true,
103         configurable: true,
104         sortDirection: SortDirection.NONE,
105         filters: createTree(),
106         render: (uuid: string) => <ResourceLastModifiedDate uuid={uuid} />
107     },
108     {
109         name: '',
110         selected: true,
111         configurable: false,
112         filters: createTree(),
113         render: (uuid: string) => <ResourceShare uuid={uuid} />
114     },
115     {
116         name: '',
117         selected: true,
118         configurable: false,
119         filters: createTree(),
120         render: (uuid: string) => <ResourceRunProcess uuid={uuid} />
121     }
122 ];
123
124 export const WorkflowPanelView = (props: WorkflowPanelProps) => {
125     return <Grid container spacing={16} style={{ minHeight: '500px' }}>
126         <Grid item xs={6}>
127             <DataExplorer
128                 id={WORKFLOW_PANEL_ID}
129                 onRowClick={props.handleRowClick}
130                 onRowDoubleClick={props.handleRowDoubleClick}
131                 contextMenuColumn={false}
132                 onContextMenu={e => e}
133                 dataTableDefaultView={<DataTableDefaultView icon={WorkflowIcon} />} />
134         </Grid>
135         <Grid item xs={6}>
136             <Paper style={{ height: '100%' }}>
137                 <WorkflowDetailsCard workflow={props.workflow} />
138             </Paper>
139         </Grid>
140     </Grid>;
141 };