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 { withStyles, StyleRulesCallback, WithStyles } from '@material-ui/core';
  23 import { ArvadosTheme } from 'common/custom-theme';
  24
  25 export interface ToplevelPickerProps {
  26     pickerId: string;
  27     includeCollections?: boolean;
  28     includeFiles?: boolean;
  29     showSelection?: boolean;
  30     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
  31     toggleItemActive?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
  32     toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
  33 }
  34
  35 interface ProjectsTreePickerSearchProps {
  36     projectSearch: string;
  37     collectionFilter: string;
  38 }
  39
  40 interface ProjectsTreePickerActionProps {
  41     onProjectSearch: (value: string) => void;
  42     onCollectionFilter: (value: string) => void;
  43 }
  44
  45 const mapStateToProps = (state: RootState, props: ToplevelPickerProps): ProjectsTreePickerSearchProps => ({
  46     projectSearch: state.treePickerSearch.projectSearchValues[props.pickerId],
  47     collectionFilter: state.treePickerSearch.collectionFilterValues[props.pickerId],
  48     ...props
  49 });
  50
  51 const mapDispatchToProps = (dispatch: Dispatch, props: ToplevelPickerProps): (ProjectsTreePickerActionProps & DispatchProp) => {
  52     const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(props.pickerId);
  53     const params = {
  54         includeCollections: props.includeCollections,
  55         includeFiles: props.includeFiles,
  56         options: props.options
  57     };
  58     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: home, params }));
  59     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: shared, params }));
  60     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: favorites, params }));
  61     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: publicFavorites, params }));
  62     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: search, params }));
  63
  64     return {
  65         onProjectSearch: (projectSearchValue: string) => dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue })),
  66         onCollectionFilter: (collectionFilterValue: string) => {
  67             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue }));
  68             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue }));
  69             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue }));
  70             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue }));
  71             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue }));
  72         },
  73         dispatch
  74     }
  75 };
  76
  77 type CssRules = 'pickerHeight' | 'searchFlex';
  78
  79 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  80     pickerHeight: {
  81         height: "80vh"
  82     },
  83     searchFlex: {
  84         display: "flex",
  85         justifyContent: "space-around",
  86         paddingBottom: "1em"
  87     },
  88 });
  89
  90 type ProjectsTreePickerCombinedProps = ToplevelPickerProps & ProjectsTreePickerSearchProps & ProjectsTreePickerActionProps & DispatchProp & WithStyles<CssRules>;
  91
  92 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(
  93     withStyles(styles)(
  94         class FileInputComponent extends React.Component<ProjectsTreePickerCombinedProps> {
  95
  96             componentDidMount() {
  97                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
  98
  99                 this.props.dispatch<any>(initProjectsTreePicker(this.props.pickerId));
 100
 101                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue: "" }));
 102                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue: "" }));
 103                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue: "" }));
 104                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue: "" }));
 105                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue: "" }));
 106                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue: "" }));
 107             }
 108
 109             componentWillUnmount() {
 110                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
 111                 // Release all the state, we don't need it to hang around forever.
 112                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: search }));
 113                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: home }));
 114                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: shared }));
 115                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: favorites }));
 116                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: publicFavorites }));
 117             }
 118
 119             render() {
 120                 const pickerId = this.props.pickerId;
 121                 const onProjectSearch = this.props.onProjectSearch;
 122                 const onCollectionFilter = this.props.onCollectionFilter;
 123
 124                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(pickerId);
 125                 const relatedTreePickers = getRelatedTreePickers(pickerId);
 126                 const p = {
 127                     includeCollections: this.props.includeCollections,
 128                     includeFiles: this.props.includeFiles,
 129                     showSelection: this.props.showSelection,
 130                     options: this.props.options,
 131                     relatedTreePickers,
 132                     disableActivation,
 133                 };
 134                 return <div className={this.props.classes.pickerHeight} >
 135                     <span className={this.props.classes.searchFlex}>
 136                         <SearchInput value="" label="Search Projects" selfClearProp='' onSearch={onProjectSearch} debounce={200} />
 137                         <SearchInput value="" label="Filter Collections inside Projects" selfClearProp='' onSearch={onCollectionFilter} debounce={200} />
 138                     </span>
 139
 140                     {this.props.projectSearch !== "" ?
 141                         <div data-cy="projects-tree-search-picker">
 142                             <SearchProjectsPicker {...p} pickerId={search} />
 143                         </div>
 144                         :
 145                         <>
 146                             <div data-cy="projects-tree-home-tree-picker">
 147                                 <HomeTreePicker {...p} pickerId={home} />
 148                             </div>
 149                             <div data-cy="projects-tree-shared-tree-picker">
 150                                 <SharedTreePicker {...p} pickerId={shared} />
 151                             </div>
 152                             <div data-cy="projects-tree-public-favourites-tree-picker">
 153                                 <PublicFavoritesTreePicker {...p} pickerId={publicFavorites} />
 154                             </div>
 155                             <div data-cy="projects-tree-favourites-tree-picker">
 156                                 <FavoritesTreePicker {...p} pickerId={favorites} />
 157                             </div>
 158                         </>}
 159                 </div >;
 160             }
 161         }));
 162
 163 const getRelatedTreePickers = pipe(getProjectsTreePickerIds, values);
 164 const disableActivation = [SHARED_PROJECT_ID, FAVORITES_PROJECT_ID];