Implement hiding mechanism

Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Change-Id: I799af15e31b724ca394eebe435223c03186fb6d3
Issue-ID: SDC-4344

2 files changed, 622 insertions, 629 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 a1acfc73fa..8023ceecec 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
@@ -176,9 +176,6 @@ export class GeneralViewModel {
         this.initScope();
     }
 
-
-
-
     private initScopeValidation = ():void => {
         this.$scope.validation = new Validation();
         this.$scope.validation.componentNameValidationPattern = this.ComponentNameValidationPattern;
@@ -689,7 +686,6 @@ export class GeneralViewModel {
             }
         };
 
-
         this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, (nextState) => {
             if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm) {
                 this.$scope.save().then(() => {
@@ -888,6 +884,10 @@ export class GeneralViewModel {
             }
             return metadatakey != null;
         }
+
+        this.$scope.isNotApplicableMetadataKeys = (key: string): boolean => {
+            return this.$scope.component.categories && this.$scope.component.categories[0].notApplicableMetadataKeys && this.$scope.component.categories[0].notApplicableMetadataKeys.some(item => item === key);
+        }
     }
 
     private filterCategoriesByModel(modelName:string) {
@@ -897,7 +897,6 @@ export class GeneralViewModel {
             !modelName ? !category.models || category.models.indexOf(DEFAULT_MODEL_NAME) !== -1 : category.models !== null && category.models.indexOf(modelName) !== -1);
     }
 
-
     private filterBaseTypesByModelAndCategory(modelName:string) {
         let categories = this.$scope.component.categories;
         if (categories) {
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 1fb8d5f10f..4704feb71e 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
@@ -14,644 +14,638 @@
   ~ limitations under the License.
 -->
 <div include-padding="true" class="sdc-workspace-general-step">
-    <div class="w-sdc-main-container-body-content-action-buttons">
-        <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning">
-             <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP
-        </div>
-        <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"
+  <div class="w-sdc-main-container-body-content-action-buttons">
+    <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning">
+      <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP
+    </div>
+    <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"
             data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button>
-        <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
-              data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span>
+    <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
+          data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span>
 
-    </div>
-    <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm">
+  </div>
+  <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm">
 
-        <div class="w-sdc-form-section-container">
+    <div class="w-sdc-form-section-container">
 
-            <div class="w-sdc-form-columns-wrapper">
+      <div class="w-sdc-form-columns-wrapper">
 
-                <div class="w-sdc-form-column">
-                    <div class="upper-general-fields">
-                        <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
-                            <div class="selected-icon-inner-container ">
-                                <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
-                                <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
-                                     data-ng-class="{
+        <div class="w-sdc-form-column">
+          <div class="upper-general-fields">
+            <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
+              <div class="selected-icon-inner-container ">
+                <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
+                <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
+                     data-ng-class="{
                                      'disable': isViewMode() || !possibleToUpdateIcon(),
                                      'archive-component active-component-static': component.archived
                                      }"
-                                     ng-model="component.icon"
-                                     tooltips tooltip-content='{{component.icon | translate}}'
-                                >
-                                </div>
-                            </div>
-                        </div>
-                        <div class="name-and-category-fields">
-                            <!--------------------- NAME -------------------->
-                            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
-                                <label class="i-sdc-form-label required" translate="GENERAL_LABEL_NAME"></label>
-                                <input class="i-sdc-form-input"
-                                       data-ng-class="{'view-mode': isViewMode()}"
-                                       name="componentName"
-                                       data-ng-init="isCreateMode() && validateName(true)"
-                                       data-ng-maxlength="50"
-                                       data-ng-model="component.name"
-                                       type="text"
-                                       data-required
-                                       data-ng-model-options="{ debounce: 500 }"
-                                       data-ng-pattern="validation.componentNameValidationPattern"
-                                       data-ng-disabled="component.isAlreadyCertified()"
-                                       data-tests-id="name"
-                                       autofocus
-                                       ng-readonly="isViewMode()"
-                                />
-
-                                <div class="input-error" data-ng-show="validateField(editForm.componentName)">
-                                    <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
-                                    <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                                    <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
-                                    <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
-                                    <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
-                                </div>
-                            </div>
-                            <!--------------------- NAME -------------------->
-
-                          <!--------------------- Model -------------------->
-                          <div class="i-sdc-form-item">
-                            <label class="i-sdc-form-label required">Model</label>
-                            <select class="i-sdc-form-select"
-                                    data-ng-class="{'view-mode': isViewMode()}"
-                                    data-ng-disabled="!isCreateMode()"
-                                    data-ng-change="onModelChange()"
-                                    data-tests-id="selectModelName"
-                                    data-ng-required="isModelRequired"
-                                    data-ng-model="component.model"
-                                    data-ng-options="model for model in models track by model"
-                            >
-                              <option ng-if="showDefaultModelOption" value="">{{defaultModelOption}}</option>
-                            </select>
-                          </div>
-                          <!--------------------- Model -------------------->
-
-                            <!--------------------- CATEGORIES -------------------->
-                            <div class="i-sdc-form-item"
-                                 data-ng-class="{'error': validateField(editForm.category)}">
-                                <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
-                                <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CATEGORY"></label>
-                                <select class="i-sdc-form-select"
-                                        data-required
-                                        name="category"
-                                        data-ng-class="{'view-mode': isViewMode()}"
-                                        data-ng-change="onCategoryChange()"
-                                        data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='') || isHiddenCategorySelected"
-                                        data-ng-model="componentCategories.selectedCategory"
-                                        data-tests-id="selectGeneralCategory"
-                                >
-                                    <option value="">Select category</option>
-                                    <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
-                                        <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
-                                                data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
-                                                data-tests-id="{{subCategory.name}}"
-                                                value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
-
-                                        </option>
-                                    </optgroup>
-                                    <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
-                                            data-ng-selected="component.selectedCategory===mainCategory.name"
-                                            value="{{mainCategory.name}}"
-                                            data-tests-id="{{mainCategory.name}}">{{getCategoryDisplayNameOrName(mainCategory)}}</option>
-                                </select>
-
-                                <div class="input-error" data-ng-show="validateField(editForm.category)">
-                                    <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
-                                    <span ng-show="editForm.category.$error.validForBaseType" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_NOT_VALID"></span>
-                                </div>
-                            </div>
-                            <!--------------------- CATEGORIES -------------------->
-                        </div>
-                    </div>
-
-                    <!--------------------- Category Specific Metadata -------------------->
-
-                    <div ng-if="component.selectedCategory">
-                        <ng-container ng-repeat="(key, value) in component.categorySpecificMetadata"-->
-                            <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
-                                 class="i-sdc-form-item"
-                                 data-ng-class="{'error': validateField(editForm['{{key}}'])}">
-                                <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label>
-                                <select class="i-sdc-form-select"
-                                    name="{{key}}"
-                                    data-ng-class="{'view-mode': isViewMode()}"
-                                    data-ng-model="component.categorySpecificMetadata[key]"
-                                    data-tests-id="{{key}}"
-                                    data-required>
-                                   <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
-                                </select>
-                                <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
-                                    <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
-                                </div>
-                            </div>
-                            <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
-                                 class="i-sdc-form-item">
-                                <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
-                                <select class="i-sdc-form-select"
-                                    name="{{key}}"
-                                    data-ng-class="{'view-mode': isViewMode()}"
-                                    data-ng-model="component.categorySpecificMetadata[key]"
-                                    data-tests-id="{{key}}">
-                                   <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
-                                </select>
-                            </div>
-                            <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
-                                 class="i-sdc-form-item"
-                                 data-ng-class="{'error': validateField(editForm['{{key}}'])}">
-                                <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label>
-                                <input class="i-sdc-form-input" type="text"
-                                       data-required
-                                       data-ng-class="{'view-mode': isViewMode()}"
-                                       data-ng-model="component.categorySpecificMetadata[key]"
-                                       name="{{key}}"
-                                       data-tests-id="{{key}}"
-                                />
-                                <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
-                                    <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
-                                </div>
-                            </div>
-                            <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
-                                 class="i-sdc-form-item">
-                                <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
-                                <input class="i-sdc-form-input" type="text"
-                                       data-ng-class="{'view-mode': isViewMode()}"
-                                       data-ng-model="component.categorySpecificMetadata[key]"
-                                       name="{{key}}"
-                                       data-tests-id="{{key}}"
-                                />
-                            </div>
-                        </ng-container>
-                    </div>
-                <!--------------------- RESOURCE TAGS -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
-                    <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label>
-
-                    <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
-                              sdc-disabled="isViewMode()"
-                              tags="component.tags"
-                              pattern="validation.tagValidationPattern"
-                              special-tag="component.name"></sdc-tags>
-
-                    <div class="input-error" data-ng-show="validateField(editForm.tags)">
-                        <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
-                    </div>
+                     ng-model="component.icon"
+                     tooltips tooltip-content='{{component.icon | translate}}'
+                >
                 </div>
-                <!--------------------- RESOURCE TAGS -------------------->
-
-                <!--------------------- DESCRIPTION -------------------->
-                <div class="i-sdc-form-item description-field"
-                     data-ng-class="{'error': validateField(editForm.description)}">
-                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label>
-                <textarea class="description"
-                          name="description"
-                          data-ng-class="{'view-mode': isViewMode()}"
-                          data-ng-maxlength="1024"
-                          data-required
-                          data-ng-model="component.description"
-                          data-ng-model-options="{ debounce: 500 }"
-                          data-ng-pattern="validation.commentValidationPattern"
-                          data-tests-id="description"></textarea>
-                    <!-- placeholder="Description here..." -->
-
-                    <div class="input-error" data-ng-show="validateField(editForm.description)">
-                        <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
-                        <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
-                        <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
+              </div>
+            </div>
+            <div class="name-and-category-fields">
+              <!--------------------- NAME -------------------->
+              <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
+                <label class="i-sdc-form-label required" translate="GENERAL_LABEL_NAME"></label>
+                <input class="i-sdc-form-input"
+                       data-ng-class="{'view-mode': isViewMode()}"
+                       name="componentName"
+                       data-ng-init="isCreateMode() && validateName(true)"
+                       data-ng-maxlength="50"
+                       data-ng-model="component.name"
+                       type="text"
+                       data-required
+                       data-ng-model-options="{ debounce: 500 }"
+                       data-ng-pattern="validation.componentNameValidationPattern"
+                       data-ng-disabled="component.isAlreadyCertified()"
+                       data-tests-id="name"
+                       autofocus
+                       ng-readonly="isViewMode()"
+                />
+
+                <div class="input-error" data-ng-show="validateField(editForm.componentName)">
+                  <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
+                  <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+                  <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
+                  <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
+                  <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
                 </div>
-                <!--------------------- DESCRIPTION -------------------->
-
-            </div><!-- Close w-sdc-form-column -->
-
-                <div class="w-sdc-form-column">
-                    <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
-                    <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
-
-                        <!-- //                                     element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" -->
-
-                        <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label>
-                        <file-upload id="fileUploadElement"
-                                     class="i-sdc-form-input"
-                                     element-name="fileElement"
-                                     data-ng-required="false"
-                                     element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
-                                     form-element="editForm"
-                                     file-model="component.importedFile"
-                                     on-file-changed-in-directive="onImportFileChange"
-                                     extensions="{{importedFileExtension}}"
-                                     default-text="'Browse to select file'"
-                                     ></file-upload>
-                    </div>
-
-                    <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
-                    <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse">
-                            <label class="i-sdc-form-label required">VSP</label>
-                            <div class="i-sdc-form-file-upload i-sdc-form-input">
-                                <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
-                                <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
-                                <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
-                                <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
-                            </div>
-                    </div>
-
-                    <div class="input-error-file-upload"   data-ng-disabled="!component.archived"  data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
-                        <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
-                        <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
-                        <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
-                        <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
-                        <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
-                    </div>
-                    <!--------------------- IMPORT TOSCA FILE -------------------->
-
-                    <!--------------------- USER ID -------------------->
-                    <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
-                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
-                    <input class="i-sdc-form-input" type="text"
-                               data-ng-model="component.contactId"
-                               data-ng-class="{'view-mode': isViewMode()}"
-                               data-ng-required="true"
-                               name="contactId"
-                               data-ng-pattern="validation.contactIdValidationPattern"
-                               data-ng-model-options="{ debounce: 500 }"
-                               data-tests-id="contactId"
-                               data-ng-maxlength="50"
-                        />
-
-                        <div class="input-error" data-ng-show="validateField(editForm.contactId)">
-                            <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                            <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
-                            <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
-                        </div>
-                    </div>
-                    <!--------------------- USER ID -------------------->
-
-                <!--------------------- VENDOR NAME -------------------->
-                <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
-                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model="component.vendorName"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="60"
-                           data-required
-                           ng-click="oldValue = component.vendorName"
-                           name="vendorName"
-                           data-ng-change="onVendorNameChange(oldValue)"
-                           data-ng-pattern="validation.VendorNameValidationPattern"
-                           data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
-                           data-tests-id="vendorName"
-                    />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
-                        <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
-                        <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
-
+              </div>
+              <!--------------------- NAME -------------------->
+
+              <!--------------------- Model -------------------->
+              <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label required">Model</label>
+                <select class="i-sdc-form-select"
+                        data-ng-class="{'view-mode': isViewMode()}"
+                        data-ng-disabled="!isCreateMode()"
+                        data-ng-change="onModelChange()"
+                        data-tests-id="selectModelName"
+                        data-ng-required="isModelRequired"
+                        data-ng-model="component.model"
+                        data-ng-options="model for model in models track by model"
+                >
+                  <option ng-if="showDefaultModelOption" value="">{{defaultModelOption}}</option>
+                </select>
+              </div>
+              <!--------------------- Model -------------------->
+
+              <!--------------------- CATEGORIES -------------------->
+              <div class="i-sdc-form-item"
+                   data-ng-class="{'error': validateField(editForm.category)}">
+                <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
+                <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CATEGORY"></label>
+                <select class="i-sdc-form-select"
+                        data-required
+                        name="category"
+                        data-ng-class="{'view-mode': isViewMode()}"
+                        data-ng-change="onCategoryChange()"
+                        data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='') || isHiddenCategorySelected"
+                        data-ng-model="componentCategories.selectedCategory"
+                        data-tests-id="selectGeneralCategory"
+                >
+                  <option value="">Select category</option>
+                  <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
+                    <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
+                            data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
+                            data-tests-id="{{subCategory.name}}"
+                            value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
+
+                    </option>
+                  </optgroup>
+                  <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
+                          data-ng-selected="component.selectedCategory===mainCategory.name"
+                          value="{{mainCategory.name}}"
+                          data-tests-id="{{mainCategory.name}}">{{getCategoryDisplayNameOrName(mainCategory)}}</option>
+                </select>
+
+                <div class="input-error" data-ng-show="validateField(editForm.category)">
+                  <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
+                  <span ng-show="editForm.category.$error.validForBaseType" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_NOT_VALID"></span>
                 </div>
