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