[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects
abstraction of components

Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8
Signed-off-by: st782s <statta@research.att.com>

4 files changed, 793 insertions, 0 deletions

diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
new file mode 100644
index 00000000..0a9dd12c
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
@@ -0,0 +1,381 @@
+/*-

+ * ================================================================================

+ * ECOMP Portal

+ * ================================================================================

+ * Copyright (C) 2017 AT&T Intellectual Property

+ * ================================================================================

+ * Licensed under the Apache License, Version 2.0 (the "License");

+ * you may not use this file except in compliance with the License.

+ * You may obtain a copy of the License at

+ * 

+ *      http://www.apache.org/licenses/LICENSE-2.0

+ * 

+ * Unless required by applicable law or agreed to in writing, software

+ * distributed under the License is distributed on an "AS IS" BASIS,

+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+ * See the License for the specific language governing permissions and

+ * limitations under the License.

+ * ================================================================================

+ */

+'use strict';

+(function () {

+    class WidgetOnboardingDetailsModalCtrl {

+        constructor($scope, $log, $interval, applicationsService, adminsService, microserviceService, widgetsCatalogService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {

+     	    

+    	    this.appUpdate = function(){

+    	    	this.hasSelectedApp = false;

+    	    	this.appCounter = 0;

+    	    	for(var i = 0; i < this.availableApps.length; i++){

+    	    		if(this.availableApps[i].isSelected){

+    	    			this.appCounter++;

+    	    			if(!this.hasSelectedApp)

+    	    				this.hasSelectedApp = true;

+    	    		}

+    	    		if(this.availableApps[i].isSelected

+    	    		&& this.availableApps[i].roles.length == 0){

+    	    			var index = i;

+    	    			this.availableRoles = [];    

+    	    			adminsService.getRolesByApp(this.availableApps[i].id).then(roles => {

+ 				    	   for(var i = 0; i < roles.length; i++){

+ 				    		   this.availableRoles.push({

+ 				    			   id: roles[i].id,

+ 				                   name: roles[i].name,

+ 				                   isSelected: false,

+ 				    		   }); 

+ 				    	   }

+ 				    	   this.availableApps[index].roles = this.availableRoles;

+    	    			});

+    	    		}

+			    }

+    	    	this.allRoleSelected = true;

+    	    	this.checkRoleSelected();

+    	    }

+    	    

+    	    this.roleUpdate = function(app){

+	    		this.allRoleSelected = true;

+    	    	for(var i = 0; i < app.roles.length; i++){

+    	    		if(app.roles[i].isSelected){

+    	    			app.roleSelected = true;

+    	    			this.checkRoleSelected();

+    	    			return;

+    	    		}

+    	    	}

+	    		app.roleSelected = false;

+	    		this.checkRoleSelected();

+    	    }

+    	    

+    	    this.checkRoleSelected = function(){

+    	    	for(var i = 0; i < this.availableApps.length; i++){

+            		if(this.availableApps[i].isSelected

+            		&& !this.availableApps[i].roleSelected){

+            			this.allRoleSelected = false;

+            			return;

+            		}

+            	}

+    	    }

+    	    	   

+    	    this.getAppName = function(appId){

+    	    	 for(var i = 0; i < this.availableApps.length; i++){

+    	    		 if(this.availableApps[i].id == appId){

+    	    			 return this.availableApps[i].name;

+    	    		 }

+    	    	 }

+    	    }

+    	    

+            let newWidgetModel = {

+                name: null,

+                roleId: null,

+                roleName: null,

+                appId: null,

+                appName: null,

+                url: null,

+                showAppOptions: false,

+                showRoleOptions: false,

+                hasSelectedApp: false

+            };

+          

+            let getAvailableApps = () => {           	

+            	

+            	if(this.isEditMode == false){	

+	            	applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {

+	            		this.availableApps=[];

+	            		for(var i=0;i<apps.length;i++) {

+	                        if (!apps[i].restrictedApp) {

+                            this.availableApps.push({

+                                id: apps[i].id,

+                                name: apps[i].name,

+                                roles: [],

+                                roleSelected: false,

+                                isSelected: false,

+                            });

+	                        }

+	                    }

+	                }).catch(err => {

+	                    $log.error(err);

+	                });

+            	}

+            	else if(this.isEditMode == true){

+            		if(this.widget.allowAllUser == "Y")

+            			this.widget.allUser = true;

+            		applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {

+	            		this.availableApps=[];

+	            		let selectedApps = {};

+	            		var availableApps = this.availableApps;  

+	            		this.allRoleSelected = true;

+	            		for(var i=0; i < this.widget.widgetRoles.length; i++){

+	            			if(selectedApps[this.widget.widgetRoles[i].app.appId] != undefined)

+	            				selectedApps[this.widget.widgetRoles[i].app.appId] += this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";"; 

+	            			else{

+	            				selectedApps[this.widget.widgetRoles[i].app.appId] = this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";";        		

+	            				this.appCounter++;

+	            			}

+	            		}         		

+	            		apps.forEach(function(app, index){

+		    				availableApps.push({

+		                       id: app.id,

+		                       name: app.name,

+		                       roles: [],

+		                       roleSelected: false,

+		                       isSelected: false,

+		    				});

+		    				if(selectedApps[app.id] != undefined){

+			    				adminsService.getRolesByApp(app.id).then(roles => {

+		        				var role = selectedApps[app.id].split(';');

+			            		var selectedRoles = [];

+			            		var n = 0;

+			            		while((n+1) < role.length){

+			                		selectedRoles.push({

+						    			   id: role[n++],

+						                   name: role[n++],

+						                   isSelected: true,

+						    		});

+			            		}					

+			    				for(var m = 0; m < roles.length; m++){

+						    		var hasSelected = true;

+			    					for(var n = 0; n < selectedRoles.length; n++){

+			    						if(selectedRoles[n].id == roles[m].id){

+			    							hasSelected = false;

+						    				break;

+						    			}

+						    		}

+						    		if(hasSelected){

+						    		   selectedRoles.push({

+						    			   id: roles[m].id,

+						                   name: roles[m].name,

+						                   isSelected: false,

+						    		   }); 

+						    		}	   

+			    				}  

+			    				availableApps[index].roleSelected = true;

+			    				availableApps[index].isSelected = true;

+			    				availableApps[index].roles = selectedRoles;

+		    					});

+		    				}

+	            		})

+	                })

+            	}

+            };

+            

+            let getAvailableServices = () =>{

+            	microserviceService.getServiceList().then(services => {

+              		this.availableServices = [];

+              		for(var i = 0; i < services.length; i++){

+              			this.availableServices.push({

+              				id: services[i].id,

+              				name: services[i].name,

+              				option: services[i].name + ": " + services[i].url

+              			});

+              			

+              			if(this.widget.service != null && this.widget.service.id == services[i].id){

+              				this.widget.serviceURL = this.availableServices[i];

+              			}

+              		}

+                }).catch(err => {

+                   $log.error(err);

+                });

+            }

+            

+

+            let init = () => {

+            	$log.info('WidgetOnboardingDetailsModalCtrl::init');

+                this.widgetsList = [];

+                this.duplicatedName = true;

+                this.allRoleSelected = false;

+                this.appCounter = 0;

+            	this.isSaving = false;

+            	this.allUser = false;

+            	this.emptyWidgetName = false;

+            	

+                if ($scope.ngDialogData && $scope.ngDialogData.widget) {

+                    this.isEditMode = true;

+            		this.allRoleSelected = true;

+                    this.widget = _.clone($scope.ngDialogData.widget);

+                } else {

+                    this.isEditMode = false;

+                    this.widget = _.clone(newWidgetModel);

+                }

+                

+                widgetsCatalogService.getManagedWidgets().then(res => {

+            		for(var i = 0; i < res.length; i++){

+            			this.widgetsList.push(res[i].name);

+            		}

+                 }).catch(err => {

+                     $log.error('WidgetOnboardingDetailsModalCtrl::init error: ' + err);

+                 }).finally(()=> {

+                     this.isLoadingTable = false;

+                 });

+                 getAvailableApps();

+                 getAvailableServices();

+            };

+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;

+            this.conflictMessages = {};

+            this.scrollApi = {};

+

+            let resetConflict = fieldName => {

+                delete this.conflictMessages[fieldName];

+                if($scope.widgetForm[fieldName]){

+                    $scope.widgetForm[fieldName].$setValidity('conflict', true);

+                }

+            };

+            

+            this.updateSelectedRole = () => {

+                if (!this.selectedRole) {

+                    return;

+                }

+                this.widget.RoleId = this.selectedRole.id;

+                this.widget.RoleName = this.selectedRole.name;

+            };

+            

+            let emptyCookies = () => {

+                userProfileService.getUserProfile()

+                .then(profile=> {

+                    $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);

+                    $scope.orgUserId = profile.orgUserId;

+                    $log.info('user has the following orgUserId: ' + profile.orgUserId);

+                    if ($cookies.getObject($scope.orgUserId + '_widget') != undefined && $cookies.getObject($scope.orgUserId + '_widget') != null) {

+                        $cookies.remove($scope.orgUserId + '_widget');

+                    }

+                });

+            };

+              

+            this.updateWidgetName = () => {

+            	for(var i = 0; i < this.widgetsList.length; i++){

+            		if(this.widget.name.toUpperCase() == this.widgetsList[i].toUpperCase()){

+            			this.duplicatedName = false;

+            			return;

+            		}

+            	}

+            	this.duplicatedName = true;

+            };

+            

+            this.saveChanges = () => {     

+            	

+            	if(!this.isEditMode)

+            		this.updateWidgetName();

+            	

+            	if(this.duplicatedName == false 

+            	   || this.widget.name == ''

+            	   || this.widget.name == undefined){

+                    	this.emptyWidgetName = true;

+                    	return;

+                }

+            	

+            	if((this.widget.file == undefined && !this.isEditMode) ||

+            	(!this.widget.allUser && this.appCounter == 0) ||

+            	this.widget.name == null ||

+            	(!this.widget.allUser && !this.allRoleSelected) ||

+            	this.widget.saving == true)

+            		return;	

+            	

+            	

+        		this.widget.saving = true;

+            	var selectedRoles = [];

+            	if(!this.widget.allUser){

+	            	for(var i = 0; i < this.availableApps.length; i++){

+	            		if(this.availableApps[i].isSelected){

+		        			for(var n = 0; n < this.availableApps[i].roles.length; n++) {

+			    				if(this.availableApps[i].roles[n].isSelected){

+			    				var role = {

+								app: {

+									appId: this.availableApps[i].id

+								},

+								roleId: this.availableApps[i].roles[n].id,

+								roleName: this.availableApps[i].roles[n].name,

+								};

+			    				selectedRoles.push(role);

+			    				}

+			            	}

+	            		}

+	            	}

+            	}

+            	

+            	var allowAllUser = 0;

+            	if(this.widget.allUser)

+            		allowAllUser = 1;  	

+            	

+            	var serviceId = null;

+            	if(this.widget.serviceURL != null &&

+            	this.widget.serviceURL != undefined){

+            		serviceId = this.widget.serviceURL.id;

+            	}

+            	

+            	

+            	var file_loc = this.widget.name + ".zip";

+            	var newWidget = {

+            			name: this.widget.name,

+            			desc: this.widget.desc,

+            			widgetRoles: selectedRoles,

+            			fileLocation: file_loc,

+            			allowAllUser: allowAllUser,

+            			serviceId: serviceId

+            	};

+            	

+            	if(this.isEditMode){

+            		

+            		if(this.widget.file != undefined){

+            			widgetsCatalogService.updateWidgetWithFile(this.widget.file, this.widget.id, newWidget).then(res => {

+            				if(!res.valid){

+            					if(!res.error){

+                					confirmBoxService.showInformation("Could not save. Please retry.");

+                					this.widget.saving = false;

+                					return;

+                				}

+            					confirmBoxService.showInformation(res.error);

+            					this.widget.saving = false;

+            					return;

+            				}

+            				$scope.closeThisDialog(true);

+    	            		this.widget.saving = false;

+            			});	

+            		}

+            		else{

+            			widgetsCatalogService.updateWidget(this.widget.id, newWidget)

+	            		.then(() => {

+	            			$scope.closeThisDialog(true); 

+	                    });

+            		}

+            	}

+            	else{

+            		widgetsCatalogService.createWidget(newWidget, this.widget.file).then(res => {

+	            		if(!res.valid){

+	        				if(!res.error)

+	        					confirmBoxService.showInformation("Could not save. Please retry.");

+	        				else

+	        					confirmBoxService.showInformation(res.error);

+	        				this.widget.saving = false;

+	        				return;

+	        			}

+	            		$scope.closeThisDialog(true);

+	            		this.widget.saving = false;

+            		});

+            	}

+            };

+            init();

+            $scope.$on('$stateChangeStart', e => {

+                e.preventDefault();

+            });

+        }

+    }

+    WidgetOnboardingDetailsModalCtrl.$inject = ['$scope', '$log', '$interval', 'applicationsService', 'adminsService', 'microserviceService', 'widgetsCatalogService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];

+    angular.module('ecompApp').controller('WidgetOnboardingDetailsModalCtrl', WidgetOnboardingDetailsModalCtrl);

+})(); 

diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js
new file mode 100644
index 00000000..1762fadb
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js
@@ -0,0 +1,154 @@
+/*-

+ * ================================================================================

+ * ECOMP Portal

+ * ================================================================================

+ * Copyright (C) 2017 AT&T Intellectual Property

+ * ================================================================================

+ * Licensed under the Apache License, Version 2.0 (the "License");

+ * you may not use this file except in compliance with the License.

+ * You may obtain a copy of the License at

+ * 

+ *      http://www.apache.org/licenses/LICENSE-2.0

+ * 

+ * Unless required by applicable law or agreed to in writing, software

+ * distributed under the License is distributed on an "AS IS" BASIS,

+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+ * See the License for the specific language governing permissions and

+ * limitations under the License.

+ * ================================================================================

+ */

+// 'use strict';

+// describe('Controller: WidgetDetailsModalCtrl', ()=> {

+//     /**

+//      * INITIALIZATION

+//      */

+//     beforeEach(module('testUtils'));

+//     beforeEach(module('ecompApp'));

+//

+//     let promisesTestUtils;

+//     //destroy $http default cache before starting to prevent the error 'default cache already exists'

+//     //_promisesTestUtils_ comes from testUtils for promises resolve/reject

+//     beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {

+//         _CacheFactory_.destroyAll();

