Provide capability to add user specified name for service role/function

Added the others option and a free text to provide the user specified name for service role/function

Issue-ID: SDC-4622
Signed-off-by: Imam hussain <imam.hussain@est.tech>
Change-Id: Ia5259c12c6bd6be5609b0f4817c7dec854b7e227

2 files changed, 103 insertions, 10 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index 5065023cb4..a0e8ca9365 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -85,6 +85,10 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     instantiationTypes:Array<instantiationType>;
     isHiddenCategorySelected: boolean;
     isModelRequired: boolean;
+    othersFlag: boolean;
+    functionOption: string;
+    othersRoleFlag: boolean;
+    roleOption: string;
 
     save():Promise<any>;
     revert():void;
@@ -108,6 +112,8 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     possibleToUpdateIcon():boolean;
     initModel():void;
     isVspImport(): boolean;
+    setServiceFunction(option:string):void;
+    setServiceRole(option:string):void;
 }
 
 // tslint:disable-next-line:max-classes-per-file
@@ -253,6 +259,8 @@ export class GeneralViewModel {
         this.$scope.progressService = this.progressService;
         this.$scope.componentCategories = new componentCategories();
         this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
+        this.$scope.othersFlag = false;
+        this.$scope.othersRoleFlag = false;
 
         // Init UIModel
         this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);
@@ -299,6 +307,7 @@ export class GeneralViewModel {
                         });
                         (<Service>this.$scope.component).derivedFromGenericType = serviceCsar.substitutionNodeType;
                         this.$scope.onBaseTypeChange();
+                        this.setFunctionRole(service);
                     },
                     (error) => {
                         const errorMsg = this.$filter('translate')('IMPORT_FAILURE_MESSAGE_TEXT');
@@ -312,6 +321,9 @@ export class GeneralViewModel {
                         this.$state.go('dashboard');
                     });
             }
+
+            this.setFunctionRole(service);
+
             if (this.$scope.isEditMode() && service.serviceType == 'Service' && !service.csarUUID) {
                 this.$scope.isShowFileBrowse = true;
             }
@@ -383,6 +395,28 @@ export class GeneralViewModel {
         return s && s[0].toUpperCase() + s.slice(1);
     }
 
+    private setFunctionRole = (service : Service) : void => {
+        if (service.serviceFunction) {
+            const functionList : string[] = this.$scope.getMetadataKeyValidValues('Service Function');
+            if (functionList.find(value => value == service.serviceFunction) != undefined) {
+                this.$scope.functionOption = service.serviceFunction;
+            } else {
+                this.$scope.functionOption = 'Others';
+                this.$scope.othersFlag = true;
+            }
+        }
+
+        if (service.serviceRole) {
+            const roleList : string[] = this.$scope.getMetadataKeyValidValues('Service Role');
+            if (roleList.find(value => value == service.serviceRole) != undefined) {
+                this.$scope.roleOption = service.serviceRole;
+            } else {
+                this.$scope.roleOption = 'Others';
+                this.$scope.othersRoleFlag = true;
+            }
+        }
+    }
+
     // Convert category string MainCategory_#_SubCategory to Array with one item (like the server except)
     private convertCategoryStringToOneArray = ():IMainCategory[] => {
         let tmp = this.$scope.component.selectedCategory.split("_#_");
@@ -775,6 +809,12 @@ export class GeneralViewModel {
                         if (!this.$scope.component.categorySpecificMetadata[metadataKey.name]) {
                             this.$scope.component.categorySpecificMetadata[metadataKey.name] = metadataKey.defaultValue ? metadataKey.defaultValue : "";
                         }
+                        if (metadataKey.name === 'Service Role') {
+                            this.$scope.roleOption = this.$scope.component.categorySpecificMetadata[metadataKey.name];
+                        }
+                        if (metadataKey.name === 'Service Function') {
+                            this.$scope.functionOption = this.$scope.component.categorySpecificMetadata[metadataKey.name];
+                        }
                     }
                 }
                 if (this.$scope.component.categories[0].subcategories && this.$scope.component.categories[0].subcategories[0].metadataKeys) {
@@ -852,6 +892,28 @@ export class GeneralViewModel {
             }
         };
 
