From: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Date: Wed, 7 Oct 2020 08:20:21 +0000 (+0200)
Subject: divide html components to action and function attributes
X-Git-Tag: 1.1.0~145
X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=refs%2Fchanges%2F01%2F113601%2F1;p=ccsdk%2Fcds.git

divide html components to action and function attributes

Issue-ID: CCSDK-2874
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: Ieb428c80a3125909adbad1600861448437b00326
---

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index d7698c06b..051ef1634 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -1,118 +1,93 @@
-<ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-    [position]="'right'" #sidebarRight1>
-    <div class="container-fluid0">
-        <div class="row m-0">
-            <div class="col attributesContainer">
-                <div class="row m-0 attributesContainertTitle">
-                    <div class="col-2 pl-0">
-                        <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom"><i
-                                class="icon-close" type="button" aria-hidden="true"></i></button>
-                    </div>
-                    <h6 class="col pl-0">Action Attributes</h6>
-                    <div class="col-3 pl-0">
-                        <div class="btn-group" role="group" aria-label="Basic example">
-                            <button type="button" class="btn view-source" tooltip="View Action Source"
-                                placement="bottom"><i class="icon-source"></i></button>
-                                <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
-                                class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
-                                    class="icon-delete-sm" aria-hidden="true"></i></button>
-                        </div>
-                    </div>
-                </div>
-                <div class="scrollWrapper">
-                    <div class="row m-0">
-                        <div class="col">
-                            <div class="form-group">
-                                <label for="exampleInputEmail1">Action Name</label>
-                                <input type="text" class="form-control" placeholder="Action Name"
-                                    value="resource-assignment">
-                            </div>
-                        </div>
-                    </div>
-                    <!--Add Attribute-->
-                    <div class="row m-b add-attribute">
-                        <div class="col">
-                            <h5>Add Attribute</h5>
-                            <div class="row">
-                                <div class="col pr-0 text-center">
-                                    <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
-                                        class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
-                                            aria-hidden="true"></i></button>
-                                    <span>Custom Attribute</span>
+<div class="scrollWrapper">
+    <div class="row m-0">
+        <div class="col">
+            <div class="form-group">
+                <label for="exampleInputEmail1">Action Name</label>
+                <input type="text" class="form-control" placeholder="Action Name"
+                       value="resource-assignment">
+            </div>
+        </div>
+    </div>
+    <!--Add Attribute-->
+    <div class="row m-b add-attribute">
+        <div class="col">
+            <h5>Add Attribute</h5>
+            <div class="row">
+                <div class="col pr-0 text-center">
+                    <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
+                            class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
+                                                         aria-hidden="true"></i></button>
+                    <span>Custom Attribute</span>
 
 
-                                </div>
-                                <div class="col text-center">
-                                    <button type="button" class="btn btn-secondary"><i class="icon-function-attribute"
-                                            type="button" aria-hidden="true"></i></button>
-                                    <span>Function Attribute</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!--INPUTS-->
-                    <div class="accordion" id="accordionExample">
-                        <div class="card">
-                            <div class="card-header row" id="headingOne">
-                                <button class="btn btn-link" type="button" data-toggle="collapse"
-                                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                    Inputs
-                                </button>
-                            </div>
-                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                data-parent="#accordionExample">
-                                <div class="card-body action-attributes">
-                                    <div class="row">
-                                        <div class="col">
-                                            <div class="form-group" *ngFor="let input of inputs">
-                                                <label for="exampleFormControlTextarea1">{{input.name}}
-                                                    <i [hidden]="!input.required" class="icon-required-star"
-                                                        type="button" aria-hidden="true"></i>
-                                                    <i [hidden]="input.required" type="button" aria-hidden="true"></i>
-                                                </label>
-                                                <div class="attributeOptions">
-                                                    <a data-toggle="modal" data-target="#exampleModalScrollable2"
-                                                        class="accordion-delete editAttribute"
-                                                        tooltip="Edit Attribute" placement="bottom"><i
-                                                            class="icon-edit"></i></a>
-                                                    <a class="accordion-delete deleteAttribute"
-                                                        tooltip="Delete Attribute" placement="bottom"><i
-                                                            class="icon-delete-sm"></i></a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
+                </div>
+                <div class="col text-center">
+                    <button type="button" class="btn btn-secondary"><i class="icon-function-attribute"
+                                                                       type="button" aria-hidden="true"></i></button>
+                    <span>Function Attribute</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--INPUTS-->
+    <div class="accordion" id="accordionExample">
+        <div class="card">
+            <div class="card-header row" id="headingOne">
+                <button class="btn btn-link" type="button" data-toggle="collapse"
+                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    Inputs
+                </button>
+            </div>
+            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                 data-parent="#accordionExample">
+                <div class="card-body action-attributes">
+                    <div class="row">
+                        <div class="col">
+                            <div class="form-group" *ngFor="let input of inputs">
+                                <label for="exampleFormControlTextarea1">{{input.name}}
+                                    <i [hidden]="!input.required" class="icon-required-star"
+                                       type="button" aria-hidden="true"></i>
+                                    <i [hidden]="input.required" type="button" aria-hidden="true"></i>
+                                </label>
+                                <div class="attributeOptions">
+                                    <a data-toggle="modal" data-target="#exampleModalScrollable2"
+                                       class="accordion-delete editAttribute"
+                                       tooltip="Edit Attribute" placement="bottom"><i
+                                            class="icon-edit"></i></a>
+                                    <a class="accordion-delete deleteAttribute"
+                                       tooltip="Delete Attribute" placement="bottom"><i
+                                            class="icon-delete-sm"></i></a>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <!--OUTPUTS-->
-                    <div class="accordion" id="accordionExample1">
-                        <div class="card">
-                            <div class="card-header row" id="headingOne">
-                                <button class="btn btn-link" type="button" data-toggle="collapse"
-                                    data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
-                                    Outputs
-                                </button>
-                            </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--OUTPUTS-->
+    <div class="accordion" id="accordionExample1">
+        <div class="card">
+            <div class="card-header row" id="headingOne">
+                <button class="btn btn-link" type="button" data-toggle="collapse"
+                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                    Outputs
+                </button>
+            </div>
 
