Add Optional Attributes Menu

Issue-ID: CCSDK-2812

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: Id2f89c57d974f5317b33725a9de67f48a3eb3d7c

4 files changed, 246 insertions, 133 deletions

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 ba4fba69a..63cf4bd6c 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
@@ -3,8 +3,7 @@
         <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">
+                <input type="text" class="form-control" placeholder="Action Name" value="resource-assignment">
             </div>
         </div>
     </div>
@@ -15,15 +14,13 @@
             <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>
+                        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>
+                    <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>
@@ -32,31 +29,30 @@
     <!--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 class="card-header" id="headingOne">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+                        aria-expanded="true" aria-controls="collapseOne">
+                        Inputs
+                    </button>
+                </h2>
             </div>
-            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                 data-parent="#accordionExample">
+            <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" 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>
+                                        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>
@@ -68,25 +64,25 @@
     <!--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 class="card-header" id="headingOne">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
+                        aria-expanded="true" aria-controls="collapseTwo">
+                        Outputs
+                    </button>
+                </h2>
             </div>
 
-            <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
-                 data-parent="#accordionExample1">
+            <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" type="button"
-                                       aria-hidden="true"></i>
-                                    <i [hidden]="!output.required" class="optional-attribute"
-                                       type="button" aria-hidden="true"></i>
+                                    <i [hidden]="output.required" class="icon-required-star" type="button"
+                                        aria-hidden="true"></i>
+                                    <i [hidden]="!output.required" class="optional-attribute" type="button"
+                                        aria-hidden="true"></i>
 
                                 </label>
                             </div>
@@ -99,14 +95,14 @@
 </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-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">
@@ -114,60 +110,55 @@
                 <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 [(ngModel)]="inputActionAttribute.name" type="email" class="form-control"
-                                       id="inputEmail3" placeholder="Attribute name">
+                                    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 [(ngModel)]="inputActionAttribute.description" type="text" class="form-control"
-                                       id="inputPassword3"
-                                       placeholder="Add some description">
+                                    id="inputPassword3" placeholder="Add some description">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
                             <div class="col-sm-9">
                                 <div class="list-group list-group-horizontal">
-                                    <button type="button"
-                                            class="list-group-item list-group-item-action"
-                                            (click)="setInputType('String')">
+                                    <button type="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"
-                                            (click)="setInputType('Integer')">Integer
+                                    <button type="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"
-                                            (click)="setInputType('Boolean')">Boolean
+                                    <button type="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
+                                        (click)="setInputType('List')">List
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setInputType('Other')">Other
+                                        (click)="setInputType('Other')">Other
                                     </button>
                                 </div>
                                 <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
-                                       id="inputPassword4"
-                                       placeholder="Add Other type name"
-                                       [(ngModel)]="inputOtherType" (change)="setInputType(inputOtherType)">
+                                    id="inputPassword4" placeholder="Add Other type name" [(ngModel)]="inputOtherType"
+                                    (change)="setInputType(inputOtherType)">
 
                             </div>
                         </div>
@@ -176,12 +167,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" (click)="setInputRequired(true)">
+                                        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" (click)="setInputRequired(false)">
+                                        class="custom-control-input" (click)="setInputRequired(false)">
                                     <label class="custom-control-label" for="customRadioInline2">False</label>
                                 </div>
                             </div>
@@ -193,15 +184,14 @@
                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
                             <div class="col-sm-9">
                                 <input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control"
-                                       id="inputEmail3" placeholder="Attribute name">
+                                    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 [(ngModel)]="outputActionAttribute.description"
-                                       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">
@@ -209,30 +199,26 @@
                             <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>
-                                    <button type="button"
-                                            class="list-group-item list-group-item-action"
-                                            (click)="setOutputType('Integer')">
+                                    <button type="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"
-                                            (click)="setOutputType('Boolean')">
+                                    <button type="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')">
+                                        (click)="setOutputType('List')">
                                         List
                                     </button>
-                                    <button type="button"
-                                            class="list-group-item list-group-item-action"
-                                            (click)="setOutputType('Other')">
+                                    <button type="button" class="list-group-item list-group-item-action"
+                                        (click)="setOutputType('Other')">
                                         Other
                                     </button>
                                 </div>
                                 <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
-                                       id="inputPassword3"
-                                       placeholder="Add Other type name"
-                                       [(ngModel)]="outputOtherType" (change)="setOutputType(outputOtherType)">
+                                    id="inputPassword3" placeholder="Add Other type name" [(ngModel)]="outputOtherType"
+                                    (change)="setOutputType(outputOtherType)">
                             </div>
                         </div>
                         <div class="form-group row">
@@ -240,14 +226,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" (click)="setOutputRequired(true)">
+                                        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">
+                                        class="custom-control-input">
                                     <label class="custom-control-label" for="customRadioInline2"