+//         promisesTestUtils = _promisesTestUtils_;

+//     }));

+//

+//     let widgetDetails, scope, $controller, $q, $rootScope, $log, widgetsService, errorMessageByCode, ECOMP_URL_REGEX;

+//     let deferredAdminApps, deferredUserProfile;

+//     let applicationsServiceMock, widgetsServiceMock, userProfileServiceMock;

+//     beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {

+//         [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];

+//

+//         deferredAdminApps = $q.defer();

+//         deferredUserProfile = $q.defer();

+//         /*applicationsServiceMock = {

+//             getAppsForSuperAdminAndAccountAdmin: () => {

+//                 var promise = () => {return deferredAdminApps.promise};

+//                 var cancel = jasmine.createSpy();

+//                 return {

+//                     promise: promise,

+//                     cancel: cancel

+//                 }

+//             }

+//         };*/

+//

+//         widgetsServiceMock = {

+//             updateWidget: () => {

+//                 var promise = () => {return deferredAdminApps.promise};

+//                 var cancel = jasmine.createSpy();

+//                 return {

+//                     promise: promise,

+//                     cancel: cancel

+//                 }

+//             },

+//             createWidget: () => {

+//                 var promise = () => {return deferredAdminApps.promise};

+//                 var cancel = jasmine.createSpy();

