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