-
-                <!--------------------- VENDOR NAME -------------------->
-
-                <!--------------------- VENDOR RELEASE -------------------->
-                <div ng-if="component.isResource()"
-                     class="i-sdc-form-item"
-                     data-ng-class="{'error': validateField(editForm.vendorRelease)}">
-                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model="component.vendorRelease"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="25"
-                           data-required
-                           name="vendorRelease"
-                           data-ng-pattern="validation.VendorReleaseValidationPattern"
-                           data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
-                           data-tests-id="vendorRelease"
-                    />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
-                        <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
-                        <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
-                        <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
+              </div>
+              <!--------------------- CATEGORIES -------------------->
+            </div>
+          </div>
+
+          <!--------------------- Category Specific Metadata -------------------->
+          <div ng-if="component.selectedCategory">
+            <ng-container ng-repeat="(key, value) in component.categorySpecificMetadata"-->
+              <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
+                   class="i-sdc-form-item"
+                   data-ng-class="{'error': validateField(editForm['{{key}}'])}">
+                <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label>
+                <select class="i-sdc-form-select"
+                        name="{{key}}"
+                        data-ng-class="{'view-mode': isViewMode()}"
+                        data-ng-model="component.categorySpecificMetadata[key]"
+                        data-tests-id="{{key}}"
+                        data-required>
+                  <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
+                </select>
+                <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
+                  <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
                 </div>
