Fix wrong visualization of bitstream access condition form within submission form

src/app/shared/mocks/submission.mock.ts

@@ -1519,6 +1519,7 @@ export const mockFileFormData = {
   },
   accessConditions: [
     {
+      accessConditionGroup: {
         name: [
           {
             value: 'openaccess',
@@ -1530,9 +1531,10 @@ export const mockFileFormData = {
             otherInformation: null
           }
         ],
-    }
-    ,
+      },
+    },
     {
+      accessConditionGroup:{
         name: [
           {
             value: 'lease',
@@ -1564,8 +1566,9 @@ export const mockFileFormData = {
           }
         ],
       }
-    ,
+    },
     {
+      accessConditionGroup: {
         name: [
           {
             value: 'embargo',
@@ -1597,5 +1600,6 @@ export const mockFileFormData = {
           }
         ],
       }
+    }
   ]
 };

src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.scss

@@ -0,0 +1,6 @@
+
+::ng-deep .access-condition-group {
+  position: relative;
+  top: -2.3rem;
+  margin-bottom: -2.3rem;
+}

src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts

@@ -18,6 +18,8 @@ import {
 import { WorkspaceitemSectionUploadFileObject } from '../../../../../core/submission/models/workspaceitem-section-upload-file.model';
 import { FormBuilderService } from '../../../../../shared/form/builder/form-builder.service';
 import {
+  BITSTREAM_ACCESS_CONDITION_GROUP_CONFIG,
+  BITSTREAM_ACCESS_CONDITION_GROUP_LAYOUT,
   BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG,
   BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT,
   BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_CONFIG,
@@ -43,6 +45,7 @@ import { FormComponent } from '../../../../../shared/form/form.component';
  */
 @Component({
   selector: 'ds-submission-section-upload-file-edit',
+  styleUrls: ['./section-upload-file-edit.component.scss'],
   templateUrl: './section-upload-file-edit.component.html',
 })
 export class SubmissionSectionUploadFileEditComponent implements OnChanges {
@@ -209,8 +212,9 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
 
         const startDate = new DynamicDatePickerModel(startDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT);
         const endDate = new DynamicDatePickerModel(endDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT);
-
-        return [type, startDate, endDate];
+        const accessConditionGroupConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITION_GROUP_CONFIG);
+        accessConditionGroupConfig.group = [type, startDate, endDate];
+        return [new DynamicFormGroupModel(accessConditionGroupConfig, BITSTREAM_ACCESS_CONDITION_GROUP_LAYOUT)];
       };
 
       // Number of access conditions blocks in form

src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts

@@ -21,6 +21,18 @@ export const BITSTREAM_METADATA_FORM_GROUP_LAYOUT: DynamicFormControlLayout = {
     label: 'col-sm-3'
   }
 };
+export const BITSTREAM_ACCESS_CONDITION_GROUP_CONFIG: DynamicFormGroupModelConfig = {
+  id: 'accessConditionGroup',
+  group: []
+};
+
+export const BITSTREAM_ACCESS_CONDITION_GROUP_LAYOUT: DynamicFormControlLayout = {
+  element: {
+    host: 'form-group flex-fill access-condition-group',
+    container: 'pl-1 pr-1',
+    control: 'form-row '
+  }
+};
 
 export const BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG: DynamicFormArrayModelConfig = {
   id: 'accessConditions',
@@ -28,7 +40,7 @@ export const BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG: DynamicFormArrayMode
 };
 export const BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT: DynamicFormControlLayout = {
   grid: {
-    group: 'form-row'
+    group: 'form-row pt-4',
   }
 };
 
@@ -39,11 +51,8 @@ export const BITSTREAM_FORM_ACCESS_CONDITION_TYPE_CONFIG: DynamicSelectModelConf
 };
 export const BITSTREAM_FORM_ACCESS_CONDITION_TYPE_LAYOUT: DynamicFormControlLayout = {
   element: {
-    container: 'p-0',
-    label: 'col-form-label'
-  },
-  grid: {
-    host: 'col-md-10'
+    host: 'col-12',
+    label: 'col-form-label name-label'
   }
 };
 
@@ -70,11 +79,10 @@ export const BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_CONFIG: DynamicDatePicke
 };
 export const BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT: DynamicFormControlLayout = {
   element: {
-    container: 'p-0',
     label: 'col-form-label'
   },
   grid: {
-    host: 'col-md-4'
+    host: 'col-6'
   }
 };
 
@@ -101,10 +109,9 @@ export const BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_CONFIG: DynamicDatePickerM
 };
 export const BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT: DynamicFormControlLayout = {
   element: {
-    container: 'p-0',
     label: 'col-form-label'
   },
   grid: {
-    host: 'col-md-4'
+    host: 'col-6'
   }
 };

src/app/submission/sections/upload/file/section-upload-file.component.ts

@@ -255,6 +255,7 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
           });
         const accessConditionsToSave = [];
         formData.accessConditions
+          .map((accessConditions) => accessConditions.accessConditionGroup)
           .filter((accessCondition) => isNotEmpty(accessCondition))
           .forEach((accessCondition) => {
             let accessConditionOpt;