Add attribute details on hover - List, Get value, Import

Issue-ID: CCSDK-2292

Issue-ID: CCSDK-2780

Issue-ID: CCSDK-2779

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

4 files changed, 170 insertions, 36 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 23adaef46..d9b727b2e 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
@@ -14,8 +14,8 @@
             <div class="row">
                 <div class="col pr-0 text-center">
                     <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
-                            class="btn btn-secondary" (click)="clearFormInputs()"><i class="icon-custom-attribute" type="button"
-                                                         aria-hidden="true" ></i></button>
+                        class="btn btn-secondary" (click)="clearFormInputs()"><i class="icon-custom-attribute"
+                            type="button" aria-hidden="true"></i></button>
                     <span>Create Custom</span>
                 </div>
                 <div class="col text-center">
@@ -28,7 +28,7 @@
         </div>
     </div>
     <!--INPUTS-->
-    <div class="accordion" id="accordionExample">
+    <div class="accordion action-accordion" id="accordionExample">
         <div class="card">
             <div class="card-header" id="headingOne">
                 <h2 class="mb-0">
@@ -43,7 +43,15 @@
                     <div class="row">
                         <div class="col">
                             <div class="form-group" *ngFor="let input of inputs">
-                                <label >{{input.name}}
+                                <label class="tooltipHTML">{{input.name}}
+                                    <span class="tooltiptext">
+                                        <h5>integer</h5>
+                                        <h6>Value:</h6>
+                                        <span>function_name</span>
+                                        <span>attribute_name</span>
+                                        <span>artifact_name</span>
+                                        <span>parameter_name</span>
+                                    </span>
                                     <i [hidden]="!input.required" class="icon-required-star" type="button"
                                        aria-hidden="true"></i>
                                     <i [hidden]="input.required" class="icon-required-star optional-attribute"
@@ -64,7 +72,7 @@
         </div>
     </div>
     <!--OUTPUTS-->
-    <div class="accordion" id="accordionExample1">
+    <div class="accordion action-accordion" id="accordionExample1">
         <div class="card">
             <div class="card-header" id="headingOne">
                 <h2 class="mb-0">
@@ -80,7 +88,15 @@
                     <div class="row">
                         <div class="col">
                             <div class="form-group" *ngFor="let output of outputs">
-                                <label >{{output.name}}
+                                <label class="tooltipHTML">{{output.name}}
+                                    <span class="tooltiptext">
+                                        <h5>integer</h5>
+                                        <h6>Value:</h6>
+                                        <span>function_name</span>
+                                        <span>attribute_name</span>
+                                        <span>artifact_name</span>
+                                        <span>parameter_name</span>
+                                    </span>
                                     <i [hidden]="!output.required" class="icon-required-star" type="button"
                                        aria-hidden="true"></i>
                                     <i [hidden]="output.required" class="icon-required-star optional-attribute"
@@ -259,8 +275,8 @@
                         <div class="form-group row">
                             <div class="col">
                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
-                                <div class="container">
-                                    <!-- <div *ngFor="let tempInput of steps">{{tempInput}}</div>-->
+                                <div class="container p-0">
+                                    <!-- <div *ngFor="let tempInput of steps" class="selectedWrapper">{{tempInput}}</div> -->
                                 </div>
                             </div>
                         </div>
@@ -295,15 +311,20 @@
                                              aria-labelledby="list-home-list">
                                             <div class="scrollWrapper">
                                                 <div *ngIf="suggestedAttributes.length>0"
-                                                     class="btn-group btn-group-toggle" data-toggle="buttons">
-                                                    <label class="btn btn-secondary"
-                                                           *ngFor="let suggestedAttribute of suggestedAttributes"
-                                                           [id]="suggestedAttribute"
-                                                           (click)="addTempOutputAttr(suggestedAttribute)">
+                                                    class="btn-group btn-group-toggle" data-toggle="buttons">
+                                                    <label class="btn tooltipHTML tooltipGetAtt"
+                                                        *ngFor="let suggestedAttribute of suggestedAttributes"
+                                                        [id]="suggestedAttribute"
+                                                        (click)="addTempOutputAttr(suggestedAttribute)">
+                                                        <span class="tooltiptext">
+                                                            <h5>integer</h5>
+                                                        </span>
                                                         <input type="radio" name="options"
                                                                [id]="suggestedAttribute+'.,.'"
                                                                autocomplete="off" [checked]="suggestedAttributes[0].includes(suggestedAttribute)">
                                                         {{suggestedAttribute}}
