New ItemSet occurrence gets instantly validated #2333

-add occurrence buttons are using 'createAndAddOccurrence' method, I've updated it to use css to hide validation error immediately after occurrence is created and validated, and show it on next call to validate()
-Updated app config dialog to override form styling and force showing  validation error for newly added occurrence

(cherry picked from commit 0308a7a)

src/main/resources/assets/admin/common/js/form/FormItemOccurrence.ts

@@ -38,11 +38,11 @@ export class FormItemOccurrence<V extends FormItemOccurrenceView> {
     }
 
     addOccurrenceAbove(): Q.Promise<V> {
-        return this.occurrences.createAndAddOccurrence(this.index, false);
+        return this.occurrences.createAndAddOccurrence(this.index);
     }
 
     addOccurrenceBelow(): Q.Promise<V> {
-        return this.occurrences.createAndAddOccurrence(this.index + 1, false);
+        return this.occurrences.createAndAddOccurrence(this.index + 1);
     }
 
     showAddButton(): boolean {

src/main/resources/assets/admin/common/js/form/FormItemOccurrences.ts

@@ -176,7 +176,12 @@ export class FormItemOccurrences<V extends FormItemOccurrenceView> {
     public createAndAddOccurrence(insertAtIndex: number = this.countOccurrences(), validate: boolean = true): Q.Promise<V> {
         const occurrence: FormItemOccurrence<V> = this.createNewOccurrence(this, insertAtIndex);
 
-        return this.addOccurrence(occurrence, validate);
+        return this.addOccurrence(occurrence, validate).then((view: V) => {
+            // hiding validation error on adding new items until validate() is invoked
+            view.addClass('hide-validation-errors');
+
+            return view;
+        });
     }
 
     onFocus(listener: (event: FocusEvent) => void) {

src/main/resources/assets/admin/common/js/form/set/FormSetOccurrenceView.ts

@@ -260,6 +260,7 @@ export abstract class FormSetOccurrenceView
 
         this.currentValidationState = allRecordings;
         this.toggleClass('invalid', !this.isValid());
+        this.removeClass('hide-validation-errors');
         return allRecordings;
     }
 
@@ -615,13 +616,13 @@ export abstract class FormSetOccurrenceView
 
     private createMoreButton(): MoreButton {
         const addAboveAction = new Action(i18n('action.addAbove')).onExecuted(_action => {
-            void this.formItemOccurrence.addOccurrenceAbove().then(view => {
+            void this.formItemOccurrence.addOccurrenceAbove().then((view: FormItemOccurrenceView) => {
                 const setView = <FormSetOccurrenceView>view;
                 this.notifyExpandRequested(setView);
             });
         });
         const addBelowAction = new Action(i18n('action.addBelow')).onExecuted(_action => {
-            void this.formItemOccurrence.addOccurrenceBelow().then(view => {
+            void this.formItemOccurrence.addOccurrenceBelow().then((view: FormItemOccurrenceView) => {
                 const setView = <FormSetOccurrenceView>view;
                 this.notifyExpandRequested(setView);
             });

src/main/resources/assets/admin/common/styles/api/form/inputtype/appconfig/application-configurator-dialog.less

@@ -1,6 +1,21 @@
 .application-configurator-dialog {
   .modal-dialog-body {
     overflow: auto !important; // to force lazy loading work
+
+    // overriding form-set-view.less styles to force displaying validation errors even on newly added occurrences
+    .form-view {
+      &.display-validation-errors {
+        .form-item-view.invalid {
+          .form-item-set-occurrence-view,
+          .form-option-set-occurrence-view {
+            &.invalid {
+              border: 3px solid @admin-red !important;
+              box-shadow: none;
+            }
+          }
+        }
+      }
+    }
   }
 
   .modal-dialog-header {