argoproj#46 Connected created step to multiple service panel. Added v…

…alidations.

saas/axops/src/ui/src/app/common/multiple-service-launch-panel/multiple-service-launch-panel.component.ts

@@ -1,14 +1,15 @@
 import * as _ from 'lodash';
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 
-import {Artifact, Commit, Template, Task, Project, ProjectAction, Branch } from '../../model';
+import { Artifact, Commit, Template, Task, Project, ProjectAction, Branch } from '../../model';
 import { TemplateService, TaskService, CommitsService } from '../../services';
 import { NotificationsService } from 'argo-ui-lib/src/components';
 import { Session, HtmlForm, MULTIPLE_SERVICE_LAUNCH_PANEL_TABS } from './multiple-service-launch-panel.view-models';
+import { SetupJobNotificationsComponent } from './setup-job-notifications/setup-job-notifications.component';
 
 @Component({
     selector: 'ax-multiple-service-launch-panel',
@@ -18,6 +19,9 @@ import { Session, HtmlForm, MULTIPLE_SERVICE_LAUNCH_PANEL_TABS } from './multipl
 export class MultipleServiceLaunchPanelComponent {
     @Output() submitted: EventEmitter<any> = new EventEmitter();
 
+    @ViewChild(SetupJobNotificationsComponent)
+    private setupJobNotifications: SetupJobNotificationsComponent;
+
     public templates: Template[] = [];
     public templatesToSubmit: Template[] = [];
     public allSelected: boolean = false;
@@ -262,10 +266,11 @@ export class MultipleServiceLaunchPanelComponent {
     }
 
     submit() {
+        let notifications = this.setupJobNotifications.getNotifications();
         this.isSubmitClicked = true;
         this.summaryErrorMessage = this.allForms.invalid;
 
-        if (this.allForms.valid) {
+        if (this.allForms.valid && notifications) {
             if (this.resubmit) {
                 this.resubmitTask(this.task, this.resubmit);
             } else {
@@ -327,10 +332,6 @@ export class MultipleServiceLaunchPanelComponent {
         this.getTemplates(branch.repo);
     }
 
-    public setNotifications(event) {
-        console.log('notifications', event);
-    }
-
     private prepareForms(templates: Template[], resubmitFailedParameters?: any) {
         templates.forEach((template, index) => {
             let newForm = new FormGroup({});

saas/axops/src/ui/src/app/common/multiple-service-launch-panel/multiple-service-launch-panel.html

@@ -198,7 +198,7 @@ <h3 *ngIf="!templateLoader && isActiveFormEmpty">
             </div>
         </div>
         <div class="panel-box" *ngIf="stepNumber === 3">
-            <ax-setup-job-notifications (onChange)="setNotifications($event)"></ax-setup-job-notifications>
+            <ax-setup-job-notifications></ax-setup-job-notifications>
         </div>
     </sliding-panel-body>
 </ax-sliding-panel>

saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.component.ts

@@ -1,19 +1,30 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { FilterMultiSelect } from 'argo-ui-lib/src/components';
 
 import { PolicyNotification } from '../../../model';
 import { CustomRegex } from '../../customValidators/CustomRegex';
 import { AuthenticationService } from '../../../services';
 
+interface NotificationObject {
+    jobEvents: FilterMultiSelect;
+    isArgoUsersAndGroupsVisible: boolean;
+    isSlackChannelsVisible: boolean;
+    isEmailVisible: boolean;
+    rules: PolicyNotification;
+    outsideUsers: string[];
+    filteredOutsideUsers: string[];
+    validationMessages: any;
+}
+
 @Component({
     selector: 'ax-setup-job-notifications',
     templateUrl: './setup-job-notifications.html',
     styles: [ require('./setup-job-notifications.scss') ],
 })
 export class SetupJobNotificationsComponent implements OnInit {
-    @Output()
-    public onChange: EventEmitter<any> = new EventEmitter();
 
-    public notification: any = {
+    public notification: NotificationObject = {
         jobEvents: {
             items: [
                 {name: 'on_change', value: 'on_change', checked: false},
@@ -25,6 +36,7 @@ export class SetupJobNotificationsComponent implements OnInit {
                 {name: 'on_start', value: 'on_start', checked: false},
                 {name: 'on_success', value: 'on_success', checked: false},
             ],
+            selectedItems: [],
             messages: {
                 name: 'JOB EVENTS',
             },
@@ -43,8 +55,9 @@ export class SetupJobNotificationsComponent implements OnInit {
         outsideUsers: [],
         filteredOutsideUsers: [],
         validationMessages: {
-            jobEvents: { show: false, text: 'You have to choose at least one Event Type' },
-            wrongFormatRecipients: { show: false, text: 'Recipients have to be an email format' }
+            jobEvents: { show: false, text: 'You have to choose at least one Job Event' },
+            wrongFormatRecipients: { show: false, text: 'Recipients have to be an email format' },
+            missingRecipients: { show: false, text: 'You have to choose at least one recipient from any of the groups' },
         }
     };
 
@@ -73,12 +86,14 @@ export class SetupJobNotificationsComponent implements OnInit {
     }
 
     public removeNotificationRule(index) {
+        // this.selectedId = 0;
         this.notificationsList.splice(index, 1);
     }
 
     public openUserSelectorPanel(index) {
         this.isVisibleUserSelectorPanel = true;
         this.selectedId = index;
+        this.notificationsList[index].validationMessages.missingRecipients.show = false;
     }
 
     public closeUserSelectorPanel() {
@@ -88,6 +103,7 @@ export class SetupJobNotificationsComponent implements OnInit {
     public openSlackChannelPanel(index) {
         this.isVisibleSlackPanel = true;
         this.selectedId = index;
+        this.notificationsList[index].validationMessages.missingRecipients.show = false;
     }
 
     public closeSlackChannelPalen() {
@@ -102,11 +118,13 @@ export class SetupJobNotificationsComponent implements OnInit {
     }
 
     public getOnlyUsersAndGroups(index) {
-        return this.notificationsList[index].rules.whom.filter(recipient => recipient.indexOf('@slack') === -1 && recipient.indexOf('@user') === -1).sort();
+        return this.notificationsList.length ?
+            this.notificationsList[index].rules.whom.filter(recipient => recipient.indexOf('@slack') === -1 && recipient.indexOf('@user') === -1).sort() : [];
     }
 
     public getOnlySlackChannels(index) {
-        return this.notificationsList[index].rules.whom.filter(recipient => recipient.indexOf('@slack') !== -1).sort();
+        return this.notificationsList.length ?
+            this.notificationsList[index].rules.whom.filter(recipient => recipient.indexOf('@slack') !== -1).sort() : [];
     }
 
     public updateOnlyUsersAndGroupsList(users: string[]) {
@@ -128,10 +146,12 @@ export class SetupJobNotificationsComponent implements OnInit {
     }
 
     public updateOutsideUsers(users: string, index) {
+        this.selectedId = index;
         this.notificationsList[index].outsideUsers = users.split(',');
         this.notificationsList[index].filteredOutsideUsers =
             this.notificationsList[index].outsideUsers.filter(user => CustomRegex.emailPattern.test(user.trim())).map(user => `${user}@user`);
         this.notificationsList[index].validationMessages.wrongFormatRecipients.show = false;
+        this.notificationsList[index].validationMessages.missingRecipients.show = false;
     }
 
     public argoUsersAndGroupsCheckboxChange(notification) {
@@ -157,7 +177,7 @@ export class SetupJobNotificationsComponent implements OnInit {
         }
     }
 
-    test() {
+    public getNotifications() {
         let isAnyError = false;
         this.notificationsList.forEach(notification => {
             if (!notification.rules.when.length) {
@@ -173,18 +193,23 @@ export class SetupJobNotificationsComponent implements OnInit {
                 notification.rules.whom = notification.rules.whom.filter(item => item.indexOf('@user') === -1);
                 this.updateNotificationWhomList(notification.filteredOutsideUsers);
             }
+
+            if (!notification.rules.whom.length) {
+                notification.validationMessages.missingRecipients.show = true;
+                isAnyError = true;
+            }
         });
 
         // if there is error in any notification rule, don't allow to submit
         if (isAnyError) {
             return;
         }
 
-        let notifications = this.notificationsList.map(notification => {
+        this.rules = this.notificationsList.map(notification => {
             return notification.rules;
         });
 
-        console.log('notificationsList', notifications, this.notificationsList);
+        return this.rules;
     }
 
     private addDefaultNotificationRule() {

saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.html

@@ -1,7 +1,6 @@
 <div class="panel-box__content">
     <div class="panel-box__title">
         Set Up Job Notifications
-        <button class="ax-button ax-button--base" (click)="test()">TEST</button>
     </div>
     <div class="panel-box__subtitle">
         Set up notifications for job events.
@@ -19,6 +18,7 @@
                     <div class="notification-row">
                         <h5>{{ 'Selected Job Events:' | uppercase }}</h5>
                         <hr>
+                        <span class="error-msg" *ngIf="notification.validationMessages.jobEvents.show">{{ notification.validationMessages.jobEvents.text }}</span>
 
                         <div class="notification-row__events-selector">
                             <ax-filter-multi-select
@@ -30,11 +30,11 @@ <h5>{{ 'Selected Job Events:' | uppercase }}</h5>
                                     [selectedItems]="notification.rules.when"
                                     (onChange)="onRuleChange($event, i)">
                             </ax-filter-multi-select>
-                            <span class="error-msg" *ngIf="notification.validationMessages.jobEvents.show">{{ notification.validationMessages.jobEvents.text }}</span>
                         </div>
 
                         <h5>{{ 'Select Recipients:' | uppercase }}</h5>
                         <hr>
+                        <span class="error-msg" *ngIf="notification.validationMessages.missingRecipients.show">{{ notification.validationMessages.missingRecipients.text }}</span>
 
                         <div>
                             <div class="notification-row__list-item">
@@ -78,7 +78,11 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>
                                 <div [hidden]="!notification.isEmailVisible">
                                     <div class="labels-horizontal-list">
                                         <div class="labels-horizontal-list__content notification-row__input-adjustment">
-                                            <textarea [ngModel]="notification.outsideUsers" (ngModelChange)='updateOutsideUsers($event, i)' placeholder="jondoe@mail.com, johnsmith@mail.com"></textarea>
+                                            <textarea
+                                                    [ngModel]="notification.outsideUsers"
+                                                    (ngModelChange)="updateOutsideUsers($event, i)"
+                                                    placeholder="jondoe@mail.com, johnsmith@mail.com">
+                                            </textarea>
                                             <span class="error-msg" *ngIf="notification.validationMessages.wrongFormatRecipients.show">
                                                 {{ notification.validationMessages.wrongFormatRecipients.text }}
                                             </span>

saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.scss

@@ -25,7 +25,6 @@
     }
 
     &__events-selector {
-        margin-top: 20px;
         width: 50%;
     }