[PORTAL-16 PORTAL-18] Widget ms; staging

Remove staging repositories from poms.
Add widget microservice code base.
Add portal unit tests.
Repair defects.
Normalize line endings.

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

4 files changed, 502 insertions, 495 deletions

diff --git a/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less b/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
index b98289e7..5568ca8e 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
@@ -1,125 +1,125 @@
-.new-catalog-modal {

-  height: 430px;

-

-  .user-catalog-roles{

-    .title{

-      //.n18r;

-      .dGray18r;  //AT&T Dark Gray

-      border-bottom: @portalDBlue 3px solid;

-    }

-    

-       input:not([type="button"]) {

-    height: 13px;

-} 

-    .display-userApp-Catalog-Roles

-    {

-    padding-left: 16px;

-    padding-top: 10px;

-    font-family: Omnes-ECOMP-W02,Arial;

-    font-size: 18px;

-    color: #5a5a5a;

-    }

-	

-	#pending-checkbox{	

-	font-family: Omnes-ECOMP-W02,Arial;

-	font-size: 15px; 

-	color: #5a5a5a;

-	}

-    .app-catalog-roles-list{

-      height: 286px;

-      

-      

-      .app-catalog-item{

-        border: 1px solid @portalLGray;

-        border-radius: 2px;

-        background-color: @funcBkgGray;

-

-        padding: 10px;

-        margin-top: 8px;

-        //margin-right: 6px;

-        //margin-left: 6px;

-

-        .app-catalog-item-left{

-          padding-top: 0;

-          line-height: 30px;

-          height: 30px;

-          vertical-align: middle;

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          margin-right: 10px;

-          padding-left: 4px;

-          background: @portalWhite;

-          white-space: nowrap;

-

-        }

-        .app-catalog-item-right{

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          background: @portalWhite;

-          vertical-align: middle;

-        }

-

-        .app-catalog-item-right-error{

-          .portalRed;

-          padding: 7px 7px 7px 7px;

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          background: @portalWhite;

-          vertical-align: middle;

-        }

-

-        .app-catalog-item-right-contacting{

-          .portalGreen;

-          padding: 7px 7px 7px 7px;

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          background: @portalWhite;

-          vertical-align: middle;

-        }

-

-        .app-select-left{

-          width: 45%;

-          margin-right: 10px;

-          vertical-align: middle;

-

-

-          .select-field{

-            padding-top: 0;

-            line-height: 30px;

-            height: 30px;

-            vertical-align: middle;

-            border-radius: 2px;

-            border: 1px solid @portalLGray;

-            margin-right: 10px;

-            padding-left: 4px;

-            background: @portalWhite;

-            display:inline-block;

-          }

-        }

-

-

-        .app-item-delete{

-          .ico_trash_default;

-          display: inline-block;

-          vertical-align: 2px;

-          cursor: pointer;

-          position: relative;

-          top: 6px;

-          color: transparent;

-          margin-left: 8px;

-

-        }

-

-      }

-    }

-

-  }

-}

+.new-catalog-modal {
+  height: 430px;
+
+  .user-catalog-roles{
+    .title{
+      //.n18r;
+      .dGray18r;  //AT&T Dark Gray
+      border-bottom: @portalDBlue 3px solid;
+    }
+    
+       input:not([type="button"]) {
+    height: 13px;
+} 
+    .display-userApp-Catalog-Roles
+    {
+    padding-left: 16px;
+    padding-top: 10px;
+    font-family: Omnes-ECOMP-W02,Arial;
+    font-size: 18px;
+    color: #5a5a5a;
+    }
+	
+	#pending-checkbox{	
+	font-family: Omnes-ECOMP-W02,Arial;
+	font-size: 15px; 
+	color: #5a5a5a;
+	}
+    .app-catalog-roles-list{
+      height: 286px;
+      
+      
+      .app-catalog-item{
+        border: 1px solid @portalLGray;
+        border-radius: 2px;
+        background-color: @funcBkgGray;
+
+        padding: 10px;
+        margin-top: 8px;
+        //margin-right: 6px;
+        //margin-left: 6px;
+
+        .app-catalog-item-left{
+          padding-top: 0;
+          line-height: 30px;
+          height: 30px;
+          vertical-align: middle;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          margin-right: 10px;
+          padding-left: 4px;
+          background: @portalWhite;
+          white-space: nowrap;
+
+        }
+        .app-catalog-item-right{
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-catalog-item-right-error{
+          .portalRed;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-catalog-item-right-contacting{
+          .portalGreen;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-select-left{
+          width: 45%;
+          margin-right: 10px;
+          vertical-align: middle;
+
+
+          .select-field{
+            padding-top: 0;
+            line-height: 30px;
+            height: 30px;
+            vertical-align: middle;
+            border-radius: 2px;
+            border: 1px solid @portalLGray;
+            margin-right: 10px;
+            padding-left: 4px;
+            background: @portalWhite;
+            display:inline-block;
+          }
+        }
+
+
+        .app-item-delete{
+          .ico_trash_default;
+          display: inline-block;
+          vertical-align: 2px;
+          cursor: pointer;
+          position: relative;
+          top: 6px;
+          color: transparent;
+          margin-left: 8px;
+
+        }
+
+      }
+    }
+
+  }
+}
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js b/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js
index ad34b08d..150a305e 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js
@@ -1,238 +1,245 @@
-/*-

- * ================================================================================

- * 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 _classCallCheck(instance, Constructor) {

-	if (!(instance instanceof Constructor)) {

-		throw new TypeError('Cannot call a class as a function');

-	}

-}

-

-(function() {

-	var HTTP_PROTOCOL_RGX = /https?:\/\//;

-

-	var CatalogCtrl = function CatalogCtrl(conf, catalogService, confirmBoxService, ExternalRequestAccessService,

-			$log, $window, userProfileService, applicationsService, $scope, $state, 

-			$timeout, $interval, $modal, ngDialog) {

-

-		this.conf = conf;	

-		var _this = this;

-		_classCallCheck(this, CatalogCtrl);

-

-		// activate spinner

-		this.isLoading = true;

-		$scope.getAppCatalogIsDone = false;

-		$scope.radioValue = 'All';

-		$scope.$watch('radioValue', function(newValue, oldValue) {

-			var appCatalog = $scope.appCatalog;

-			$scope.appCatalog = [];

-			$scope.appCatalog = appCatalog;

-

-			

-		});

-		

-		this.catalogService = catalogService;

-		this.userProfileService = userProfileService;

-		this.applicationsService = applicationsService;

-		var resultAccessValue = null;

-		$scope.demoNum = 1;

-		$scope.appRoles = [];

-		

-        let init = () => {

-            getExternalAccess();

-        };

-        

-        var getExternalAccess = () => {

-    		ExternalRequestAccessService.getExternalRequestAccessServiceInfo().then(

-    				function(property) {

-    		resultAccessValue = property.accessValue;

-    					// $log.info(res);

-    				}).catch(err => {

-                        $log.error('CatalogCtrl: failed getExternalRequestAccessServiceInfo: ' + JSON.stringify(err));

-                    });    

-        };

-        

-

-	

-		$scope.applyPresentationDetailsToAppsCatalog = function(res, value) {

-			

-			_this.apps = res;

-			var rowNo = 0;

-

-			// defend against error string result -

-			// a huge list that should never happen.

-			var maxItems = 333;

-			if (_this.apps.length < maxItems)

-				maxItems = _this.apps.length;

-			for (var i = 0; i < maxItems; i++) {												

-				let imgLnk = '';

-				if (_this.apps[i].imageUrl)

-					imgLnk = conf.api.appThumbnail.replace(':appId', _this.apps[i].id);

-				//$log.debug('CatalogCtlr::applyPresn: imgLink = ' + imgLnk);

-				$scope.appCatalog[i] = {

-					sizeX : 2,

-					sizeY : 2,

-					id : _this.apps[i].id,

-					headerText : _this.apps[i].name,

-					imageLink : imgLnk,

-					restricted : _this.apps[i].restricted,  

-					select : _this.apps[i].select,

-					access : _this.apps[i].access,

-					pending: _this.apps[i].pending,

-					mlproperty: value

-				};

-			}

-			//$log.debug('CatalogCtrl: getAppCatalog count : '

-			//				+ $scope.appCatalog.length);

-			_this.isLoading = false;

-			$scope.getAppCatalogIsDone = true;

-		}

-		

-        let getAppsCatalog = () => {

-            catalogService.getAppCatalog()

-                .then(appsList => {

-                	$scope.applyPresentationDetailsToAppsCatalog(appsList);

-                }).catch(err => {

-                    confirmBoxService.showInformation('There was a problem retrieving the Applications. ' +

-                        'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});

-                    $log.error('CatalogCtrl:openAddRoleModal: Error: ', err);

-                });

-        };

-        

-        this.openAddRoleModal = (item) => { 

-        	let data = null;

-

-            if((!item.restricted) && (item.mlproperty)){

-                data = {

-                    dialogState: 2,

-                    selectedUser:{

-                        attuid: $scope.attuid,

-                        firstName: $scope.firstName,

-                        lastName: $scope.lastName,

-                        headerText: item.headerText,

-                    	item: item

-                        

-                    }

-                }

-            ngDialog.open({

-                templateUrl: 'app/views/catalog/add-catalog-dialogs/new-catalog.modal.html',

-                controller: 'NewCatalogModalCtrl',

-                controllerAs: 'userInfo',

-                data: data

-            }).closePromise.then(needUpdate => {

-                if(needUpdate.value === true){

-                	getAppsCatalog();

-                }

-            	

-            });

-          }

-        };

-

-		// Run this function when user clicks on checkbox.

-		this.storeSelection = function(item) {

-			// $log.debug('CatalogCtrl:storeSelection: item.id is ' + item.id + ', select is ' + item.select);

-			var pendingFlag = false;

-			

-			if(item.access) 

-				pendingFlag = false;

-			else

-				pendingFlag =  item.pending;

-							

-			var appData = { 

-					appId   : item.id,

-					select  : item.select,

-					pending : pendingFlag	// TODO

-			};

-			

-			catalogService.updateManualAppSort(appData).then(

-					function(result) {

-						// $log.debug('CatalogCtrl:storeSelection result is ', result);

-					})['catch'](function(err) {

-						$log.error('CatalogCtrl:storeSelection: exception: ', err);

-					});

-			catalogService.updateAppCatalog(appData).then(

-				function(result) {

-					// $log.debug('CatalogCtrl:storeSelection result is ', result);

-				})['catch'](function(err) {

-					$log.error('CatalogCtrl:storeSelection: exception: ', err);

-				});

-		};

-		

-		userProfileService

-				.getUserProfile()

-				.then(

-						function(profile) {

-							$scope.attuid = profile.orgUserId;

-							$scope.firstName = profile.firstName;

-							$scope.lastName = profile.lastName;

-							$scope.appCatalog = [];

-							

-							catalogService.getAppCatalog().then(

-											function(res) {	

-									$scope.applyPresentationDetailsToAppsCatalog(res, resultAccessValue);

-											})['catch'](function(err) {

-									$log.error('CatalogCtrl: failed getAppCatalog: ', JSON.stringify(err));

-									_this.isLoading = false;

-									$scope.getAppCatalogIsDone = true;

-						  });

-						});

-

-							// applicationsService.getUserApps()

-

-

-		this.gridsterOpts = {

-			columns : 12,

-			colWidth : 95,

-			rowHeight : 95,

-			margins : [ 20, 20 ],

-			outerMargin : true,

-			pushing : true,

-			floating : true,

-			swapping : true,

-		};

-

-		if (getParameterByName('noUserError') != null) {

-			if (getParameterByName('noUserError') == "Show") {

-				$("#errorInfo").show();

-			}

-

-		}

-		

-		init();

-	};

-

-	CatalogCtrl.$inject = [ 'conf', 'catalogService', 'confirmBoxService', 'ExternalRequestAccessService', '$log',

-			'$window', 'userProfileService', 'applicationsService', '$scope', 

-			'$state', '$timeout', '$interval', '$modal', 'ngDialog' ];

-	angular.module('ecompApp').controller('CatalogCtrl', CatalogCtrl);

-})();

-

-function getParameterByName(name, url) {

-	if (!url)

-		url = window.location.href;

-	name = name.replace(/[\[\]]/g, "\\$&");

-	var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex

-			.exec(url);

-	if (!results)

-		return '';

-	if (!results[2])

-		return '';

-	return results[2].replace(/\+/g, " ");

-}

+/*-
+ * ================================================================================
+ * 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 _classCallCheck(instance, Constructor) {
+	if (!(instance instanceof Constructor)) {
+		throw new TypeError('Cannot call a class as a function');
+	}
+}
+
+(function() {
+	var HTTP_PROTOCOL_RGX = /https?:\/\//;
+
+	var CatalogCtrl = function CatalogCtrl(conf, catalogService, confirmBoxService, ExternalRequestAccessService,
+			$log, $window, userProfileService, applicationsService, $scope, $state, 
+			$timeout, $interval, $modal, ngDialog) {
+
+		this.conf = conf;	
+		var _this = this;
+		var externalRequest = true;
+		_classCallCheck(this, CatalogCtrl);
+
+		// activate spinner
+		this.isLoading = true;
+		$scope.getAppCatalogIsDone = false;
+		$scope.radioValue = 'All';
+		$scope.$watch('radioValue', function(newValue, oldValue) {
+			var appCatalog = $scope.appCatalog;
+			$scope.appCatalog = [];
+			$scope.appCatalog = appCatalog;
+
+			
+		});
+		
+		this.catalogService = catalogService;
+		this.userProfileService = userProfileService;
+		this.applicationsService = applicationsService;
+		var resultAccessValue = null;
+		$scope.demoNum = 1;
+		$scope.appRoles = [];
+		
+        let init = () => {
+            getExternalAccess();
+        };
+        
+        var getExternalAccess = () => {
+    		ExternalRequestAccessService.getExternalRequestAccessServiceInfo().then(
+    				function(property) {
+    		resultAccessValue = property.accessValue;
+    					// $log.info(res);
+    				}).catch(err => {
+                        $log.error('CatalogCtrl: failed getExternalRequestAccessServiceInfo: ' + JSON.stringify(err));
+                    });    
+        };
+        
+
+	
+		$scope.applyPresentationDetailsToAppsCatalog = function(res, value) {
+			
+			_this.apps = res;
+			var rowNo = 0;
+
+			// defend against error string result -
+			// a huge list that should never happen.
+			var maxItems = 333;
+			if (_this.apps.length < maxItems)
+				maxItems = _this.apps.length;
+			for (var i = 0; i < maxItems; i++) {												
+				let imgLnk = '';
+				if (_this.apps[i].imageUrl)
+					imgLnk = conf.api.appThumbnail.replace(':appId', _this.apps[i].id);
+				//$log.debug('CatalogCtlr::applyPresn: imgLink = ' + imgLnk);
+				$scope.appCatalog[i] = {
+					sizeX : 2,
+					sizeY : 2,
+					id : _this.apps[i].id,
+					headerText : _this.apps[i].name,
+					mlAppName: _this.apps[i].mlAppName,
+					imageLink : imgLnk,
+					restricted : _this.apps[i].restricted,  
+					select : _this.apps[i].select,
+					access : _this.apps[i].access,
+					pending: _this.apps[i].pending,
+					mlproperty: value
+				};
+			}
+			//$log.debug('CatalogCtrl: getAppCatalog count : '
+			//				+ $scope.appCatalog.length);
+			_this.isLoading = false;
+			$scope.getAppCatalogIsDone = true;
+		}
+		
+        let getAppsCatalog = () => {
+            catalogService.getAppCatalog()
+                .then(appsList => {
+                	$scope.applyPresentationDetailsToAppsCatalog(appsList);
+                }).catch(err => {
+                    confirmBoxService.showInformation('There was a problem retrieving the Applications. ' +
+                        'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                    $log.error('CatalogCtrl:openAddRoleModal: Error: ', err);
+                });
+        };
+        
+        this.openAddRoleModal = (item) => { 
+        	let data = null;
+
+            if((!item.restricted) && (item.mlproperty)){
+                data = {
+                    dialogState: 2,
+                    selectedUser:{
+                        attuid: $scope.attuid,
+                        firstName: $scope.firstName,
+                        lastName: $scope.lastName,
+                        headerText: item.headerText,
+                        haloAppName : item.mlAppName,
+                    	item: item,
+                    	extReqValue : externalRequest
+                        
+                    }
+                }
+            ngDialog.open({
+                templateUrl: 'app/views/catalog/add-catalog-dialogs/new-catalog.modal.html',
+                controller: 'NewCatalogModalCtrl',
+                controllerAs: 'userInfo',
+                data: data
+            }).closePromise.then(needUpdate => {
+                if(needUpdate.value === true){
+                	getAppsCatalog();
+                }
+            	
+            });
+          }
+        };
+
+		// Run this function when user clicks on checkbox.
+		this.storeSelection = function(item) {
+			// $log.debug('CatalogCtrl:storeSelection: item.id is ' + item.id + ', select is ' + item.select);
+			var pendingFlag = false;
+			
+			if(item.access) 
+				pendingFlag = false;
+			else
+				pendingFlag =  item.pending;
+							
+			var appData = { 
+					appId   : item.id,
+					select  : item.select,
+					pending : pendingFlag	// TODO
+			};
+			
+			catalogService.updateManualAppSort(appData).then(
+					function(result) {
+						// $log.debug('CatalogCtrl:storeSelection result is ', result);
+					})['catch'](function(err) {
+						$log.error('CatalogCtrl:storeSelection: exception: ', err);
+					});
+			catalogService.updateAppCatalog(appData).then(
+				function(result) {
+					// $log.debug('CatalogCtrl:storeSelection result is ', result);
+				})['catch'](function(err) {
+					$log.error('CatalogCtrl:storeSelection: exception: ', err);
+				});
+		};
+		
+		userProfileService
+				.getUserProfile()
+				.then(
+						function(profile) {
+							$scope.attuid = profile.orgUserId;
+							$scope.firstName = profile.firstName;
+							$scope.lastName = profile.lastName;
+							$scope.appCatalog = [];
+							
+							catalogService.getAppCatalog().then(
+											function(res) {	
+									$scope.applyPresentationDetailsToAppsCatalog(res, resultAccessValue);
+											})['catch'](function(err) {
+									$log.error('CatalogCtrl: failed getAppCatalog: ', JSON.stringify(err));
+									_this.isLoading = false;
+									$scope.getAppCatalogIsDone = true;
+						  });
+						});
+
+							// applicationsService.getUserApps()
+
+
+		this.gridsterOpts = {
+			columns : 12,
+			colWidth : 95,
+			rowHeight : 95,
+			margins : [ 20, 20 ],
+			outerMargin : true,
+			pushing : true,
+			floating : true,
+			swapping : true,
+			resizable: {
+				enabled: false,
+			},
+		};
+
+		if (getParameterByName('noUserError') != null) {
+			if (getParameterByName('noUserError') == "Show") {
+				$("#errorInfo").show();
+			}
+
+		}
+		
+		init();
+	};
+
+	CatalogCtrl.$inject = [ 'conf', 'catalogService', 'confirmBoxService', 'ExternalRequestAccessService', '$log',
+			'$window', 'userProfileService', 'applicationsService', '$scope', 
+			'$state', '$timeout', '$interval', '$modal', 'ngDialog' ];
+	angular.module('ecompApp').controller('CatalogCtrl', CatalogCtrl);
+})();
+
+function getParameterByName(name, url) {
+	if (!url)
+		url = window.location.href;
+	name = name.replace(/[\[\]]/g, "\\$&");
+	var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex
+			.exec(url);
+	if (!results)
+		return '';
+	if (!results[2])
+		return '';
+	return results[2].replace(/\+/g, " ");
+}
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
index 68bf9ef2..b4063ad6 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
@@ -1,90 +1,90 @@
-<!--

-  ================================================================================

-  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="w-ecomp-app-catalog">

-	<div class="app-catalog-container" id="page-content">

-	        <div id="title" class="w-ecomp-main-view-title">

-			<h1 class="heading-page">Application Catalog</h1>

-		</div>

-		<div class="app-catalog-list">

-			<div class="simulateCatGridHeader">

-				<span class="simulateCatGridHeaderDetails"> Click the check

-					boxes below to choose which applications are shown on the <a

-					href="applicationsHome">home page</a>.

-				</span> <br> <br> <label id="label-all"

-					class="simulateCatGridHeaderRadio"> Filter: <input

-					id="radio-button-all" type="radio" ng-model="radioValue"

-					value="All"> All

-				</label> <label id="label-accessible" class="simulateCatGridHeaderRadio">

-					<input id="radio-button-accessible" type="radio"

-					ng-model="radioValue" value="Accessible"> Accessible

-				</label> <label id="label-homepage" class="simulateCatGridHeaderRadio">

-					<input id="radio-button-homepage" type="radio"

-					ng-model="radioValue" value="Selected"> On Home Page

-				</label>

-

-			</div>

-			<div class="appCatalogue-boarder" >

-				<div gridster="catalog.gridsterOpts">	

-					<ul>	

-						<li gridster-item="item" ng-repeat="item in appCatalog"

-							ng-if="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">

-							<div class="gridster-box" style="{{!item.access?' color:lightgray !important':''}}">

-								<div class="gridster-box-header"

-									ng-show="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">

-									<i class="icon-content-gridguide"></i>

-									<h3 style="cursor: context-menu">{{item.headerText |

-										elipsis: 13}}</h3>

-								            <div class="form-row" ng-show="item.access || isAdminPortalAdmin">

-								                <label class="checkbox">

-								                    <input type="checkbox" ng-model="item.select" ng-change="catalog.storeSelection(item)">

-								                    <i class="skin"></i> 

-								                </label> 

-								                <i ng-show="item.pending" class="icon-tickets-contested"></i>							                      								                

-									</div>

-								</div>

-								<div class="gridster-box-content"

-									ng-style="{'cursor':'pointer',

-										'background-image': 'url('+(item.imageLink)+')',

-										'order': item.order, 

-										'background-color':'white',

-										'background-repeat': 'no-repeat',

-										'background-size': '170px 130px'}"

-									ng-click="catalog.openAddRoleModal(item)"

-									ng-hide="users.isLoadingTable && !users.getAppCatalogIsDone"

-									>

-								</div>

-							</div>

-						</li>

-					</ul>

-				</div>

-			</div>

-			

-			<br>

-

-			<div style="text-align: right;">

-				To request access to an application, please visit the <a

-					ng-href="getAccess">Get Access</a> page.

-			</div>

-

-			<br>

-		</div>

-

-	</div>

-</div>

+<!--
+  ================================================================================
+  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="w-ecomp-app-catalog">
+	<div class="app-catalog-container" id="page-content">
+	        <div id="title" class="w-ecomp-main-view-title">
+			<h1 class="heading-page">Application Catalog</h1>
+		</div>
+		<div class="app-catalog-list">
+			<div class="simulateCatGridHeader">
+				<span class="simulateCatGridHeaderDetails"> Click the check
+					boxes below to choose which applications are shown on the <a
+					href="applicationsHome">home page</a>.
+				</span> <br> <br> <label id="label-all"
+					class="simulateCatGridHeaderRadio"> Filter: <input
+					id="radio-button-all" type="radio" ng-model="radioValue"
+					value="All"> All
+				</label> <label id="label-accessible" class="simulateCatGridHeaderRadio">
+					<input id="radio-button-accessible" type="radio"
+					ng-model="radioValue" value="Accessible"> Accessible
+				</label> <label id="label-homepage" class="simulateCatGridHeaderRadio">
+					<input id="radio-button-homepage" type="radio"
+					ng-model="radioValue" value="Selected"> On Home Page
+				</label>
+
+			</div>
+			<div class="appCatalogue-boarder" >
+				<div gridster="catalog.gridsterOpts">	
+					<ul>	
+						<li gridster-item="item" ng-repeat="item in appCatalog"
+							ng-if="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">
+							<div class="gridster-box" style="{{!item.access?' color:lightgray !important':''}}">
+								<div class="gridster-box-header"
+									ng-show="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">
+									<i id="gridster-{{item.headerText.split(' ').join('-')}}-icon" class="icon-content-gridguide"></i>
+									<h3 style="cursor: context-menu">{{item.headerText |
+										elipsis: 13}}</h3>
+								            <div class="form-row" ng-show="item.access || isAdminPortalAdmin">
+								                <label class="checkbox">
+								                    <input id="gridster-{{item.headerText.split(' ').join('-')}}-icon-checkbox" type="checkbox" ng-model="item.select" ng-change="catalog.storeSelection(item)">
+								                    <i class="skin"></i> 
+								                </label> 
+								                <i ng-show="item.pending" class="icon-tickets-contested"></i>							                      								                
+									</div>
+								</div>
+								<div class="gridster-box-content"
+									ng-style="{'cursor':'pointer',
+										'background-image': 'url('+(item.imageLink)+')',
+										'order': item.order, 
+										'background-color':'white',
+										'background-repeat': 'no-repeat',
+										'background-size': '170px 130px'}"
+									ng-click="catalog.openAddRoleModal(item)"
+									ng-hide="users.isLoadingTable && !users.getAppCatalogIsDone"
+									>
+								</div>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+			
+			<br>
+
+			<div style="text-align: right;">
+				To request access to an application, please visit the <a
+				id="get-access-page-link" ng-href="getAccess">Get Access</a> page.
+			</div>
+
+			<br>
+		</div>
+
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html b/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html
index a5b754f6..8a848545 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html
@@ -1,42 +1,42 @@
-<!--

-  ================================================================================

-  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="confirmation-box-container">

-    <div class="confirmation-message-wrap">

-        <div class="confirmation-message" >

-			<div>

-				You do not have access to this application.  

-				See the 

-				<a href="" ng-click="confirmBox.goTo('root.getAccess', {appName: confirmBox.message.headerText})">

-					Get Access page</a> and request access at MyLogins.

-					<br><br>

-					You may check this box if access is pending: 

-				<input type="checkbox" 

-					att-checkbox 

-					ng-model="confirmBox.message.pending"

-					ng-change="confirmBox.storeSelection(confirmBox.message)"

-				>

-			</div>

-

-		</div>

-    </div>

-    <div class="dialog-control">

-        <div class="cancel-button" ng-click="confirmBox.closeBox(false)">Close</div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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="confirmation-box-container">
+    <div class="confirmation-message-wrap">
+        <div class="confirmation-message" >
+			<div>
+				You do not have access to this application.  
+				See the 
+				<a href="" ng-click="confirmBox.goTo('root.getAccess', {appName: confirmBox.message.headerText})">
+					Get Access page</a> and request access at MyLogins.
+					<br><br>
+					You may check this box if access is pending: 
+				<input type="checkbox" 
+					att-checkbox 
+					ng-model="confirmBox.message.pending"
+					ng-change="confirmBox.storeSelection(confirmBox.message)"
+				>
+			</div>
+
+		</div>
+    </div>
+    <div class="dialog-control">
+        <div class="cancel-button" ng-click="confirmBox.closeBox(false)">Close</div>
+    </div>
+</div>