[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>

3 files changed, 555 insertions, 555 deletions

diff --git a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
index 09a8e75a..140aea94 100644
--- a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
+++ b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
@@ -1,415 +1,415 @@
-/*-

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

- * 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.

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

- */

-/**

- * Created by nnaffar on 12/20/15.

- */

-'use strict';

-(function () {

-    class MenuDetailsModalCtrl {

-        constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService) {

-

-

-            let newMenuModel = {

-                name: null,

-                menuId: null,

-                parentMenuId: null,

-                url: null

-            };

-

-            let getAvailableRoles = (appid) => {

-                this.isSaving = true;

-                if (appid != null) {

-                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: About to call getManagedRolesMenu");

-                    functionalMenuService.getManagedRolesMenu(appid).then(rolesObj => {

-                        $log.debug("MenuDetailsModalCtrl::getAvailableRoles: Roles returned = " + JSON.stringify(rolesObj))

-                        this.availableRoles = rolesObj;

-                        this.preSelectedRoles = {roles:[]};

-

-                        if(($scope.ngDialogData.source==='edit') && this.isMidLevelMenuItem()){

-                            // in Edit flow , for Midlevel menu item no need to preSelect.

-                            this.preSelectedRoles = {roles:[]};

-                        }else if(!angular.isUndefined(this.menuItem.menuDetails) &&

-                            $scope.ngDialogData.source==='edit' && this.isLeafMenuItem() &&

-                            this.menuItem.menuDetails.appid!=appid) {

-                            // in Edit flow , for LeafMenuItem, if appid changed then no need to preSelect.

-                            this.preSelectedRoles = {roles:[]};

-                        }else{

-                            if((!angular.isUndefined(this.menuItem.menuDetails)) &&

-                                (!angular.isUndefined(this.menuItem.menuDetails.roles))){

-                                    $log.debug('menuDetails.roles: ' + this.menuItem.menuDetails.roles);

-                                    for(var i=0; i<this.menuItem.menuDetails.roles.length; i++){

-                                        var role = {"roleId":this.menuItem.menuDetails.roles[i]};

-                                        $log.debug('MenuDetailsModalCtrl::getAvailableRoles: adding role to preselected: ' + i + ': ' + JSON.stringify(role));

-                                        this.preSelectedRoles.roles.push(role);

-                                    }

-                            }

-                        }

-                        $rootScope.$broadcast('availableRolesReady');

-                        this.isSaving = false;

-                    }).catch(err => {

-                        $log.error("MenuDetailsModalCtrl::getAvailableRoles: error: " + err);

-                    });

-                } else {

-                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: appid was null");

-                }

-            };

-

-            let getAvailableApps = () => {

-                functionalMenuService.getAvailableApplications().then(apps => {

-                    $log.debug("MenuDetailsModalCtrl::getAvailableApps: Apps returned = " + JSON.stringify(apps))

-                    this.availableApps = apps;

-                    // Keep track of whether or not the selected app is disabled

-                    if (angular.isDefined(this.selectedApp) && angular.isDefined(this.selectedApp.index)) {

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

-                            if (apps[i].index === this.selectedApp.index) {

-                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: found app with index: " + this.selectedApp.index);

-                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: setting isDisabled to: " + !apps[i].enabled);

-                                this.selectedApp.isDisabled = !apps[i].enabled;

-                                break;

-                            }

-                        }

-                        $log.debug("didn't find index: " + this.selectedApp.index);

-                    }

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

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

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

-                    $log.error("MenuDetailsModalCtrl::getAvailableApps: getAvailableApps error: " + err);

-                }).finally(()=>{

-                    this.isSaving = false;

-                });

-            };

-

-            let init = () => {

-                $log.info('MenuDetailsModalCtrl::init');

-                this.saveOrContinueBtnText = "Save";

-                this.isSaving = false;

-                this.displayRoles = $scope.ngDialogData.source==='view' ? true : false;

-                this.formEditable = $scope.ngDialogData.source==='view' ? false : true;

-                this.selectedRole = [];

-                this.availableRoles = [];

-                this.menuItem = _.clone($scope.ngDialogData.menuItem);

-                $log.info('MenuDetailsModalCtrl::getAvailableApps: Within init, about to check menuDetails for defined');

-                if(!angular.isUndefined(this.menuItem.menuDetails) &&

-                    ($scope.ngDialogData.source==='view' ||

-                    ($scope.ngDialogData.source==='edit') && this.isLeafMenuItem() )){

-

-                    $log.debug("MenuDetailsModalCtrl::init: menuItem: ");

-                    $log.debug('MenuDetailsModalCtrl::init: ',this.menuItem);

-                    this.menuItem.menu.url = this.menuItem.menuDetails.url;

-                    this.selectedApp={};

-                    this.selectedApp.index = this.menuItem.menuDetails.appid;

-                    getAvailableRoles(this.selectedApp.index);

-

-                }

-

-                if($scope.ngDialogData.source==='view' || $scope.ngDialogData.source==='edit'){

-                    this.menutitle = this.menuItem.menu.name;

-                    this.menuLocation = this.isParentMenuItem() ? this.menuItem.menu.name : this.menuItem.menu.parent.name;

-                }else{

-                    this.menutitle = '';

-                    this.menuLocation = this.menuItem.menu.name;

-                }

-                // Temporarily passing 0 as dummy for getAvailableRoles incase of this.selectedApp is not there i.e., in Add flow

-                //  getAvailableRoles(angular.isUndefined(this.selectedApp) ? 0: this.selectedApp.index );

-                getAvailableApps();

-                $log.debug("MenuDetailsModalCtrl::init: Menu details: " +  JSON.stringify(this.menuItem.menuDetails));

-            };

-

-

-            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;

-

-            //This part handles conflict errors (409)

-            this.conflictMessages = {};

-            this.scrollApi = {};

-            let handleConflictErrors = err => {

-                if(!err.data){

-                    return;

-                }

-                if(!err.data.length){ //support objects

-                    err.data = [err.data]

-                }

-                $log.debug('MenuDetailsModalCtrl::handleConflictErrors: err.data = ' + JSON.stringify(err.data));

-                _.forEach(err.data, item => {

-                    _.forEach(item.fields, field => {

-                        //set conflict message

-                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];

-                        //set field as invalid

-                        $log.debug('MenuDetailsModalCtrl::handleConflictErrors: fieldName = ' + field.name);

-                        $scope.functionalMenuForm[field.name].$setValidity('conflict', false);

-                        //set watch once to clear error after user correction

-                        watchOnce[field.name]();

-                    });

-                });

-                this.scrollApi.scrollTop();

-            };

-

-            let resetConflict = fieldName => {

-                delete this.conflictMessages[fieldName];

-                $log.debug('MenuDetailsModalCtrl::resetConflict: $setValidity(true) = ' + fieldName);

-                if($scope.functionalMenuForm[fieldName]){

-                    $scope.functionalMenuForm[fieldName].$setValidity('conflict', true);

-                }

-            };

-

-            let watchOnce = {

-                text: () => {

-                    let unregisterName = $scope.$watch('functionalMenuDetails.menutitle', (newVal, oldVal) => {

-                        // $log.debug('title:: newVal, oldVal = ' + newVal.toLowerCase() + " | " + oldVal.toLowerCase());

-                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){

-                            resetConflict('text');

-                            unregisterName();

-                        }

-                    });

-                },

-                url: () => {

-                    let unregisterUrl = $scope.$watch('functionalMenuDetails.menuItem.menu.url', (newVal, oldVal) => {

-                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){

-                            resetConflict('url');

-                            unregisterUrl();

-                        }

-                    });

-                }

-            };

