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 import { ResourceKind } from 'models/resource';
  27 import { DefaultView } from 'components/default-view/default-view';
  28 import { ProjectDetailsComponent } from 'views-components/details-panel/project-details';
  29 import { CollectionDetailsAttributes } from 'views/collection-panel/collection-panel';
  30
  31 export interface ToplevelPickerProps {
  32         currentUuids?: string[];
  33     pickerId: string;
  34     cascadeSelection: boolean;
  35     includeCollections?: boolean;
  36     includeDirectories?: boolean;
  37     includeFiles?: boolean;
  38     showSelection?: boolean;
  39     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
  40     toggleItemActive?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
  41     toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
  42 }
  43
  44 interface ProjectsTreePickerSearchProps {
  45     projectSearch: string;
  46     collectionFilter: string;
  47 }
  48
  49 interface ProjectsTreePickerActionProps {
  50     onProjectSearch: (value: string) => void;
  51     onCollectionFilter: (value: string) => void;
  52 }
  53
  54 const mapStateToProps = (state: RootState, props: ToplevelPickerProps): ProjectsTreePickerSearchProps => {
  55     const { search } = getProjectsTreePickerIds(props.pickerId);
  56     return {
  57         ...props,
  58         projectSearch: state.treePickerSearch.projectSearchValues[search] || state.treePickerSearch.collectionFilterValues[search],
  59         collectionFilter: state.treePickerSearch.collectionFilterValues[search],
  60     };
  61 };
  62
  63 const mapDispatchToProps = (dispatch: Dispatch, props: ToplevelPickerProps): (ProjectsTreePickerActionProps & DispatchProp) => {
  64     const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(props.pickerId);
  65     const params = {
  66         includeCollections: props.includeCollections,
  67         includeDirectories: props.includeDirectories,
  68         includeFiles: props.includeFiles,
  69         options: props.options
  70     };
  71     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: home, params }));
  72     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: shared, params }));
  73     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: favorites, params }));
  74     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: publicFavorites, params }));
  75     dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: search, params }));
  76
  77     return {
  78         onProjectSearch: (projectSearchValue: string) => dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue })),
  79         onCollectionFilter: (collectionFilterValue: string) => {
  80             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue }));
  81             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue }));
  82             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue }));
  83             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue }));
  84             dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue }));
  85         },
  86         dispatch
  87     }
  88 };
  89
  90 type CssRules = 'pickerHeight' | 'searchFlex' | 'scrolledBox' | 'detailsBox' | 'twoCol';
  91
  92 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  93     pickerHeight: {
  94         overflowY: "clip",
  95         height: "100%",
  96     },
  97     searchFlex: {
  98         display: "flex",
  99         justifyContent: "space-around",
 100         paddingBottom: "2em",
 101         height: "45px",
 102     },
 103     scrolledBox: {
 104         overflow: "scroll",
 105         width: "calc(100% - 300px)",
 106         height: "calc(100% - 45px)",
 107     },
 108     twoCol: {
 109         display: "flex",
 110         flexDirection: "row",
 111         height: "100%",
 112     },
 113     detailsBox: {
 114         width: "300px",
 115     }
 116 });
 117
 118 type ProjectsTreePickerCombinedProps = ToplevelPickerProps & ProjectsTreePickerSearchProps & ProjectsTreePickerActionProps & DispatchProp & WithStyles<CssRules>;
 119
 120 interface SelectionComponentState {
 121     activeItem?: ProjectsTreePickerItem;
 122 }
 123
 124 const Details = (props: { res?: ProjectsTreePickerItem }) => {
 125     if (props.res && 'kind' in props.res) {
 126         switch (props.res.kind) {
 127             case ResourceKind.PROJECT:
 128                 return <ProjectDetailsComponent project={props.res} hideEdit={true} />
 129             case ResourceKind.COLLECTION:
 130                 return <CollectionDetailsAttributes item={props.res} />;
 131                 /* case ResourceKind.PROCESS:
 132                         *     return new ProcessDetails(res);
 133                  * case ResourceKind.WORKFLOW:
 134                  *     return new WorkflowDetails(res);
 135                  * case ResourceKind.USER:
 136                  *     return new RootProjectDetails(res); */
 137         }
 138     } else {
 139         //return new FileDetails(res);
 140     }
 141     return <DefaultView messages={['Select a file or folder to view its details.']} />;
 142 };
 143
 144
 145 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(
 146     withStyles(styles)(
 147         class FileInputComponent extends React.Component<ProjectsTreePickerCombinedProps> {
 148             state: SelectionComponentState = {
 149             };
 150
 151             componentDidMount() {
 152                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
 153
 154                 const preloadParams = this.props.currentUuids ? {
 155                     selectedItemUuids: this.props.currentUuids,
 156                     includeDirectories: !!this.props.includeDirectories,
 157                     includeFiles: !!this.props.includeFiles,
 158                     multi: !!this.props.showSelection,
 159                 } : undefined;
 160                 this.props.dispatch<any>(initProjectsTreePicker(this.props.pickerId, preloadParams));
 161
 162                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue: "" }));
 163                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue: "" }));
 164                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue: "" }));
 165                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue: "" }));
 166                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue: "" }));
 167                 this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue: "" }));
 168             }
 169
 170             componentWillUnmount() {
 171                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
 172                 // Release all the state, we don't need it to hang around forever.
 173                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: search }));
 174                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: home }));
 175                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: shared }));
 176                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: favorites }));
 177                 this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: publicFavorites }));
 178             }
 179
 180             setSelection(event: React.MouseEvent<HTMLElement>,
 181                          item: TreeItem<ProjectsTreePickerItem>,
 182                          pickerId: string) {
 183                 this.setState({activeItem: item.data});
 184                 console.log(item.data);
 185             }
 186
 187             render() {
 188                 const pickerId = this.props.pickerId;
 189                 const onProjectSearch = this.props.onProjectSearch;
 190                 const onCollectionFilter = this.props.onCollectionFilter;
 191
 192                 const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(pickerId);
 193                 const relatedTreePickers = getRelatedTreePickers(pickerId);
 194                 const _this = this;
 195                 const p = {
 196                     cascadeSelection: this.props.cascadeSelection,
 197                     includeCollections: this.props.includeCollections,
 198                     includeDirectories: this.props.includeDirectories,
 199                     includeFiles: this.props.includeFiles,
 200                     showSelection: this.props.showSelection,
 201                     options: this.props.options,
 202                     toggleItemActive: (event: React.MouseEvent<HTMLElement>,
 203                                        item: TreeItem<ProjectsTreePickerItem>,
 204                                        pickerId: string): void => {
 205                                            _this.setSelection(event, item, pickerId);
 206                                            if (_this.props.toggleItemActive) {
 207                                                _this.props.toggleItemActive(event, item, pickerId);
 208                                            }
 209                                        },
 210                     toggleItemSelection: this.props.toggleItemSelection,
 211                     relatedTreePickers,
 212                     disableActivation,
 213                 };
 214
 215
 216                 return <div className={this.props.classes.pickerHeight} >
 217                     <div className={this.props.classes.searchFlex}>
 218                         <SearchInput value="" label="Project search" selfClearProp='' onSearch={onProjectSearch} debounce={500} width="18rem"  />
 219                         {this.props.includeCollections &&
 220                          <SearchInput value="" label="Collection search" selfClearProp='' onSearch={onCollectionFilter} debounce={500} width="18rem" />}
 221                     </div>
 222
 223                     <div className={this.props.classes.twoCol}>
 224                         <div className={this.props.classes.scrolledBox}>
 225                             {this.props.projectSearch ?
 226                              <div data-cy="projects-tree-search-picker">
 227                                  <SearchProjectsPicker {...p} pickerId={search} />
 228                              </div>
 229                             :
 230                              <>
 231                                  <div data-cy="projects-tree-home-tree-picker">
 232                                      <HomeTreePicker {...p} pickerId={home} />
 233                                  </div>
 234                             <div data-cy="projects-tree-shared-tree-picker">
 235                                 <SharedTreePicker {...p} pickerId={shared} />
 236                             </div>
 237                             <div data-cy="projects-tree-public-favourites-tree-picker">
 238                                 <PublicFavoritesTreePicker {...p} pickerId={publicFavorites} />
 239                             </div>
 240                             <div data-cy="projects-tree-favourites-tree-picker">
 241                                 <FavoritesTreePicker {...p} pickerId={favorites} />
 242                             </div>
 243                              </>}
 244                         </div>
 245
 246                         <div className={this.props.classes.detailsBox}>
 247                             <Details res={this.state.activeItem} />
 248                         </div>
 249                     </div>
 250                 </div>;
 251             }
 252         }));
 253
 254 const getRelatedTreePickers = pipe(getProjectsTreePickerIds, values);
 255 const disableActivation = [SHARED_PROJECT_ID, FAVORITES_PROJECT_ID];