From a15202e53207acc1878f02c00224d1df9540da8c Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 22 Jul 2021 12:02:11 -0300
Subject: [PATCH] 17928: Adds storage classes checkboxes to collection create
 dialog.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
 src/components/checkbox-field/checkbox-field.tsx    | 13 +++++++++++--
 src/store/collections/collection-create-actions.ts  |  1 +
 .../dialog-create/dialog-collection-create.tsx      |  7 ++++++-
 .../dialog-forms/create-collection-dialog.ts        |  2 +-
 .../form-fields/collection-form-fields.tsx          |  2 ++
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/checkbox-field/checkbox-field.tsx b/src/components/checkbox-field/checkbox-field.tsx
index 02a5e9a6..accd1e69 100644
--- 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 0b73e6f1..81d8948c 100644
--- 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 fb957d53..c85a6d12 100644
--- 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 63440619..7ef6e4b3 100644
--- 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 db18f76d..7e18111a 100644
--- 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
-- 
2.30.2