3 files changed, 73 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.html b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.html
new file mode 100644
index 0000000000..d5b9d9e9b2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.html
@@ -0,0 +1,29 @@
+<div class="edit-module-name">
+    <div class="edit-module-name-label vfInstance-name" data-tests-id="popover-vfinstance-name" sdc-tooltip [tooltip-text]="selectModule.vfInstanceName">{{selectModule.vfInstanceName}}</div>
+    <div class="edit-module-name-heatName">
+        <sdc-input #heatName [maxLength]="50"
+            [(value)]="selectModule.heatName" 
+            [testId]="'popover-heat-name'"
+            [placeHolder]="'Enter Name'">
+        </sdc-input>
+        <sdc-validation [validateElement]="heatName">
+            <sdc-regex-validator [message]="'Special characters not allowed.'" [pattern]="pattern"></sdc-regex-validator>
+        </sdc-validation>
+    </div>
+    <div class="edit-module-name-label module-name" data-tests-id="'popover-module-name'" sdc-tooltip [tooltip-text]="selectModule.moduleName">{{selectModule.moduleName}}</div>
+    <sdc-button class="edit-module-name-btn cancel-button"
+        [text]="'Cancel'"
+        [testId]="'popover-close-button'"
+        [type]="'primary'"
+        [size] = "'small'"
+        (click)="clickButton(false)">
+    </sdc-button>
+    <sdc-button class="edit-module-name-btn save-button"
+        [text]="'Save'"
+        [testId]="'popover-save-button'"
+        [type]="'primary'"
+        [size] = "'small'"
+        (click)="clickButton(true)"
+        [disabled]="selectModule.heatName == originalName">
+    </sdc-button>
+</div>
+\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.less
new file mode 100644
index 0000000000..721ad53bc3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.less
@@ -0,0 +1,20 @@
+.edit-module-name-btn{
+    float:right;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+.save-button {
+    margin-left: 30px;
+}
+.cancel-button {
+    margin-left: 20px;
+}
+.edit-module-name-heatName {
+    margin-bottom: 15px;
+}
+.edit-module-name-label {
+    text-overflow: ellipsis;
+    display: block;
+    white-space: nowrap;
+    margin-bottom: 10px;
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.ts
new file mode 100644
index 0000000000..819182c75f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, Output, OnInit } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { DisplayModule } from "../../../../../../../models/modules/base-module";
+import { ValidationConfiguration } from "../../../../../../../models/validation-config";
+
+@Component({
+    selector: 'edit-module-name',
+    templateUrl: './edit-module-name.component.html',
+    styleUrls: ['edit-module-name.component.less']
+})
+export class EditModuleName implements OnInit{
+    @Input() selectModule:DisplayModule;
+    @Output() clickButtonEvent: EventEmitter<String> = new EventEmitter();
+    private pattern = ValidationConfiguration.validation.validationPatterns.stringOrEmpty;
+    private originalName: string;
+    constructor(){}
+    public ngOnInit(): void {
+         this.originalName = this.selectModule.heatName;
+    }
+
+    private clickButton(saveOrCancel: boolean) : void {
+        this.clickButtonEvent.emit(saveOrCancel ? this.selectModule.heatName : null);
+    }
+}
+\ No newline at end of file