Connect project tree picker to the form

Feature #13952

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/validators/create-project/create-project-validator.tsx b/src/validators/create-project/create-project-validator.tsx
index 527043d9d8567024c60546091f6b4103dcdbe684..ddea8be97055a0c0f5ded7a3e48386c0a4794660 100644 (file)
--- a/src/validators/create-project/create-project-validator.tsx
+++ b/src/validators/create-project/create-project-validator.tsx
@@ -9,3 +9,4 @@ export const PROJECT_NAME_VALIDATION = [require, maxLength(255)];
 export const PROJECT_DESCRIPTION_VALIDATION = [maxLength(255)];
 export const COLLECTION_NAME_VALIDATION = [require, maxLength(255)];
 export const COLLECTION_DESCRIPTION_VALIDATION = [maxLength(255)];
+export const COLLECTION_PROJECT_VALIDATION = [require];

diff --git a/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx b/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
index ece0639510fb664daa9f01014cf137bfb3e23946..8a2efca208c239bfdf14eeb759059b1da8fbd296 100644 (file)
--- a/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
+++ b/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
@@ -7,12 +7,14 @@ import { reduxForm, reset, startSubmit, stopSubmit } from "redux-form";
 import { withDialog } from "../../store/dialog/with-dialog";
 import { dialogActions } from "../../store/dialog/dialog-actions";
 import { DialogCollectionCreateWithSelected } from "../dialog-create/dialog-collection-create-selected";
+import { loadProjectTreePickerProjects } from "../project-tree-picker/project-tree-picker";
 
 export const DIALOG_COLLECTION_CREATE_WITH_SELECTED = 'dialogCollectionCreateWithSelected';
 
 export const createCollectionWithSelected = () =>
     (dispatch: Dispatch) => {
         dispatch(reset(DIALOG_COLLECTION_CREATE_WITH_SELECTED));
+        dispatch<any>(loadProjectTreePickerProjects(''));
         dispatch(dialogActions.OPEN_DIALOG({ id: DIALOG_COLLECTION_CREATE_WITH_SELECTED, data: {} }));
     };
 

diff --git a/src/views-components/dialog-create/dialog-collection-create-selected.tsx b/src/views-components/dialog-create/dialog-collection-create-selected.tsx
index 591dd2cf6cc99e5420c1a9f56825539616183625..5069db94b521999953524a3cffbdff1b2c5aacbc 100644 (file)
--- a/src/views-components/dialog-create/dialog-collection-create-selected.tsx
+++ b/src/views-components/dialog-create/dialog-collection-create-selected.tsx
@@ -3,11 +3,12 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { InjectedFormProps, Field } from "redux-form";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } from "@material-ui/core";
+import { InjectedFormProps, Field, WrappedFieldProps } from "redux-form";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, FormHelperText } from "@material-ui/core";
 import { WithDialogProps } from "../../store/dialog/with-dialog";
 import { TextField } from "../../components/text-field/text-field";
-import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from "../../validators/create-project/create-project-validator";
+import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION } from "../../validators/create-project/create-project-validator";
+import { ProjectTreePicker } from "../project-tree-picker/project-tree-picker";
 
 export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
     <form>
@@ -28,7 +29,10 @@ export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string
                         validate={COLLECTION_DESCRIPTION_VALIDATION}
                         label="Description - optional" />
                 </div>
-                <div style={{ overflowY: 'auto' }}>TREE</div>
+                <Field
+                    name="projectUuid"
+                    component={Picker}
+                    validate={COLLECTION_PROJECT_VALIDATION} />
             </DialogContent>
             <DialogActions>
                 <Button
@@ -50,4 +54,9 @@ export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string
                 </Button>
             </DialogActions>
         </Dialog>
-    </form>;
\ No newline at end of file
+    </form>;
+
+const Picker = (props: WrappedFieldProps) =>
+    <div style={{ width: '400px', height: '144px', display: 'flex', flexDirection: 'column' }}>
+        <ProjectTreePicker onChange={projectUuid => props.input.onChange(projectUuid)} />
+    </div>;

diff --git a/src/views-components/project-tree-picker/project-tree-picker.tsx b/src/views-components/project-tree-picker/project-tree-picker.tsx
index c4795e1ba92faf5c0259b6280c1687d492515c1e..6effd86d56b6eb9d224dfd8cfcbc6a7a25808bf1 100644 (file)
--- a/src/views-components/project-tree-picker/project-tree-picker.tsx
+++ b/src/views-components/project-tree-picker/project-tree-picker.tsx
@@ -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