Fix requirement external toggle when deselecting and reselecting node

Issue-ID: SDC-3501
Signed-off-by: davsad <david.sadlier@est.tech>
Change-Id: Ib4b1913adc54fb15277af324e8eaf5bbd82c0f95

1 files changed, 7 insertions, 1 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
index c48231f2c6..3cab4b300f 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
@@ -24,7 +24,8 @@ import {
     ZoneInstance,
     ZoneInstanceAssignmentType,
     ZoneInstanceMode,
-    ZoneInstanceType
+    ZoneInstanceType,
+    Requirement
 } from 'app/models';
 import { ForwardingPath } from 'app/models/forwarding-path';
 import { CompositionCiServicePathLink } from 'app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link';
@@ -643,6 +644,11 @@ export class CompositionGraphComponent implements AfterViewInit {
             selectedNode.data('displayName', selectedNode.data().getDisplayName()); // abbreviated
         });
 
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_REQUIREMENT_EXTERNAL_CHANGED, (uniqueId:string, requirement:Requirement) => {
+            this._cy.getElementById(uniqueId).data().componentInstance.requirements[requirement.capability]
+                .find(r => r.uniqueId === requirement.uniqueId).external = requirement.external;
+        });
+
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstanceId: string) => {
             const nodeToDelete = this._cy.getElementById(componentInstanceId);
             this.nodesGraphUtils.deleteNode(this._cy, this.topologyTemplate, nodeToDelete);