From 401f001b36be5508dd8c129430126e49e68d1b5b Mon Sep 17 00:00:00 2001
From: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Date: Fri, 22 Apr 2022 15:48:40 +0100
Subject: Fix inputs/policy tabs view for self and instances

Issue-ID: SDC-3983
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: I2b1f0e5c7f6e55765f35ac807926725343a8aa9e
---
 catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts      | 3 ++-
 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html       | 6 ++++--
 .../properties-assignment/properties-assignment.page.component.html | 4 ++--
 .../properties-assignment/properties-assignment.page.component.less | 2 +-
 .../properties-assignment/properties-assignment.page.component.ts   | 2 ++
 5 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'catalog-ui/src')

diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts
index bad7b80a51..e0eacdc43b 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts
@@ -24,7 +24,7 @@ import { ViewEncapsulation } from '@angular/core';
 @Component({
     selector: 'tab',
     template: `
-    <div *ngIf="active" class="tab-content">
+    <div *ngIf="active && show" class="tab-content">
       <ng-content></ng-content>
     </div>
     `,
@@ -33,6 +33,7 @@ import { ViewEncapsulation } from '@angular/core';
 export class Tab {
     @Input('tabTitle') title: string;
     @Input() active:boolean = false;
+    @Input() show:boolean = true;
     @Input() indication?: number;
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html
index 8a8ecc3e7f..d52dccc054 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html
@@ -13,12 +13,14 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
+
 <div class="tabs {{tabStyle}}">
-    <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active"  [attr.data-tests-id]="tab.title">
+<ng-container *ngFor="let tab of tabs">
+    <div class="tab" *ngIf="tab.show" (click)="selectTab(tab)" [class.active]="tab.active" [attr.data-tests-id]="tab.title">
         {{tab.title}}
         <div class="tab-indication" *ngIf="tab.indication" [@indicatorAnimation]="tab.indication">{{tab.indication}}</div>
     </div>
+</ng-container>
 </div>
 <div class="tab-content-container">
     <ng-content></ng-content>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index 747624a03f..d04ddf5c91 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -40,7 +40,7 @@
                             (deleteProperty)="deleteProperty($event)">
                         </properties-table>
                     </tab>
-                    <tab tabTitle="Inputs">
+                    <tab tabTitle="Inputs" [show]="isSelf()">
                         <inputs-table class="properties-table"
                             [fePropertiesMap]="instanceFePropertiesMap"
                             [readonly]="isReadonly"
@@ -53,7 +53,7 @@
                             (inputChanged)="dataChanged($event)">
                         </inputs-table>
                     </tab>
-                    <tab tabTitle="Policies">
+                    <tab tabTitle="Policies" [show]="isSelf()">
                         <policies-table class="properties-table"
                                       [readonly]="isReadonly"
                                       [policies]="policies | searchFilter:'name':searchQuery"
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index a1309aba61..1c627588a2 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -30,7 +30,7 @@
 	min-width:930px;
 
         /deep/ .tabs {
-            width:33%;
+            width:18%;
             text-align:center;
         }
 
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 786aa8d566..4baae199c4 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -648,6 +648,8 @@ export class PropertiesAssignmentComponent {
         this.topologyTemplateService
             .createInput(this.component, inputsToCreate, this.isSelf())
             .subscribe((response) => {
+                this.selectInstanceRow(SERVICE_SELF_TITLE);
+                this.onInstanceSelectedUpdate(this.instances[0]);
                 this.setInputTabIndication(response.length);
                 this.checkedPropertiesCount = 0;
                 this.checkedChildPropertiesCount = 0;
-- 
cgit 1.2.3-korg