-                <!--------------------- VENDOR RELEASE -------------------->
-
-                <!--------------------- Resource Model Number -------------------->
-                <div ng-if="component.isResource()"
-                     class="i-sdc-form-item"
-                     data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
-                    <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model="component.resourceVendorModelNumber"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="65"
-                           name="resourceVendorModelNumber"
-                           data-ng-pattern="validation.VendorModelNumberValidationPattern"
-                           data-tests-id="resourceVendorModelNumber"
-                    />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
-                        <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
-                        <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
+              </div>
+              <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
+                   class="i-sdc-form-item">
+                <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
+                <select class="i-sdc-form-select"
+                        name="{{key}}"
+                        data-ng-class="{'view-mode': isViewMode()}"
+                        data-ng-model="component.categorySpecificMetadata[key]"
+                        data-tests-id="{{key}}">
+                  <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
+                </select>
+              </div>
+              <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
+                   class="i-sdc-form-item"
+                   data-ng-class="{'error': validateField(editForm['{{key}}'])}">
+                <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label>
+                <input class="i-sdc-form-input" type="text"
+                       data-required
+                       data-ng-class="{'view-mode': isViewMode()}"
+                       data-ng-model="component.categorySpecificMetadata[key]"
+                       name="{{key}}"
+                       data-tests-id="{{key}}"
+                />
+                <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
+                  <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
                 </div>
