Merge "Fix Radio Selection and Undo JointJS changes"

7 files changed, 78 insertions, 67 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 63cf4bd6c..f7ba40ce1 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
@@ -225,14 +225,14 @@
                             <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
                             <div class="col-sm-9">
                                 <div class="custom-control custom-radio custom-control-inline">
-                                    <input type="radio" id="customRadioInline1" name="customRadioInline1"
+                                    <input type="radio" id="customRadioInline3" name="customRadioInline3"
                                         class="custom-control-input" (click)="setOutputRequired(true)">
-                                    <label class="custom-control-label" for="customRadioInline1">True</label>
+                                    <label class="custom-control-label" for="customRadioInline3">True</label>
                                 </div>
                                 <div class="custom-control custom-radio custom-control-inline">
-                                    <input type="radio" id="customRadioInline2" name="customRadioInline1"
+                                    <input type="radio" id="customRadioInline4" name="customRadioInline3"
                                         class="custom-control-input">
-                                    <label class="custom-control-label" for="customRadioInline2"
+                                    <label class="custom-control-label" for="customRadioInline4"
                                         (click)="setOutputRequired(false)">False</label>
                                 </div>
                             </div>
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 1d2a939bd..f15d735f6 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
@@ -266,12 +266,13 @@ button.rotate{
 .rotate a:hover{
   text-decoration: none;
 }
-#board-paper svg{
+/*PAUSE*/
+/* #board-paper svg{
   top: 30px;
   left: 0;
   height: 95%;
-}
-.componentsList tspan{
+} */
+.functionsList tspan{
   /* width:30px !important;  */
   font: normal 13px sans-serif; 
   fill: #1B3E6F !important; 
@@ -307,7 +308,7 @@ tspan#type{
   text-shadow: none;
   border-color: #DEE8F3;
 }
-.componentsList p{
+.functionsList p{
   margin-bottom: 0;
   padding-left: 30px;
   background-position: left center;
@@ -385,8 +386,9 @@ p.compType-4{
   font-size: 12px;
   color: #C3CDDB;
 }
-.controllerSidebar .joint-paper{
-  width: 98% !important;
+/*PAUSE*/
+.functionsList .joint-paper{
+  width: 100% !important;
   height: 72vh !important;
   margin: 0 !important;
 }
@@ -411,15 +413,9 @@ p.compType-4{
 .new-action:hover{
   background: #D7E7F9;
 }
-.componentsList{
-  margin-top: 16px;
-  padding: 0 20px 10px;
-}
-.componentsList{
-  padding-bottom: 0;
-  /* height: calc( 100vh - 218px)!important;
-  overflow: scroll;*/
-  background: #F4F9FE !important;
+.functionsList{
+  height: calc(100vh - 200px);
+  overflow-y: auto;
 }
 .custom-control.custom-checkbox:hover,
 .custom-control-label:hover{
@@ -433,8 +429,7 @@ p.compType-4{
 .custom-control:hover{
     background-color: white;
 }
-.actionsList,
-.componentsList{
+.actionsList{
   height: 65vh !important;
   overflow-y: auto;
 }
@@ -444,13 +439,16 @@ p.compType-4{
 .actionsList li{
   list-style: none;
 }
-.componentsList .list-group-item{
+.functionsList .list-group-item{
   margin-bottom: 10px;
   padding-left: 40px;
   background: #fff;
   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
   border-radius: 2px;
 }
+.functionsList .joint-paper{
+  background: transparent !important;
+}
 .actionsList .custom-control-label{
   width: 100%;
   padding: 6px;
@@ -499,7 +497,7 @@ p.compType-4{
   margin-right: 9px;
 }
 /*Components List*/
-.componentsList .list-group-item{
+.functionsList .list-group-item{
   padding-left: 36px;
   border: 0;
   font-size: 14px;
@@ -1043,13 +1041,13 @@ p.compType-4{
   background-color: #1B3E6F !important;
   color: #fff !important;
 }
-
-
+/*PAUSE*/
+/* 
 .joint-paper{
   width: 96.4% !important;
   height: 80vh !important;
   margin: 60px auto 0 !important;
-}
+} */
 ul.templateLegend{
   margin: 0;
 }
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 d4fea67bb..76717b03c 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 tooltip-bottom" data-toggle="modal"
-                                data-target="#exampleModalLong" data-tooltip="Package Details">
+                            data-target="#exampleModalLong" data-tooltip="Package Details">
                             <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,23 +173,24 @@
 <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>
         <div class="row">
             <div class="col">
                 <div class="tab-content" id="nav-tabContent">
+                    <!--Action List-->
                     <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">
 
@@ -218,17 +219,20 @@
                                     <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>
                             </div>
                         </div>
                     </div>
+                    <!--Function List-->
                     <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
                         <!--Function Search Box-->
                         <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
-                        <div id="palette-paper" class="componentsList"></div>
+                        <div class="functionsList">
+                            <div id="palette-paper"></div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -275,7 +279,7 @@
         <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
     </div>
     <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-                [position]="'right'" #sidebarRight1>
+        [position]="'right'" #sidebarRight1>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col attributesContainer">
@@ -288,9 +292,9 @@
                         <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>
+                                    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="btn trash-item" tooltip="Delete Action" placement="bottom"><i
                                         class="icon-delete-sm" aria-hidden="true"></i></button>
                             </div>
                         </div>
@@ -302,24 +306,24 @@
     </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>
+                                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>
+                                    placement="bottom"><i class="icon-delete-sm" type="button"
+                                        aria-hidden="true"></i></button>
                             </div>
                         </div>
                     </div>
@@ -330,5 +334,4 @@
     </ng-sidebar>
 
 
-</ng-sidebar-container>
-
+</ng-sidebar-container>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 1475f1ac3..d0af828e8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -251,6 +251,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
                 el: $('#palette-paper'),
                 model: this.paletteGraph,
                 width: 318,
+                // height: '100%',
                 height: $('#palette-paper').height(),
                 // background: {
                 //   color: 'rgba(0, 255, 0, 0.3)'
@@ -268,12 +269,12 @@ export class DesignerComponent implements OnInit, OnDestroy {
             this.boardPaper = new joint.dia.Paper({
                 el: $('#board-paper'),
                 model: this.boardGraph,
-                // height: 720,
-                // width: 1100,
+                height: 720,
+                width: 1100,
                 gridSize: 10,
                 drawGrid: true,
-                // background: {
-                //   color: 'rgba(0, 255, 0, 0.3)'
+                 // background: {
+                 // color: 'rgba(0, 255, 0, 0.3)'
                 // },
                 cellViewNamespace: joint.shapes
             });
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
index b7a0ff9d5..417f60ba4 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
@@ -14,9 +14,8 @@ declare module 'jointjs' {
         }
     }
 }
-
-const rectWidth = '100%';
-const rectHeight = '100%';
+const rectWidth = 616;
+const rectHeight = 381;
 // custom element implementation
 // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
 const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
@@ -40,8 +39,19 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa
         <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)">
             <g id="workflow-container" transform="translate(401.000000, 137.000000)">
                 <g id="Card">
-                    <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use>
-                    <use fill-rule="evenodd" xlink:href="#custom-action"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use>
+                    <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use>
+                    </g>
+                    <g id="name">
+                        <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87,
+                        0.8954305 87,2 L87,30 L87,30 L0,30 L0,
+                        2 C-1.3527075e-16,0.8954305 0.8954305,
+                        2.02906125e-16 2,0 Z" id="Rectangle"
+                        fill="#C3CDDB"></path>
+                        <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue"
+                        font-size="12" font-weight="bold" fill="#1B3E6F">
+                            <tspan id="label" x="20" y="20">Action 1</tspan>
+                        </text>
                 </g>
             </g>
         </g>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 82010db1c..256789586 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -233,9 +233,6 @@
                                     <input type="text" class="form-control" #velocity
                                         (input)="setVelocity(initDataSource.filteredData.indexOf(dict),velocity.value)">
                                 </td>
-
-
-
                             </ng-container>
                             <!-- Data Type Column -->
                             <ng-container matColumnDef="Data Type">
@@ -259,11 +256,11 @@
                 <!------ View Table------->
                 <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
                     <div class="mat-elevation-z8">
+                        <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>
                         <mat-form-field class="tableFilter float-right">
                             <mat-label>Filter</mat-label>
                             <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
-                        </mat-form-field>
-                        <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+                        </mat-form-field>                        
                         <table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort>
                             <!-- Required Column -->
                             <ng-container matColumnDef="Required">
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 6c315ea3a..8b576db2e 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -17,6 +17,9 @@ body{
 :hover{
   transition: 0.3s !important;
 }
+button:focus{
+  outline: 0 !important;
+}
 /*Bootstrap*/
 .custom-control-input:checked ~ .custom-control-label::before{
   border-color: transparent !important;
@@ -2411,7 +2414,6 @@ padding-left: 20px !important;
 }
 .single-custom-key{
   width: 100%;
-  margin-bottom: 21px;
 }
 .single-line-custom-key{
   width: 45%;