-

-            //***************************

-

-            this.isLeafMenuItem = () => {

-                return this.menuItem.menu.children.length>0 ? false : true;

-            };

-

-            this.isMidLevelMenuItem = () => {

-                return this.menuItem.menu.parentMenuId!=null && this.menuItem.menu.children.length>0 ? true : false;

-            };

-

-            this.isParentMenuItem = () => {

-                return this.menuItem.menu.parentMenuId!=null ? false : true;

-            };

-

-            this.updateSelectedApp = (appItem) => {

-                if (!appItem) {

-                    return;

-                }

-                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: drop down app item = ' + JSON.stringify(appItem.index));

-                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: appItem in updateSelectedApp: ");

-                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: ',appItem);

-                this.selectedApp.isDisabled = ! appItem.enabled;

-                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled);

-                getAvailableRoles(appItem.index);

-            };

-

-            this.continue = () => {

-                this.displayRoles = true;

-                this.formEditable = false;

-            };

-

-            this.saveChanges = () => {

-

-                //todo : form validation was commented as dialog message is kept for error validations

-                /*if($scope.functionalMenuForm.$invalid){

-                 return;

-                 }*/

-

-                if(!!this.menuItem.menu.url && (angular.isUndefined(this.selectedApp) || !this.selectedApp.index>0)) {

-                    confirmBoxService.showInformation('Please select the appropriate app, or remove the url').then(isConfirmed => {});

-                    return;

-                }else if(!this.menuItem.menu.url && !angular.isUndefined(this.selectedApp) && this.selectedApp.index>0){

-                    confirmBoxService.showInformation('Please enter url, or select "No Application"').then(isConfirmed => {});

-                    return;

-                }else if(!this.menutitle){

-                    confirmBoxService.showInformation('Please enter the Menu title').then(isConfirmed => {});

-                    return;

-                }

-

-                this.isSaving = true;

-                var activeMenuItem = {};

-

-                if ($scope.ngDialogData.source === 'edit') {     // Edit Menu Item

-                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving an edit menu item');

-                    activeMenuItem = {

-                        menuId:this.menuItem.menu.menuId,

-                        column:this.menuItem.menu.column,

-                        text:this.menutitle,

-                        parentMenuId:this.menuItem.menu.parentMenuId,

-                        url:this.menuItem.menu.url,

-                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,

-                        roles:this.selectedRole

-                    };

-                    // If we have removed the url and appid, we must remove the roles

-                    if (!activeMenuItem.appid && !activeMenuItem.url) {

-                        activeMenuItem.roles = null;

-                    }

-                    functionalMenuService.saveEditedMenuItem(activeMenuItem)

-                        .then(() => {

-                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');

-                            $scope.closeThisDialog(true);

-                        }).catch(err => {

-                        if(err.status === 409){//Conflict

-                            handleConflictErrors(err);

-                        } else {

-                            confirmBoxService.showInformation('There was a problem saving your change. ' +

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

-                        }

-                        $log.error('MenuDetailsModalCtrl::saveChanges: error - ',err);

-                    }).finally(()=>{

-                        this.isSaving = false;

-                    });

-

-                    $log.debug("MenuDetailsModalCtrl::saveChanges: Edit Menu output will be: " + JSON.stringify(activeMenuItem));

-                } else {   // New Menu Item

-                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving a New menu item');

-                    var newMenuItem = {

-                        menuId:null, // this is a new menu item

-                        column:this.menuItem.menu.column,

-                        text:this.menutitle,

-                        // We are creating this new menu item under the menu item that was clicked on.

-                        parentMenuId:this.menuItem.menu.menuId,

-                        url:this.menuItem.menu.url,

-                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,

-                        roles:this.selectedRole

-                    };

-

-                    $log.debug("MenuDetailsModalCtrl::saveChanges:  New Menu output will be: " + JSON.stringify(newMenuItem));

-                    functionalMenuService.saveMenuItem(newMenuItem)

-                        .then(() => {

-                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');

-                            $scope.closeThisDialog(true);

-                        }).catch(err => {

-                        if(err.status === 409){//Conflict

-                            handleConflictErrors(err);

-                        } else {

-                            confirmBoxService.showInformation('There was a problem saving your menu. ' +

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

-                        }

-                        $log.error('MenuDetailsModalCtrl::saveChanges error: ', err);

-                    }).finally(()=>{

-                        this.isSaving = false;

-                    });

-

-                }

-            };

-

-            init();

-

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

-                //Disable navigation when modal is opened

-                e.preventDefault();

-            });