-                            <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
-                                data-parent="#accordionExample1">
-                                <div class="card-body">
-                                    <div class="row">
-                                        <div class="col">
-                                            <div class="form-group" *ngFor="let output of outputs">
-                                                <label for="exampleFormControlTextarea1">{{output.name}}
-                                                    <i [hidden]="output.required"
-                                                        class="icon-required-star optional-attribute" type="button"
-                                                        aria-hidden="true"></i>
-                                                    <i [hidden]="output.required" class="optional-attribute"
-                                                        type="button" aria-hidden="true"></i>
-                                                </label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
+            <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
+                 data-parent="#accordionExample1">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col">
+                            <div class="form-group" *ngFor="let output of outputs">
+                                <label for="exampleFormControlTextarea1">{{output.name}}
+                                    <i [hidden]="output.required"
+                                       class="icon-required-star optional-attribute" type="button"
+                                       aria-hidden="true"></i>
+                                    <i [hidden]="output.required" class="optional-attribute"
+                                       type="button" aria-hidden="true"></i>
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -120,18 +95,17 @@
             </div>
         </div>
     </div>
-</ng-sidebar>
-
+</div>
 <!--Action - Add Custom Attribute - Modal-->
 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
-    aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
+     aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle">
                     Add Custom Attributes</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <img src="assets/img/icon-close.svg" />
+                    <img src="assets/img/icon-close.svg"/>
                 </button>
             </div>
             <div class="modal-body createAttributeTabs">
@@ -139,28 +113,30 @@
                 <ul class="nav nav-tabs" id="myTab" role="tablist">
                     <li class="nav-item">
                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
-                            aria-controls="home" aria-selected="true">Inputs</a>
+                           aria-controls="home" aria-selected="true">Inputs</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
-                            aria-controls="profile" aria-selected="false">Outputs</a>
+                           aria-controls="profile" aria-selected="false">Outputs</a>
                     </li>
                 </ul>
                 <div class="tab-content" id="myTabContent">
                     <!--INPUTS Tab-->
                     <div class="tab-pane fade show active create-form" id="home" role="tabpanel"
-                        aria-labelledby="home-tab">
+                         aria-labelledby="home-tab">
                         <div class="form-group row">
                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
                             <div class="col-sm-9">
-                                <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name">
+                                <input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control"
+                                       id="inputEmail3" placeholder="Attribute name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
                             <div class="col-sm-9">
-                                <input type="text" class="form-control" id="inputPassword3"
-                                    placeholder="Add some description">
+                                <input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control"
+                                       id="inputPassword3"
+                                       placeholder="Add some description">
                             </div>
                         </div>
                         <div class="form-group row">
