merge master
[arvados.git] / src / views-components / project-tree-picker / project-tree-picker.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 { Dispatch } from "redux";
7 import { connect } from "react-redux";
8 import { Typography } from "@material-ui/core";
9 import { TreePicker, TreePickerProps } from "../tree-picker/tree-picker";
10 import { TreeItem, TreeItemStatus } from "~/components/tree/tree";
11 import { ProjectResource } from "~/models/project";
12 import { treePickerActions } from "~/store/tree-picker/tree-picker-actions";
13 import { ListItemTextIcon } from "~/components/list-item-text-icon/list-item-text-icon";
14 import { ProjectIcon, FavoriteIcon, ProjectsIcon, ShareMeIcon } from "~/components/icon/icon";
15 import { createTreePickerNode } from "~/store/tree-picker/tree-picker";
16 import { RootState } from "~/store/store";
17 import { ServiceRepository } from "~/services/services";
18 import { FilterBuilder } from "~/common/api/filter-builder";
19 import { WrappedFieldProps } from 'redux-form';
20
21 type ProjectTreePickerProps = Pick<TreePickerProps, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen'>;
22
23 const mapDispatchToProps = (dispatch: Dispatch, props: { onChange: (projectUuid: string) => void }): ProjectTreePickerProps => ({
24     onContextMenu: () => { return; },
25     toggleItemActive: (nodeId, status, pickerId) => {
26         getNotSelectedTreePickerKind(pickerId)
27             .forEach(pickerId => dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ nodeId: '', pickerId })));
28         dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ nodeId, pickerId }));
29
30         props.onChange(nodeId);
31     },
32     toggleItemOpen: (nodeId, status, pickerId) => {
33         dispatch<any>(toggleItemOpen(nodeId, status, pickerId));
34     }
35 });
36
37 const toggleItemOpen = (nodeId: string, status: TreeItemStatus, pickerId: string) =>
38     (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
39         if (status === TreeItemStatus.INITIAL) {
40             if (pickerId === TreePickerId.PROJECTS) {
41                 dispatch<any>(loadProjectTreePickerProjects(nodeId));
42             } else if (pickerId === TreePickerId.FAVORITES) {
43                 dispatch<any>(loadFavoriteTreePickerProjects(nodeId === services.authService.getUuid() ? '' : nodeId));
44             } else {
45                 // TODO: load sharedWithMe
46             }
47         } else {
48             dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ nodeId, pickerId }));
49         }
50     };
51
52 const getNotSelectedTreePickerKind = (pickerId: string) => {
53     return [TreePickerId.PROJECTS, TreePickerId.FAVORITES, TreePickerId.SHARED_WITH_ME].filter(nodeId => nodeId !== pickerId);
54 };
55
56 export enum TreePickerId {
57     PROJECTS = 'Projects',
58     SHARED_WITH_ME = 'Shared with me',
59     FAVORITES = 'Favorites'
60 }
61
62 export const ProjectTreePicker = connect(undefined, mapDispatchToProps)((props: ProjectTreePickerProps) =>
63     <div style={{ display: 'flex', flexDirection: 'column' }}>
64         <Typography variant='caption' style={{ flexShrink: 0 }}>
65             Select a project
66         </Typography>
67         <div style={{ flexGrow: 1, overflow: 'auto' }}>
68             <TreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.PROJECTS} />
69             <TreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.SHARED_WITH_ME} />
70             <TreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.FAVORITES} />
71         </div>
72     </div>);
73
74
75 // TODO: move action creator to store directory
76 export const loadProjectTreePickerProjects = (nodeId: string) =>
77     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
78         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ nodeId, pickerId: TreePickerId.PROJECTS }));
79
80         const ownerUuid = nodeId.length === 0 ? services.authService.getUuid() || '' : nodeId;
81
82         const filters = new FilterBuilder()
83             .addEqual('ownerUuid', ownerUuid)
84             .getFilters();
85
86         const { items } = await services.projectService.list({ filters });
87
88         dispatch<any>(receiveTreePickerData(nodeId, items, TreePickerId.PROJECTS));
89     };
90
91 export const loadFavoriteTreePickerProjects = (nodeId: string) =>
92     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
93         const parentId = services.authService.getUuid() || '';
94
95         if (nodeId === '') {
96             dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ nodeId: parentId, pickerId: TreePickerId.FAVORITES }));
97             const { items } = await services.favoriteService.list(parentId);
98
99             dispatch<any>(receiveTreePickerData(parentId, items as ProjectResource[], TreePickerId.FAVORITES));
100         } else {
101             dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ nodeId, pickerId: TreePickerId.FAVORITES }));
102             const filters = new FilterBuilder()
103                 .addEqual('ownerUuid', nodeId)
104                 .getFilters();
105
106             const { items } = await services.projectService.list({ filters });
107
108             dispatch<any>(receiveTreePickerData(nodeId, items, TreePickerId.FAVORITES));
109         }
110
111     };
112
113 const getProjectPickerIcon = (item: TreeItem<ProjectResource>) => {
114     switch (item.data.name) {
115         case TreePickerId.FAVORITES:
116             return FavoriteIcon;
117         case TreePickerId.PROJECTS:
118             return ProjectsIcon;
119         case TreePickerId.SHARED_WITH_ME:
120             return ShareMeIcon;
121         default:
122             return ProjectIcon;
123     }
124 };
125
126 const renderTreeItem = (item: TreeItem<ProjectResource>) =>
127     <ListItemTextIcon
128         icon={getProjectPickerIcon(item)}
129         name={item.data.name}
130         isActive={item.active}
131         hasMargin={true} />;
132
133
134 // TODO: move action creator to store directory
135 export const receiveTreePickerData = (nodeId: string, projects: ProjectResource[], pickerId: string) =>
136     (dispatch: Dispatch) => {
137         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
138             nodeId,
139             nodes: projects.map(project => createTreePickerNode({ nodeId: project.uuid, value: project })),
140             pickerId,
141         }));
142
143         dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ nodeId, pickerId }));
144     };
145
146 export const ProjectTreePickerField = (props: WrappedFieldProps) =>
147     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
148         <ProjectTreePicker onChange={handleChange(props)} />
149         {props.meta.dirty && props.meta.error &&
150             <Typography variant='caption' color='error'>
151                 {props.meta.error}
152             </Typography>}
153     </div>;
154
155 const handleChange = (props: WrappedFieldProps) => (value: string) =>
156     props.input.value === value
157         ? props.input.onChange('')
158         : props.input.onChange(value);
159