src/views-components/projects-tree-picker/generic-projects-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 { 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, InputIcon, 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
  20 export interface ProjectsTreePickerRootItem {
  21     id: string;
  22     name: string;
  23 }
  24
  25 export type ProjectsTreePickerItem = ProjectsTreePickerRootItem | GroupContentsResource | CollectionDirectory | CollectionFile;
  26 type PickedTreePickerProps = Pick<TreePickerProps<ProjectsTreePickerItem>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
  27
  28 export interface ProjectsTreePickerDataProps {
  29     includeCollections?: boolean;
  30     includeFiles?: boolean;
  31     rootItemIcon: IconType;
  32     showSelection?: boolean;
  33     relatedTreePickers?: string[];
  34     disableActivation?: string[];
  35     loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string, includeCollections?: boolean, inlcudeFiles?: boolean) => void;
  36 }
  37
  38 export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & Partial<PickedTreePickerProps>;
  39
  40 const mapStateToProps = (_: any, { rootItemIcon, showSelection }: ProjectsTreePickerProps) => ({
  41     render: renderTreeItem(rootItemIcon),
  42     showSelection: isSelectionVisible(showSelection),
  43 });
  44
  45 const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollections, includeFiles, relatedTreePickers, ...props }: ProjectsTreePickerProps): PickedTreePickerProps => ({
  46     onContextMenu: () => { return; },
  47     toggleItemActive: (event, item, pickerId) => {
  48
  49         const { disableActivation = [] } = props;
  50         if(disableActivation.some(isEqual(item.id))){
  51             return;
  52         }
  53
  54         dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ id: item.id, pickerId, relatedTreePickers }));
  55         if (props.toggleItemActive) {
  56             props.toggleItemActive(event, item, pickerId);
  57         }
  58     },
  59     toggleItemOpen: (_, item, pickerId) => {
  60         const { id, data, status } = item;
  61         if (status === TreeItemStatus.INITIAL) {
  62             if ('kind' in data) {
  63                 dispatch<any>(
  64                     data.kind === ResourceKind.COLLECTION
  65                         ? loadCollection(id, pickerId)
  66                         : loadProject({ id, pickerId, includeCollections, includeFiles })
  67                 );
  68             } else if (!('type' in data) && loadRootItem) {
  69                 loadRootItem(item as TreeItem<ProjectsTreePickerRootItem>, pickerId, includeCollections, includeFiles);
  70             }
  71         } else if (status === TreeItemStatus.LOADED) {
  72             dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId }));
  73         }
  74     },
  75     toggleItemSelection: (event, item, pickerId) => {
  76         dispatch<any>(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECTION({ id: item.id, pickerId }));
  77         if (props.toggleItemSelection) {
  78             props.toggleItemSelection(event, item, pickerId);
  79         }
  80     },
  81 });
  82
  83 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(TreePicker);
  84
  85 const getProjectPickerIcon = ({ data }: TreeItem<ProjectsTreePickerItem>, rootIcon: IconType): IconType => {
  86     if ('kind' in data) {
  87         switch (data.kind) {
  88             case ResourceKind.COLLECTION:
  89                 return CollectionIcon;
  90             default:
  91                 return ProjectIcon;
  92         }
  93     } else if ('type' in data) {
  94         switch (data.type) {
  95             case CollectionFileType.FILE:
  96                 return InputIcon;
  97             default:
  98                 return ProjectIcon;
  99         }
 100     } else {
 101         return rootIcon;
 102     }
 103 };
 104
 105 const isSelectionVisible = (shouldBeVisible?: boolean) =>
 106     ({ status, items }: TreeItem<ProjectsTreePickerItem>): boolean => {
 107         if (shouldBeVisible) {
 108             if (items && items.length > 0) {
 109                 return items.every(isSelectionVisible(shouldBeVisible));
 110             }
 111             return status === TreeItemStatus.LOADED;
 112         }
 113         return false;
 114     };
 115
 116 const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
 117     <ListItemTextIcon
 118         icon={getProjectPickerIcon(item, rootItemIcon)}
 119         name={item.data.name}
 120         isActive={item.active}
 121         hasMargin={true} />;