Merge branch 'master' into 13988-make-a-copy-popup

[arvados-workbench2.git] / src / views-components / dialog-create / dialog-collection-create-selected.tsx

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..ad684d780b008a274ce9a99de8f44f13d267da6c 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 { InjectedFormProps, Field, WrappedFieldProps } from "redux-form";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } 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 { WithDialogProps } from "~/store/dialog/with-dialog";
+import { TextField } from "~/components/text-field/text-field";
+import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION } from "~/validators/validators";
+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
@@ -44,10 +48,13 @@ export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string
                     type='submit'
                     onClick={props.handleSubmit}
                     disabled={props.pristine || props.invalid || props.submitting}>
-                    {props.submitting
-                        ? <CircularProgress size={20} />
-                        : 'Create a collection'}
+                    {props.submitting ? <CircularProgress size={20} /> : 'Create a collection'}
                 </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>;