refs #14265 Merge branch 'origin/14265-search-bar-icon'
[arvados.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 } from "~/views-components/data-explorer/renderers";
16 import { SortDirection } from '~/components/data-table/data-column';
17 import { DataColumns } from '~/components/data-table/data-table';
18 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
19 import { Grid, Paper } from '@material-ui/core';
20 import { WorkflowDetailsCard } from './workflow-description-card';
21
22 export enum WorkflowPanelColumnNames {
23     NAME = "Name",
24     AUTHORISATION = "Authorisation",
25     LAST_MODIFIED = "Last modified",
26     SHARE = 'Share'
27 }
28
29 export interface WorkflowPanelFilter extends DataTableFilterItem {
30     type: ResourceStatus;
31 }
32
33 interface WorkflowPanelDataProps {
34     handleRowDoubleClick: any;
35     handleRowClick: any;
36 }
37
38 export enum ResourceStatus {
39     PUBLIC = "Public",
40     PRIVATE = "Private",
41     SHARED = "Shared"
42 }
43
44 const resourceStatus = (type: string) => {
45     switch (type) {
46         case ResourceStatus.PUBLIC:
47             return "Public";
48         case ResourceStatus.PRIVATE:
49             return "Private";
50         case ResourceStatus.SHARED:
51             return "Shared";
52         default:
53             return "Unknown";
54     }
55 };
56
57 export const workflowPanelColumns: DataColumns<string, WorkflowPanelFilter> = [
58     {
59         name: WorkflowPanelColumnNames.NAME,
60         selected: true,
61         configurable: true,
62         sortDirection: SortDirection.ASC,
63         filters: [],
64         render: (uuid: string) => <RosurceWorkflowName uuid={uuid} />
65     },
66     {
67         name: WorkflowPanelColumnNames.AUTHORISATION,
68         selected: true,
69         configurable: true,
70         filters: [
71             {
72                 name: resourceStatus(ResourceStatus.PUBLIC),
73                 selected: true,
74                 type: ResourceStatus.PUBLIC
75             },
76             {
77                 name: resourceStatus(ResourceStatus.PRIVATE),
78                 selected: true,
79                 type: ResourceStatus.PRIVATE
80             },
81             {
82                 name: resourceStatus(ResourceStatus.SHARED),
83                 selected: true,
84                 type: ResourceStatus.SHARED
85             }
86         ],
87         render: (uuid: string) => <ResourceWorkflowStatus uuid={uuid} />,
88     },
89     {
90         name: WorkflowPanelColumnNames.LAST_MODIFIED,
91         selected: true,
92         configurable: true,
93         sortDirection: SortDirection.NONE,
94         filters: [],
95         render: (uuid: string) => <ResourceLastModifiedDate uuid={uuid} />
96     },
97     {
98         name: '',
99         selected: true,
100         configurable: false,
101         filters: [],
102         render: (uuid: string) => <ResourceShare uuid={uuid} />
103     }
104 ];
105
106 export const WorkflowPanelView = ({...props}) => {
107     return <Grid container spacing={16}>
108         <Grid item xs={6}>
109             <DataExplorer
110                 id={WORKFLOW_PANEL_ID}
111                 onRowClick={props.handleRowClick}
112                 onRowDoubleClick={props.handleRowDoubleClick}
113                 contextMenuColumn={false}
114                 dataTableDefaultView={<DataTableDefaultView icon={WorkflowIcon} />} />
115         </Grid>
116         <Grid item xs={6}>
117             <Paper>
118                 <WorkflowDetailsCard />
119             </Paper>
120         </Grid>
121     </Grid>;
122 };