1 files changed, 24 insertions, 4 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
index c73f69734f..ad25aabefd 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
@@ -5,6 +5,16 @@
                 <div *ngFor="let capability of capabilities" class="relations-details-container">
                     <div class="relations-name">{{capability.name}}&nbsp;</div>
                     <div class="relations-desc"> {{capability.type}} </div>
+                    <div class="checkbox-label-mark-as-external" *ngIf="isComponentInstanceSelected">
+                        <checkbox
+                            class="checkbox-label"
+                            [attr.data-tests-id]="'checkbox-external-cap-' + capability.name"
+                            [label]="'External'"
+                            (checkedChange)="onMarkCapabilityAsExternal(capability)"
+                            [(checked)]="capability.external"
+                            [disabled]="isViewOnly">
+                        </checkbox>
+                    </div>
                 </div>
             </sdc-accordion>
         </div>
@@ -19,10 +29,20 @@
     <ng-template #complexComponentTemplate>
         <sdc-accordion *ngIf="capabilitiesInstancesMap" [title]="'Capabilities'" [arrow-direction]="'right'" [testId]="'Capabilities-accordion'">
             <sdc-accordion *ngFor="let key of objectKeys(capabilitiesInstancesMap); let i = index" [title]="key">
-                    <div *ngFor="let capability of capabilitiesInstancesMap[key]" class="relations-details-container">
-                            <div class="relations-name">{{capability.name}}&nbsp;</div>
-                            <div class="relations-desc"> {{capability.type}} </div>
-                        </div>
+                <div *ngFor="let capability of capabilitiesInstancesMap[key]" class="relations-details-container">
+                    <div class="relations-name">{{capability.name}}&nbsp;</div>
+                    <div class="relations-desc"> {{capability.type}} </div>
+                    <div class="checkbox-label-mark-as-external" *ngIf="isComponentInstanceSelected">
+                        <checkbox
+                            class="checkbox-label"
+                            [attr.data-tests-id]="'checkbox-external-cap-' + capability.name"
+                            [label]="'External'"
+                            (checkedChange)="onMarkCapabilityAsExternal(capability)"
+                            [(checked)]="capability.external"
+                            [disabled]="isViewOnly">
+                        </checkbox>
+                    </div>
+                </div>
             </sdc-accordion>
         </sdc-accordion>