Create inputs independent of properties

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

3 files changed, 11 insertions, 10 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
index ee090245f0..e1638fb00f 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
@@ -49,6 +49,9 @@
                     <span *ngIf="input.description"
                           class="property-description-icon sprite-new show-desc"
                           tooltip="{{input.description}}" tooltipDelay="0"></span>
+                    <div class="delete-button-container">
+                        <span *ngIf="showDelete" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
+                    </div>
                 </div>
                 <!-- From Instance -->
                 <div class="table-cell col3">
@@ -124,9 +127,6 @@
                                      [testId]="'input-' + input.name"
                                      [constraints] = "getConstraints(input)">
                     </dynamic-element>
-                    <div class="delete-button-container">
-                        <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
-                    </div>
                 </div>
             </div>
         </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
index 74520b6314..ae6d58e72e 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
@@ -182,7 +182,8 @@
         // Column: Property Name
         &.col1 {
             flex: 1 0 130px;
-            max-width: 250px;
+            max-width: 300px;
+            display: flex;
 
             justify-content: space-between;
 
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
index 3fa7ab4a80..5ca119c075 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
@@ -43,14 +43,14 @@ export class InputsTableComponent {
     @Input() readonly: boolean;
     @Input() isLoading: boolean;
     @Input() componentType: string;
-    
+    @Input() showDelete:boolean;
     @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
 
     @Input() fePropertiesMap: InstanceFePropertiesMap;
 
     @ViewChildren('metadataViewChildren') public metadataViewChildren: QueryList<DynamicElementComponent>;
-    
+
     sortBy: String;
     reverse: boolean;
     selectedInputToDelete: InputFEModel;
@@ -107,15 +107,15 @@ export class InputsTableComponent {
         var mapKeyError = input.metadataMapKeyError;
         if(input.metadataMapKeyError){
             dynamicElementComponent.cmpRef.instance.control.setErrors({mapKeyError});
-        } 
+        }
     };
 
     onMetadataValueChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => {
         input.updateMetadataValue(metadataEntry, event.value);
         this.inputChanged.emit(input);
     };
-    
-    
+
+
     createNewMetadataEntry = (input: InputFEModel): void => {
         let metadataEntry = new MetadataEntry("", "");
         input.addMetadataEntry(metadataEntry);
@@ -126,7 +126,7 @@ export class InputsTableComponent {
         input.deleteMetadataEntry(metadataEntry);
         this.inputChanged.emit(input);
     }
-    
+
     onDeleteInput = () => {
         this.deleteInput.emit(this.selectedInputToDelete);
         this.modalService.closeCurrentModal();