+//                 return {

+//                     promise: promise,

+//                     cancel: cancel

+//                 }

+//             }

+//         };

+//

+//         userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);

+//         userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);

+//

+//         applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock',['getAppsForSuperAdminAndAccountAdmin']);

+//         applicationsServiceMock.getAppsForSuperAdminAndAccountAdmin.and.returnValue(deferredAdminApps.promise);

+//

+//     }));

+//

+//     beforeEach(()=> {

+//         errorMessageByCode = [];

+//         ECOMP_URL_REGEX = "";

+//         scope = $rootScope.$new();

+//         createController(scope);

+//     });

+//

+//     let createController = scopeObj => {

+//         widgetDetails = $controller('WidgetDetailsModalCtrl', {

+//             $scope: scope,

+//             $log: $log,

+//             applicationsService: applicationsServiceMock,

+//             widgetsService: widgetsServiceMock,

+//             errorMessageByCode: errorMessageByCode,

+//             ECOMP_URL_REGEX: ECOMP_URL_REGEX,

+//             userProfileService: userProfileServiceMock

+//         });

+//     };

+//

+//     /**

+//      * MOCK DATA

+//      */

+//     let newWidgetModel = {

+//         name: null,

+//         appId: null,

+//         appName: null,

+//         width: 360,

