Add warning hint and value validation to correction value rule

apache · Oct 17, 2023 · 4b84368 · 4b84368
1 parent 21675dc
commit 4b84368
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 26 deletions.
diff --git a/...ents/edit-value-transformation/edit-correction-value/edit-correction-value.component.html b/...ents/edit-value-transformation/edit-correction-value/edit-correction-value.component.html
@@ -16,33 +16,51 @@
   ~
   -->
 
-<div fxLayout="row" fxLayoutAlign="start">
-    <div fxFlex="70" fxLayoutAlign="start center">
-        <mat-form-field class="w-100" style="margin-right: 10px" color="accent">
-            <input
-                matInput
-                name="correction"
-                placeholder="Correction Value"
-                [(ngModel)]="cachedProperty.additionalMetadata.correctionValue"
-                (change)="valueChanged()"
-                data-cy="connect-schema-correction-value"
-            />
-        </mat-form-field>
+<div fxLayout="column">
+    <div class="warning-message">
+        <p class="text-center">
+            Adding a correction value might have implications on the data type.
+            <br />
+            Make sure to modify the data type above if needed.
+        </p>
     </div>
-    <div fxFlex="30" fxLayoutAlign="start center">
-        <mat-form-field class="w-100" color="accent">
-            <mat-select
-                required
-                placeholder="Math Operator"
-                [(ngModel)]="cachedProperty.additionalMetadata.operator"
-                (selectionChange)="valueChanged()"
-                [disabled]="!cachedProperty.additionalMetadata.correctionValue"
-                data-cy="connect-schema-correction-operator"
+    <div fxLayout="row" fxLayoutAlign="start">
+        <div fxFlex="50" fxLayoutAlign="start center">
+            <mat-form-field
+                class="w-100"
+                style="margin-right: 10px"
+                color="accent"
             >
-                <mat-option [value]="op.value" *ngFor="let op of operators">
-                    {{ op.viewValue }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
+                <input
+                    matInput
+                    type="number"
+                    name="correction"
+                    placeholder="Correction Value"
+                    [(ngModel)]="
+                        cachedProperty.additionalMetadata.correctionValue
+                    "
+                    (change)="valueChanged()"
+                    data-cy="connect-schema-correction-value"
+                />
+            </mat-form-field>
+        </div>
+        <div fxFlex="50" fxLayoutAlign="start center">
+            <mat-form-field class="w-100" color="accent">
+                <mat-select
+                    required
+                    placeholder="Math Operator"
+                    [(ngModel)]="cachedProperty.additionalMetadata.operator"
+                    (selectionChange)="valueChanged()"
+                    [disabled]="
+                        !cachedProperty.additionalMetadata.correctionValue
+                    "
+                    data-cy="connect-schema-correction-operator"
+                >
+                    <mat-option [value]="op.value" *ngFor="let op of operators">
+                        {{ op.viewValue }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
     </div>
 </div>
diff --git a/...ents/edit-value-transformation/edit-correction-value/edit-correction-value.component.scss b/...ents/edit-value-transformation/edit-correction-value/edit-correction-value.component.scss
@@ -15,3 +15,11 @@
  * limitations under the License.
  *
  */
+
+.warning-message {
+    margin-bottom: 10px;
+    padding: 5px;
+    border: 1px solid var(--color-warn);
+    background: var(--color-bg-1);
+    font-size: 14px;
+}