import { trashedCollectionActionSet } from '~/views-components/context-menu/action-sets/trashed-collection-action-set';
import { ContainerRequestState } from '~/models/container-request';
import { MountKind } from '~/models/mount-types';
-import { receiveTreePickerData } from '~/store/tree-picker/tree-picker-actions';
-import { loadProject, loadCollection } from './store/tree-picker/tree-picker-actions';
+import { receiveTreePickerData, loadUserProject } from '~/store/tree-picker/tree-picker-actions';
+import { loadProject, loadCollection, initUserProject } from './store/tree-picker/tree-picker-actions';
import { ResourceKind } from '~/models/resource';
const getBuildNumber = () => "BN-" + (process.env.REACT_APP_BUILD_NUMBER || "dev");
await store.dispatch(loadWorkbench());
addRouteChangeHandlers(history, store);
// createEnumCollectorWorkflow(services);
- store.dispatch(receiveTreePickerData({
- id: '',
- pickerId: 'testPicker',
- data: [{name: 'Projects', uuid: 'c97qk-tpzed-1k14sp44jonn0n3'}],
- extractNodeData: value => ({id: value.uuid, value}),
- }));
- await store.dispatch(loadProject(
- 'c97qk-tpzed-1k14sp44jonn0n3',
- 'testPicker',
- [ResourceKind.COLLECTION],
- ));
- await store.dispatch(loadCollection(
- 'c97qk-4zz18-9sn8ygaf62chkkd',
- 'testPicker',
- ));
+ store.dispatch(initUserProject('testPicker1'));
+ store.dispatch(initUserProject('testPicker2'));
+ store.dispatch(initUserProject('testPicker3'));
+ // await store.dispatch(loadCollection(
+ // 'c97qk-4zz18-9sn8ygaf62chkkd',
+ // 'testPicker',
+ // ));
}
};
};
}));
dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId }));
};
-
-export const loadProject = (id: string, pickerId: string, include?: ResourceKind[]) =>
+export const loadProject = (id: string, pickerId: string, includeCollections = false, includeFiles = false) =>
async (dispatch: Dispatch, _: () => RootState, services: ServiceRepository) => {
+
dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ id, pickerId }));
const filters = pipe(
(fb: FilterBuilder) => fb.addEqual('ownerUuid', id),
- fb => include ? fb.addIsA('uuid', include) : fb,
+ fb => includeCollections
+ ? fb.addIsA('uuid', [ResourceKind.PROJECT, ResourceKind.COLLECTION])
+ : fb.addIsA('uuid', [ResourceKind.PROJECT]),
fb => fb.getFilters(),
)(new FilterBuilder());
id,
pickerId,
data: items,
- extractNodeData: item => ({ id: item.uuid, value: item }),
+ extractNodeData: item => ({
+ id: item.uuid,
+ value: item,
+ status: item.kind === ResourceKind.PROJECT
+ ? TreeNodeStatus.INITIAL
+ : includeFiles
+ ? TreeNodeStatus.INITIAL
+ : TreeNodeStatus.LOADED
+ }),
}));
};
id,
pickerId,
data,
- extractNodeData: value => {
- return {
- id: value.id,
+ extractNodeData: value => ({
+ id: value.id,
+ status: TreeNodeStatus.LOADED,
+ value,
+ }),
+ }));
+ };
+
+
+export const initUserProject = (pickerId: string) =>
+ async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ const uuid = services.authService.getUuid();
+ if (uuid) {
+ dispatch(receiveTreePickerData({
+ id: '',
+ pickerId,
+ data: [{ uuid, name: 'Projects' }],
+ extractNodeData: value => ({
+ id: value.uuid,
+ status: TreeNodeStatus.INITIAL,
value,
- status: TreeNodeStatus.LOADED,
- };
- },
+ }),
+ }));
+ }
+ };
+export const loadUserProject = (pickerId: string, includeCollections = false, includeFiles = false) =>
+ async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ const uuid = services.authService.getUuid();
+ if (uuid) {
+ dispatch(loadProject(uuid, pickerId, includeCollections, includeFiles));
+ }
+ };
+
+
+export const initSharedProject = (pickerId: string) =>
+ async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ dispatch(receiveTreePickerData({
+ id: '',
+ pickerId,
+ data: [{ uuid: 'Shared with me', name: 'Shared with me' }],
+ extractNodeData: value => ({
+ id: value.uuid,
+ status: TreeNodeStatus.INITIAL,
+ value,
+ }),
}));
};
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// 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'>;
+
+export interface ProjectsTreePickerDataProps {
+ pickerId: string;
+ includeCollections?: boolean;
+ includeFiles?: boolean;
+ rootItemIcon: IconType;
+ loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string, includeCollections?: boolean, inlcudeFiles?: boolean) => void;
+}
+
+export interface ProjectsTreePickerActionProps {
+}
+
+export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & ProjectsTreePickerActionProps;
+
+const mapStateToProps = (_: any, { pickerId, rootItemIcon }: ProjectsTreePickerProps) => ({
+ render: renderTreeItem(rootItemIcon),
+ pickerId,
+});
+
+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 }));
+ }
+ },
+ toggleItemSelection: (_, { id }, pickerId) => {
+ dispatch<any>(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECTION({ id, pickerId }));
+ },
+});
+
+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;
+ }
+};
+
+const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
+ <ListItemTextIcon
+ icon={getProjectPickerIcon(item, rootItemIcon)}
+ name={item.data.name}
+ isActive={item.active}
+ hasMargin={true} />;
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from 'react-redux';
+import { ProjectsTreePicker, ProjectsTreePickerProps } from '~/views-components/projects-tree-picker/projects-tree-picker';
+import { Dispatch } from 'redux';
+import { loadUserProject } from '~/store/tree-picker/tree-picker-actions';
+import { ShareIcon } from '~/components/icon/icon';
+
+export const UserProjectsTreePicker = connect(() => ({
+ rootItemIcon: ShareIcon,
+}), (dispatch: Dispatch): Pick<ProjectsTreePickerProps, 'loadRootItem'> => ({
+ loadRootItem: (_, pickerId, includeCollections, includeFiles) => {
+ dispatch<any>(loadUserProject(pickerId, includeCollections, includeFiles));
+ },
+}))(ProjectsTreePicker);
\ No newline at end of file
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from 'react-redux';
+import { ProjectsTreePicker, ProjectsTreePickerProps } from '~/views-components/projects-tree-picker/projects-tree-picker';
+import { Dispatch } from 'redux';
+import { loadUserProject } from '~/store/tree-picker/tree-picker-actions';
+import { ProjectIcon } from '~/components/icon/icon';
+
+export const UserProjectsTreePicker = connect(() => ({
+ rootItemIcon: ProjectIcon,
+}), (dispatch: Dispatch): Pick<ProjectsTreePickerProps, 'loadRootItem'> => ({
+ loadRootItem: (_, pickerId, includeCollections, includeFiles) => {
+ dispatch<any>(loadUserProject(pickerId, includeCollections, includeFiles));
+ },
+}))(ProjectsTreePicker);
\ No newline at end of file
import { noop } from 'lodash';
import { TreeItem } from '~/components/tree/tree';
import { GroupContentsResource } from '~/services/groups-service/groups-service';
+import { ProjectsTreePicker } from '~/views-components/projects-tree-picker/projects-tree-picker';
+import { UserProjectsTreePicker } from '~/views-components/projects-tree-picker/user-projects-tree-picker';
type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
<MainContentBar />
</Grid>
<Grid item xs className={classes.content}>
- <TreePicker
- render={({ data }: TreeItem<GroupContentsResource>) =>
- <p>{JSON.stringify(data.name)}</p>}
- pickerId='testPicker'
- onContextMenu={noop}
- toggleItemOpen={noop}
- toggleItemActive={item => console.log(item)}
- toggleItemSelection={noop} />
+ <UserProjectsTreePicker pickerId='testPicker1'/>
+ <UserProjectsTreePicker pickerId='testPicker2' includeCollections/>
+ <UserProjectsTreePicker pickerId='testPicker3' includeCollections includeFiles/>
<Switch>
<Route path={Routes.PROJECTS} component={ProjectPanel} />
<Route path={Routes.COLLECTIONS} component={CollectionPanel} />