@@ -168,13 +144,24 @@
                             <div class="col-sm-9">
                                 <div class="list-group list-group-horizontal">
                                     <button type="button"
-                                        class="list-group-item list-group-item-action active">String</button>
+                                            class="list-group-item list-group-item-action"
+                                            (click)="setInputType('String')">
+                                        String
+                                    </button>
                                     <button type="button"
-                                        class="list-group-item list-group-item-action">Integer</button>
+                                            class="list-group-item list-group-item-action"
+                                            (click)="setInputType('Integer')">Integer
+                                    </button>
                                     <button type="button"
-                                        class="list-group-item list-group-item-action">Boolean</button>
-                                    <button type="button" class="list-group-item list-group-item-action">List</button>
-                                    <button type="button" class="list-group-item list-group-item-action">Other</button>
+                                            class="list-group-item list-group-item-action"
+                                            (click)="setInputType('Boolean')">Boolean
+                                    </button>
+                                    <button type="button" class="list-group-item list-group-item-action"
+                                            (click)="setInputType('List')">List
+                                    </button>
+                                    <button type="button" class="list-group-item list-group-item-action"
+                                            (click)="setInputType('Other')">Other
+                                    </button>
 
                                 </div>
                             </div>
@@ -184,12 +171,12 @@
                             <div class="col-sm-9">
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline1" name="customRadioInline1"
-                                        class="custom-control-input">
+                                           class="custom-control-input" (click)="setInputRequired(true)">
                                     <label class="custom-control-label" for="customRadioInline1">True</label>
                                 </div>
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline2" name="customRadioInline1"
-                                        class="custom-control-input">
+                                           class="custom-control-input" (click)="setInputRequired(false)">
                                     <label class="custom-control-label" for="customRadioInline2">False</label>
                                 </div>
                             </div>
@@ -200,14 +187,16 @@
                         <div class="form-group row">
                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
                             <div class="col-sm-9">
-                                <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name">
+                                <input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control"
+                                       id="inputEmail3" placeholder="Attribute name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
                             <div class="col-sm-9">
-                                <input type="text" class="form-control" id="inputPassword3"
-                                    placeholder="Add some description">
+                                <input [(ngModel)]="outputActionAttribute.description"
+                                       type="text" class="form-control" id="inputPassword3"
+                                       placeholder="Add some description">
                             </div>
                         </div>
                         <div class="form-group row">
@@ -216,15 +205,27 @@
                                 <div class="list-group list-group-horizontal">
                                     <button type="button" class="list-group-item list-group-item-action">String</button>
                                     <button type="button"
-                                        class="list-group-item list-group-item-action">Integer</button>
+                                            class="list-group-item list-group-item-action"
+                                            (click)="setOutputType('Integer')">
+                                        Integer
+                                    </button>
                                     <button type="button"
-                                        class="list-group-item list-group-item-action">Boolean</button>
-                                    <button type="button" class="list-group-item list-group-item-action">List</button>
+                                            class="list-group-item list-group-item-action"
+                                            (click)="setOutputType('Boolean')">
+                                        Boolean
+                                    </button>
+                                    <button type="button" class="list-group-item list-group-item-action"
+                                            (click)="setOutputType('List')">
+                                        List
+                                    </button>
                                     <button type="button"
-                                        class="list-group-item list-group-item-action active">Other</button>
+                                            class="list-group-item list-group-item-action"
+                                            (click)="setOutputType('Other')">
+                                        Other
+                                    </button>
                                 </div>
                                 <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
-                                    placeholder="Add Other type name">
+                                       placeholder="Add Other type name">
                             </div>
                         </div>
                         <div class="form-group row">
@@ -232,13 +233,14 @@
                             <div class="col-sm-9">
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline1" name="customRadioInline1"
-                                        class="custom-control-input">
+                                           class="custom-control-input" (click)="setOutputRequired(true)">
                                     <label class="custom-control-label" for="customRadioInline1">True</label>
                                 </div>
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline2" name="customRadioInline1"
-                                        class="custom-control-input">
-                                    <label class="custom-control-label" for="customRadioInline2">False</label>
+                                           class="custom-control-input">
+                                    <label class="custom-control-label" for="customRadioInline2"
+                                           (click)="setOutputRequired(false)">False</label>
                                 </div>
                             </div>
                         </div>