-                                           (click)="setOutputRequired(false)">False</label>
+                                        (click)="setOutputRequired(false)">False</label>
                                 </div>
                             </div>
                         </div>
@@ -263,14 +249,14 @@
 </div>
 <!--Delete Action - Modal-->
 <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
-     aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
+    <div class="modal-dialog 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">
@@ -285,14 +271,14 @@
 </div>
 <!--Action - Edit Custom Attribute - Modal-->
 <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
-     aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
+    <div class="modal-dialog 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">
@@ -301,23 +287,22 @@
                         <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">
+                                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">
                         <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
                         <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 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>
                                 <button type="button" class="list-group-item list-group-item-action">Boolean</button>
@@ -326,7 +311,7 @@
                                 </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">
@@ -334,12 +319,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>
@@ -352,4 +337,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 6d590dc8f..1d2a939bd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -469,10 +469,10 @@ p.compType-4{
   color: #C7D0DD;
   font-size: 12px;
 }
-.custom-control-input:checked ~ .custom-control-label{
+/* .custom-control-input:checked ~ .custom-control-label{
   background-color: #1B3E6F !important;
   color: #fff;
-}
+} */
 .inserActionBtns .btn{
   border-radius: 15px !important;
   padding: 6px 20px;
@@ -845,6 +845,7 @@ p.compType-4{
 }
 
 .btn-select-template{
+  display: inherit;
   background-color: #C3CDDB;
   border-radius: 2px;
   color: #1B3E6F;
@@ -859,6 +860,11 @@ p.compType-4{
   margin-bottom: 9px;
   border-bottom: solid 1px #F4F9FE;
 }
+.function-accordion .attribute-wrap:nth-last-child(1){
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
 .attribute-wrap .form-group{
   margin-bottom: 0;
 }
@@ -880,19 +886,30 @@ p.compType-4{
   color: #103D73;
   font-size: 10px !important;
 }
+/*Accordion*/
 .accordion{
   margin-top: 12px;
 }
+.accordion .card-header .btn-link{
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}
 .accordion > .card{
+  box-shadow: none;
   margin-bottom: 0 !important;
-  border: 0;
+}
+.accordion > .card .card-body{
+  padding-bottom: 0 !important; 
+}
+.function-accordion .card{
+  overflow: inherit !important;
   box-shadow: none;
 }
-.card-header .btn-link,
+/* 
 .accordion .card-header .btn-link[aria-expanded="true"], 
 .accordion .card-header .btn-link[aria-expanded="false"]{
-  padding-left: 15px !important;
-  padding-right: 15px !important;
+  padding-left: 20px !important;
+  padding-right: 20px !important;
 }
 .accordion > .card .card-header{
   margin: 0;
@@ -928,7 +945,11 @@ p.compType-4{
   float: left;
   font-weight: normal;
   font-size: 12px;
-}
+} */
+
+
+
+
 /* .accordion .card-header .btn-link[aria-expanded="true"]:after{
   content: "\f078";    
 }
@@ -1165,3 +1186,72 @@ ul.editor{
   background-color: transparent !important;
   color: #1B3E6F;
 }
+/*Optional Attributes Menu*/
+.optional-attributes-menu{
+  margin-top: 20px;
+  padding: 10px 20px;
+  border-top: solid 1px #ECEDF2;
+  border-bottom: solid 1px #ECEDF2;
+  background-color: #F4F9FE;
+}
+.optional-attributes-menu .dropdown{
+  width: 100%;
+}
+.optional-attributes-menu .dropdown-text,
+.optional-attributes-menu .dropdown-text:hover,
+.optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
+.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
+  top: 0;
+  text-align: center;
+  font-weight: normal;
+  text-indent: 0;
+  background-color: #fff;
+  box-shadow: none;
+  border: solid 1px #C1CDDD;
+  border-radius: 2px;
+}
+.optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
+.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
+  background-color: #D0DFF1 !important;
+  border-color: #C1CDDD;
+  border-radius: 2px !important;
+  color: #1B3E6F !important;
+}
+.optional-attributes-menu .dropdown-text i{
+  font-size: 17px;
+  vertical-align: middle;
+}
+.optional-attributes-menu .dropdown-content:hover, 
+.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-content{
+  top: 36px;
+  width: 100%;
+  padding: 5px 0;
+  border-radius: 2px;
+  background-color: #F4F9FE;
+  border-color: #D0DFF1;
+  font-size: 13px;
+}
+.optional-attributes-menu .dropdown-content li{
+  padding: 0 5px;
+  line-height: 36px;
+  border-bottom: solid 1px #EAF4FF;
+}
+.optional-attributes-menu .dropdown-content li a{
+  display: inline;
+}
+.optional-attributes-menu .dropdown-content li:hover,
+.optional-attributes-menu .dropdown-content li:hover a{
+  background-color: #D0DFF1;
+}
+.optional-attributes-menu li i{
+  font-size: 20px;
+  margin-top: 10px;
+  margin-right: 10px;
+}
+
+.temp-buttons .btn{
+  font-size: 13px;
+  margin: 12px;
+  padding: 8px 12px !important;
+  line-height: 14px;
+}
\ No newline at end of file
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 e717d9019..d4fea67bb 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
@@ -192,14 +192,19 @@
                          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/>
-                        <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
-                            Function Attributes
-                        </button>
-                        <br/>
+
+                        <div class="row temp-buttons">
+                            <div class="col text-center">
+                                <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
+                                    Action Attributes
+                                </button>
+                            </div>
+                            <div class="col text-center">
+                                <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
+                                    Function Attributes
+                                </button>
+                            </div>
+                        </div>
                         <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
                             + &nbsp;&nbsp;New Action
                         </button>
@@ -277,8 +282,7 @@
                     <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>
+                                <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">
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 c0c7ece98..91386fd66 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
@@ -5,7 +5,7 @@
                 <label for="exampleInputEmail1">Function Instance Name</label>
                 <input type="text" class="form-control" placeholder="Function Instance Name">
             </div>
-            <div class="form-group">
+            <div class="form-group mb-0">
                 <label>Function Type</label>
                 <label class="attribute-value">component-resource-resolution</label>
             </div>
@@ -15,14 +15,17 @@
             </div>
         </div>
     </div>
-    <!--INTERFACES-->
-    <div class="accordion" id="accordionExample">
+
+    <div class="accordion function-accordion" id="accordionExample">
+        <!--INTERFACES-->
         <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 class="card-header" id="headingOne">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+                        aria-expanded="true" aria-controls="collapseOne">
+                        Interfaces
+                    </button>
+                </h2>
             </div>
 
             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
@@ -39,6 +42,7 @@
                         </li>
                     </ul>
                     <div class="tab-content" id="pills-tabContent">
+                        <!--Inputs-->
                         <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                             aria-labelledby="pills-home-tab">
                             <div class="row">
@@ -64,8 +68,8 @@
                                         </div>
                                         <br />
                                         <button type="button" data-toggle="modal" data-target="#templateModal"
-                                            class="btn btn-select-template"><i class="icon-add-circle" type="button"
-                                                aria-hidden="true"></i> Select Template</button>
+                                            class="btn btn-select-template m-auto"><i class="icon-add-circle"
+                                                type="button" aria-hidden="true"></i> Select Template</button>
                                     </div>
                                     <!--string-->
                                     <div class="attribute-wrap" *ngFor="let requiredInput of requiredInputs">
@@ -102,10 +106,41 @@
                                             <label class="custom-control-label" for="customRadioInline2">False</label>
                                         </div>
                                     </div> -->
-                                    <!-- Add Optional Attributes button -->
+                                </div>
+                            </div>
+                            <!-- Add Optional Attributes button -->
+                            <div class="row">
+                                <div class="col p-0">
+                                    <div class="optional-attributes-menu">
+                                        <div class="dropdown">
+                                            <input class="dropdown-toggle" type="text">
+                                            <div class="dropdown-text">
+                                                <i class="icon-add-circle" type="button" aria-hidden="true"></i> Add
+                                                Optional Attributes
+                                            </div>
+                                            <ul class="dropdown-content save-blueprint">
+                                                <li>
+                                                    <a>resolution-key</a>
+                                                    <i class="icon-add-circle float-right" type="button"
+                                                        aria-hidden="true"></i>
+                                                </li>
+                                                <li>
+                                                    <a>occurrence</a>
+                                                    <i class="icon-add-circle float-right" type="button"
+                                                        aria-hidden="true"></i>
+                                                </li>
+                                                <li>
+                                                    <a>store-result</a>
+                                                    <i class="icon-add-circle float-right" type="button"
+                                                        aria-hidden="true"></i>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
+                        <!--Outputs-->
                         <!-- Optional params -->
                         <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                             aria-labelledby="pills-profile-tab">
@@ -121,18 +156,17 @@
                 </div>
             </div>
         </div>
-    </div>
     <!--ARTIFACTS-->
-    <div [hidden]="selectedTemplates.size == 0" 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 class="card" [hidden]="selectedTemplates.size == 0" class="accordion" id="accordionExample1">
+            <div class="card-header" id="headingTwo">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
+                        aria-expanded="true" aria-controls="collapseTwo">
+                        Artifacts
+                    </button>
+                </h2>
             </div>
-
-            <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1">
+            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                 <div class="card-body">
                     <div class="row">
                         <div class="col-12" *ngFor="let file of  getKeys(selectedTemplates)">
@@ -157,7 +191,7 @@
 <!--function - Select Template - Modal-->
 <div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalTitle"
     aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="templateModalTitle">