+                                                        <i class="icon-required-star" type="button"
+                                                            aria-hidden="true"></i>
                                                     </label>
 
                                                 </div>
@@ -434,15 +455,17 @@
                            aria-controls="profile" aria-selected="false" >Outputs</a>
                     </li>
                 </ul>
-                <div class="tab-content border-0 mt-2" id="myTabContent">
+                <div class="tab-content border-0" id="myTabContent">
                     <!--INPUTS Tab-->
                     <div class="tab-pane fade show active create-form" id="input" role="tabpanel"
                          aria-labelledby="input-tab">
                         <div class="form-group row">
                             <div class="col">
-                                <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
-                                <div class="container">
-                                    <div *ngFor="let tempInput of tempInputs">{{tempInput}}</div>
+<!--<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">-->
+                                <div class="container p-0">
+                                    <label>Selected Attributes</label>
+                                    <div *ngFor="let tempInput of tempInputs" class="selectedWrapper">{{tempInput}}
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -472,13 +495,18 @@
                                          aria-labelledby="list-home-list">
                                         <div class="scrollWrapper">
                                             <div *ngIf="suggestedInputs.length>0" class="btn-group btn-group-toggle"
-                                                 data-toggle="buttons">
-                                                <label class="btn btn-secondary active"
-                                                       *ngFor="let suggestedInput of suggestedInputs"
-                                                       (click)="addTempInput(suggestedInput)">
+                                                data-toggle="buttons">
+                                                <label class="btn tooltipHTML tooltipGetAtt active"
+                                                    *ngFor="let suggestedInput of suggestedInputs"
+                                                    (click)="addTempInput(suggestedInput)">
+                                                    <span class="tooltiptext">
+                                                        <h5>integer</h5>
+                                                    </span>
                                                     <input type="radio" name="options" [id]="suggestedInput"
                                                            autocomplete="off" (click)="addTempInput(suggestedInput)">
                                                     {{suggestedInput}}
+                                                    <i class="icon-required-star" type="button"
+                                                        aria-hidden="true"></i>
                                                 </label>
                                             </div>
                                             <div *ngIf="suggestedInputs.length == 0">
@@ -495,8 +523,9 @@
                         <div class="form-group row">
                             <div class="col">
                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
-                                <div class="container">
-                                    <div *ngFor="let tempOutput of tempOutputs">{{tempOutput}}</div>
+                                <div class="container p-0">
+                                    <div *ngFor="let tempOutput of tempOutputs" class="selectedWrapper">{{tempOutput}}
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -526,13 +555,18 @@
                                          aria-labelledby="list-home-list">
                                         <div class="scrollWrapper">
                                             <div *ngIf="suggestedOutputs.length > 0" class="btn-group btn-group-toggle"
-                                                 data-toggle="buttons">
-                                                <label class="btn btn-secondary active"
-                                                       *ngFor="let suggestedOutput of suggestedOutputs">
+                                                data-toggle="buttons">
+                                                <label class="btn tooltipHTML tooltipGetAtt active"
+                                                    *ngFor="let suggestedOutput of suggestedOutputs">
+                                                    <span class="tooltiptext">
+                                                        <h5>integer</h5>
+                                                    </span>
                                                     <input type="radio" name="options" [id]="suggestedOutput"
                                                            autocomplete="off"
                                                            (dblclick)="addTempOutput(suggestedOutput)">
                                                     {{suggestedOutput}}
+                                                    <i class="icon-required-star" type="button"
+                                                        aria-hidden="true"></i>
                                                 </label>
 
                                             </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 b076af378..2a2aaba47 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