-        }

-    }

-    MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService'];

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

-

-    angular.module('ecompApp').directive('dropdownMultiselect', ['functionalMenuService',function(){

-        return {

-            restrict: 'E',

-            scope: {

-                model: '=',

-                options: '=',

-                populated_roles: '=preSelected',

-                dropdownTitle: '@',

-                source: '='

-            },

-            template: "<div class='btn-group' data-ng-class='{open: open}'>" +

-            "<button class='btn btn-medium'>{{dropdownTitle}}</button>" +

-            "<button class='btn dropdown-toggle' data-ng-click='open=!open;openDropDown()'><span class='caret'></span></button>" +

-            "<ul class='dropdown-menu dropdown-menu-medium' aria-labelledby='dropdownMenu'>" +

-            "<li data-ng-repeat='option in options'> <input ng-disabled='setDisable(source)'  type='checkbox' data-ng-change='setSelectedItem(option.roleId)' ng-model='selectedItems[option.roleId]'>{{option.rolename}}</li>" +

-            "</ul>" +

-            "</div>",

-            controller: function ($scope) {

-                $scope.selectedItems = {};

-                $scope.checkAll = false;

-                $scope.$on('availableRolesReady', function() {

-                    init();

-                });

-

-                function init() {

-                    console.log('dropdownMultiselect init');

-                    $scope.dropdownTitle = $scope.source ==='view' ? 'View Roles' : 'Select Roles';

-                    console.log('$scope.populated_roles = ' + $scope.populated_roles);

-                }

-

-                $scope.$watch('populated_roles', function(){

-                    if ($scope.populated_roles && $scope.populated_roles.length>0) {

-                        for (var i = 0; i < $scope.populated_roles.length; i++) {

-                            $scope.model.push($scope.populated_roles[i].roleId);

-                            $scope.selectedItems[$scope.populated_roles[i].roleId] = true;

-                        }

-                        if ($scope.populated_roles.length === $scope.options.length) {

-                            $scope.checkAll = true;

-                        }

-                    }else{

-                        deselectAll();

-                    }

-                });

-

-                $scope.openDropDown = function () {

-

-                };

-

-                $scope.checkAllClicked = function () {

-                    if ($scope.checkAll) {

-                        selectAll();

-                    } else {

-                        deselectAll();

-                    }

-                };

-

-                function selectAll() {

-                    $scope.model = [];

-                    $scope.selectedItems = {};

-                    angular.forEach($scope.options, function (option) {

-                        $scope.model.push(option.roleId);

-                    });

-                    angular.forEach($scope.model, function (id) {

-                        $scope.selectedItems[id] = true;

-                    });

-                    console.log($scope.model);

-                };

-

-                function deselectAll() {

-                    $scope.model = [];

-                    $scope.selectedItems = {};

-                    console.log($scope.model);

-                };

-

-                $scope.setSelectedItem = function (id) {

-                    var filteredArray = [];

-                    if ($scope.selectedItems[id] === true) {

-                        $scope.model.push(id);

-                    } else {

-                        filteredArray = $scope.model.filter(function (value) {

-                            return value != id;

-                        });

-                        $scope.model = filteredArray;

-                        $scope.checkAll = false;

-                    }

-                    console.log(filteredArray);

-                    return false;

-                };

-

-                $scope.setDisable = function(source){

-                    return source ==='view' ? true : false;

-                }

-            }

-        }

-    }]);

