added texts to migration, fixed container border

testgenerator-web/testgenerator-web/src/app/components/migration-overview/migration-overview.component.html

@@ -26,12 +26,13 @@
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
           <div class="ampel green"></div>
           Automatic migration
-          &nbsp;<span class="badge badge-success float-right">{{ migrationResult.greenResults.length }} modifications</span>
+          &nbsp;<span class="badge badge-success float-right">{{ migrationResult.greenResults.length }} total modifications</span>
         </button>
         
       </h2>
       <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
         <div class="accordion-body">
+          <h4 *ngIf="migrationResult.greenResults.length > 0">Flows that were completely migrated</h4>
           <p *ngFor="let greenResult of migrationResult.greenResults | filterMigrationResultWrapper: migrationResult.yellowResults:migrationResult.redResults">
            <b>{{greenResult.flow.name}}    </b>
           </p>
@@ -47,11 +48,12 @@
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
           <div class="ampel yellow"></div>
           Automatic migration, but an analysis by the process analyst is advantageous
-          &nbsp;<span class="badge badge-warning">{{ migrationResult.yellowResults.length }} modifications</span>
+          &nbsp;<span class="badge badge-warning">{{ migrationResult.yellowResults.length }} total modifications</span>
         </button>
       </h2>
       <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
         <div class="accordion-body">
+          <h4 *ngIf="migrationResult.yellowResults.length > 0">Flows that need to be checked</h4>
           <p *ngFor="let yellowResult of migrationResult.yellowResults | filterMigrationResultWrapper: migrationResult.redResults">
             <b>{{yellowResult.flow.name}}    </b>
           </p>
@@ -67,11 +69,12 @@
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
           <div class="ampel red"></div>
           Automatic migration is not possible, the process analyst must intervene
-          &nbsp;<span class="badge badge-danger">{{ migrationResult.redResults.length }} modifications</span>
+          &nbsp;<span class="badge badge-danger">{{ migrationResult.redResults.length }} total modifications</span>
         </button>
       </h2>
       <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
         <div class="accordion-body">
+          <h4 *ngIf="migrationResult.redResults.length > 0">Flows that need to be updated manually</h4>
           <p *ngFor="let redResult of migrationResult.redResults | filterMigrationResultWrapper">
            <b>{{redResult.flow.name}}    </b>
           </p>

testgenerator-web/testgenerator-web/src/app/components/test/test.component.css

 .testgen-taskvariable-container {
     margin-top: 2rem;
     margin-bottom: 2rem;
+    border: 2px solid #4b515d;
+    
+    padding: 1rem;
+    border-radius: 25px;
 }
 
 .testgen-form-radio {
@@ -15,19 +19,17 @@
 
 .testgen-endcheck {
     margin-bottom: 1rem;
-    /*border: 2px solid #4b515d;
-    
+    border: 2px solid #4b515d;
     padding: 1rem;
     border-radius: 25px;
-    */
+    
 }
 
 .testgen-mock-container {
     margin-bottom: 1rem;
-    /*border: 2px solid #4b515d;
-    
+    border: 2px solid #4b515d;
     padding: 1rem;
-    border-radius: 25px;*/
+    border-radius: 25px;
 }
 
 .btn {

testgenerator-web/testgenerator-web/src/app/components/test/test.component.html

@@ -24,6 +24,7 @@
 
                 <div [formGroupName]="'mocks'" class="testgen-mock-container">
                     <h3 i18n="mock header">Mocks</h3>
+                    <hr />
                     <div *ngFor="let delegateService of flowInfo.delegateServices; let i=index">
                         <div class="form-row">
                             <div class="col-md-6">
@@ -52,11 +53,11 @@
                 </div>
 
                 <div formArrayName="taskVariableList">
-                    <div class="testgen-taskvariable-container" *ngFor="let taskVariable of testcase.taskVariableList; let i=index">
-                        <hr *ngIf="i > 0">
-                        <div [ngClass]="setClasses(taskVariable.task)" [formGroupName]="i">
+                    <div class="testgen-taskvariable-container" [ngClass]="setClasses(taskVariable.task)" *ngFor="let taskVariable of testcase.taskVariableList; let i=index">
+                        
+                        <div [formGroupName]="i">
                             <h3>{{taskVariable.task}}</h3>
-
+                            <hr />
                             <div *ngFor="let variableValue of taskVariable.variableValues; let v=index">
                                 <!--String and Integer Fields-->
                                 <div class="md-form form-group" *ngIf="(dataTypes.get(variableValue.variable) == 'java.lang.Integer') || dataTypes.get(variableValue.variable) == 'java.lang.String'">