@@ -949,7 +949,8 @@ p.compType-4{
 .accordion > .card .card-body{
   padding-bottom: 0 !important; 
 }
-.function-accordion .card{
+.function-accordion .card,
+.action-accordion .card{
   overflow: inherit !important;
   box-shadow: none;
 }
@@ -1186,9 +1187,10 @@ ul.editor{
   margin-left: 50px;
 }
 .createAttributeTabs .tab-content{
-  margin-top: 20px;
+  /* margin-top: 20px; */
   padding: 20px 50px;
   border: solid 1px #F4F9FE;
+  border-top: 0;
 }
 .createAttributeTabs .listBoxTitle{
   font-size: 11px;
@@ -1282,6 +1284,26 @@ ul.editor{
   box-shadow: none;
   border: 0;
 }
+.container{
+  min-height: 66px;
+  border-bottom: solid 1px #EFEFF4;
+  line-height: 24px;
+}
+.container label{
+  display: block;
+  /* color: #C3CDDB; */
+}
+.container .selectedWrapper{
+  display: inline-block;
+  width: auto;
+  margin-right: 6px;
+  margin-bottom: 9px;
+  padding: 0 10px;
+  background: #E0E8F2;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 24px;
+}
 /*FORM*/
 .create-form .col-form-label{
   color: #1B3E6F;
@@ -1649,3 +1671,72 @@ ul.editor{
 .carousel::after {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
 } */
+
+
+.tooltipHTML{
+  position: relative;
+  display: inline-block;
+}
+.tooltipHTML .tooltiptext{
+  visibility: hidden;
+  position: absolute;
+  z-index: 1;
+  top: 35px;
+  left: 50px;
+  width: 316px;
+  margin-left: -62px;
+  padding: 9px 12px;
+  background-color: #fff;
+  color: #1B3E6F;
+  border-radius: 2px;
+  font-weight: normal;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+  border: solid 1px #DEE8F3;
+  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
+  opacity: 0;
+  transition: opacity 1s;
+}
+.tooltipHTML.tooltipGetAtt .tooltiptext{
+  top: 38px;
+  left: 70px;
+  width: auto;
+}
+.tooltipHTML .tooltiptext::after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #DEE8F3;
+  left: 9px;
+  top: -6px;
+}
+.tooltipHTML:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+.tooltiptext h5{
+  margin-bottom: 5px;
+}
+.tooltipGetAtt h5{
+  margin-bottom: 0;
+  font-size: 12px;
+}
+.tooltiptext h6{
+  background: transparent;
+  line-height: 24px !important;
+  color: #C3CDDB;
+  text-transform: initial;
+}
+.tooltipHTML .tooltiptext span{
+  display: inline-block;
+  margin-right: 3px;
+  margin-bottom: 3px;
+  padding: 3px 6px;
+  background-color: #E0E8F2;
+  border-radius: 12px;
+  line-height: 16px;
+  color: #1B3E6F;
+}
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 505844c57..b8a79c3c8 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
@@ -102,13 +102,13 @@
                                         </div>
                                         <!--boolean-->
                                         <!-- <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'"> -->
-                                        <div class="form-group"
-                                            *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'">
-                                            <label for="exampleFormControlTextarea1">{{ requiredInput }}
-                                                <i class="icon-required-star" type="button"
-                                                    [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
-                                                    aria-hidden="true"></i></label><br />
-
+                                        <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'">
+                                            <div class="form-group">
+                                                <label for="exampleFormControlTextarea1">{{ requiredInput }}
+                                                    <i class="icon-required-star" type="button"
+                                                        [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
+                                                        aria-hidden="true"></i></label><br />
+                                            </div>
                                             <div class="custom-control custom-radio custom-control-inline">
                                                 <input [value]="true"
                                                     [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
@@ -116,7 +116,7 @@
                                                     name="{{'functionRadioInline' + i}}" class="custom-control-input">
                                                 <label class="custom-control-label"
                                                     for="{{'functionRadioInline' + i}}">True</label>
-                                            </div><br />
+                                            </div>
                                             <div class="custom-control custom-radio custom-control-inline">
                                                 <input [value]="false"
                                                     [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 0207371db..1506be07d 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -32,6 +32,15 @@ button:focus{
   border: solid 1px #ECEDF2 !important;
   color: #FF6469 !important;
 }
+.btn-secondary:not(:disabled):not(.disabled).active, 
+.btn-secondary:not(:disabled):not(.disabled):active{
+  border-color: transparent !important;
+}
+.btn-secondary:not(:disabled):not(.disabled).active:focus, 
+.btn-secondary:not(:disabled):not(.disabled):active:focus{
+  box-shadow: none !important;
+  border-color: transparent !important;
+}
 .btn:disabled:hover{
   cursor: default;
 }