//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from "react";
-import { Dispatch } from "redux";
-import { connect } from "react-redux";
-import { TreeItem, TreeItemStatus } from '~/components/tree/tree';
-import { ProjectResource } from "~/models/project";
-import { treePickerActions } from "~/store/tree-picker/tree-picker-actions";
-import { ListItemTextIcon } from "~/components/list-item-text-icon/list-item-text-icon";
-import { ProjectIcon, InputIcon, IconType, CollectionIcon } from '~/components/icon/icon';
-import { loadProject, loadCollection } from '~/store/tree-picker/tree-picker-actions';
-import { GroupContentsResource } from '~/services/groups-service/groups-service';
-import { CollectionDirectory, CollectionFile, CollectionFileType } from '~/models/collection-file';
-import { ResourceKind } from '~/models/resource';
-import { TreePickerProps, TreePicker } from "~/views-components/tree-picker/tree-picker";
-
-export interface ProjectsTreePickerRootItem {
- id: string;
- name: string;
-}
-
-type ProjectsTreePickerItem = ProjectsTreePickerRootItem | GroupContentsResource | CollectionDirectory | CollectionFile;
-type PickedTreePickerProps = Pick<TreePickerProps<ProjectsTreePickerItem>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
+import React from 'react';
+import { Dispatch } from '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 { SearchProjectsPicker } from 'views-components/projects-tree-picker/search-projects-picker';
+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 ProjectsTreePickerDataProps {
+export interface ToplevelPickerProps {
pickerId: string;
includeCollections?: boolean;
includeFiles?: boolean;
- rootItemIcon: IconType;
- loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string, includeCollections?: boolean, inlcudeFiles?: boolean) => void;
+ showSelection?: boolean;
+ options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
+ toggleItemActive?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
+ toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
}
-export interface ProjectsTreePickerActionProps {
+interface ProjectsTreePickerSearchProps {
+ projectSearch: string;
+ collectionFilter: string;
}
-export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & ProjectsTreePickerActionProps;
+interface ProjectsTreePickerActionProps {
+ onProjectSearch: (value: string) => void;
+ onCollectionFilter: (value: string) => void;
+}
-const mapStateToProps = (_: any, { pickerId, rootItemIcon }: ProjectsTreePickerProps) => ({
- render: renderTreeItem(rootItemIcon),
- pickerId,
-});
+const mapStateToProps = (state: RootState, props: ToplevelPickerProps): ProjectsTreePickerSearchProps => {
+ const { search } = getProjectsTreePickerIds(props.pickerId);
+ return {
+ ...props,
+ projectSearch: state.treePickerSearch.projectSearchValues[search],
+ collectionFilter: state.treePickerSearch.collectionFilterValues[search],
+ };
+};
-const mapDispatchToProps = (dispatch: Dispatch, props: ProjectsTreePickerProps): PickedTreePickerProps => ({
- onContextMenu: () => { return; },
- toggleItemActive: (_, { id }, pickerId) => {
- dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ id, pickerId }));
- },
- toggleItemOpen: (_, item, pickerId) => {
- const { id, data, status } = item;
- if (status === TreeItemStatus.INITIAL) {
- if ('kind' in data) {
- dispatch<any>(
- data.kind === ResourceKind.COLLECTION
- ? loadCollection(id, pickerId)
- : loadProject(id, pickerId, props.includeCollections, props.includeFiles)
- );
- } else if (!('type' in data) && props.loadRootItem) {
- props.loadRootItem(item as TreeItem<ProjectsTreePickerRootItem>, pickerId, props.includeCollections, props.includeFiles);
- }
- } else if (status === TreeItemStatus.LOADED) {
- dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId }));
- }
+const mapDispatchToProps = (dispatch: Dispatch, props: ToplevelPickerProps): (ProjectsTreePickerActionProps & DispatchProp) => {
+ const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(props.pickerId);
+ const params = {
+ includeCollections: props.includeCollections,
+ includeFiles: props.includeFiles,
+ options: props.options
+ };
+ dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: home, params }));
+ dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: shared, params }));
+ dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: favorites, params }));
+ dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: publicFavorites, params }));
+ dispatch(treePickerSearchActions.SET_TREE_PICKER_LOAD_PARAMS({ pickerId: search, params }));
+
+ return {
+ onProjectSearch: (projectSearchValue: string) => dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue })),
+ onCollectionFilter: (collectionFilterValue: string) => {
+ dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: home, collectionFilterValue }));
+ 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(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue }));
+ },
+ dispatch
+ }
+};
+
+type CssRules = 'pickerHeight' | 'searchFlex' | 'scrolledBox';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ pickerHeight: {
+ height: "100%",
+ display: "flex",
+ flexDirection: "column",
},
- toggleItemSelection: (_, { id }, pickerId) => {
- dispatch<any>(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECTION({ id, pickerId }));
+ searchFlex: {
+ display: "flex",
+ justifyContent: "space-around",
+ paddingBottom: "1em"
},
+ scrolledBox: {
+ overflow: "scroll"
+ }
});
-export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(TreePicker);
-
-const getProjectPickerIcon = ({ data }: TreeItem<ProjectsTreePickerItem>, rootIcon: IconType): IconType => {
- if ('kind' in data) {
- switch (data.kind) {
- case ResourceKind.COLLECTION:
- return CollectionIcon;
- default:
- return ProjectIcon;
- }
- } else if ('type' in data) {
- switch (data.type) {
- case CollectionFileType.FILE:
- return InputIcon;
- default:
- return ProjectIcon;
- }
- } else {
- return rootIcon;
- }
-};
+type ProjectsTreePickerCombinedProps = ToplevelPickerProps & ProjectsTreePickerSearchProps & ProjectsTreePickerActionProps & DispatchProp & WithStyles<CssRules>;
+
+export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(
+ withStyles(styles)(
+ class FileInputComponent extends React.Component<ProjectsTreePickerCombinedProps> {
+
+ componentDidMount() {
+ const { home, shared, favorites, publicFavorites, search } = getProjectsTreePickerIds(this.props.pickerId);
+
+ this.props.dispatch<any>(initProjectsTreePicker(this.props.pickerId));
+
+ this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_PROJECT_SEARCH({ pickerId: search, projectSearchValue: "" }));
+ this.props.dispatch(treePickerSearchActions.SET_TREE_PICKER_COLLECTION_FILTER({ pickerId: search, collectionFilterValue: "" }));
+ 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, search } = 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: search }));
+ 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, search } = getProjectsTreePickerIds(pickerId);
+ const relatedTreePickers = getRelatedTreePickers(pickerId);
+ const p = {
+ includeCollections: this.props.includeCollections,
+ includeFiles: this.props.includeFiles,
+ showSelection: this.props.showSelection,
+ options: this.props.options,
+ toggleItemActive: this.props.toggleItemActive,
+ toggleItemSelection: this.props.toggleItemSelection,
+ relatedTreePickers,
+ disableActivation,
+ };
+ return <div className={this.props.classes.pickerHeight} >
+ <span className={this.props.classes.searchFlex}>
+ <SearchInput value="" label="Search for a Project" selfClearProp='' onSearch={onProjectSearch} debounce={500} />
+ {this.props.includeCollections &&
+ <SearchInput value="" label="Filter Collections list in Projects" selfClearProp='' onSearch={onCollectionFilter} debounce={500} />}
+ </span>
+
+ <div className={this.props.classes.scrolledBox}>
+ {this.props.projectSearch ?
+ <div data-cy="projects-tree-search-picker">
+ <SearchProjectsPicker {...p} pickerId={search} />
+ </div>
+ :
+ <>
+ <div data-cy="projects-tree-home-tree-picker">
+ <HomeTreePicker {...p} pickerId={home} />
+ </div>
+ <div data-cy="projects-tree-shared-tree-picker">
+ <SharedTreePicker {...p} pickerId={shared} />
+ </div>
+ <div data-cy="projects-tree-public-favourites-tree-picker">
+ <PublicFavoritesTreePicker {...p} pickerId={publicFavorites} />
+ </div>
+ <div data-cy="projects-tree-favourites-tree-picker">
+ <FavoritesTreePicker {...p} pickerId={favorites} />
+ </div>
+ </>}
+ </div>
+ </div >;
+ }
+ }));
-const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
- <ListItemTextIcon
- icon={getProjectPickerIcon(item, rootItemIcon)}
- name={item.data.name}
- isActive={item.active}
- hasMargin={true} />;
+const getRelatedTreePickers = pipe(getProjectsTreePickerIds, values);
+const disableActivation = [SHARED_PROJECT_ID, FAVORITES_PROJECT_ID];
projects / arvados.git / blobdiff