-

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/20/15.
+ */
+'use strict';
+(function () {
+    class MenuDetailsModalCtrl {
+        constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService) {
+
+
+            let newMenuModel = {
+                name: null,
+                menuId: null,
+                parentMenuId: null,
+                url: null
+            };
+
+            let getAvailableRoles = (appid) => {
+                this.isSaving = true;
+                if (appid != null) {
+                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: About to call getManagedRolesMenu");
+                    functionalMenuService.getManagedRolesMenu(appid).then(rolesObj => {
+                        $log.debug("MenuDetailsModalCtrl::getAvailableRoles: Roles returned = " + JSON.stringify(rolesObj))
+                        this.availableRoles = rolesObj;
+                        this.preSelectedRoles = {roles:[]};
+
+                        if(($scope.ngDialogData.source==='edit') && this.isMidLevelMenuItem()){
+                            // in Edit flow , for Midlevel menu item no need to preSelect.
+                            this.preSelectedRoles = {roles:[]};
+                        }else if(!angular.isUndefined(this.menuItem.menuDetails) &&
+                            $scope.ngDialogData.source==='edit' && this.isLeafMenuItem() &&
+                            this.menuItem.menuDetails.appid!=appid) {
+                            // in Edit flow , for LeafMenuItem, if appid changed then no need to preSelect.
+                            this.preSelectedRoles = {roles:[]};
+                        }else{
+                            if((!angular.isUndefined(this.menuItem.menuDetails)) &&
+                                (!angular.isUndefined(this.menuItem.menuDetails.roles))){
+                                    $log.debug('menuDetails.roles: ' + this.menuItem.menuDetails.roles);
+                                    for(var i=0; i<this.menuItem.menuDetails.roles.length; i++){
+                                        var role = {"roleId":this.menuItem.menuDetails.roles[i]};
+                                        $log.debug('MenuDetailsModalCtrl::getAvailableRoles: adding role to preselected: ' + i + ': ' + JSON.stringify(role));
+                                        this.preSelectedRoles.roles.push(role);
+                                    }
+                            }
+                        }
+                        $rootScope.$broadcast('availableRolesReady');
+                        this.isSaving = false;
+                    }).catch(err => {
+                        $log.error("MenuDetailsModalCtrl::getAvailableRoles: error: " + err);
+                    });
+                } else {
+                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: appid was null");
+                }
+            };
+
+            let getAvailableApps = () => {
+                functionalMenuService.getAvailableApplications().then(apps => {
+                    $log.debug("MenuDetailsModalCtrl::getAvailableApps: Apps returned = " + JSON.stringify(apps))
+                    this.availableApps = apps;
+                    // Keep track of whether or not the selected app is disabled
+                    if (angular.isDefined(this.selectedApp) && angular.isDefined(this.selectedApp.index)) {
+                        for (var i = 0; i < apps.length; i++) {
+                            if (apps[i].index === this.selectedApp.index) {
+                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: found app with index: " + this.selectedApp.index);
+                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: setting isDisabled to: " + !apps[i].enabled);
+                                this.selectedApp.isDisabled = !apps[i].enabled;
+                                break;
+                            }
+                        }
+                        $log.debug("didn't find index: " + this.selectedApp.index);
+                    }
+                })['catch'](function (err) {
+                    confirmBoxService.showInformation('There was a problem retrieving the Applications. ' +
+                        'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                    $log.error("MenuDetailsModalCtrl::getAvailableApps: getAvailableApps error: " + err);
+                }).finally(()=>{
+                    this.isSaving = false;
+                });
+            };
+
+            let init = () => {
+                $log.info('MenuDetailsModalCtrl::init');
+                this.saveOrContinueBtnText = "Save";
+                this.isSaving = false;
+                this.displayRoles = $scope.ngDialogData.source==='view' ? true : false;
+                this.formEditable = $scope.ngDialogData.source==='view' ? false : true;
+                this.selectedRole = [];
+                this.availableRoles = [];
+                this.menuItem = _.clone($scope.ngDialogData.menuItem);
+                $log.info('MenuDetailsModalCtrl::getAvailableApps: Within init, about to check menuDetails for defined');
+                if(!angular.isUndefined(this.menuItem.menuDetails) &&
+                    ($scope.ngDialogData.source==='view' ||
+                    ($scope.ngDialogData.source==='edit') && this.isLeafMenuItem() )){
+
+                    $log.debug("MenuDetailsModalCtrl::init: menuItem: ");
+                    $log.debug('MenuDetailsModalCtrl::init: ',this.menuItem);
+                    this.menuItem.menu.url = this.menuItem.menuDetails.url;
+                    this.selectedApp={};
+                    this.selectedApp.index = this.menuItem.menuDetails.appid;
+                    getAvailableRoles(this.selectedApp.index);
+
+                }
+
+                if($scope.ngDialogData.source==='view' || $scope.ngDialogData.source==='edit'){
+                    this.menutitle = this.menuItem.menu.name;
+                    this.menuLocation = this.isParentMenuItem() ? this.menuItem.menu.name : this.menuItem.menu.parent.name;
+                }else{
+                    this.menutitle = '';
+                    this.menuLocation = this.menuItem.menu.name;
+                }
+                // Temporarily passing 0 as dummy for getAvailableRoles incase of this.selectedApp is not there i.e., in Add flow
+                //  getAvailableRoles(angular.isUndefined(this.selectedApp) ? 0: this.selectedApp.index );
+                getAvailableApps();
+                $log.debug("MenuDetailsModalCtrl::init: Menu details: " +  JSON.stringify(this.menuItem.menuDetails));
+            };
+
+
+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+
+            //This part handles conflict errors (409)
+            this.conflictMessages = {};
+            this.scrollApi = {};
+            let handleConflictErrors = err => {
+                if(!err.data){
+                    return;
+                }
+                if(!err.data.length){ //support objects
+                    err.data = [err.data]
+                }
+                $log.debug('MenuDetailsModalCtrl::handleConflictErrors: err.data = ' + JSON.stringify(err.data));
+                _.forEach(err.data, item => {
+                    _.forEach(item.fields, field => {
+                        //set conflict message
+                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];
+                        //set field as invalid
+                        $log.debug('MenuDetailsModalCtrl::handleConflictErrors: fieldName = ' + field.name);
+                        $scope.functionalMenuForm[field.name].$setValidity('conflict', false);
+                        //set watch once to clear error after user correction
+                        watchOnce[field.name]();
+                    });
+                });
+                this.scrollApi.scrollTop();
+            };
+
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                $log.debug('MenuDetailsModalCtrl::resetConflict: $setValidity(true) = ' + fieldName);
+                if($scope.functionalMenuForm[fieldName]){
+                    $scope.functionalMenuForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+
+            let watchOnce = {
+                text: () => {
+                    let unregisterName = $scope.$watch('functionalMenuDetails.menutitle', (newVal, oldVal) => {
+                        // $log.debug('title:: newVal, oldVal = ' + newVal.toLowerCase() + " | " + oldVal.toLowerCase());
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
+                            resetConflict('text');
+                            unregisterName();
+                        }
+                    });
+                },
+                url: () => {
+                    let unregisterUrl = $scope.$watch('functionalMenuDetails.menuItem.menu.url', (newVal, oldVal) => {
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
+                            resetConflict('url');
+                            unregisterUrl();
+                        }
+                    });
+                }
+            };
+
+            //***************************
+
+            this.isLeafMenuItem = () => {
+                return this.menuItem.menu.children.length>0 ? false : true;
+            };
+
+            this.isMidLevelMenuItem = () => {
+                return this.menuItem.menu.parentMenuId!=null && this.menuItem.menu.children.length>0 ? true : false;
+            };
+
+            this.isParentMenuItem = () => {
+                return this.menuItem.menu.parentMenuId!=null ? false : true;
+            };
+
+            this.updateSelectedApp = (appItem) => {
+                if (!appItem) {
+                    return;
+                }
+                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: drop down app item = ' + JSON.stringify(appItem.index));
+                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: appItem in updateSelectedApp: ");
+                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: ',appItem);
+                this.selectedApp.isDisabled = ! appItem.enabled;
+                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled);
+                getAvailableRoles(appItem.index);
+            };
+
+            this.continue = () => {
+                this.displayRoles = true;
+                this.formEditable = false;
+            };
+
+            this.saveChanges = () => {
+
+                //todo : form validation was commented as dialog message is kept for error validations
+                /*if($scope.functionalMenuForm.$invalid){
+                 return;
+                 }*/
+
+                if(!!this.menuItem.menu.url && (angular.isUndefined(this.selectedApp) || !this.selectedApp.index>0)) {
+                    confirmBoxService.showInformation('Please select the appropriate app, or remove the url').then(isConfirmed => {});
+                    return;
+                }else if(!this.menuItem.menu.url && !angular.isUndefined(this.selectedApp) && this.selectedApp.index>0){
+                    confirmBoxService.showInformation('Please enter url, or select "No Application"').then(isConfirmed => {});
+                    return;
+                }else if(!this.menutitle){
+                    confirmBoxService.showInformation('Please enter the Menu title').then(isConfirmed => {});
+                    return;
+                }
+
+                this.isSaving = true;
+                var activeMenuItem = {};
+
+                if ($scope.ngDialogData.source === 'edit') {     // Edit Menu Item
+                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving an edit menu item');
+                    activeMenuItem = {
+                        menuId:this.menuItem.menu.menuId,
+                        column:this.menuItem.menu.column,
+                        text:this.menutitle,
+                        parentMenuId:this.menuItem.menu.parentMenuId,
+                        url:this.menuItem.menu.url,
+                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
+                        roles:this.selectedRole
+                    };
+                    // If we have removed the url and appid, we must remove the roles
+                    if (!activeMenuItem.appid && !activeMenuItem.url) {
+                        activeMenuItem.roles = null;
+                    }
+                    functionalMenuService.saveEditedMenuItem(activeMenuItem)
+                        .then(() => {
+                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
+                            $scope.closeThisDialog(true);
+                        }).catch(err => {
+                        if(err.status === 409){//Conflict
+                            handleConflictErrors(err);
+                        } else {
+                            confirmBoxService.showInformation('There was a problem saving your change. ' +
+                                'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                        }
+                        $log.error('MenuDetailsModalCtrl::saveChanges: error - ',err);
+                    }).finally(()=>{
+                        this.isSaving = false;
+                    });
+
+                    $log.debug("MenuDetailsModalCtrl::saveChanges: Edit Menu output will be: " + JSON.stringify(activeMenuItem));
+                } else {   // New Menu Item
+                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving a New menu item');
+                    var newMenuItem = {
+                        menuId:null, // this is a new menu item
+                        column:this.menuItem.menu.column,
+                        text:this.menutitle,
+                        // We are creating this new menu item under the menu item that was clicked on.
+                        parentMenuId:this.menuItem.menu.menuId,
+                        url:this.menuItem.menu.url,
+                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
+                        roles:this.selectedRole
+                    };
+
+                    $log.debug("MenuDetailsModalCtrl::saveChanges:  New Menu output will be: " + JSON.stringify(newMenuItem));
+                    functionalMenuService.saveMenuItem(newMenuItem)
+                        .then(() => {
+                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
+                            $scope.closeThisDialog(true);
+                        }).catch(err => {
+                        if(err.status === 409){//Conflict
+                            handleConflictErrors(err);
+                        } else {
+                            confirmBoxService.showInformation('There was a problem saving your menu. ' +
+                                'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                        }
+                        $log.error('MenuDetailsModalCtrl::saveChanges error: ', err);
+                    }).finally(()=>{
+                        this.isSaving = false;
+                    });
+
+                }
+            };
+
+            init();
+
+            $scope.$on('$stateChangeStart', e => {
+                //Disable navigation when modal is opened
+                e.preventDefault();
+            });
+        }
+    }
+    MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService'];
+    angular.module('ecompApp').controller('MenuDetailsModalCtrl', MenuDetailsModalCtrl);
+
+    angular.module('ecompApp').directive('dropdownMultiselect', ['functionalMenuService',function(){
+        return {
+            restrict: 'E',
+            scope: {
+                model: '=',
+                options: '=',
+                populated_roles: '=preSelected',
+                dropdownTitle: '@',
+                source: '='
+            },
+            template: "<div class='btn-group' data-ng-class='{open: open}'>" +
+            "<button class='btn btn-medium'>{{dropdownTitle}}</button>" +
+            "<button class='btn dropdown-toggle' data-ng-click='open=!open;openDropDown()'><span class='caret'></span></button>" +
+            "<ul class='dropdown-menu dropdown-menu-medium' aria-labelledby='dropdownMenu'>" +
+            "<li data-ng-repeat='option in options'> <input ng-disabled='setDisable(source)'  type='checkbox' data-ng-change='setSelectedItem(option.roleId)' ng-model='selectedItems[option.roleId]'>{{option.rolename}}</li>" +
+            "</ul>" +
+            "</div>",
+            controller: function ($scope) {
+                $scope.selectedItems = {};
+                $scope.checkAll = false;
+                $scope.$on('availableRolesReady', function() {
+                    init();
+                });
+
+                function init() {
+                    console.log('dropdownMultiselect init');
+                    $scope.dropdownTitle = $scope.source ==='view' ? 'View Roles' : 'Select Roles';
+                    console.log('$scope.populated_roles = ' + $scope.populated_roles);
+                }
+
+                $scope.$watch('populated_roles', function(){
+                    if ($scope.populated_roles && $scope.populated_roles.length>0) {
+                        for (var i = 0; i < $scope.populated_roles.length; i++) {
+                            $scope.model.push($scope.populated_roles[i].roleId);
+                            $scope.selectedItems[$scope.populated_roles[i].roleId] = true;
+                        }
+                        if ($scope.populated_roles.length === $scope.options.length) {
+                            $scope.checkAll = true;
+                        }
+                    }else{
+                        deselectAll();
+                    }
+                });
+
+                $scope.openDropDown = function () {
+
+                };
+
+                $scope.checkAllClicked = function () {
+                    if ($scope.checkAll) {
+                        selectAll();
+                    } else {
+                        deselectAll();
+                    }
+                };
+
+                function selectAll() {
+                    $scope.model = [];
+                    $scope.selectedItems = {};
+                    angular.forEach($scope.options, function (option) {
+                        $scope.model.push(option.roleId);
+                    });
+                    angular.forEach($scope.model, function (id) {
+                        $scope.selectedItems[id] = true;
+                    });
+                    console.log($scope.model);
+                };
+
+                function deselectAll() {
+                    $scope.model = [];
+                    $scope.selectedItems = {};
+                    console.log($scope.model);
+                };
+
+                $scope.setSelectedItem = function (id) {
+                    var filteredArray = [];
+                    if ($scope.selectedItems[id] === true) {
+                        $scope.model.push(id);
+                    } else {
+                        filteredArray = $scope.model.filter(function (value) {
+                            return value != id;
+                        });
+                        $scope.model = filteredArray;
+                        $scope.checkAll = false;
+                    }
+                    console.log(filteredArray);
+                    return false;
+                };
+
+                $scope.setDisable = function(source){
+                    return source ==='view' ? true : false;
+                }
+            }
+        }
+    }]);
+
+})();
diff --git a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.delete.modal.html b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.delete.modal.html
index f5f027c3..674affa2 100644
--- a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.delete.modal.html
+++ b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.delete.modal.html
@@ -1,37 +1,37 @@
-<!--

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

-  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="functionalMenu-details-modal">

-    <div id="title" class="title">Delete Menu Item</div>

-

-    <div id="functionalMenu-main" class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">

-        <form name="functionalMenuForm" novalidate>

-

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

-                <div class="confirmation-message" ng-bind="confirmBox.message"></div>

-            </div>

-        </form>

-    </div>

-    <div class="dialog-control">

-        <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>

-        <div id='menu-details-next-button' class="next-button"

-             ng-class="{disabled: functionalMenuForm.$invalid}" ng-click="functionalMenuDetails.saveChanges()">Delete</div>

-        <div id='menu-details-cancel-button' class="cancel-button" ng-click="closeThisDialog()">Cancel</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="functionalMenu-details-modal">
+    <div id="title" class="title">Delete Menu Item</div>
+
+    <div id="functionalMenu-main" class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">
+        <form name="functionalMenuForm" novalidate>
+
+            <div class="confirmation-message-wrap">
+                <div class="confirmation-message" ng-bind="confirmBox.message"></div>
+            </div>
+        </form>
+    </div>
+    <div class="dialog-control">
+        <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>
+        <div id='menu-details-next-button' class="next-button"
+             ng-class="{disabled: functionalMenuForm.$invalid}" ng-click="functionalMenuDetails.saveChanges()">Delete</div>
+        <div id='menu-details-cancel-button' class="cancel-button" ng-click="closeThisDialog()">Cancel</div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
index aebc6a52..56c3f4dc 100644
--- a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
+++ b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
@@ -1,103 +1,103 @@
-<!--

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

-  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="functionalMenu-details-modal">

-    <div class="title">{{ngDialogData.title}}</div>

-

-

-    <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">

-        <form name="functionalMenuForm">

-

-            <div class="item">

-                <div class="item-label">Parent</div>

-                <input id="input-parent" readonly="readonly" class="input-field" value="{{functionalMenuDetails.menuLocation}}" type="text" name="menuItem" required/>

-            </div>

-            <div class="item">

-                <div class="item-label">Title</div>

-                <input id="input-title" ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " placeholder="Enter text" class="input-field" ng-model="functionalMenuDetails.menutitle" type="text" name="text"/>

-                <div id="div-error-conflict" class="error-container" ng-show="functionalMenuDetails.conflictMessages.text">

-                    <small id="msg-error-conflict" id="functionalMenuDetails-input-title-conflict" class="err-message" ng-bind="functionalMenuDetails.conflictMessages.text"></small>

-                </div>

-            </div>

-            <div class="item">

-                <div class="left-item">

-                    <div class="item-label">URL</div>

-                    <input id="input-url" ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " placeholder="http://" class="input-field" ng-model="functionalMenuDetails.menuItem.menu.url" type="url" name="url"/>

-                    <span id="error-url-conflict" class="err-message" ng-show="functionalMenuForm.url.$error.url"> Not valid URL!</span>

-                </div>

-                <div class="right-item">

-                    <div class="item-label">App</div>

-                    <div class="custom-select-wrap" ng-readonly="checked">

-                        <select id="select-app" class="select-field"

-                                ng-model="functionalMenuDetails.selectedApp"

-                                ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedApp);"

