From e415d55e4155f1810259f4c6056dd591b1a995a3 Mon Sep 17 00:00:00 2001
From: Lukas Harzenetter <lharzenetter@gmx.de>
Date: Wed, 25 Apr 2018 16:52:10 +0200
Subject: [PATCH] Add tooltip to explain versioning

---
 .../addComponent.component.html                    | 14 ++++++++++++--
 .../addComponent.component.ts                      |  8 +++++++-
 .../addComponent.moudle.ts                         |  3 ++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.html b/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.html
index 6aa2dd6227..b837ae085d 100644
--- a/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.html
+++ b/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.html
@@ -48,7 +48,17 @@
                             </div>
                         </div>
                         <br>
-                        <label for="newComponentVersion">Component version</label>
+                        <label for="newComponentVersion">
+                            Component version
+                        </label>
+                        <ng-template #versionExplanation>
+                            The component version specifies the components' external version. For example, Tomcat in version 8 has a
+                            component version 8.<br>
+                            The management version (winery & wip) is automatically set to 1. For example the final id for Tomcat with component
+                            version 8 is: <code style="color: black">Tomcat_8-w1-wip1</code>.<br>
+                            The final name is displayed below in the 'Final name' field.
+                        </ng-template>
+                        <i class="fa fa-question-circle" [tooltip]="versionExplanation" containerClass="versionTooltip"></i>
                         <input type="text"
                                id="newComponentVersion"
                                name="newComponentVersion"
@@ -71,7 +81,7 @@
                         </div>
                         <br>
                         <label for="finalName">Final name</label>
-                        <input class="form-control" id="finalName" [value]="newComponentFinalName" readonly>
+                        <code class="form-control" id="finalName">{{ newComponentFinalName }}</code>
                     </div>
                     <br>
                     <div class="form-group" *ngIf="types">
diff --git a/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.ts b/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.ts
index 4e6e3b70ac..72d38d95f7 100644
--- a/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.ts
+++ b/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.component.ts
@@ -22,7 +22,7 @@ import { AbstractControl, NgForm, ValidatorFn } from '@angular/forms';
 import { Utils } from '../wineryUtils/utils';
 import { isNullOrUndefined } from 'util';
 import { SectionData } from '../section/sectionData';
-import { ModalDirective } from 'ngx-bootstrap';
+import { ModalDirective, TooltipConfig } from 'ngx-bootstrap';
 import { WineryNamespaceSelectorComponent } from '../wineryNamespaceSelector/wineryNamespaceSelector.component';
 import { InheritanceService } from '../instance/sharedComponents/inheritance/inheritance.service';
 import { WineryVersion } from '../wineryInterfaces/wineryVersion';
@@ -37,6 +37,12 @@ import { catchError, retry } from 'rxjs/operators';
     providers: [
         SectionService,
         InheritanceService,
+        {
+            provide: TooltipConfig,
+            useFactory: () => {
+                return Object.assign(new TooltipConfig(), { placement: 'right' });
+            }
+        }
     ]
 })
 
diff --git a/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.moudle.ts b/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.moudle.ts
index 93342e42ab..517b0d370e 100644
--- a/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.moudle.ts
+++ b/org.eclipse.winery.repository.ui/src/app/wineryAddComponentModule/addComponent.moudle.ts
@@ -23,7 +23,7 @@ import { WineryDuplicateValidatorModule } from '../wineryValidators/wineryDuplic
 import { RouterModule } from '@angular/router';
 import { WineryLoaderModule } from '../wineryLoader/wineryLoader.module';
 import { SelectModule } from 'ng2-select';
-import { AlertModule } from 'ngx-bootstrap';
+import { AlertModule, TooltipModule } from 'ngx-bootstrap';
 
 @NgModule({
     imports: [
@@ -32,6 +32,7 @@ import { AlertModule } from 'ngx-bootstrap';
         RouterModule,
         SelectModule,
         AlertModule.forRoot(),
+        TooltipModule,
         WineryModalModule,
         WineryLoaderModule,
         WineryNotificationModule,