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