-                                ng-options="app.title for app in functionalMenuDetails.availableApps track by app.index"

-                                ng-disabled="!functionalMenuDetails.availableApps || !functionalMenuDetails.availableApps.length || !functionalMenuDetails.formEditable"

-                                name="app"

-                                required>

-                            <option value="" >No Application</option>

-                        </select>

-                    </div>

-                    <!--<span class="err-message" ng-show="functionalMenuForm.app.$dirty && functionalMenuForm.app.$error.required"> Please select App!</span>-->

-                 <!--   <pre>{{functionalMenuDetails.menuItem | json}}</pre> -->

-                </div>

-            </div>

-            <div class="item" ng-show="functionalMenuDetails.displayRoles==true">

-                <div class="item-label">Roles</div>

-                    <dropdown-multiselect id="dropdown-roles" dropdown-title="Select Roles" pre-selected="functionalMenuDetails.preSelectedRoles.roles"

-                                          model="functionalMenuDetails.selectedRole"

-                                          options="functionalMenuDetails.availableRoles" source="ngDialogData.source">

-                    </dropdown-multiselect>

-            </div>

-            <div ng-show="functionalMenuDetails.selectedApp && functionalMenuDetails.selectedApp.isDisabled" class="err-message">Application is disabled</div>

-        </form>