-                <!--------------------- Resource Model Number -------------------->
-
-                <!--------------------- ECOMPGENERATEDNAMING -------------------->
-
-                    <div class="i-sdc-form-item"
-                         data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
-                         data-ng-if="component.isService()">
-                        <label class="i-sdc-form-label">Generated Naming</label>
-                        <select class="i-sdc-form-select"
-                                data-required
-                                name="ecompGeneratedNaming"
-                                data-ng-change="onEcompGeneratedNamingChange()"
-                                data-ng-class="{'view-mode': isViewMode()}"
-                                data-ng-model="component.ecompGeneratedNaming"
-                                data-tests-id="ecompGeneratedNaming">
-                            <option ng-value="true">true</option>
-                            <option ng-value="false">false</option>
-                        </select>
-                        <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
-
-                        </div>
-                    </div>
-                    <!--------------------- CATEGORIES -------------------->
-
-                    <!--------------------- NAMING POLICY  -------------------->
-                    <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
-                        <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')">
-	                        <div ng-if="isMetadataKeyMandatory('Naming Policy')">
-                                <label class="i-sdc-form-label required">Naming Policy</label>
-	                        </div>
-	                        <div ng-if="!isMetadataKeyMandatory('Naming Policy')">
-                                <label class="i-sdc-form-label">Naming Policy</label>
-	                        </div>
-	                        <select class="i-sdc-form-input" type="text"
-	                               ng-required="isMetadataKeyMandatory('Naming Policy')"
-	                               data-ng-class="{'view-mode': isViewMode()}"
-	                               data-ng-model="component.namingPolicy"
-	                               data-ng-model-options="{ debounce: 500 }"
-	                               name="namingPolicy"
-	                               data-tests-id="namingPolicy"
-	                               data-ng-maxlength="256"
-                                   data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
-	                        > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option>
-                            </select>
-                        </div>
-                        <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')">
-	                        <label class="i-sdc-form-label">Naming Policy</label>
-	                        <input class="i-sdc-form-input"
-	                               name="namingPolicy"
-	                               data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
-	                               data-ng-maxlength="100"
-	                               data-ng-model="component.namingPolicy"
-	                               type="text"
-	                               data-ng-model-options="{ debounce: 500 }"
-	                               data-ng-pattern="validation.commentValidationPattern"
-	                               data-tests-id="namingPolicy"
-	                               autofocus
-	                               ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
-	                        />
-                        </div>
-                        <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
-                            <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
-                            <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        </div>
-                    </div>
-                    <!--------------------- NAMING POLICY  -------------------->
-
-                    <!--------------------- Service Type -------------------->
-                    <div ng-if="component.isService()"
-                         class="i-sdc-form-item"
-                         data-ng-class="{'error': validateField(editForm.serviceFunctionType)}">
-                        <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')">
-	                        <div ng-if="isMetadataKeyMandatory('Service Type')">
-                                <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
-                            </div>
-	                        <div ng-if="!isMetadataKeyMandatory('Service Type')">
-                                <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
-	                        </div>
-	                        <select class="i-sdc-form-input" type="text"
-	                               ng-required="isMetadataKeyMandatory('Service Type')"
-	                               data-ng-class="{'view-mode': isViewMode()}"
-	                               data-ng-model="component.serivceType"
-	                               data-ng-model-options="{ debounce: 500 }"
-	                               name="serviceType"
-	                               data-tests-id="serviceType"
-	                               data-ng-maxlength="256"
-                                   data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
-	                        > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option>
-                            </select>
-                        </div>
-                        <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')">
-	                        <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
-	                        <input class="i-sdc-form-input" type="text"
-	                               data-ng-class="{'view-mode': isViewMode()}"
-	                               data-ng-model="component.serviceType"
-	                               data-ng-model-options="{ debounce: 500 }"
-	                               name="serviceType"
-	                               data-tests-id="serviceType"
-	                               data-ng-maxlength="256"
-                                   data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
-	                        />
-                        </div>
-                        <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
-                            <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
-                            <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        </div>
-                    </div>
-                    <!--------------------- Service Type -------------------->
-
-                    <!--------------------- Service Role -------------------->
-                    <div ng-if="component.isService()"
-                         class="i-sdc-form-item"
-                         data-ng-class="{'error': validateField(editForm.serviceRole)}">
-                        <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')">
-	                        <div ng-if="isMetadataKeyMandatory('Service Role')">
-                                <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
-	                        </div>
-	                        <div ng-if="!isMetadataKeyMandatory('Service Role')">
-                                <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
-	                        </div>
-	                        <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-options="{ debounce: 500 }"
-	                               name="serviceRole"
-	                               data-tests-id="serviceRole"
-	                               data-ng-maxlength="256"
-	                        > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
-	                        </select>
-                        </div>
-                        <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
-		                    <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
-		                    <input class="i-sdc-form-input" type="text"
-	                               data-ng-class="{'view-mode': isViewMode()}"
-	                               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 class="input-error" data-ng-show="validateField(editForm.serviceRole)">
-                            <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
-                            <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        </div>
-                    </div>
-                    <!--------------------- Service Role -------------------->
-                    <!--------------------- Service Function -------------------->
-                    <div ng-if="component.isService()"
-                         class="i-sdc-form-item"
-                         data-ng-class="{'error': validateField(editForm.serviceFunction)}">
-                        <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')">
-                            <div ng-if="isMetadataKeyMandatory('Service Function')">
-                                <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
-                            </div>
-                            <div ng-if="!isMetadataKeyMandatory('Service Function')">
-                                <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
-                            </div>
-	                        <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-options="{ debounce: 500 }"
-	                               name="serviceFunction"
-	                               data-tests-id="serviceFunction"
-	                               data-ng-maxlength="256"
-	                               data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
-	                        > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
-	                        </select>
-                        </div>
-                        <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
-                              <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
-                              <input class="i-sdc-form-input" type="text"
-                                      data-ng-class="{'view-mode': isViewMode()}"
-                                      data-ng-model="component.serviceFunction"
-                                      name="serviceFunction"
-                                      data-tests-id="serviceFunction"
-                                      data-ng-maxlength="256"
-                                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
-                               />
-                        </div>
-                        <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
-                            <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
-                            <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        </div>
-                    </div>
-                    <!--------------------- Service Function -------------------->
-
-                    <!-------------------- ENVIRONMENT CONTEXT  ----------------->
-
-                    <div  ng-if="component.isService()" class="i-sdc-form-item">
-                        <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
-                        <label class="i-sdc-form-label">Environment Context</label>
-                        <select class="i-sdc-form-select"
-                                name="environmentContext"
-                                data-ng-class="{'view-mode': isViewMode()}"
-                                data-ng-model="component.environmentContext"
-                                data-tests-id="environmentContext"
-                        >
-                            <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
-                                    value="{{environmentContextVal}}"
-                                    data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
-                        </select>
-
-                    </div>
-                    <!--------------------- ENVIRONMENT CONTEXT ------------------>
-
-                    <!--------------------- Instantiation Type -------------------->
-                    <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes">
-                        <label class="i-sdc-form-label">Instantiation Type</label>
-                        <select class="i-sdc-form-select"
-                                name="instantiationType"
-                                data-ng-class="{'view-mode': isViewMode()}"
-                                data-ng-disabled="component.isCsarComponent()"
-                                data-ng-model="component.instantiationType"
-                                data-tests-id="selectInstantiationType">
-                        <option ng-repeat="type in instantiationTypes">{{type}}</option>
-
-                        </select>
-                    </div>
-
-                    <!--------------------- Instantiation Type -------------------->
-
-                    <!--------------------- Base Type -------------------->
-                    <div class="w-sdc-form-columns-wrapper">
-                        <div class="w-sdc-form-column">
-		                    <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0">
-		                        <label class="i-sdc-form-label">Substitution Node Type</label>
-                            <select class="i-sdc-form-select"
-                                    name="baseType"
-                                    data-ng-class="{'view-mode': isViewMode()}"
-                                    data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
-                                    data-ng-model="component.derivedFromGenericType"
-                                    data-ng-change="onBaseTypeChange()"
-                                    data-tests-id="selectBaseType"
-                                    data-ng-options="type for type in baseTypes track by type">
-                                <option value="" data-ng-if="!isBaseTypeRequired">None</option>
-                            </select>
-		                    </div>
-                		</div>
-                		<div class="w-sdc-form-column">
-		                    <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions">
-		                        <label class="i-sdc-form-label">Substitution Node Type Version</label>
-		                        <select class="i-sdc-form-select"
-		                                name="baseTypeVersion"
-		                                data-ng-class="{'view-mode': isViewMode()}"
-		                                data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
-		                                data-ng-model="component.derivedFromGenericVersion"
-		                                data-tests-id="selectBaseTypeVersion">
-		                            <option ng-repeat="version in baseTypeVersions">{{version}}</option>
-		                        </select>
-		                    </div>
-                		</div>
-                	</div>
-
-                    <!--------------------- Base Type -------------------->
-
-                    <div class="meta-data" data-ng-if="component.creationDate">
-                        <div>
-                            <b>Created:</b>
-                        </div>
-                        <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
-                        <div>
-                            <b>Modifed:</b>
-                        </div>
-                        <div class="meta-data-item-value">
-                            {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
-                        </div>
-                        <div>
-                            <b>UUID:</b>
-                        </div>
-                        <div class="meta-data-item-value">
-                            {{component.uuid}}
-                        </div>
-                        <div>
-                            <b>Invariant UUID:</b>
-                        </div>
-                        <div class="meta-data-item-value">
-                            {{component.invariantUUID}}
-                        </div>
-                    </div>
-                </div><!-- Close w-sdc-form-column -->
+              </div>
+              <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
+                   class="i-sdc-form-item">
+                <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
+                <input class="i-sdc-form-input" type="text"
+                       data-ng-class="{'view-mode': isViewMode()}"
+                       data-ng-model="component.categorySpecificMetadata[key]"
+                       name="{{key}}"
+                       data-tests-id="{{key}}"
+                />
+              </div>
+            </ng-container>
+          </div>
+          <!--------------------- Category Specific Metadata -------------------->
+
+          <!--------------------- RESOURCE TAGS -------------------->
+          <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
+            <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label>
+
+            <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
+                      sdc-disabled="isViewMode()"
+                      tags="component.tags"
+                      pattern="validation.tagValidationPattern"
+                      special-tag="component.name"></sdc-tags>
+
+            <div class="input-error" data-ng-show="validateField(editForm.tags)">
+              <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+              <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
+            </div>
+          </div>
+          <!--------------------- RESOURCE TAGS -------------------->
+
+          <!--------------------- DESCRIPTION -------------------->
+          <div class="i-sdc-form-item description-field"
+               data-ng-class="{'error': validateField(editForm.description)}">
+            <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label>
+            <textarea class="description"
+                      name="description"
+                      data-ng-class="{'view-mode': isViewMode()}"
+                      data-ng-maxlength="1024"
+                      data-required
+                      data-ng-model="component.description"
+                      data-ng-model-options="{ debounce: 500 }"
+                      data-ng-pattern="validation.commentValidationPattern"
+                      data-tests-id="description"></textarea>
+
+            <div class="input-error" data-ng-show="validateField(editForm.description)">
+              <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
+              <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
+              <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+          </div>
+          <!--------------------- DESCRIPTION -------------------->
+
+        </div><!-- Close w-sdc-form-column -->
+
+        <div class="w-sdc-form-column">
+          <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
+          <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
+
+            <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label>
+            <file-upload id="fileUploadElement"
+                         class="i-sdc-form-input"
+                         element-name="fileElement"
+                         data-ng-required="false"
+                         element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
+                         form-element="editForm"
+                         file-model="component.importedFile"
+                         on-file-changed-in-directive="onImportFileChange"
+                         extensions="{{importedFileExtension}}"
+                         default-text="'Browse to select file'"
+            ></file-upload>
+          </div>
+
+          <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
+          <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse">
+            <label class="i-sdc-form-label required">VSP</label>
+            <div class="i-sdc-form-file-upload i-sdc-form-input">
+              <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
+              <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
+              <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
+              <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
+            </div>
+          </div>
+
+          <div class="input-error-file-upload"   data-ng-disabled="!component.archived"  data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
+            <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
+            <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
+            <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
+            <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
+            <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
+          </div>
+          <!--------------------- IMPORT TOSCA FILE -------------------->
+
+          <!--------------------- USER ID -------------------->
+          <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
+            <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
+            <input class="i-sdc-form-input" type="text"
+                   data-ng-model="component.contactId"
+                   data-ng-class="{'view-mode': isViewMode()}"
+                   data-ng-required="true"
+                   name="contactId"
+                   data-ng-pattern="validation.contactIdValidationPattern"
+                   data-ng-model-options="{ debounce: 500 }"
+                   data-tests-id="contactId"
+                   data-ng-maxlength="50"
+            />
+
+            <div class="input-error" data-ng-show="validateField(editForm.contactId)">
+              <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+              <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
+              <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
+            </div>
+          </div>
+          <!--------------------- USER ID -------------------->
+
+          <!--------------------- VENDOR NAME -------------------->
+          <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
+            <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label>
+            <input class="i-sdc-form-input" type="text"
+                   data-ng-class="{'view-mode': isViewMode()}"
+                   data-ng-model="component.vendorName"
+                   data-ng-model-options="{ debounce: 500 }"
+                   data-ng-maxlength="60"
+                   data-required
+                   ng-click="oldValue = component.vendorName"
+                   name="vendorName"
+                   data-ng-change="onVendorNameChange(oldValue)"
+                   data-ng-pattern="validation.VendorNameValidationPattern"
+                   data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
+                   data-tests-id="vendorName"
+            />
+
+            <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
+              <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
+              <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
+              <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+
+          </div>
+          <!--------------------- VENDOR NAME -------------------->
+
+          <!--------------------- VENDOR RELEASE -------------------->
+          <div ng-if="component.isResource()"
+               class="i-sdc-form-item"
+               data-ng-class="{'error': validateField(editForm.vendorRelease)}">
+            <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label>
+            <input class="i-sdc-form-input" type="text"
+                   data-ng-class="{'view-mode': isViewMode()}"
+                   data-ng-model="component.vendorRelease"
+                   data-ng-model-options="{ debounce: 500 }"
+                   data-ng-maxlength="25"
+                   data-required
+                   name="vendorRelease"
+                   data-ng-pattern="validation.VendorReleaseValidationPattern"
+                   data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
+                   data-tests-id="vendorRelease"
+            />
+
+            <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
+              <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
+              <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+              <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+          </div>
+          <!--------------------- VENDOR RELEASE -------------------->
+
+          <!--------------------- Resource Model Number -------------------->
+          <div ng-if="component.isResource()"
+               class="i-sdc-form-item"
+               data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
+            <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label>
+            <input class="i-sdc-form-input" type="text"
+                   data-ng-class="{'view-mode': isViewMode()}"
+                   data-ng-model="component.resourceVendorModelNumber"
+                   data-ng-model-options="{ debounce: 500 }"
+                   data-ng-maxlength="65"
+                   name="resourceVendorModelNumber"
+                   data-ng-pattern="validation.VendorModelNumberValidationPattern"
+                   data-tests-id="resourceVendorModelNumber"
+            />
+
+            <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
+              <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
+              <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+          </div>
+          <!--------------------- Resource Model Number -------------------->
+
+          <!--------------------- ECOMPGENERATEDNAMING -------------------->
+          <div class="i-sdc-form-item"
+               data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
+               data-ng-if="component.isService() && !isNotApplicableMetadataKeys('Generated Naming')">
+            <label class="i-sdc-form-label">Generated Naming</label>
+            <select class="i-sdc-form-select"
+                    data-required
+                    name="ecompGeneratedNaming"
+                    data-ng-change="onEcompGeneratedNamingChange()"
+                    data-ng-class="{'view-mode': isViewMode()}"
+                    data-ng-model="component.ecompGeneratedNaming"
+                    data-tests-id="ecompGeneratedNaming">
+              <option ng-value="true">true</option>
+              <option ng-value="false">false</option>
+            </select>
+            <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
+
+            </div>
+          </div>
+          <!--------------------- CATEGORIES -------------------->
+
+          <!--------------------- NAMING POLICY  -------------------->
+          <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Naming Policy')" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
+            <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')">
+              <div ng-if="isMetadataKeyMandatory('Naming Policy')">
+                <label class="i-sdc-form-label required">Naming Policy</label>
+              </div>
+              <div ng-if="!isMetadataKeyMandatory('Naming Policy')">
+                <label class="i-sdc-form-label">Naming Policy</label>
+              </div>
+              <select class="i-sdc-form-input" type="text"
+                      ng-required="isMetadataKeyMandatory('Naming Policy')"
+                      data-ng-class="{'view-mode': isViewMode()}"
+                      data-ng-model="component.namingPolicy"
+                      data-ng-model-options="{ debounce: 500 }"
+                      name="namingPolicy"
+                      data-tests-id="namingPolicy"
+                      data-ng-maxlength="256"
+                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+              > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option>
+              </select>
+            </div>
+            <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')">
+              <label class="i-sdc-form-label">Naming Policy</label>
+              <input class="i-sdc-form-input"
+                     name="namingPolicy"
+                     data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
+                     data-ng-maxlength="100"
+                     data-ng-model="component.namingPolicy"
+                     type="text"
+                     data-ng-model-options="{ debounce: 500 }"
+                     data-ng-pattern="validation.commentValidationPattern"
+                     data-tests-id="namingPolicy"
+                     autofocus
+                     ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
+              />
+            </div>
+            <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
+              <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
+              <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+          </div>
+          <!--------------------- NAMING POLICY  -------------------->
+
+          <!--------------------- Service Type -------------------->
+          <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Type')"
+               class="i-sdc-form-item"
+               data-ng-class="{'error': validateField(editForm.serviceFunctionType)}">
+            <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')">
+              <div ng-if="isMetadataKeyMandatory('Service Type')">
+                <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+              </div>
+              <div ng-if="!isMetadataKeyMandatory('Service Type')">
+                <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+              </div>
+              <select class="i-sdc-form-input" type="text"
+                      ng-required="isMetadataKeyMandatory('Service Type')"
+                      data-ng-class="{'view-mode': isViewMode()}"
+                      data-ng-model="component.serviceType"
+                      data-ng-model-options="{ debounce: 500 }"
+                      name="serviceType"
+                      data-tests-id="serviceType"
+                      data-ng-maxlength="256"
+                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+              > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option>
+              </select>
+            </div>
+            <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')">
+              <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+              <input class="i-sdc-form-input" type="text"
+                     data-ng-class="{'view-mode': isViewMode()}"
+                     data-ng-model="component.serviceType"
+                     data-ng-model-options="{ debounce: 500 }"
+                     name="serviceType"
+                     data-tests-id="serviceType"
+                     data-ng-maxlength="256"
+                     data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+              />
+            </div>
+            <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
+              <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+              <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+          </div>
+          <!--------------------- Service Type -------------------->
+
+          <!--------------------- Service Role -------------------->
+          <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="isMetadataKeyMandatory('Service Role')">
+                <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+              </div>
+              <div ng-if="!isMetadataKeyMandatory('Service Role')">
+                <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+              </div>
+              <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-options="{ debounce: 500 }"
+                      name="serviceRole"
+                      data-tests-id="serviceRole"
+                      data-ng-maxlength="256"
+              > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
+              </select>
+            </div>
+            <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
+              <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+              <input class="i-sdc-form-input" type="text"
+                     data-ng-class="{'view-mode': isViewMode()}"
+                     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 class="input-error" data-ng-show="validateField(editForm.serviceRole)">
+              <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+              <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+          </div>
+          <!--------------------- Service Role -------------------->
+
+          <!--------------------- Service Function -------------------->
+          <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="isMetadataKeyMandatory('Service Function')">
+                <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+              </div>
+              <div ng-if="!isMetadataKeyMandatory('Service Function')">
+                <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+              </div>
+              <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-options="{ debounce: 500 }"
+                      name="serviceFunction"
+                      data-tests-id="serviceFunction"
+                      data-ng-maxlength="256"
+                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+              > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
+              </select>
+            </div>
+            <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
+              <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+              <input class="i-sdc-form-input" type="text"
+                     data-ng-class="{'view-mode': isViewMode()}"
+                     data-ng-model="component.serviceFunction"
+                     name="serviceFunction"
+                     data-tests-id="serviceFunction"
+                     data-ng-maxlength="256"
+                     data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+              />
+            </div>
+            <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
+              <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+              <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+          </div>
+          <!--------------------- Service Function -------------------->
+
+          <!-------------------- ENVIRONMENT CONTEXT  ----------------->
+          <div  ng-if="component.isService() && !isNotApplicableMetadataKeys('Environment Context')" class="i-sdc-form-item">
+            <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
+            <label class="i-sdc-form-label">Environment Context</label>
+            <select class="i-sdc-form-select"
+                    name="environmentContext"
+                    data-ng-class="{'view-mode': isViewMode()}"
+                    data-ng-model="component.environmentContext"
+                    data-tests-id="environmentContext"
+            >
+              <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
+                      value="{{environmentContextVal}}"
+                      data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
+            </select>
+
+          </div>
+          <!--------------------- ENVIRONMENT CONTEXT ------------------>
+
+          <!--------------------- Instantiation Type -------------------->
+          <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes && !isNotApplicableMetadataKeys('Instantiation Type')">
+            <label class="i-sdc-form-label">Instantiation Type</label>
+            <select class="i-sdc-form-select"
+                    name="instantiationType"
+                    data-ng-class="{'view-mode': isViewMode()}"
+                    data-ng-disabled="component.isCsarComponent()"
+                    data-ng-model="component.instantiationType"
+                    data-tests-id="selectInstantiationType">
+              <option ng-repeat="type in instantiationTypes">{{type}}</option>
+
+            </select>
+          </div>
+          <!--------------------- Instantiation Type -------------------->
+
+          <!--------------------- Base Type -------------------->
+          <div class="w-sdc-form-columns-wrapper">
+            <div class="w-sdc-form-column">
+              <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0 && !isNotApplicableMetadataKeys('Substitution Node Type')">
+                <label class="i-sdc-form-label">Substitution Node Type</label>
+                <select class="i-sdc-form-select"
+                        name="baseType"
+                        data-ng-class="{'view-mode': isViewMode()}"
+                        data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
+                        data-ng-model="component.derivedFromGenericType"
+                        data-ng-change="onBaseTypeChange()"
+                        data-tests-id="selectBaseType"
+                        data-ng-options="type for type in baseTypes track by type">
+                  <option value="" data-ng-if="!isBaseTypeRequired">None</option>
+                </select>
+              </div>
+            </div>
+            <div class="w-sdc-form-column">
+              <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions && !isNotApplicableMetadataKeys('Substitution Node Type Version')">
+                <label class="i-sdc-form-label">Substitution Node Type Version</label>
+                <select class="i-sdc-form-select"
+                        name="baseTypeVersion"
+                        data-ng-class="{'view-mode': isViewMode()}"
+                        data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
+                        data-ng-model="component.derivedFromGenericVersion"
+                        data-tests-id="selectBaseTypeVersion">
+                  <option ng-repeat="version in baseTypeVersions">{{version}}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <!--------------------- Base Type -------------------->
+
+          <div class="meta-data" data-ng-if="component.creationDate">
+            <div>
+              <strong>Created:</strong>
+            </div>
+            <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
+            <div>
+              <strong>Modifed:</strong>
+            </div>
+            <div class="meta-data-item-value">
+              {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
+            </div>
+            <div>
+              <strong>UUID:</strong>
+            </div>
+            <div class="meta-data-item-value">
+              {{component.uuid}}
+            </div>
+            <div>
+              <strong>Invariant UUID:</strong>
+            </div>
+            <div class="meta-data-item-value">
+              {{component.invariantUUID}}
             </div>
+          </div>
+        </div><!-- Close w-sdc-form-column -->
+      </div>
 
-        </div><!-- Close w-sdc-form-section-container -->
+    </div><!-- Close w-sdc-form-section-container -->
 
-    </form>
+  </form>
 </div>