@@ -247,21 +249,21 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary">Submit Attributes</button>
+                <button type="button" class="btn btn-primary" (click)="submitAttributes()">Submit Attributes</button>
             </div>
         </div>
     </div>
 </div>
 <!--Delete Action - Modal-->
 <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
-    aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
+     aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle1">
                     Delete Action</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <img src="assets/img/icon-close.svg" />
+                    <img src="assets/img/icon-close.svg"/>
                 </button>
             </div>
             <div class="modal-body">
@@ -276,14 +278,14 @@
 </div>
 <!--Action - Edit Custom Attribute - Modal-->
 <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
-    aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
+     aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle2">
                     Edit Custom Attributes</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <img src="assets/img/icon-close.svg" />
+                    <img src="assets/img/icon-close.svg"/>
                 </button>
             </div>
             <div class="modal-body createAttributeTabs">
@@ -291,14 +293,16 @@
                     <div class="form-group row">
                         <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
                         <div class="col-sm-9">
-                            <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name" value="resource-assignment-properties">
+                            <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name"
+                                   value="resource-assignment-properties">
                         </div>
                     </div>
                     <div class="form-group row">
                         <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
                         <div class="col-sm-9">
                             <input type="text" class="form-control" id="inputPassword3"
-                                placeholder="Add some description" value="Dynamic PropertyDefinition for workflow(resource-assignment).">
+                                   placeholder="Add some description"
+                                   value="Dynamic PropertyDefinition for workflow(resource-assignment).">
                         </div>
                     </div>
                     <div class="form-group row">
@@ -306,14 +310,16 @@
                         <div class="col-sm-9">
                             <div class="list-group list-group-horizontal">
                                 <button type="button"
-                                    class="list-group-item list-group-item-action">String</button>
+                                        class="list-group-item list-group-item-action">String
+                                </button>
                                 <button type="button" class="list-group-item list-group-item-action">Integer</button>
                                 <button type="button" class="list-group-item list-group-item-action">Boolean</button>
                                 <button type="button" class="list-group-item list-group-item-action">List</button>
-                                <button type="button" class="list-group-item list-group-item-action active">Other</button>
+                                <button type="button" class="list-group-item list-group-item-action active">Other
+                                </button>
                             </div>
                             <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
-                                    placeholder="Add Other type name" value="dt-resource-assignment-properties">
+                                   placeholder="Add Other type name" value="dt-resource-assignment-properties">
                         </div>
                     </div>
                     <div class="form-group row">
@@ -321,12 +327,12 @@
                         <div class="col-sm-9">
                             <div class="custom-control custom-radio custom-control-inline">
                                 <input type="radio" id="customRadioInline1" name="customRadioInline1"
-                                    class="custom-control-input" checked>
+                                       class="custom-control-input" checked>
                                 <label class="custom-control-label" for="customRadioInline1">True</label>
                             </div>
                             <div class="custom-control custom-radio custom-control-inline">
                                 <input type="radio" id="customRadioInline2" name="customRadioInline1"
-                                    class="custom-control-input">
+                                       class="custom-control-input">
                                 <label class="custom-control-label" for="customRadioInline2">False</label>
                             </div>
                         </div>