+//         height: 300,

+//         url: null

+//     };

+//     let exsistingWidget = {

+//         name: 'some widget',

+//         appId: 1,

+//         appName: 'APP NAME',

+//         width: 360,

+//         height: 300,

+//         url: 'http://a.com'

+//     };

+//     let adminApps = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];

+//

+//     /**

+//      * TEST CASES

+//      */

+//     it('should initialize controller with new widget mode when opening the modal without selected widget', ()=> {

+//         expect(widgetDetails.widget).toEqual(newWidgetModel);

+//     });

+//

+//     it('should initialize controller with exsisting widget details when opening the modal with selected widget', ()=> {

+//         scope.ngDialogData = {

+//             widget: exsistingWidget

+//         };

+//         createController(scope);

+//         expect(widgetDetails.widget).toEqual(exsistingWidget);

+//     });

+//

+//     it('should populate widget selected app name and id when initializing controller with widget', () =>{

+//         deferredAdminApps.resolve(adminApps);

+//         scope.ngDialogData = {

+//             widget: exsistingWidget

+//         };

+//         createController(scope);

+//         scope.$apply();

+//         expect(widgetDetails.widget.appId).toEqual(adminApps[0].id);

+//         expect(widgetDetails.widget.appName).toEqual(adminApps[0].name);

+//     });

+//

+//     //TODO:

+//     //save changes fail - conflict handling

+//     //save changes success

+//

+//

+//

+// });

diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
new file mode 100644
index 00000000..2fa56443
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
@@ -0,0 +1,156 @@
+<!--

+  ================================================================================

+  ECOMP Portal

+  ================================================================================

+  Copyright (C) 2017 AT&T Intellectual Property

+  ================================================================================

+  Licensed under the Apache License, Version 2.0 (the "License");

+  you may not use this file except in compliance with the License.

+  You may obtain a copy of the License at

+  

+       http://www.apache.org/licenses/LICENSE-2.0

+  

+  Unless required by applicable law or agreed to in writing, software

+  distributed under the License is distributed on an "AS IS" BASIS,

+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+  See the License for the specific language governing permissions and

+  limitations under the License.

+  ================================================================================

+  -->

+<div class="widget-details-modal">

