17928: Adds storage classes checkboxes to collection create dialog.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/components/checkbox-field/checkbox-field.tsx b/src/components/checkbox-field/checkbox-field.tsx
index 02a5e9a68ddd36f79dafa8362a9d8090cc4e40a6..accd1e698067627d640063fde7e1478dd8ff4fe6 100644 (file)
--- a/src/components/checkbox-field/checkbox-field.tsx
+++ b/src/components/checkbox-field/checkbox-field.tsx
@@ -27,6 +27,7 @@ export const CheckboxField = (props: WrappedFieldProps & { label?: string }) =>
 
 type MultiCheckboxFieldProps = {
     items: string[];
+    defaultValues?: string[];
     label?: string;
     minSelection?: number;
     maxSelection?: number;
@@ -37,18 +38,26 @@ type MultiCheckboxFieldProps = {
 export const MultiCheckboxField = (props: WrappedFieldProps & MultiCheckboxFieldProps) => {
     const isValid = (items: string[]) => (items.length >= (props.minSelection || 0)) &&
         (items.length <= (props.maxSelection || items.length));
+    if (props.input.value.length === 0 && (props.defaultValues || []).length !== 0) {
+        props.input.value = props.defaultValues ? [...props.defaultValues] : [];
+    }
     return <FormControl error={!isValid(props.input.value)}>
         <FormLabel component='label'>{props.label}</FormLabel>
         <FormGroup row={props.rowLayout}>
         { props.items.map((item, idx) =>
             <FormControlLabel
+                key={`label-${idx}`}
                 control={
                     <Checkbox
                         data-cy={`checkbox-${item}`}
-                        key={idx}
+                        key={`control-${idx}`}
                         name={`${props.input.name}[${idx}]`}
                         value={item}
-                        checked={props.input.value.indexOf(item) !== -1}
+                        checked={
+                            props.input.value.indexOf(item) !== -1 ||
+                            (props.input.value.length === 0 &&
+                                (props.defaultValues || []).indexOf(item) !== -1)
+                        }
                         onChange={e => {
                             const newValue = [...props.input.value];
                             if (e.target.checked) {

diff --git a/src/store/collections/collection-create-actions.ts b/src/store/collections/collection-create-actions.ts
index 0b73e6f151a7419393f1ac4bcead66c8bba19cd5..81d8948ce1dfa65ffb84b7362c0b940124272ba4 100644 (file)
--- a/src/store/collections/collection-create-actions.ts
+++ b/src/store/collections/collection-create-actions.ts
@@ -20,6 +20,7 @@ export interface CollectionCreateFormDialogData {
     ownerUuid: string;
     name: string;
     description: string;
+    storageClassesDesired: string[];
 }
 
 export const COLLECTION_CREATE_FORM_NAME = "collectionCreateFormName";

diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx
index fb957d5398f44754049e3b32100fd91b47883268..c85a6d121506062307340e94017f32bc9dec7760 100644 (file)
--- a/src/views-components/dialog-create/dialog-collection-create.tsx
+++ b/src/views-components/dialog-create/dialog-collection-create.tsx
@@ -7,7 +7,11 @@ import { InjectedFormProps, Field } from 'redux-form';
 import { WithDialogProps } from 'store/dialog/with-dialog';
 import { CollectionCreateFormDialogData } from 'store/collections/collection-create-actions';
 import { FormDialog } from 'components/form-dialog/form-dialog';
-import { CollectionNameField, CollectionDescriptionField } from 'views-components/form-fields/collection-form-fields';
+import {
+    CollectionNameField,
+    CollectionDescriptionField,
+    CollectionStorageClassesField
+} from 'views-components/form-fields/collection-form-fields';
 import { FileUploaderField } from '../file-uploader/file-uploader';
 import { ResourceParentField } from '../form-fields/resource-form-fields';
 
@@ -25,6 +29,7 @@ const CollectionAddFields = () => <span>
     <ResourceParentField />
     <CollectionNameField />
     <CollectionDescriptionField />
+    <CollectionStorageClassesField defaultClasses={['default']} />
     <Field
         name='files'
         label='Files'

diff --git a/src/views-components/dialog-forms/create-collection-dialog.ts b/src/views-components/dialog-forms/create-collection-dialog.ts
index 634406194e0e5e4c45aedbf71506b58da47764de..7ef6e4b3cd4b3b048bfa01b59801fb2b282f93a7 100644 (file)
--- a/src/views-components/dialog-forms/create-collection-dialog.ts
+++ b/src/views-components/dialog-forms/create-collection-dialog.ts
@@ -17,7 +17,7 @@ export const CreateCollectionDialog = compose(
         onSubmit: (data, dispatch) => {
             // Somehow an extra field called 'files' gets added, copy
             // the data object to get rid of it.
-            dispatch(createCollection({ ownerUuid: data.ownerUuid, name: data.name, description: data.description }));
+            dispatch(createCollection({ ownerUuid: data.ownerUuid, name: data.name, description: data.description, storageClassesDesired: data.storageClassesDesired }));
         }
     })
 )(DialogCollectionCreate);

diff --git a/src/views-components/form-fields/collection-form-fields.tsx b/src/views-components/form-fields/collection-form-fields.tsx
index db18f76d8f6ed0de21ec9601db2a6664419720d4..7e18111a672f2397b51fd241493d22677aeb6f15 100644 (file)
--- a/src/views-components/form-fields/collection-form-fields.tsx
+++ b/src/views-components/form-fields/collection-form-fields.tsx
@@ -60,6 +60,7 @@ export const CollectionPickerField = (props: PickerIdProp) =>
 
 interface StorageClassesProps {
     items: string[];
+    defaultClasses?: string[];
 }
 
 export const CollectionStorageClassesField = connect(
@@ -74,6 +75,7 @@ export const CollectionStorageClassesField = connect(
             label='Storage classes'
             minSelection={1}
             rowLayout={true}
+            defaultValues={props.defaultClasses}
             helperText='At least one class should be selected'
             component={MultiCheckboxField}
             items={props.items} />);
\ No newline at end of file