+        this.$scope.setServiceFunction = (option:string): void => {
+            if (option === 'Others') {
+                this.$scope.othersFlag = true;
+                (<Service>this.$scope.component).serviceFunction = '';
+            } else {
+                this.$scope.othersFlag = false;
+                (<Service>this.$scope.component).serviceFunction = option;
+            }
+
+        }
+
+        this.$scope.setServiceRole = (option:string): void => {
+            if (option === 'Others') {
+                this.$scope.othersRoleFlag = true;
+                (<Service>this.$scope.component).serviceRole = '';
+            } else {
+                this.$scope.othersRoleFlag = false;
+                (<Service>this.$scope.component).serviceRole = option;
+            }
+
+        }
+
         this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
 
         this.$scope.isMetadataKeyMandatory = (key: string): boolean => {
@@ -862,7 +924,11 @@ export class GeneralViewModel {
         this.$scope.getMetadataKeyValidValues = (key: string): string[] => {
             let metadataKey = this.getMetadataKey(key);
             if (metadataKey) {
-                return metadataKey.validValues;
+                if (key == 'Service Function' || key == 'Service Role') {
+                    return metadataKey.validValues.concat("Others");
+                } else {
+                    return metadataKey.validValues;
+                }
             }
             return [];
         }
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index 6bdaffee55..1432729293 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -475,7 +475,7 @@
           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Role')"
                class="i-sdc-form-item"
                data-ng-class="{'error': validateField(editForm.serviceRole)}">
-            <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')">
+            <div ng-if="component.selectedCategory">
               <div ng-if="isMetadataKeyMandatory('Service Role')">
                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
               </div>
@@ -485,13 +485,27 @@
               <select class="i-sdc-form-input" type="text"
                       ng-required="isMetadataKeyMandatory('Service Role')"
                       data-ng-class="{'view-mode': isViewMode()}"
-                      data-ng-model="component.serviceRole"
+                      data-ng-model="roleOption"
                       data-ng-model-options="{ debounce: 500 }"
-                      name="serviceRole"
-                      data-tests-id="serviceRole"
+                      data-ng-change="setServiceRole(roleOption)"
+                      name="roleOption"
+                      data-tests-id="roleOption"
                       data-ng-maxlength="256"
               > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
               </select>
+              <div data-ng-if="othersRoleFlag">
+                <label class="i-sdc-form-label">Other</label>
+              </div>
+              <input class="i-sdc-form-input" type="text" data-ng-class="{'view-mode': isViewMode()}"
+                     data-ng-if="othersRoleFlag"
+                     ng-required="isMetadataKeyMandatory('Service Role')"
+                     data-ng-model="component.serviceRole"
+                     data-ng-model-options="{ debounce: 500 }"
+                     name="serviceRole"
+                     data-tests-id="serviceRole"
+                     data-ng-maxlength="256"
+                     data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+              />
             </div>
             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
@@ -516,7 +530,7 @@
           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Function')"
                class="i-sdc-form-item"
                data-ng-class="{'error': validateField(editForm.serviceFunction)}">
-            <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')">
+            <div ng-if="component.selectedCategory">
               <div ng-if="isMetadataKeyMandatory('Service Function')">
                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
               </div>
@@ -526,14 +540,27 @@
               <select class="i-sdc-form-input" type="text"
                       ng-required="isMetadataKeyMandatory('Service Function')"
                       data-ng-class="{'view-mode': isViewMode()}"
-                      data-ng-model="component.serviceFunction"
+                      data-ng-model="functionOption"
                       data-ng-model-options="{ debounce: 500 }"
-                      name="serviceFunction"
-                      data-tests-id="serviceFunction"
+                      data-ng-change="setServiceFunction(functionOption)"
+                      name="functionOption"
+                      data-tests-id="functionOption"
                       data-ng-maxlength="256"
-                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
               > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
               </select>
+              <div data-ng-if="othersFlag">
+                <label class="i-sdc-form-label">Other</label>
+              </div>
+              <input class="i-sdc-form-input" type="text" data-ng-class="{'view-mode': isViewMode()}"
+                     data-ng-if="othersFlag"
+                     ng-required="isMetadataKeyMandatory('Service Role')"
+                     data-ng-model="component.serviceFunction"
+                     data-ng-model-options="{ debounce: 500 }"
+                     name="serviceFunction"
+                     data-tests-id="serviceFunction"
+                     data-ng-maxlength="256"
+                     data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+              />
             </div>
             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>