1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from "react";
6 import { Dispatch } from "redux";
7 import { connect } from "react-redux";
8 import { isEqual } from 'lodash/fp';
9 import { TreeItem, TreeItemStatus } from 'components/tree/tree';
10 import { ProjectResource } from "models/project";
11 import { treePickerActions } from "store/tree-picker/tree-picker-actions";
12 import { ListItemTextIcon } from "components/list-item-text-icon/list-item-text-icon";
13 import { ProjectIcon, FileInputIcon, IconType, CollectionIcon } from 'components/icon/icon';
14 import { loadProject, loadCollection } from 'store/tree-picker/tree-picker-actions';
15 import { GroupContentsResource } from 'services/groups-service/groups-service';
16 import { CollectionDirectory, CollectionFile, CollectionFileType } from 'models/collection-file';
17 import { ResourceKind } from 'models/resource';
18 import { TreePickerProps, TreePicker } from "views-components/tree-picker/tree-picker";
19 import { LinkResource } from "models/link";
21 export interface ProjectsTreePickerRootItem {
26 export type ProjectsTreePickerItem = ProjectsTreePickerRootItem | GroupContentsResource | CollectionDirectory | CollectionFile | LinkResource;
27 type PickedTreePickerProps = Pick<TreePickerProps<ProjectsTreePickerItem>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
29 export interface ProjectsTreePickerDataProps {
30 includeCollections?: boolean;
31 includeFiles?: boolean;
32 rootItemIcon: IconType;
33 showSelection?: boolean;
34 relatedTreePickers?: string[];
35 disableActivation?: string[];
36 options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
37 loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string,
38 includeCollections?: boolean, includeFiles?: boolean, options?: { showOnlyOwned: boolean, showOnlyWritable: boolean }) => void;
41 export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & Partial<PickedTreePickerProps>;
43 const mapStateToProps = (_: any, { rootItemIcon, showSelection }: ProjectsTreePickerProps) => ({
44 render: renderTreeItem(rootItemIcon),
45 showSelection: isSelectionVisible(showSelection),
48 const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollections, includeFiles, relatedTreePickers, options, ...props }: ProjectsTreePickerProps): PickedTreePickerProps => ({
49 onContextMenu: () => { return; },
50 toggleItemActive: (event, item, pickerId) => {
52 const { disableActivation = [] } = props;
53 if (disableActivation.some(isEqual(item.id))) {
57 dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ id: item.id, pickerId, relatedTreePickers }));
58 if (props.toggleItemActive) {
59 props.toggleItemActive(event, item, pickerId);
62 toggleItemOpen: (_, item, pickerId) => {
63 const { id, data, status } = item;
64 if (status === TreeItemStatus.INITIAL) {
67 data.kind === ResourceKind.COLLECTION
68 ? loadCollection(id, pickerId)
69 : loadProject({ id, pickerId, includeCollections, includeFiles })
71 } else if (!('type' in data) && loadRootItem) {
72 loadRootItem(item as TreeItem<ProjectsTreePickerRootItem>, pickerId, includeCollections, includeFiles, options);
74 } else if (status === TreeItemStatus.LOADED) {
75 dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId }));
78 toggleItemSelection: (event, item, pickerId) => {
79 dispatch<any>(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECTION({ id: item.id, pickerId }));
80 if (props.toggleItemSelection) {
81 props.toggleItemSelection(event, item, pickerId);
86 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(TreePicker);
88 const getProjectPickerIcon = ({ data }: TreeItem<ProjectsTreePickerItem>, rootIcon: IconType): IconType => {
89 if ('headKind' in data) {
90 switch (data.headKind) {
91 case ResourceKind.COLLECTION:
92 return CollectionIcon;
99 case ResourceKind.COLLECTION:
100 return CollectionIcon;
104 } else if ('type' in data) {
106 case CollectionFileType.FILE:
107 return FileInputIcon;
116 const isSelectionVisible = (shouldBeVisible?: boolean) =>
117 ({ status, items }: TreeItem<ProjectsTreePickerItem>): boolean => {
118 if (shouldBeVisible) {
119 if (items && items.length > 0) {
120 return items.every(isSelectionVisible(shouldBeVisible));
122 return status === TreeItemStatus.LOADED;
127 const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
129 icon={getProjectPickerIcon(item, rootItemIcon)}
130 name={item.data.name}
131 isActive={item.active}