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 } 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
  21 type WorkflowTreePickerProps = Pick<MainWorkflowTreePickerProps, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen'>;
  22
  23 const mapDispatchToProps = (dispatch: Dispatch, props: { onChange: (projectUuid: string) => void }): WorkflowTreePickerProps => ({
  24     onContextMenu: () => { return; },
  25     toggleItemActive: (nodeId, status, pickerId) => {
  26         getNotSelectedTreePickerKind(pickerId)
  27             .forEach(pickerId => dispatch(workflowTreePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ nodeId: '', pickerId })));
  28         dispatch(workflowTreePickerActions.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(workflowTreePickerActions.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 WorkflowTreePicker = connect(undefined, mapDispatchToProps)((props: WorkflowTreePickerProps) =>
  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             <MainWorkflowTreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.PROJECTS} />
  69             <MainWorkflowTreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.SHARED_WITH_ME} />
  70             <MainWorkflowTreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.FAVORITES} />
  71         </div>
  72     </div>);
  73
  74 export const loadProjectTreePickerProjects = (nodeId: string) =>
  75     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  76         dispatch(workflowTreePickerActions.LOAD_TREE_PICKER_NODE({ nodeId, pickerId: TreePickerId.PROJECTS }));
  77
  78         const ownerUuid = nodeId.length === 0 ? services.authService.getUuid() || '' : nodeId;
  79
  80         const filters = new FilterBuilder()
  81             .addEqual('ownerUuid', ownerUuid)
  82             .getFilters();
  83
  84         const { items } = await services.projectService.list({ filters });
  85
  86         dispatch<any>(receiveTreePickerData(nodeId, items, TreePickerId.PROJECTS));
  87     };
  88
  89 export const loadFavoriteTreePickerProjects = (nodeId: string) =>
  90     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  91         const parentId = services.authService.getUuid() || '';
  92
  93         if (nodeId === '') {
  94             dispatch(workflowTreePickerActions.LOAD_TREE_PICKER_NODE({ nodeId: parentId, pickerId: TreePickerId.FAVORITES }));
  95             const { items } = await services.favoriteService.list(parentId);
  96
  97             dispatch<any>(receiveTreePickerData(parentId, items as ProjectResource[], TreePickerId.FAVORITES));
  98         } else {
  99             dispatch(workflowTreePickerActions.LOAD_TREE_PICKER_NODE({ nodeId, pickerId: TreePickerId.FAVORITES }));
 100             const filters = new FilterBuilder()
 101                 .addEqual('ownerUuid', nodeId)
 102                 .getFilters();
 103
 104             const { items } = await services.projectService.list({ filters });
 105
 106             dispatch<any>(receiveTreePickerData(nodeId, items, TreePickerId.FAVORITES));
 107         }
 108
 109     };
 110
 111 const getProjectPickerIcon = (item: TreeItem<ProjectResource>) => {
 112     switch (item.data.name) {
 113         case TreePickerId.FAVORITES:
 114             return FavoriteIcon;
 115         case TreePickerId.PROJECTS:
 116             return ProjectsIcon;
 117         case TreePickerId.SHARED_WITH_ME:
 118             return ShareMeIcon;
 119         default:
 120             return ProjectIcon;
 121     }
 122 };
 123
 124 const renderTreeItem = (item: TreeItem<ProjectResource>) =>
 125     <ListItemTextIcon
 126         icon={getProjectPickerIcon(item)}
 127         name={item.data.name}
 128         isActive={item.active}
 129         hasMargin={true} />;
 130
 131
 132 export const receiveTreePickerData = (nodeId: string, projects: ProjectResource[], pickerId: string) =>
 133     (dispatch: Dispatch) => {
 134         dispatch(workflowTreePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
 135             nodeId,
 136             nodes: projects.map(project => createTreePickerNode({ nodeId: project.uuid, value: project })),
 137             pickerId,
 138         }));
 139
 140         dispatch(workflowTreePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ nodeId, pickerId }));
 141     };
 142
 143 export const WorkflowTreePickerField = (props: WrappedFieldProps) =>
 144     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
 145         <WorkflowTreePicker onChange={handleChange(props)} />
 146         {props.meta.dirty && props.meta.error &&
 147             <Typography variant='caption' color='error'>
 148                 {props.meta.error}
 149             </Typography>}
 150     </div>;
 151
 152 const handleChange = (props: WrappedFieldProps) => (value: string) =>
 153     props.input.value === value
 154         ? props.input.onChange('')
 155         : props.input.onChange(value);
 156