-    </div>

-    <div class="dialog-control">

-        <div ng-if="ngDialogData.source!='view'">

-            <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>

-            <span ng-if="ngDialogData.source=='edit' && functionalMenuDetails.isLeafMenuItem()">

-                <button class="save-button" id="add-menu-button-save"

-                        ng-show="!functionalMenuDetails.menuItem.menu.url ||

-                        !(functionalMenuDetails.selectedApp.index>0) ||

-                        functionalMenuDetails.displayRoles"

-                        ng-disabled="!functionalMenuForm.text.$valid"

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

-                <button class="save-button" id="add-menu-button-continue"

-                        ng-show="!!functionalMenuDetails.menuItem.menu.url &&

-                        functionalMenuDetails.selectedApp.index>0 &&

-                        functionalMenuDetails.menutitle &&

-                        !functionalMenuDetails.displayRoles"

-                        ng-disabled="!functionalMenuForm.url.$valid" ng-click="functionalMenuDetails.continue()">Continue</button>

-            </span>

-            <span ng-if="ngDialogData.source=='add' || (ngDialogData.source=='edit' && !functionalMenuDetails.isLeafMenuItem())">

-                <button id="button-save-add"

-                        class="save-button" ng-show="!functionalMenuDetails.menuItem.menu.url || !(functionalMenuDetails.selectedApp.index>0)

