Repair role-centralization features in EPSDK

Issue: PORTAL-21
Change-Id: Icf276482609734d3aa24f04ae0a8135021a3d305
Signed-off-by: Christopher Lott (cl778h) <clott@research.att.com>

9 files changed, 203 insertions, 237 deletions

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/WEB-INF/fusion/orm/Fusion.hbm.xml b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/WEB-INF/fusion/orm/Fusion.hbm.xml
index e569972a..098a5857 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/WEB-INF/fusion/orm/Fusion.hbm.xml
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/WEB-INF/fusion/orm/Fusion.hbm.xml
@@ -385,5 +385,9 @@
      <query name="getUserByProfileId">
       select orgUserId from User where id = :user_id
     </query>
+    
+     <query name="getUserIdByorgUserId">
+      select id from User where orgUserId = :orgUserId
+    </query>
 
 </hibernate-mapping>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/admin-controller.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/admin-controller.js
index d7adaf36..dc59b6c7 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/admin-controller.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/admin-controller.js
@@ -7,17 +7,21 @@ appDS2.controller('adminController', function($scope, $http,AdminService, $modal
 	$scope.nextSort="";
 	$scope.showLoader = false;
 	$scope.tableData=[];
+	$scope.showLoader=false;
 	$scope.routeRoleId = $routeParams.roleId;
 	$scope.regions = [];
 	/*function*/
 	$scope.getFunctionList = function(){
 		$scope.tableData.length=0;
+		$scope.showLoader=true;
 		AdminService.getRoleFunctionList().then(function(data){	
 			var j = data;
 			$scope.data = JSON.parse(j.data);
 			$scope.tableData =JSON.parse($scope.data.availableRoleFunctions);
 		},function(error){
 			console.log("failed");
+		}).finally(function() {
+			$scope.showLoader=false; // Always execute this on both error and success
 		});
 	}
 	
@@ -605,29 +609,6 @@ appDS2.controller('adminController', function($scope, $http,AdminService, $modal
 		}
 	    
 	    
-	    /*$scope.showItemDetails = function(cacheName,key) {
-			$http.get("jcs_admin/showItemDetails?keyName="+key+"&cacheName="+cacheName).success(function(response){ 
-				var message = "CacheName: "+ response.cacheName 
-					+"\nkey: "+response.key
-					+"\nIS_SPOOL: "+response.attr.IS_SPOOL
-					+"\nIS_LATERAL: "+response.attr.IS_LATERAL
-					+"\nIS_REMOTE: "+response.attr.IS_REMOTE
-					+"\nIS_ETERNAL: "+response.attr.IS_ETERNAL
-					+"\nversion: "+response.attr.version
-					+"\nmaxLifeSeconds: "+response.attr.maxLifeSeconds
-					+"\nmaxIdleTimeSeconds: "+response.attr.maxIdleTimeSeconds
-					+"\nsize: "+response.attr.size
-					+"\ncreateTime: "+response.attr.createTime
-					+"\nlastAccessTime: "+response.attr.lastAccessTime
-					+"\nidleTime: "+response.attr.idleTime
-					+"\ntimeToLiveSeconds: "+response.attr.timeToLiveSeconds
-					+"\nisSpool: "+response.attr.isSpool
-					+"\nisLateral: "+response.attr.isLateral
-					+"\nisRemote: "+response.attr.isRemote
-					+"\nisEternal: "+response.attr.isEternal;
-				modalService.showSuccess('',message);});
-	};*/
-	    
 	
 	$scope.showItemDetails = function(cacheName, key){
 		AdminService.showItemDetails(cacheName, key).then(function(msg){	
@@ -695,35 +676,38 @@ appDS2.controller('adminController', function($scope, $http,AdminService, $modal
 	}
 		
 	$scope.roleFnInit = function(){
+		$scope.showLoader=true;
 		AdminService.getRole($routeParams.roleId).then(function(data){
-				
-				var j = data;
-		  		$scope.data = JSON.parse(j.data);
-		  		$scope.role =JSON.parse($scope.data.role);
-		  		
-		  		$scope.ociavailableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
-		  		$scope.availableRoleFunctions=[];
-		  		
-		  		if($scope.ociavailableRoleFunctions)
-		  			angular.forEach($scope.ociavailableRoleFunctions, function(a,i){ 
-		  				var availableRoleFunction = a;
-		  				availableRoleFunction.selected = false;
-		  			   angular.forEach($scope.role.roleFunctions, function(b,j){ 
-		  			    	if(a.code === b.code) {
-		  			    		availableRoleFunction.selected = true;
-		  			    	}
-		  			    });
-		  			    $scope.availableRoleFunctions.push(availableRoleFunction);	    
-		  		});	
-		  		
-		
-		  		$scope.ociavailableRoles=JSON.parse($scope.data.availableRoles);
-		  		$scope.availableRoles=[];
-		
-			},function(error){
-				console.log("roleControllerDS2 failed: " + error);
-				reloadPageOnce();
-			});
+			
+			var j = data;
+	  		$scope.data = JSON.parse(j.data);
+	  		$scope.role =JSON.parse($scope.data.role);
+	  		
+	  		$scope.ociavailableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
+	  		$scope.availableRoleFunctions=[];
+	  		
+	  		if($scope.ociavailableRoleFunctions)
+	  			angular.forEach($scope.ociavailableRoleFunctions, function(a,i){ 
+	  				var availableRoleFunction = a;
+	  				availableRoleFunction.selected = false;
+	  			   angular.forEach($scope.role.roleFunctions, function(b,j){ 
+	  			    	if(a.code === b.code) {
+	  			    		availableRoleFunction.selected = true;
+	  			    	}
+	  			    });
+	  			    $scope.availableRoleFunctions.push(availableRoleFunction);	    
+	  		});	
+	  		
+	
+	  		$scope.ociavailableRoles=JSON.parse($scope.data.availableRoles);
+	  		$scope.availableRoles=[];
+	
+		},function(error){
+			console.log("roleControllerDS2 failed: " + error);
+			reloadPageOnce();
+		}).finally(function() {
+			$scope.showLoader=false; // Always execute this on both error and success
+		});
 	}
 	
 	// updating roles on role list page after deletion of a role
@@ -740,7 +724,7 @@ appDS2.controller('adminController', function($scope, $http,AdminService, $modal
 	
 	$scope.saveRole = function() {
 		var errorMsg;
-		
+		$scope.showLoader=true; 
 		if($scope.role.id == null || $scope.role.id == undefined ){
 		$scope.role = {
 				'id':null,
@@ -828,7 +812,9 @@ appDS2.controller('adminController', function($scope, $http,AdminService, $modal
 				}
 			},function(error){
 				console.log("error msg");
-			})
+			}).finally(function() {
+				$scope.showLoader=false; // Always execute this on both error and success
+			});
 					
 		}
 	}
@@ -838,6 +824,7 @@ appDS2.controller('adminController', function($scope, $http,AdminService, $modal
 			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-functions-modal.html',
 			controller: ModalInstanceCtrl,
 			sizeClass: 'modal-large', 
+			windowClass:"modal-docked",
 			resolve: {
                 items: function () {
                 	var message = {
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-fun-role-del-confirm.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-fun-role-del-confirm.html
index f293152c..322c6624 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-fun-role-del-confirm.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-fun-role-del-confirm.html
@@ -1,17 +1,17 @@
 <div>
-	<div class="modal-header ng-scope in">
+	<div class="b2b-modal-header">
 		<h2 id="myModalLabel" modal-title="">Role</h2>
 		<div class="corner-button in">
 			<button type="button" class="close" aria-label="Close"
 				ng-click="$dismiss('cancel')"></button>
 		</div>
 	</div>
-	<div class="modal-body ng-scope ng-isolate-scope in" tabindex="0"
+	<div class="b2b-modal-body ng-scope ng-isolate-scope in" tabindex="0"
 		role="region" aria-label="Modal header text content"
 		style="height: 55px;">
 		You are about to delete this Role Function. Click 'OK' to continue.
 	</div>
-	<div class="modal-footer ng-scope ng-isolate-scope in">
+	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
 		<div class="cta-button-group in">
 			<button class="btn btn-alt btn-medium" type="button"
 				ng-click="roleFunRemoveRole(msg.roleFunction)">Ok</button>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-functions-modal.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-functions-modal.html
index c4115c4a..dbe9d1c6 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-functions-modal.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/modals/role-functions-modal.html
@@ -1,7 +1,8 @@
-<div>
 	<div class="b2b-modal-header">
-		<h1 class="heading-medium" id="SelectRole">Select Role Functions</h1>
-
+		<h2 class="myModalLabel" id="SelectRole">Select Role Functions</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" aria-label="Close"	ng-click="$dismiss('cancel')"></button>
+		</div>
 	</div>
 
 	<div class="b2b-modal-body" tabindex="0" aria-label="Modal header text content" role="region">
@@ -33,4 +34,3 @@
 		</div>
 		<br />
 	</div>
-</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role-function.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role-function.html
index 0b07d6e8..cab8c682 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role-function.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role-function.html
@@ -1,63 +1,67 @@
 <div id="page-content">
 	<h1 class="heading-page" id="profileSearch">Role Function</h1>
-
-	<div class="row-nowrap">
-		<div class="span12">
-			<div class="form-row">
-				<div class="field-group">
-					<button class="btn btn-alt btn-medium" type="button"
-						ng-click="addRoleFuncPopUp(rowData);">Create</button>
+	<div ng-show="showLoader" class="span loader-container">
+		<i class="icon-primary-spinner" role="img"
+			aria-label="Please wait while we load your content"></i>
+	</div>
+	<div ng-hide="showLoader">
+		<div class="row-nowrap">
+			<div class="span12">
+				<div class="form-row">
+					<div class="field-group">
+						<button class="btn btn-alt btn-medium" type="button"
+							ng-click="addRoleFuncPopUp(rowData);">Create</button>
+					</div>
 				</div>
 			</div>
-		</div>
-		<div class="span12">
-			<div class="form-row">
-				<div style="float: right;">
-					<div class="form-field form-field__small">
-						<input type="text" placeholder="Search role functions" ng-model="searchString" />
+			<div class="span12">
+				<div class="form-row">
+					<div style="float: right;">
+						<div class="form-field form-field__small">
+							<input type="text" placeholder="Search role functions" ng-model="searchString" />
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-
-	<div ng-show="showLoader" class="span loader-container">
-		<i class="icon-primary-spinner" role="img"
-			aria-label="Please wait while we load your content"></i>
-	</div>
-
-	<div b2b-table class="b2b-table-div" table-data="tableData"
-		search-string="searchString" current-page="currentPage"
-		next-sort="nextSort">
 
-		<table>
-			<thead b2b-table-row type="header">
-				<tr>
-					<th b2b-table-header key="name">Name</th>
-					<th b2b-table-header key="code">Code</th>
-					<th b2b-table-header sortable="false">Edit</th>
-					<th b2b-table-header sortable="false">Delete</th>
-				</tr>
-			</thead>
-			<tbody b2b-table-row type="body" row-repeat="rowData in tableData">
-				<tr>
-					<td b2b-table-body ng-bind="rowData['name']"></td>
-					<td b2b-table-body ng-bind="rowData['code']"></td>
-					<td b2b-table-body>
-						<div style="font-size: 20px;">
-							<a ng-click="saveRoleFuncPopUp(rowData);" class="icon-misc-pen"></a>
-						</div>
-					</td>
-					<td b2b-table-body>
-						<div style="font-size: 20px;">
-							<a href="javascript:void(0)"
-								ng-click="delRoleFuncConfirmPopUp(rowData);"
-								class="icon-misc-trash"></a>
-						</div>
-					</td>
-
-				</tr>
-			</tbody>
-		</table>
+		<div ng-show="showLoader" class="span loader-container">
+			<i class="icon-primary-spinner" role="img"
+				aria-label="Please wait while we load your content"></i>
+		</div>
+	
+		<div b2b-table class="b2b-table-div" table-data="tableData"
+			search-string="searchString" current-page="currentPage"
+			next-sort="nextSort">
+			<table>
+				<thead b2b-table-row type="header">
+					<tr>
+						<th b2b-table-header key="name">Name</th>
+						<th b2b-table-header key="code">Code</th>
+						<th b2b-table-header sortable="false">Edit</th>
+						<th b2b-table-header sortable="false">Delete</th>
+					</tr>
+				</thead>
+				<tbody b2b-table-row type="body" row-repeat="rowData in tableData">
+					<tr>
+						<td b2b-table-body ng-bind="rowData['name']"></td>
+						<td b2b-table-body ng-bind="rowData['code']"></td>
+						<td b2b-table-body>
+							<div style="font-size: 20px;">
+								<a ng-click="saveRoleFuncPopUp(rowData);" class="icon-misc-pen"></a>
+							</div>
+						</td>
+						<td b2b-table-body>
+							<div style="font-size: 20px;">
+								<a href="javascript:void(0)"
+									ng-click="delRoleFuncConfirmPopUp(rowData);"
+									class="icon-misc-trash"></a>
+							</div>
+						</td>
+	
+					</tr>
+				</tbody>
+			</table>
+		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role.html
index 6268cf6f..f4c9d0c6 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role.html
@@ -2,96 +2,60 @@
 	<div>
 		<h1 class="heading-page" id="Roles">Manage Roles</h1>
 	</div>
-	<div>
-		<h2 class="heading-small-content">Please edit the role details below: </h2>
-	</div>
-	
-	<div>
-		<label>*Name: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-			<input type="text" ng-model="role.name"
-				maxlength="300" />
-		</label>
-	</div>
-	
-	<div>
-		<label>Priority: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-			<input type="text" ng-model="role.priority"
-				maxlength="30"/>
-		</label>
+	<div ng-show="showLoader" class="span loader-container">
+		<i class="icon-primary-spinner" role="img" 	aria-label="Please wait while we load your content"></i>
 	</div>
-	
-	<div>
-		<button style="margin-left: 105px;" class="btn btn-small" onClick="window.location='admin'">Cancel</button>
-		<button class="btn btn-alt btn-small" ng-click="saveRole();">Save</button>
-	</div> 
-	<br/>
-	<div ng-if="routeRoleId != 0">
+	<div ng-hide="showLoader">
 		<div>
-			<h3 class="heading-small-emphasis">Role Functions</h3>    		
-			<button class="btn btn-alt btn-small" ng-click="addNewRoleFunctionModalPopup(role.roleFunctions,role.name, role);">Manage Role Functions</button>
-			
-			<table class="striped" ng-if="role.roleFunctions.length">
-						<thead>
-							<tr>
-								<th>Role Function Name</th>						
-								<th>Remove</th>
-							</tr>
-						</thead>
-						<tbody type="body" ng-repeat="roleFunction in role.roleFunctions">
-							<tr>
-								<td width="70%">{{ roleFunction.name }}</td>						
-								<td width="10%">
-						    		<div ng-click="removeRoleFunction(roleFunction);"><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
-						    	</td>
-							</tr>			  
-						</tbody>
-			</table>
+			<h2 class="heading-small-content">Please edit the role details below: </h2>
 		</div>
-		<br/>
 		
-		<!-- Commented code due to issues with child role activation and deactivation, should be revisited -->
-		<!-- <div>
-			<h4 class="heading-small-emphasis">Child Roles</h4>    
-			<button class="btn btn-alt btn-small" ng-click="addNewChildRoleFunctionModalPopup(role.childRoles,role.name, role);">Manage Child Roles</button>
-			
-			<table class="striped" ng-if="role.childRoles.length">
-						<thead>
-							<tr>
-								<th>Name</th>						
-								<th>Remove?</th>
-							</tr>
-						</thead>
-						<tbody type="body" ng-repeat="role in role.childRoles">
-							<tr>
-								<td width="70%">{{ role.name }}</td>						
-								<td width="10%">
-						    		<div ng-click="removeChildRole(role);"><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
-						    	</td>
-							</tr>					   
-						</tbody>
-			</table>
-		</div> -->
-		<br/>
 		<div>
-			<a href="admin#/role_function_list">Manage Role Functions</a><br><br>
+			<label>*Name: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+				<input type="text" ng-model="role.name"
+					maxlength="300" />
+			</label>
+		</div>
+		
+		<div>
+			<label>Priority: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+				<input type="text" ng-model="role.priority"
+					maxlength="30"/>
+			</label>
+		</div>
+		
+		<div>
+			<button style="margin-left: 105px;" class="btn btn-small" onClick="window.location='admin'">Cancel</button>
+			<button class="btn btn-alt btn-small" ng-click="saveRole();">Save</button>
+		</div> 
+		<br/>
+		<div ng-if="routeRoleId != 0">
+			<div>
+				<h3 class="heading-small-emphasis">Role Functions</h3>    		
+				<button class="btn btn-alt btn-small" ng-click="addNewRoleFunctionModalPopup(role.roleFunctions,role.name, role);">Manage Role Functions</button>
+				
+				<table class="striped" ng-if="role.roleFunctions.length">
+							<thead>
+								<tr>
+									<th>Role Function Name</th>						
+									<th>Remove</th>
+								</tr>
+							</thead>
+							<tbody type="body" ng-repeat="roleFunction in role.roleFunctions">
+								<tr>
+									<td width="70%">{{ roleFunction.name }}</td>						
+									<td width="10%">
+							    		<div ng-click="removeRoleFunction(roleFunction);"><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
+							    	</td>
+								</tr>			  
+							</tbody>
+				</table>
+			</div>
+			<br/>
+			<br/>
+			<div>
+				<a href="admin#/role_function_list">Manage Role Functions</a><br><br>
+			</div>
 		</div>
-		<!-- <table class="striped" table-data="availableRoles">
-					<thead>
-						<tr>
-							<th></th>						
-							<th>Role</th>
-						</tr>
-					</thead>
-					<tbody type="body" ng-repeat="availableRole in availableRoles">
-						<tr>
-							<td width="70%">
-								<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
-				    				<input type="checkbox" ng-model="availableRole.selected" />
-				    		</div>
-							</td>						
-							<td> {{ availableRole.name }} </td>
-						</tr>					   
-					</tbody>
-		</table> -->
 	</div>
 </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role_list.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role_list.html
index a608a0db..5c407390 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role_list.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-admin/role_list.html
@@ -2,13 +2,16 @@
 	<div>
 		<h1 class="heading-page" id="Roles">Roles</h1>
 	</div>
-
-	<div>
-		 <button type="submit" onClick="window.location='admin#/role/0';" class="btn btn-alt btn-small">Add New Role</button>
+	<div ng-show="showLoader" class="span loader-container">
+		<i class="icon-primary-spinner" role="img"
+			aria-label="Please wait while we load your content"></i>
 	</div>
-	<h2 class="heading-small">Click on a Role to view its details.</h2>
-		
-	<table class="striped" ng-if="availableRoleFunctions" style="width: auto;">
+	<div ng-hide="showLoader">
+		<div>
+			 <button type="submit" onClick="window.location='admin#/role/0';" class="btn btn-alt btn-small">Add New Role</button>
+		</div>
+		<h2 class="heading-small">Click on a Role to view its details.</h2>
+			<table class="striped" ng-if="availableRoleFunctions" style="width: auto;">
 				<thead> 
 					<tr>
 						<th>Name</th>
@@ -38,5 +41,5 @@
 					</tr>
 				</tbody>
 			</table>
-			
+	</div>
 </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-profile/modals/role-add.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-profile/modals/role-add.html
index d662fc01..f182417e 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-profile/modals/role-add.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-profile/modals/role-add.html
@@ -1,36 +1,37 @@
-<div>
-	<div class="b2b-modal-header ng-scope in">
-		<h1 class="heading-medium" id="SelectRole">Select Role Functions</h1>
 
+<div class="b2b-modal-header">
+	<h1 class="heading-medium" id="SelectRole">Select Role</h1>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"	ng-click="$dismiss('cancel')"></button>
 	</div>
+</div>
 
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in" tabindex="0" 	aria-label="Modal header text content" role="region">
-		<table class="striped">
-			<thead>
-				<tr>
-					<th></th>
-					<th>Role Function</th>
-				</tr>
-			</thead>
-			<tbody type="body"ng-repeat="roleFunction in msg.availableRoleFunctions">
-				<tr>
-					<td>
-						<label class="btn-switch-label" tabindex="0" role="option"> 
-							<input 	type="checkbox" b2b-switches ng-model="roleFunction.selected" ng-click="activateRoleConfirmPopUp(roleFunction.selected,roleFunction);" size-class="modal-small modal-alert">
-						</label>
-					</td>
-					<td>{{roleFunction.name}}</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
+<div class="b2b-modal-body" tabindex="0" 	aria-label="Modal header text content" role="region">
+	<table class="striped">
+		<thead>
+			<tr>
+				<th></th>
+				<th>Role</th>
+			</tr>
+		</thead>
+		<tbody type="body"ng-repeat="roleFunction in msg.availableRoleFunctions">
+			<tr>
+				<td>
+					<label class="btn-switch-label" tabindex="0" role="option"> 
+						<input 	type="checkbox" b2b-switches ng-model="roleFunction.selected" ng-click="activateRoleConfirmPopUp(roleFunction.selected,roleFunction);" size-class="modal-small modal-alert">
+					</label>
+				</td>
+				<td>{{roleFunction.name}}</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
 
-	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-			<button style="float: right; margin-right: 20px;"
-				class="btn btn-alt btn-small"
-				ng-click="$dismiss('cancel')">Close</button>
-		</div>
-		<br />
+<div class="b2b-modal-footer" id="role-popup-footer">
+	<div class="cta-button-group">
+		<button style="float: right; margin-right: 20px;"
+			class="btn btn-alt btn-small"
+			ng-click="$dismiss('cancel')">Close</button>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/styles/ecomp.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/styles/ecomp.css
index e593c24a..dd25f755 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/styles/ecomp.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/styles/ecomp.css
@@ -171,4 +171,7 @@ p,a{
 
 .header-image{
 	height:28px;
-}
\ No newline at end of file
+}
+#role-popup-footer{
+	height:100px;	
+}