+	<div id="'widgets-details-title" class="title">Widget Details</div>

+

+	<div class="widget-properties-main"

+		scroll-top="widgetOnboardingDetails.scrollApi">

+		<form id="widgets-details-form" name="widgetForm" novalidate

+			autocomplete="off">

+

+			<div class="item required">

+				<div class="item-label">Widget Name</div>

+				<input id="widgets-details-input-name" class="input-field"

+					type="text" ng-model="widgetOnboardingDetails.widget.name"

+					ng-change="widgetOnboardingDetails.updateWidgetName()" name="name"

+					ng-pattern="/^[\w -]*$/" maxlength="100"

+					ng-disabled="widgetOnboardingDetails.isEditMode" required />

+

+				<div class="error-container"

+					ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && !widgetOnboardingDetails.duplicatedName">

+					<div id="widgets-details-input-name-conflict" class="err-message">Name

+						not available - choose different name</div>

+				</div>

+

+				<div class="error-container"

+					ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && widgetOnboardingDetails.duplicatedName">

+					<div ng-messages="widgetForm.name.$error" class="error-container">

+						<small id="widgets-details-input-name-required"

+							class="err-message" ng-message="required">Widget Name is

+							required</small> <small id="widgets-details-input-name-pattern"

+							class="err-message" ng-message="pattern">Widget Name must

+							be letters, numbers, or underscore</small>

+					</div>

+				</div>

+			</div>

+

+

+			<div class="item">

+				<div class="item-label">Widget Description</div>

+				<input id="widgets-details-input-name" class="input-field"

+					type="text" ng-model="widgetOnboardingDetails.widget.desc"

+					name="desc" maxlength="200" />

+			</div>

+

+			<div class="widget-property">

+				<input id="widgets-checkbox-app-is-enabled" type="checkbox"

+					class="checkbox-field"

+					ng-model="widgetOnboardingDetails.widget.allUser" />

+				<div class="property-label checkbox-label">Allow all user

+					access</div>

+			</div>

+

+

+			<div class="item" ng-show="!widgetOnboardingDetails.isEditMode">

+				<div class="item-label">Service Endpoint</div>

+				<div>

+					<select id="widgets-details-input-endpoint-url" name="url"

+						class="input-field"

+						ng-model="widgetOnboardingDetails.widget.serviceURL"

+						ng-options="service as service.option

+						  for service in widgetOnboardingDetails.availableServices">

+						<option value="" selected="selected">Select Microservice

+							Endpoint</option>

+					</select>

+				</div>

+			</div>

+

+			<div class="item required"

+				ng-show="!widgetOnboardingDetails.widget.allUser">

+				<div class="item-label">Application Name</div>

+				<div>

+					<multiple-select id="widget-applications" unique-data="{{$index}}"

+						placeholder="Select Applications"

+						ng-model="widgetOnboardingDetails.availableApps"

+						on-change="widgetOnboardingDetails.appUpdate()" name-attr="name"

+						value-attr="isSelected"> </multiple-select>

+				</div>

+				<div class="error-container"

+					ng-show="widgetOnboardingDetails.appCounter == 0">

+					<div id="widgets-details-input-name-conflict" class="err-message">Please

+						select at least one Application</div>

+				</div>

+			</div>

+

+			<div class="item" ng-show="!widgetOnboardingDetails.widget.allUser">

+				<div ng-show="widgetOnboardingDetails.hasSelectedApp"

+					class="item-label">User Role Name</div>

+				<div ng-repeat="appRoles in widgetOnboardingDetails.availableApps"

+					id="roles-{{appRoles.roles.split(' ').join('-')}}">

+					<div class="item required">

+						<div class="app-item-left" ng-show="appRoles.isSelected">{{appRoles.name}}</div>

+						<div class="app-item-right" ng-show="appRoles.isSelected">

+							<multiple-select id="widget-roles-by-application"

+								unique-data="{{$index}}" placeholder="Select Roles"

