services/workbench2/src/views-components/projects-tree-picker/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, DispatchProp } from 'react-redux';
   8 import { RootState } from 'store/store';
   9 import { values, pipe } from 'lodash/fp';
  10 import { HomeTreePicker } from 'views-components/projects-tree-picker/home-tree-picker';
  11 import { SharedTreePicker } from 'views-components/projects-tree-picker/shared-tree-picker';
  12 import { FavoritesTreePicker } from 'views-components/projects-tree-picker/favorites-tree-picker';
  13 import { SearchProjectsPicker } from 'views-components/projects-tree-picker/search-projects-picker';
  14 import {
  15     getProjectsTreePickerIds, treePickerActions, treePickerSearchActions, initProjectsTreePicker,
  16     SHARED_PROJECT_ID, FAVORITES_PROJECT_ID
  17 } from 'store/tree-picker/tree-picker-actions';
  18 import { TreeItem } from 'components/tree/tree';
  19 import { ProjectsTreePickerItem } from 'store/tree-picker/tree-picker-middleware';
  20 import { PublicFavoritesTreePicker } from './public-favorites-tree-picker';
  21 import { SearchInput } from 'components/search-input/search-input';
  22 import { CustomStyleRulesCallback } from 'common/custom-theme';
  23 import { WithStyles } from '@mui/styles';
  24 import withStyles from '@mui/styles/withStyles';
  25 import { ArvadosTheme } from 'common/custom-theme';
  26
  27 export interface ToplevelPickerProps {
  28     currentUuids?: string[];
  29     pickerId: string;
  30     cascadeSelection: boolean;
  31     includeCollections?: boolean;
  32     includeDirectories?: boolean;
  33     includeFiles?: boolean;
  34     showSelection?: boolean;
  35     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
  36     toggleItemActive?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
  37     toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
  38 }
  39
  40 interface ProjectsTreePickerSearchProps {
  41     projectSearch: string;
  42     collectionFilter: string;
  43 }
  44
  45 interface ProjectsTreePickerActionProps {
  46     onProjectSearch: (value: string) => void;
  47     onCollectionFilter: (value: string) => void;
  48 }
  49
  50 const mapStateToProps = (state: RootState, props: ToplevelPickerProps): ProjectsTreePickerSearchProps => {
  51     const { search } = getProjectsTreePickerIds(props.pickerId);
  52     return {
  53         ...props,
  54         projectSearch: state.treePickerSearch.projectSearchValues[search],
  55         collectionFilter: state.treePickerSearch.collectionFilterValues[search],
  56     };
  57 };
  58
  59 const mapDispatchToProps = (dispatch: Dispatch, props: ToplevelPickerProps): (ProjectsTreePickerActionProps & DispatchProp) => {
  60     const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(props.pickerId);
  61     const params = {
  62         includeCollections: props.includeCollections,
  63         includeDirectories: props.includeDirectories,
  64         includeFiles: props.includeFiles,
  65         options: props.options
  66     };
  67     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: home, params }));
  68     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: shared, params }));
  69     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: favorites, params }));
  70     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: publicFavorites, params }));
  71     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: search, params }));
  72
  73     return {
  74         onProjectSearch: (projectSearchValue: string) => dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue })),
  75         onCollectionFilter: (collectionFilterValue: string) => {
  76             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue }));
  77             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue }));
  78             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue }));
  79             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue }));
  80             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue }));
  81         },
  82         dispatch
  83     }
  84 };
  85
  86 type CssRules = 'pickerHeight' | 'searchFlex' | 'scrolledBox';
  87
  88 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  89     pickerHeight: {
  90         display: "flex",
  91         flexDirection: "column",
  92         overflowY: "auto",
  93     },
  94     searchFlex: {
  95         display: "flex",
  96         justifyContent: "space-around",
  97         paddingBottom: "1em"
  98     },
  99     scrolledBox: {
 100         overflow: "scroll"
 101     }
 102 });
 103
 104 type ProjectsTreePickerCombinedProps = ToplevelPickerProps & ProjectsTreePickerSearchProps & ProjectsTreePickerActionProps & DispatchProp & WithStyles<CssRules>;
 105
 106 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(
 107     withStyles(styles)(
 108         class FileInputComponent extends React.Component<ProjectsTreePickerCombinedProps> {
 109
 110             componentDidMount() {
 111                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
 112
 113                 const preloadParams = this.props.currentUuids ? {
 114                     selectedItemUuids: this.props.currentUuids,
 115                     includeDirectories: !!this.props.includeDirectories,
 116                     includeFiles: !!this.props.includeFiles,
 117                     multi: !!this.props.showSelection,
 118                 } : undefined;
 119                 this.props.dispatch<any>(initProjectsTreePicker(this.props.pickerId, preloadParams));
 120
 121                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue: "" }));
 122                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue: "" }));
 123                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue: "" }));
 124                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue: "" }));
 125                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue: "" }));
 126                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue: "" }));
 127             }
 128
 129             componentWillUnmount() {
 130                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
 131                 // Release all the state, we don't need it to hang around forever.
 132                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: search }));
 133                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: home }));
 134                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: shared }));
 135                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: favorites }));
 136                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: publicFavorites }));
 137             }
 138
 139             render() {
 140                 const pickerId = this.props.pickerId;
 141                 const onProjectSearch = this.props.onProjectSearch;
 142                 const onCollectionFilter = this.props.onCollectionFilter;
 143
 144                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(pickerId);
 145                 const relatedTreePickers = getRelatedTreePickers(pickerId);
 146                 const p = {
 147                     cascadeSelection: this.props.cascadeSelection,
 148                     includeCollections: this.props.includeCollections,
 149                     includeDirectories: this.props.includeDirectories,
 150                     includeFiles: this.props.includeFiles,
 151                     showSelection: this.props.showSelection,
 152                     options: this.props.options,
 153                     toggleItemActive: this.props.toggleItemActive,
 154                     toggleItemSelection: this.props.toggleItemSelection,
 155                     relatedTreePickers,
 156                     disableActivation,
 157                 };
 158                 return <div className={this.props.classes.pickerHeight} >
 159                     <span className={this.props.classes.searchFlex}>
 160                         <SearchInput value="" label="Search for a Project" selfClearProp='' onSearch={onProjectSearch} debounce={500} />
 161                         {this.props.includeCollections &&
 162                             <SearchInput value="" label="Filter Collections list in Projects" selfClearProp='' onSearch={onCollectionFilter} debounce={500} />}
 163                     </span>
 164
 165                     <div className={this.props.classes.scrolledBox}>
 166                         {this.props.projectSearch ?
 167                             <div data-cy="projects-tree-search-picker">
 168                                 <SearchProjectsPicker {...p} pickerId={search} />
 169                             </div>
 170                             :
 171                             <>
 172                                 <div data-cy="projects-tree-home-tree-picker">
 173                                     <HomeTreePicker {...p} pickerId={home} />
 174                                 </div>
 175                                 <div data-cy="projects-tree-shared-tree-picker">
 176                                     <SharedTreePicker {...p} pickerId={shared} />
 177                                 </div>
 178                                 <div data-cy="projects-tree-public-favourites-tree-picker">
 179                                     <PublicFavoritesTreePicker {...p} pickerId={publicFavorites} />
 180                                 </div>
 181                                 <div data-cy="projects-tree-favourites-tree-picker">
 182                                     <FavoritesTreePicker {...p} pickerId={favorites} />
 183                                 </div>
 184                             </>}
 185                     </div>
 186                 </div >;
 187             }
 188         }));
 189
 190 const getRelatedTreePickers = pipe(getProjectsTreePickerIds, values);
 191 const disableActivation = [SHARED_PROJECT_ID, FAVORITES_PROJECT_ID];