Merge branch 'master'
[arvados.git] / src / views-components / project-tree-picker / project-tree-picker.tsx
index c4795e1ba92faf5c0259b6280c1687d492515c1e..1c343a2dde1d8a4acf364d95f6f0a451508f5fee 100644 (file)
@@ -19,9 +19,10 @@ import { FilterBuilder } from "../../common/api/filter-builder";
 
 type ProjectTreePickerProps = Pick<TreeProps<ProjectResource>, 'toggleItemActive' | 'toggleItemOpen'>;
 
-const mapDispatchToProps = (dispatch: Dispatch): ProjectTreePickerProps => ({
+const mapDispatchToProps = (dispatch: Dispatch, props: {onChange: (projectUuid: string) => void}): ProjectTreePickerProps => ({
     toggleItemActive: id => {
         dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ id }));
+        props.onChange(id);
     },
     toggleItemOpen: (id, status) => {
         status === TreeItemStatus.INITIAL
@@ -31,11 +32,13 @@ const mapDispatchToProps = (dispatch: Dispatch): ProjectTreePickerProps => ({
 });
 
 export const ProjectTreePicker = connect(undefined, mapDispatchToProps)((props: ProjectTreePickerProps) =>
-    <div>
-        <Typography variant='caption'>
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+        <Typography variant='caption' style={{flexShrink: 0}}>
             Select a project
         </Typography>
-        <TreePicker {...props} render={renderTreeItem} />
+        <div style={{flexGrow: 1, overflow: 'auto'}}>
+            <TreePicker {...props} render={renderTreeItem} />
+        </div>
     </div>);
 
 // TODO: move action creator to store directory
@@ -46,7 +49,7 @@ export const loadProjectTreePickerProjects = (id: string) =>
         const ownerUuid = id.length === 0 ? services.authService.getUuid() || '' : id;
 
         const filters = FilterBuilder
-            .create<ProjectResource>()
+            .create()
             .addEqual('ownerUuid', ownerUuid);
 
         const { items } = await services.projectService.list({ filters });