src/views-components/side-panel-tree/side-panel-tree.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 { 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, FavoriteIcon, ProjectsIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon } from '~/components/icon/icon';
  13 import { WorkflowIcon } from '~/components/icon/icon';
  14 import { activateSidePanelTreeItem, toggleSidePanelTreeItemCollapse, SIDE_PANEL_TREE, SidePanelTreeCategory } from '~/store/side-panel-tree/side-panel-tree-actions';
  15 import { openSidePanelContextMenu } from '~/store/context-menu/context-menu-actions';
  16 import { noop } from 'lodash';
  17 import { ResourceKind } from "~/models/resource";
  18 import { IllegalNamingWarning } from "~/components/warning/warning";
  19 export interface SidePanelTreeProps {
  20     onItemActivation: (id: string) => void;
  21     sidePanelProgress?: boolean;
  22 }
  23
  24 type SidePanelTreeActionProps = Pick<TreePickerProps<ProjectResource | string>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
  25
  26 const mapDispatchToProps = (dispatch: Dispatch, props: SidePanelTreeProps): SidePanelTreeActionProps => ({
  27     onContextMenu: (event, { id }) => {
  28         dispatch<any>(openSidePanelContextMenu(event, id));
  29     },
  30     toggleItemActive: (_, { id }) => {
  31         dispatch<any>(activateSidePanelTreeItem(id));
  32         props.onItemActivation(id);
  33     },
  34     toggleItemOpen: (_, { id }) => {
  35         dispatch<any>(toggleSidePanelTreeItemCollapse(id));
  36     },
  37     toggleItemSelection: noop,
  38 });
  39
  40 export const SidePanelTree = connect(undefined, mapDispatchToProps)(
  41     (props: SidePanelTreeActionProps) =>
  42         <TreePicker {...props} render={renderSidePanelItem} pickerId={SIDE_PANEL_TREE} />);
  43
  44 const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
  45     const name = typeof item.data === 'string' ? item.data : item.data.name;
  46     const warn = typeof item.data !== 'string' && item.data.kind === ResourceKind.PROJECT
  47         ? <IllegalNamingWarning name={name} />
  48         : undefined;
  49     return <ListItemTextIcon
  50         icon={getProjectPickerIcon(item)}
  51         name={name}
  52         nameDecorator={warn}
  53         isActive={item.active}
  54         hasMargin={true}
  55     />;
  56 };
  57
  58 const getProjectPickerIcon = (item: TreeItem<ProjectResource | string>) =>
  59     typeof item.data === 'string'
  60         ? getSidePanelIcon(item.data)
  61         : ProjectIcon;
  62
  63 const getSidePanelIcon = (category: string) => {
  64     switch (category) {
  65         case SidePanelTreeCategory.FAVORITES:
  66             return FavoriteIcon;
  67         case SidePanelTreeCategory.PROJECTS:
  68             return ProjectsIcon;
  69         case SidePanelTreeCategory.SHARED_WITH_ME:
  70             return ShareMeIcon;
  71         case SidePanelTreeCategory.TRASH:
  72             return TrashIcon;
  73         case SidePanelTreeCategory.WORKFLOWS:
  74             return WorkflowIcon;
  75         case SidePanelTreeCategory.PUBLIC_FAVORITES:
  76             return PublicFavoriteIcon;
  77         case SidePanelTreeCategory.ALL_PROCESSES:
  78             return ProcessIcon;
  79         default:
  80             return ProjectIcon;
  81     }
  82 };