From 8a1dfbf52d1407b2773874c03db85a56143d20e6 Mon Sep 17 00:00:00 2001 From: Peter Amstutz Date: Thu, 8 Dec 2022 20:59:09 -0500 Subject: [PATCH 1/1] 19783: Filtering collections works now Arvados-DCO-1.1-Signed-off-by: Peter Amstutz --- src/store/tree-picker/tree-picker-reducer.ts | 4 + .../projects-tree-picker.tsx | 121 +++++++++++++----- .../run-process-panel/inputs/file-input.tsx | 2 +- 3 files changed, 92 insertions(+), 35 deletions(-) diff --git a/src/store/tree-picker/tree-picker-reducer.ts b/src/store/tree-picker/tree-picker-reducer.ts index d4b710c973..df0ee0ad16 100644 --- a/src/store/tree-picker/tree-picker-reducer.ts +++ b/src/store/tree-picker/tree-picker-reducer.ts @@ -72,6 +72,10 @@ const receiveNodes = (nodes: Array>) => (parent: string) => (stat newState = setNode({ ...parentNode, children: [] })(state); } return nodes.reduce((tree, node) => { + const preexistingNode = getNode(node.id)(state); + if (preexistingNode) { + node = { ...preexistingNode, value: node.value }; + } return setNode({ ...node, parent })(tree); }, newState); }; diff --git a/src/views-components/projects-tree-picker/projects-tree-picker.tsx b/src/views-components/projects-tree-picker/projects-tree-picker.tsx index bddde89203..8f21784bd4 100644 --- a/src/views-components/projects-tree-picker/projects-tree-picker.tsx +++ b/src/views-components/projects-tree-picker/projects-tree-picker.tsx @@ -4,19 +4,24 @@ import React from 'react'; import { Dispatch } from 'redux'; -import { connect } from 'react-redux'; +import { connect, DispatchProp } from 'react-redux'; import { RootState } from 'store/store'; import { values, pipe } from 'lodash/fp'; import { HomeTreePicker } from 'views-components/projects-tree-picker/home-tree-picker'; import { SharedTreePicker } from 'views-components/projects-tree-picker/shared-tree-picker'; import { FavoritesTreePicker } from 'views-components/projects-tree-picker/favorites-tree-picker'; -import { getProjectsTreePickerIds, treePickerSearchActions, SHARED_PROJECT_ID, FAVORITES_PROJECT_ID } from 'store/tree-picker/tree-picker-actions'; +import { + getProjectsTreePickerIds, treePickerActions, treePickerSearchActions, initProjectsTreePicker, + SHARED_PROJECT_ID, FAVORITES_PROJECT_ID +} from 'store/tree-picker/tree-picker-actions'; import { TreeItem } from 'components/tree/tree'; import { ProjectsTreePickerItem } from 'store/tree-picker/tree-picker-middleware'; import { PublicFavoritesTreePicker } from './public-favorites-tree-picker'; import { SearchInput } from 'components/search-input/search-input'; +import { withStyles, StyleRulesCallback, WithStyles } from '@material-ui/core'; +import { ArvadosTheme } from 'common/custom-theme'; -export interface ProjectsTreePickerProps { +export interface ToplevelPickerProps { pickerId: string; includeCollections?: boolean; includeFiles?: boolean; @@ -36,15 +41,13 @@ interface ProjectsTreePickerActionProps { onCollectionFilter: (value: string) => void; } -type ProjectsTreePickerCombinedProps = ProjectsTreePickerProps & ProjectsTreePickerSearchProps & ProjectsTreePickerActionProps; - -const mapStateToProps = (state: RootState, props: ProjectsTreePickerProps): ProjectsTreePickerSearchProps => ({ +const mapStateToProps = (state: RootState, props: ToplevelPickerProps): ProjectsTreePickerSearchProps => ({ projectSearch: "", collectionFilter: "", ...props }); -const mapDispatchToProps = (dispatch: Dispatch, props: ProjectsTreePickerProps): ProjectsTreePickerActionProps => { +const mapDispatchToProps = (dispatch: Dispatch, props: ToplevelPickerProps): (ProjectsTreePickerActionProps & DispatchProp) => { const { home, shared, favorites, publicFavorites } = getProjectsTreePickerIds(props.pickerId); const params = { includeCollections: props.includeCollections, @@ -63,37 +66,87 @@ const mapDispatchToProps = (dispatch: Dispatch, props: ProjectsTreePickerProps): dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue })); dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue })); dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue })); - } + }, + dispatch } }; -export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(({ pickerId, onProjectSearch, onCollectionFilter, ...props }: ProjectsTreePickerCombinedProps) => { - const { home, shared, favorites, publicFavorites } = getProjectsTreePickerIds(pickerId); - const relatedTreePickers = getRelatedTreePickers(pickerId); - const p = { - ...props, - relatedTreePickers, - disableActivation, - }; - return
- - - - -
- -
-
- -
-
- -
-
- -
-
; +type CssRules = 'pickerHeight' | 'searchFlex' | 'searchPadding'; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + pickerHeight: { + height: "80vh" + }, + searchFlex: { + display: "flex", + justifyContent: "space-around", + paddingBottom: "1em" + }, }); +type ProjectsTreePickerCombinedProps = ToplevelPickerProps & ProjectsTreePickerSearchProps & ProjectsTreePickerActionProps & DispatchProp & WithStyles; + +export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)( + withStyles(styles)( + class FileInputComponent extends React.Component { + + componentDidMount() { + const { home, shared, favorites, publicFavorites } = getProjectsTreePickerIds(this.props.pickerId); + + this.props.dispatch(initProjectsTreePicker(this.props.pickerId)); + + this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: this.props.pickerId, projectSearchValue: "" })); + this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue: "" })); + this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: shared, collectionFilterValue: "" })); + this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: favorites, collectionFilterValue: "" })); + this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: publicFavorites, collectionFilterValue: "" })); + } + + componentWillUnmount() { + const { home, shared, favorites, publicFavorites } = getProjectsTreePickerIds(this.props.pickerId); + // Release all the state, we don't need it to hang around forever. + this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: this.props.pickerId })); + this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: home })); + this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: shared })); + this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: favorites })); + this.props.dispatch(treePickerActions.RESET_TREE_PICKER({ pickerId: publicFavorites })); + } + + render() { + const pickerId = this.props.pickerId; + const onProjectSearch = this.props.onProjectSearch; + const onCollectionFilter = this.props.onCollectionFilter; + + const { home, shared, favorites, publicFavorites } = getProjectsTreePickerIds(pickerId); + const relatedTreePickers = getRelatedTreePickers(pickerId); + const p = { + includeCollections: this.props.includeCollections, + includeFiles: this.props.includeFiles, + showSelection: this.props.showSelection, + options: this.props.options, + relatedTreePickers, + disableActivation, + }; + return
+ + + + +
+ +
+
+ +
+
+ +
+
+ +
+
; + } + })); + const getRelatedTreePickers = pipe(getProjectsTreePickerIds, values); const disableActivation = [SHARED_PROJECT_ID, FAVORITES_PROJECT_ID]; diff --git a/src/views/run-process-panel/inputs/file-input.tsx b/src/views/run-process-panel/inputs/file-input.tsx index 099a81289c..24ea0b793b 100644 --- a/src/views/run-process-panel/inputs/file-input.tsx +++ b/src/views/run-process-panel/inputs/file-input.tsx @@ -137,7 +137,7 @@ const FileInputComponent = connect()( color='primary' onClick={this.submit}>Ok - ; + ; } }); -- 2.30.2