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 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 import { LinkResource } from "models/link";
  20
  21 export interface ProjectsTreePickerRootItem {
  22     id: string;
  23     name: string;
  24 }
  25
  26 export type ProjectsTreePickerItem = ProjectsTreePickerRootItem | GroupContentsResource | CollectionDirectory | CollectionFile | LinkResource;
  27 type PickedTreePickerProps = Pick<TreePickerProps<ProjectsTreePickerItem>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
  28
  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;
  39 }
  40
  41 export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & Partial<PickedTreePickerProps>;
  42
  43 const mapStateToProps = (_: any, { rootItemIcon, showSelection }: ProjectsTreePickerProps) => ({
  44     render: renderTreeItem(rootItemIcon),
  45     showSelection: isSelectionVisible(showSelection),
  46 });
  47
  48 const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollections, includeFiles, relatedTreePickers, options, ...props }: ProjectsTreePickerProps): PickedTreePickerProps => ({
  49     onContextMenu: () => { return; },
  50     toggleItemActive: (event, item, pickerId) => {
  51
  52         const { disableActivation = [] } = props;
  53         if (disableActivation.some(isEqual(item.id))) {
  54             return;
  55         }
  56
  57         dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ id: item.id, pickerId, relatedTreePickers }));
  58         if (props.toggleItemActive) {
  59             props.toggleItemActive(event, item, pickerId);
  60         }
  61     },
  62     toggleItemOpen: (_, item, pickerId) => {
  63         const { id, data, status } = item;
  64         if (status === TreeItemStatus.INITIAL) {
  65             if ('kind' in data) {
  66                 dispatch<any>(
  67                     data.kind === ResourceKind.COLLECTION
  68                         ? loadCollection(id, pickerId)
  69                         : loadProject({ id, pickerId, includeCollections, includeFiles })
  70                 );
  71             } else if (!('type' in data) && loadRootItem) {
  72                 loadRootItem(item as TreeItem<ProjectsTreePickerRootItem>, pickerId, includeCollections, includeFiles, options);
  73             }
  74         } else if (status === TreeItemStatus.LOADED) {
  75             dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId }));
  76         }
  77     },
  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);
  82         }
  83     },
  84 });
  85
  86 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(TreePicker);
  87
  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;
  93             default:
  94                 return ProjectIcon;
  95         }
  96     }
  97     if ('kind' in data) {
  98         switch (data.kind) {
  99             case ResourceKind.COLLECTION:
 100                 return CollectionIcon;
 101             default:
 102                 return ProjectIcon;
 103         }
 104     } else if ('type' in data) {
 105         switch (data.type) {
 106             case CollectionFileType.FILE:
 107                 return InputIcon;
 108             default:
 109                 return ProjectIcon;
 110         }
 111     } else {
 112         return rootIcon;
 113     }
 114 };
 115
 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));
 121             }
 122             return status === TreeItemStatus.LOADED;
 123         }
 124         return false;
 125     };
 126
 127 const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
 128     <ListItemTextIcon
 129         icon={getProjectPickerIcon(item, rootItemIcon)}
 130         name={item.data.name}
 131         isActive={item.active}
 132         hasMargin={true} />;