+								ng-model="appRoles.roles" name-attr="name"

+								on-change="widgetOnboardingDetails.roleUpdate(appRoles)"

+								value-attr="isSelected"></multiple-select>

+							<div class="error-container" ng-show="!appRoles.roleSelected">

+								<div id="widgets-details-input-name-conflict"

+									class="err-message">Please select at least one role</div>

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+

+			<div class="item required">

+				<div class="item-label">Upload Widget</div>

+				<div>

+					<input id="widget-onboarding-details-upload-file"

+						file-model="widgetOnboardingDetails.widget.file" type="file"

+						style="height: 24px;" />

+

+

+					<div class="error-container"

+						ng-show="widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode">

+						<div class="err-message">Please upload your widget (.zip)</div>

+					</div>

+				</div>

+			</div>

+		</form>

+	</div>

+

+	<div class="dialog-control">

+		<span class="ecomp-save-spinner"

+			ng-show="widgetOnboardingDetails.isSaving"></span>

+		<button id="widgets-details-save-button" class="btn btn-alt btn-small"

+			ng-class="{disabled: widgetOnboardingDetails.widget.name == undefined || !widgetOnboardingDetails.duplicatedName 

+			|| (!widgetOnboardingDetails.widget.allUser && widgetOnboardingDetails.appCounter == 0) || (widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode)

+			|| (!widgetOnboardingDetails.widget.allUser && !widgetOnboardingDetails.allRoleSelected) || (widgetOnboardingDetails.widget.saving)}"

+			ng-click="widgetOnboardingDetails.saveChanges()">Save</button>

+		<button id="widgets-details-cancel-button"

+			class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>

+

+	</div>

+

+

+

+</div>

diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less
new file mode 100644
index 00000000..d7cf2671
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less
@@ -0,0 +1,102 @@
+.widget-details-modal {
+  height: 580px;
+  .title {
+    //.n18r;
+    .dGray18r;  //AT&T Dark Gray
+    border-bottom: @portalDBlue 3px solid;
+  }
+  .widget-input-field{
+  	width:250px;
+  }
+  .widget-properties-main {
+    padding: 16px;
+    height: 460px;
+    overflow-y: auto;
+
+	.widget-property{
+      position: relative;
+      margin-bottom: 18px;
+      .property-label{
+        .dGray14r;
+      }
+      .checkbox-label{
+        display: inline-block;
+        padding-left: 3px;
+      }
+      .checkbox-field{
+        padding: 0;
+        margin: 0;
+        vertical-align: middle;
+        position: relative;
+        top: -1px;
+        height:15px;
+      } 
+      
+    }
+	.widget-upload-field{
+		height:24px;
+      	border: 0px solid #d2d2d2;
+		box-shadow: 0px 0px 2px -2px rgba(0, 0, 0, 0.08) inset;
+		padding-left: 2px;
+      }
+    .item{
+      position: relative;
+      margin-bottom: 18px;
+
+      .input-field{
+        .custom-input-field;
+        width: 100%;
+        &.url{
+          width: 78%;
+          display: inline-block;
+        }
+      }
+
+      .select-field {
+        .custom-select-field;
+      }
+
+      .item-label{
+        .dGray14r;
+      }
+
+      .right-item{
+        position: relative;
+        display: inline-block;
+        width: 48%;
+        float: right;
+      }
+      .left-item{
+        display: inline-block;
+        width: 48%;
+      }
+
+      .url-validation-button{
+        .btn-blue;
+        width: 20%;
+        display: inline-block;
+        float: right;
+      }
+
+      .error-container{
+        position: absolute;
+        width: 280px;
+        display: block;
+        height: 12px;
+        line-height: 12px;
+
+        .err-message{
+          color: @funcRed;
+          font-size: 9px;
+        }
+        .valid-message{
+          color: @funcGreen;
+          font-size: 9px;
+        }
+      }
+
+    }
+
+  }
+
+}