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 { TreePicker, TreePickerProps } from "../tree-picker/tree-picker";
9 import { TreeItem } from "components/tree/tree";
10 import { ProjectResource } from "models/project";
11 import { ListItemTextIcon } from "components/list-item-text-icon/list-item-text-icon";
12 import { ProcessIcon, ProjectIcon, FilterGroupIcon, FavoriteIcon, ProjectsIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon, TerminalIcon, ResourceIcon } from 'components/icon/icon';
13 import { activateSidePanelTreeItem, toggleSidePanelTreeItemCollapse, SIDE_PANEL_TREE, SidePanelTreeCategory } from 'store/side-panel-tree/side-panel-tree-actions';
14 import { openSidePanelContextMenu } from 'store/context-menu/context-menu-actions';
15 import { noop } from 'lodash';
16 import { ResourceKind } from "models/resource";
17 import { IllegalNamingWarning } from "components/warning/warning";
18 import { GroupClass } from "models/group";
19 import { setSelectedResourceUuid } from "store/selected-resource/selected-resource-actions";
21 export interface SidePanelTreeProps {
22 onItemActivation: (id: string) => void;
23 sidePanelProgress?: boolean;
25 setCurrentSideWidth: (width: number) => void
28 type SidePanelTreeActionProps = Pick<TreePickerProps<ProjectResource | string>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
30 const mapDispatchToProps = (dispatch: Dispatch, props: SidePanelTreeProps): SidePanelTreeActionProps => ({
31 onContextMenu: (event, { id }) => {
32 dispatch<any>(openSidePanelContextMenu(event, id));
34 toggleItemActive: (_, { id }) => {
35 dispatch<any>(activateSidePanelTreeItem(id));
36 const isSidePanelCat = Object.values(SidePanelTreeCategory).includes(id as SidePanelTreeCategory);
37 dispatch<any>(setSelectedResourceUuid(isSidePanelCat ? null : id));
38 props.onItemActivation(id);
40 toggleItemOpen: (_, { id }) => {
41 dispatch<any>(toggleSidePanelTreeItemCollapse(id));
43 toggleItemSelection: noop,
46 export const SidePanelTree = connect(undefined, mapDispatchToProps)(
47 (props: SidePanelTreeActionProps) =>
48 <div data-cy="side-panel-tree">
49 <TreePicker {...props} render={renderSidePanelItem} pickerId={SIDE_PANEL_TREE} />
52 const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
53 const name = typeof item.data === 'string' ? item.data : item.data.name;
54 const warn = typeof item.data !== 'string' && item.data.kind === ResourceKind.PROJECT
55 ? <IllegalNamingWarning name={name} />
57 return <ListItemTextIcon
58 icon={getProjectPickerIcon(item)}
61 isActive={item.active}
66 const getProjectPickerIcon = (item: TreeItem<ProjectResource | string>) =>
67 typeof item.data === 'string'
68 ? getSidePanelIcon(item.data)
69 : (item.data && item.data.groupClass === GroupClass.FILTER)
73 export const getSidePanelIcon = (category: string) => {
75 case SidePanelTreeCategory.FAVORITES:
77 case SidePanelTreeCategory.PROJECTS:
79 case SidePanelTreeCategory.SHARED_WITH_ME:
81 case SidePanelTreeCategory.TRASH:
83 case SidePanelTreeCategory.PUBLIC_FAVORITES:
84 return PublicFavoriteIcon;
85 case SidePanelTreeCategory.ALL_PROCESSES:
87 case SidePanelTreeCategory.INSTANCE_TYPES:
89 case SidePanelTreeCategory.GROUPS:
91 case SidePanelTreeCategory.SHELL_ACCESS: