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, 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';
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';
25 export interface ToplevelPickerProps {
28 includeCollections?: boolean;
29 includeDirectories?: boolean;
30 includeFiles?: boolean;
31 showSelection?: boolean;
32 options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
33 toggleItemActive?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
34 toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
37 interface ProjectsTreePickerSearchProps {
38 projectSearch: string;
39 collectionFilter: string;
42 interface ProjectsTreePickerActionProps {
43 onProjectSearch: (value: string) => void;
44 onCollectionFilter: (value: string) => void;
47 const mapStateToProps = (state: RootState, props: ToplevelPickerProps): ProjectsTreePickerSearchProps => {
48 const { search } = getProjectsTreePickerIds(props.pickerId);
51 projectSearch: state.treePickerSearch.projectSearchValues[search],
52 collectionFilter: state.treePickerSearch.collectionFilterValues[search],
56 const mapDispatchToProps = (dispatch: Dispatch, props: ToplevelPickerProps): (ProjectsTreePickerActionProps & DispatchProp) => {
57 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(props.pickerId);
59 includeCollections: props.includeCollections,
60 includeDirectories: props.includeDirectories,
61 includeFiles: props.includeFiles,
62 options: props.options
64 dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: home, params }));
65 dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: shared, params }));
66 dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: favorites, params }));
67 dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: publicFavorites, params }));
68 dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: search, params }));
71 onProjectSearch: (projectSearchValue: string) => dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue })),
72 onCollectionFilter: (collectionFilterValue: string) => {
73 dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue }));
74 dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue }));
75 dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue }));
76 dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue }));
77 dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue }));
83 type CssRules = 'pickerHeight' | 'searchFlex' | 'scrolledBox';
85 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
89 flexDirection: "column",
93 justifyContent: "space-around",
101 type ProjectsTreePickerCombinedProps = ToplevelPickerProps & ProjectsTreePickerSearchProps & ProjectsTreePickerActionProps & DispatchProp & WithStyles<CssRules>;
103 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(
105 class FileInputComponent extends React.Component<ProjectsTreePickerCombinedProps> {
107 componentDidMount() {
108 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
110 this.props.dispatch<any>(initProjectsTreePicker(this.props.pickerId, this.props.currentUuid));
112 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue: "" }));
113 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue: "" }));
114 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue: "" }));
115 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue: "" }));
116 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue: "" }));
117 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue: "" }));
120 componentWillUnmount() {
121 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
122 // Release all the state, we don't need it to hang around forever.
123 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: search }));
124 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: home }));
125 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: shared }));
126 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: favorites }));
127 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: publicFavorites }));
131 const pickerId = this.props.pickerId;
132 const onProjectSearch = this.props.onProjectSearch;
133 const onCollectionFilter = this.props.onCollectionFilter;
135 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(pickerId);
136 const relatedTreePickers = getRelatedTreePickers(pickerId);
138 includeCollections: this.props.includeCollections,
139 includeDirectories: this.props.includeDirectories,
140 includeFiles: this.props.includeFiles,
141 showSelection: this.props.showSelection,
142 options: this.props.options,
143 toggleItemActive: this.props.toggleItemActive,
144 toggleItemSelection: this.props.toggleItemSelection,
148 return <div className={this.props.classes.pickerHeight} >
149 <span className={this.props.classes.searchFlex}>
150 <SearchInput value="" label="Search for a Project" selfClearProp='' onSearch={onProjectSearch} debounce={500} />
151 {this.props.includeCollections &&
152 <SearchInput value="" label="Filter Collections list in Projects" selfClearProp='' onSearch={onCollectionFilter} debounce={500} />}
155 <div className={this.props.classes.scrolledBox}>
156 {this.props.projectSearch ?
157 <div data-cy="projects-tree-search-picker">
158 <SearchProjectsPicker {...p} pickerId={search} />
162 <div data-cy="projects-tree-home-tree-picker">
163 <HomeTreePicker {...p} pickerId={home} />
165 <div data-cy="projects-tree-shared-tree-picker">
166 <SharedTreePicker {...p} pickerId={shared} />
168 <div data-cy="projects-tree-public-favourites-tree-picker">
169 <PublicFavoritesTreePicker {...p} pickerId={publicFavorites} />
171 <div data-cy="projects-tree-favourites-tree-picker">
172 <FavoritesTreePicker {...p} pickerId={favorites} />
180 const getRelatedTreePickers = pipe(getProjectsTreePickerIds, values);
181 const disableActivation = [SHARED_PROJECT_ID, FAVORITES_PROJECT_ID];