-                || functionalMenuDetails.selectedRole.length>0 || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle"

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

-                <button id="button-save-continue" class="save-button" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle

-                && !functionalMenuDetails.selectedRole.length>0" ng-disabled="!functionalMenuForm.url.$valid"

-                        ng-click="functionalMenuDetails.continue()">Continue</button>

-            </span>

-            <button id="button-cancel-close-dialog" class="cancel-button" ng-click="closeThisDialog()">Cancel</button>

-        </div>

-        <div ng-if="ngDialogData.source=='view'">

-            <div  id="div-close-dialog"  class="cancel-button" ng-click="closeThisDialog()">Close</div>

-        </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="functionalMenu-details-modal">
+    <div class="title">{{ngDialogData.title}}</div>
+
+
+    <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">
+        <form name="functionalMenuForm">
+
+            <div class="item">
+                <div class="item-label">Parent</div>
+                <input id="input-parent" readonly="readonly" class="input-field" value="{{functionalMenuDetails.menuLocation}}" type="text" name="menuItem" required/>
+            </div>
+            <div class="item">
+                <div class="item-label">Title</div>
+                <input id="input-title" ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " placeholder="Enter text" class="input-field" ng-model="functionalMenuDetails.menutitle" type="text" name="text"/>
+                <div id="div-error-conflict" class="error-container" ng-show="functionalMenuDetails.conflictMessages.text">
+                    <small id="msg-error-conflict" id="functionalMenuDetails-input-title-conflict" class="err-message" ng-bind="functionalMenuDetails.conflictMessages.text"></small>
+                </div>
+            </div>
+            <div class="item">
+                <div class="left-item">
+                    <div class="item-label">URL</div>
+                    <input id="input-url" ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " placeholder="http://" class="input-field" ng-model="functionalMenuDetails.menuItem.menu.url" type="url" name="url"/>
+                    <span id="error-url-conflict" class="err-message" ng-show="functionalMenuForm.url.$error.url"> Not valid URL!</span>
+                </div>
+                <div class="right-item">
+                    <div class="item-label">App</div>
+                    <div class="custom-select-wrap" ng-readonly="checked">
+                        <select id="select-app" class="select-field"
+                                ng-model="functionalMenuDetails.selectedApp"
+                                ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedApp);"
+                                ng-options="app.title for app in functionalMenuDetails.availableApps track by app.index"
+                                ng-disabled="!functionalMenuDetails.availableApps || !functionalMenuDetails.availableApps.length || !functionalMenuDetails.formEditable"
+                                name="app"
+                                required>
+                            <option value="" >No Application</option>
+                        </select>
+                    </div>
+                    <!--<span class="err-message" ng-show="functionalMenuForm.app.$dirty && functionalMenuForm.app.$error.required"> Please select App!</span>-->
+                 <!--   <pre>{{functionalMenuDetails.menuItem | json}}</pre> -->
+                </div>
+            </div>
+            <div class="item" ng-show="functionalMenuDetails.displayRoles==true">
+                <div class="item-label">Roles</div>
+                    <dropdown-multiselect id="dropdown-roles" dropdown-title="Select Roles" pre-selected="functionalMenuDetails.preSelectedRoles.roles"
+                                          model="functionalMenuDetails.selectedRole"
+                                          options="functionalMenuDetails.availableRoles" source="ngDialogData.source">
+                    </dropdown-multiselect>
+            </div>
+            <div ng-show="functionalMenuDetails.selectedApp && functionalMenuDetails.selectedApp.isDisabled" class="err-message">Application is disabled</div>
+        </form>
+    </div>
+    <div class="dialog-control">
+        <div ng-if="ngDialogData.source!='view'">
+            <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>
+            <span ng-if="ngDialogData.source=='edit' && functionalMenuDetails.isLeafMenuItem()">
+                <button class="save-button" id="add-menu-button-save"
+                        ng-show="!functionalMenuDetails.menuItem.menu.url ||
+                        !(functionalMenuDetails.selectedApp.index>0) ||
+                        functionalMenuDetails.displayRoles"
+                        ng-disabled="!functionalMenuForm.text.$valid"
+                        ng-click="functionalMenuDetails.saveChanges()">Save</button>
+                <button class="save-button" id="add-menu-button-continue"
+                        ng-show="!!functionalMenuDetails.menuItem.menu.url &&
+                        functionalMenuDetails.selectedApp.index>0 &&
+                        functionalMenuDetails.menutitle &&
+                        !functionalMenuDetails.displayRoles"
+                        ng-disabled="!functionalMenuForm.url.$valid" ng-click="functionalMenuDetails.continue()">Continue</button>
+            </span>
+            <span ng-if="ngDialogData.source=='add' || (ngDialogData.source=='edit' && !functionalMenuDetails.isLeafMenuItem())">
+                <button id="button-save-add"
+                        class="save-button" ng-show="!functionalMenuDetails.menuItem.menu.url || !(functionalMenuDetails.selectedApp.index>0)
+                || functionalMenuDetails.selectedRole.length>0 || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle"
+                        ng-click="functionalMenuDetails.saveChanges()">Save</button>
+                <button id="button-save-continue" class="save-button" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle
+                && !functionalMenuDetails.selectedRole.length>0" ng-disabled="!functionalMenuForm.url.$valid"
+                        ng-click="functionalMenuDetails.continue()">Continue</button>
+            </span>
+            <button id="button-cancel-close-dialog" class="cancel-button" ng-click="closeThisDialog()">Cancel</button>
+        </div>
+        <div ng-if="ngDialogData.source=='view'">
+            <div  id="div-close-dialog"  class="cancel-button" ng-click="closeThisDialog()">Close</div>
+        </div>
+    </div>
+</div>