Fix show add button for Req and Capabilities in VF

Issue-ID: SDC-4188
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: I9f59ce340fb10e0cde7416a0236a528df52c052f

2 files changed, 8 insertions, 3 deletions

diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.html b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.html
index 73e0ae52ae..3438fe6921 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.html
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.html
@@ -1,7 +1,7 @@
 <div class="workspace-req-and-cap">
     <div>
-        <span class="addTitle" *ngIf="selectTabName === 'REQUIREMENTS'" (click)="addRequiremnet()">Add Requirement</span>
-        <span class="addTitle" *ngIf="selectTabName !== 'REQUIREMENTS'" (click)="addCapability()">Add Capability</span>
+        <span class="addTitle" *ngIf="selectTabName === 'REQUIREMENTS' && showAdd()" (click)="addRequirement()">Add Requirement</span>
+        <span class="addTitle" *ngIf="selectTabName !== 'REQUIREMENTS' && showAdd()" (click)="addCapability()">Add Capability</span>
         <span class="req-and-cap-filter" *ngIf="notEmptyTable">
             <sdc-filter-bar
                 [placeHolder]="'Search'"
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts
index 69999bfb86..2e62a3294a 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts
@@ -13,6 +13,7 @@ import {CapabilitiesEditorComponent} from "./capabilities/capabilityEditor/capab
 import {ModalComponent} from "onap-ui-angular/dist/modals/modal.component";
 import {EventListenerService} from "../../../../services/event-listener-service";
 import {RequirementsEditorComponent} from "./requirements/requirementEditor/requirements-editor.component";
+import {ComponentState} from "../../../../utils/constants";
 
 @Component({
     selector: 'req-and-capabilities',
@@ -106,6 +107,10 @@ export class ReqAndCapabilitiesComponent implements OnInit {
         this.loadReqOrCap();
     }
 
+    private showAdd() {
+        return this.workspaceService.metadata.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT;
+    }
+
     private async loadReqOrCap() {
         if (this.instanceRef) {
             this.instanceRef.destroy();
@@ -178,7 +183,7 @@ export class ReqAndCapabilitiesComponent implements OnInit {
         }
     }
 
-    private addRequiremnet () {
+    private addRequirement () {
         let modalConfig = {
             size: 'md',
             title: 'Add Requirement',