@@ -339,4 +345,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
index b5e5fda75..f4f74a9fd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
@@ -8,11 +8,14 @@ import {InputActionAttribute, OutputActionAttribute} from './models/InputActionA
 })
 export class ActionAttributesComponent implements OnInit {
 
-    inputs: [InputActionAttribute];
-    outputs: [OutputActionAttribute];
+    inputs = [];
+    outputs = [];
     actionAttributesSideBar: boolean;
+    inputActionAttribute = new InputActionAttribute();
+    outputActionAttribute = new OutputActionAttribute();
 
     constructor() {
+
     }
 
     ngOnInit() {
@@ -29,4 +32,27 @@ export class ActionAttributesComponent implements OnInit {
     addOutput(output: OutputActionAttribute) {
         this.outputs.push(output);
     }
+
+    setInputType(type) {
+        this.inputActionAttribute.type = type;
+    }
+
+    setInputRequired(isRequired) {
+        this.inputActionAttribute.required = isRequired;
+    }
+
+    setOutputRequired(isRequired) {
+        this.outputActionAttribute.required = isRequired;
+    }
+
+    setOutputType(type) {
+        this.outputActionAttribute.type = type;
+    }
+
+    submitAttributes() {
+        console.log(this.inputActionAttribute);
+        console.log(this.outputActionAttribute);
+        this.inputs.push(this.inputActionAttribute);
+        this.outputs.push(this.outputActionAttribute);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts
index 5d2c1116e..3aa370360 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts
@@ -3,6 +3,13 @@ export class InputActionAttribute {
     description: string;
     type: string;
     required: boolean;
+
+    constructor() {
+        this.name = '';
+        this.description = '';
+        this.type = '';
+        this.required = false;
+    }
 }
 
 export class OutputActionAttribute extends InputActionAttribute {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 3c8fa2aa3..537a0a8ca 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -12,7 +12,7 @@
                     <li class="breadcrumb-item">
                         <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
-                            data-target="#exampleModalLong">
+                                data-target="#exampleModalLong">
                             <i class="icon-info" aria-hidden="true"></i>
                         </button>
                     </li>
@@ -22,13 +22,13 @@
                     </li>
                 </ol>
                 <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
-                    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                     aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                     <div class="modal-dialog" role="document">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <img src="assets/img/icon-close.svg" />
+                                    <img src="assets/img/icon-close.svg"/>
                                 </button>
                             </div>
                             <div class="modal-body package-info">
@@ -70,15 +70,15 @@
                 <li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                            data-tooltip="Preview">
+                           data-tooltip="Preview">
                             <i class="fa fa-eye"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                            data-tooltip="Download">
+                           data-tooltip="Download">
                             <i class="fa fa-download"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                            data-tooltip="Share">
+                           data-tooltip="Share">
                             <i class="fa fa-share-square"></i>
                         </a>
                     </div>
@@ -107,7 +107,7 @@
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
     <!--Actions/Functions Side Menu Toogole Button-->
     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
-        data-tooltip="Collapse Side bar">
+            data-tooltip="Collapse Side bar">
         <i class="fa arr-size">&#xf100;</i>
     </button>
     <!--Nav Tabs-->
@@ -119,9 +119,9 @@
                     <div class="col-12">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
-                                aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
+                               aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
                             <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
-                                aria-controls=" " aria-selected="false">Template</a>
+                               aria-controls=" " aria-selected="false">Template</a>
                         </div>
                     </div>
                 </nav>
@@ -162,7 +162,7 @@
                 <div class="btn-group viewBtns" role="group">
                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
                     <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
-                        class="btn btn-secondary topologyView">Scripting
+                            class="btn btn-secondary topologyView">Scripting
                     </button>
                 </div>
             </li>
@@ -173,15 +173,15 @@
 <ng-sidebar-container class="sidebar-container">
     <!--Left Side Menu-->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
-        [mode]="'push'" #sidebarLeft>
+                [mode]="'push'" #sidebarLeft>
         <nav class="row">
             <!--Nav Tabs-->
             <div class="col">
                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
                     <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
-                        role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+                       role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
-                        role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+                       role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                 </div>
             </div>
         </nav>
@@ -189,17 +189,17 @@
             <div class="col">
                 <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
-                        aria-labelledby="nav-action-tab">
+                         aria-labelledby="nav-action-tab">
                         <!--Action Search Box-->
                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
                         <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
                             Action Attributes
                         </button>
-                        <br /><br />
+                        <br/><br/>
                         <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
                             Function Attributes
                         </button>
-                        <br />
+                        <br/>
                         <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
                             + &nbsp;&nbsp;New Action
                         </button>
@@ -213,7 +213,7 @@
                                     <li *ngFor="let customActionName of actions">
                                         <label>
                                             <i class="icon-file" aria-hidden="true" class="icon-file"
-                                                (click)="openFunctionAttributes(customActionName)"></i>
+                                               (click)="openFunctionAttributes(customActionName)"></i>
                                             {{customActionName}} </label>
                                     </li>
                                 </ul>
@@ -271,217 +271,60 @@
     </div>
     <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
                 [position]="'right'" #sidebarRight1>
-
-   <app-action-attributes></app-action-attributes>
+        <div class="container-fluid0">
+            <div class="row m-0">
+                <div class="col attributesContainer">
+                    <div class="row m-0 attributesContainertTitle">
+                        <div class="col-2 pl-0">
+                            <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom">
+                                <i
+                                        class="icon-close" type="button" aria-hidden="true"></i></button>
+                        </div>
+                        <h6 class="col pl-0">Action Attributes</h6>
+                        <div class="col-3 pl-0">
+                            <div class="btn-group" role="group" aria-label="Basic example">
+                                <button type="button" class="btn view-source" tooltip="View Action Source"
+                                        placement="bottom"><i class="icon-source"></i></button>
+                                <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
+                                        class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
+                                        class="icon-delete-sm" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                    </div>
+                    <app-action-attributes></app-action-attributes>
+                </div>
+            </div>
+        </div>
     </ng-sidebar>
     <!--Right Side Menu - Function Attribute-->
     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
-        [position]="'right'" #sidebarRight2>
+                [position]="'right'" #sidebarRight2>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col attributesContainer">
                     <div class="row m-0 attributesContainertTitle">
                         <div class="col-2 pl-0">
                             <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close"
-                                placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button>
+                                    placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i>
+                            </button>
                         </div>
                         <h6 class="col pl-0">Function Attributes</h6>
                         <div class="col-3 pl-0">
                             <div class="btn-group" role="group" aria-label="Basic example">
                                 <button type="button" class="btn view-source" tooltip="View Function Source"
-                                    placement="bottom"><i class="icon-source"></i></button>
+                                        placement="bottom"><i class="icon-source"></i></button>
                                 <button type="button" class="btn trash-item" tooltip="Delete Function"
-                                    placement="bottom"><i class="icon-delete-sm" type="button"
-                                        aria-hidden="true"></i></button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="scrollWrapper">
-                        <div class="row m-0">
-                            <div class="col">
-                                <div class="form-group">
-                                    <label for="exampleInputEmail1">Function Instance Name</label>
-                                    <input type="text" class="form-control" placeholder="Function Instance Name">
-                                </div>
-                                <div class="form-group">
-                                    <label>Function Type</label>
-                                    <label class="attribute-value">component-resource-resolution</label>
-                                </div>
-                                <div class="form-group">
-                                    <label for="exampleFormControlTextarea1">Description</label>
-                                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
-                                </div>
-                            </div>
-                        </div>
-                        <!--INTERFACES-->
-                        <div class="accordion" id="accordionExample">
-                            <div class="card">
-                                <div class="card-header row" id="headingOne">
-                                    <button class="btn btn-link" type="button" data-toggle="collapse"
-                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                        Interfaces
-                                    </button>
-                                </div>
-
-                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                    data-parent="#accordionExample">
-                                    <div class="card-body">
-                                        <!--Inputs & Outputs Tabs-->
-                                        <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
-                                            <li class="nav-item" role="presentation">
-                                                <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
-                                                    href="#pills-home" role="tab" aria-controls="pills-home"
-                                                    aria-selected="true">Inputs</a>
-                                            </li>
-                                            <li class="nav-item" role="presentation">
-                                                <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
-                                                    href="#pills-profile" role="tab" aria-controls="pills-profile"
-                                                    aria-selected="false">Outputs</a>
-                                            </li>
-                                        </ul>
-                                        <div class="tab-content" id="pills-tabContent">
-                                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
-                                                aria-labelledby="pills-home-tab">
-                                                <div class="row">
-                                                    <div class="col">
-                                                        <!--list-->
-                                                        <div class="attribute-wrap">
-                                                            <div class="form-group">
-                                                                <label
-                                                                    for="exampleFormControlTextarea1">artifact-prefix-names
-                                                                    <i class="icon-required-star" type="button"
-                                                                        aria-hidden="true"></i></label>
-                                                            </div>
-                                                            <div
-                                                                class="custom-control custom-radio custom-control-inline">
-                                                                <input type="radio" id="customRadioInline1"
-                                                                    name="customRadioInline1"
-                                                                    class="custom-control-input">
-                                                                <label class="custom-control-label"
-                                                                    for="customRadioInline1">Pre-defined
-                                                                    Template</label>
-                                                            </div>
-                                                            <div
-                                                                class="custom-control custom-radio custom-control-inline">
-                                                                <input type="radio" id="customRadioInline2"
-                                                                    name="customRadioInline1"
-                                                                    class="custom-control-input">
-                                                                <label class="custom-control-label"
-                                                                    for="customRadioInline2">Input Drivin
-                                                                    Template</label>
-                                                            </div>
-                                                            <br />
-                                                            <button type="button" class="btn btn-select-template"><i
-                                                                    class="icon-add-circle" type="button"
-                                                                    aria-hidden="true"></i> Select Template</button>
-                                                        </div>
-                                                        <!--string-->
-                                                        <div class="attribute-wrap">
-                                                            <div class="form-group">
-                                                                <label for="exampleInputEmail1">resoluton-key <i
-                                                                        class="icon-required-star" type="button"
-                                                                        aria-hidden="true"></i></label>
-                                                                <input type="text" class="form-control">
-                                                            </div>
-                                                        </div>
-                                                        <!--integer-->
-                                                        <div class="attribute-wrap">
-                                                            <div class="form-group">
-                                                                <label for="exampleInputEmail1">request-id <i
-                                                                        class="icon-required-star" type="button"
-                                                                        aria-hidden="true"></i></label>
-                                                                <input type="number" class="form-control" placeholder=""
-                                                                    value="356">
-                                                            </div>
-                                                        </div>
-                                                        <!--boolean-->
-                                                        <div class="attribute-wrap">
-                                                            <div class="form-group">
-                                                                <label
-                                                                    for="exampleFormControlTextarea1">resolution-summary
-                                                                    <i class="icon-required-star optional-attribute"
-                                                                        type="button" aria-hidden="true"></i></label>
-                                                            </div>
-                                                            <div
-                                                                class="custom-control custom-radio custom-control-inline">
-                                                                <input type="radio" id="customRadioInline1"
-                                                                    name="customRadioInline1"
-                                                                    class="custom-control-input">
-                                                                <label class="custom-control-label"
-                                                                    for="customRadioInline1">True</label>
-                                                            </div>
-                                                            <div
-                                                                class="custom-control custom-radio custom-control-inline">
-                                                                <input type="radio" id="customRadioInline2"
-                                                                    name="customRadioInline1"
-                                                                    class="custom-control-input">
-                                                                <label class="custom-control-label"
-                                                                    for="customRadioInline2">False</label>
-                                                            </div>
-                                                        </div>
-                                                        <!-- Add Optional Attributes button -->
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="tab-pane fade" id="pills-profile" role="tabpanel"
-                                                aria-labelledby="pills-profile-tab">2</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <!--ARTIFACTS-->
-                        <div class="accordion" id="accordionExample1">
-                            <div class="card">
-                                <div class="card-header row" id="headingOne">
-                                    <button class="btn btn-link" type="button" data-toggle="collapse"
-                                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
-                                        Artifacts
-                                    </button>
-                                </div>
-
-                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
-                                    data-parent="#accordionExample1">
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col-12">
-                                                <a class="template-mapping-list">
-                                                    <p>baseconfig</p>
-                                                    <span>Mapping</span>
-                                                    <span>Template</span>
-
-                                                    <a data-toggle="modal"
-                                                        data-target="#templateDeletionModal"
-                                                        class="accordion-delete deleteTemplate"
-                                                        title="Delete Template"><i class="icon-delete-sm"></i></a>
-                                                </a>
-
-                                            </div>
-                                            <div class="col-12">
-                                                <a class="template-mapping-list">
-                                                    <p>vpkg</p>
-                                                    <span>Mapping</span>
-                                                    <span>Template</span>
-                                                    <a data-toggle="modal"
-                                                        data-target="#templateDeletionModal"
-                                                        class="accordion-delete deleteTemplate"
-                                                        title="Delete Template"><i class="icon-delete-sm"></i></a>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
+                                        placement="bottom"><i class="icon-delete-sm" type="button"
+                                                              aria-hidden="true"></i></button>
                             </div>
                         </div>
                     </div>
+                    <app-functions-attribute></app-functions-attribute>
                 </div>
             </div>
         </div>
     </ng-sidebar>
 
 
-
 </ng-sidebar-container>
 
-<app-functions-attribute></app-functions-attribute>
-
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
index e69de29bb..c89a96de0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
@@ -0,0 +1,178 @@
+<div class="scrollWrapper">
+    <div class="row m-0">
+        <div class="col">
+            <div class="form-group">
+                <label for="exampleInputEmail1">Function Instance Name</label>
+                <input type="text" class="form-control" placeholder="Function Instance Name">
+            </div>
+            <div class="form-group">
+                <label>Function Type</label>
+                <label class="attribute-value">component-resource-resolution</label>
+            </div>
+            <div class="form-group">
+                <label for="exampleFormControlTextarea1">Description</label>
+                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+            </div>
+        </div>
+    </div>
+    <!--INTERFACES-->
+    <div class="accordion" id="accordionExample">
+        <div class="card">
+            <div class="card-header row" id="headingOne">
+                <button class="btn btn-link" type="button" data-toggle="collapse"
+                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    Interfaces
+                </button>
+            </div>
+
+            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                 data-parent="#accordionExample">
+                <div class="card-body">
+                    <!--Inputs & Outputs Tabs-->
+                    <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
+                               href="#pills-home" role="tab" aria-controls="pills-home"
+                               aria-selected="true">Inputs</a>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
+                               href="#pills-profile" role="tab" aria-controls="pills-profile"
+                               aria-selected="false">Outputs</a>
+                        </li>
+                    </ul>
+                    <div class="tab-content" id="pills-tabContent">
+                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
+                             aria-labelledby="pills-home-tab">
+                            <div class="row">
+                                <div class="col">
+                                    <!--list-->
+                                    <div class="attribute-wrap">
+                                        <div class="form-group">
+                                            <label
+                                                    for="exampleFormControlTextarea1">artifact-prefix-names
+                                                <i class="icon-required-star" type="button"
+                                                   aria-hidden="true"></i></label>
+                                        </div>
+                                        <div
+                                                class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline1"
+                                                   name="customRadioInline1"
+                                                   class="custom-control-input">
+                                            <label class="custom-control-label"
+                                                   for="customRadioInline1">Pre-defined
+                                                Template</label>
+                                        </div>
+                                        <div
+                                                class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline2"
+                                                   name="customRadioInline1"
+                                                   class="custom-control-input">
+                                            <label class="custom-control-label"
+                                                   for="customRadioInline2">Input Drivin
+                                                Template</label>
+                                        </div>
+                                        <br />
+                                        <button type="button" class="btn btn-select-template"><i
+                                                class="icon-add-circle" type="button"
+                                                aria-hidden="true"></i> Select Template</button>
+                                    </div>
+                                    <!--string-->
+                                    <div class="attribute-wrap">
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">resoluton-key <i
+                                                    class="icon-required-star" type="button"
+                                                    aria-hidden="true"></i></label>
+                                            <input type="text" class="form-control">
+                                        </div>
+                                    </div>
+                                    <!--integer-->
+                                    <div class="attribute-wrap">
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">request-id <i
+                                                    class="icon-required-star" type="button"
+                                                    aria-hidden="true"></i></label>
+                                            <input type="number" class="form-control" placeholder=""
+                                                   value="356">
+                                        </div>
+                                    </div>
+                                    <!--boolean-->
+                                    <div class="attribute-wrap">
+                                        <div class="form-group">
+                                            <label
+                                                    for="exampleFormControlTextarea1">resolution-summary
+                                                <i class="icon-required-star optional-attribute"
+                                                   type="button" aria-hidden="true"></i></label>
+                                        </div>
+                                        <div
+                                                class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline1"
+                                                   name="customRadioInline1"
+                                                   class="custom-control-input">
+                                            <label class="custom-control-label"
+                                                   for="customRadioInline1">True</label>
+                                        </div>
+                                        <div
+                                                class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline2"
+                                                   name="customRadioInline1"
+                                                   class="custom-control-input">
+                                            <label class="custom-control-label"
+                                                   for="customRadioInline2">False</label>
+                                        </div>
+                                    </div>
+                                    <!-- Add Optional Attributes button -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
+                             aria-labelledby="pills-profile-tab">2</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--ARTIFACTS-->
+    <div class="accordion" id="accordionExample1">
+        <div class="card">
+            <div class="card-header row" id="headingOne">
+                <button class="btn btn-link" type="button" data-toggle="collapse"
+                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                    Artifacts
+                </button>
+            </div>
+
+            <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
+                 data-parent="#accordionExample1">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-12">
+                            <a class="template-mapping-list">
+                                <p>baseconfig</p>
+                                <span>Mapping</span>
+                                <span>Template</span>
+
+                                <a data-toggle="modal"
+                                   data-target="#templateDeletionModal"
+                                   class="accordion-delete deleteTemplate"
+                                   title="Delete Template"><i class="icon-delete-sm"></i></a>
+                            </a>
+
+                        </div>
+                        <div class="col-12">
+                            <a class="template-mapping-list">
+                                <p>vpkg</p>
+                                <span>Mapping</span>
+                                <span>Template</span>
+                                <a data-toggle="modal"
+                                   data-target="#templateDeletionModal"
+                                   class="accordion-delete deleteTemplate"
+                                   title="Delete Template"><i class="icon-delete-sm"></i></a>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>