fix bugs with config and clean up dev options (#1558)

* fix bugs with config and clean up dev options

* dont down down arrow in logs prematurely

* change config error border to match error text red color

* change restart button color

* fix error when sideloading and update copy

* adds back in param cloning as this bug creeped up again

* make restarting text match button color

* fix version comparision for updates category

Co-authored-by: Matt Hill <matthill@Matt-M1.local>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/components/form-object/form-error.component.html

@@ -1,4 +1,4 @@
-<div [hidden]="!control.dirty && !control.touched" class="validation-error">
+<div [hidden]="!control.dirty && !control.touched" class="error-message">
   <!-- primitive -->
   <p *ngIf="control.hasError('required')">{{ spec.name }} is required</p>
 

frontend/projects/ui/src/app/components/form-object/form-label.component.html

@@ -1,24 +1,12 @@
 <ion-button
   *ngIf="data.spec.description"
   class="slot-start"
-  style="--padding-start: 0; --padding-end: 7px"
   fill="clear"
   (click)="presentAlertDescription()"
 >
   <ion-icon name="help-circle-outline" slot="icon-only" size="small"></ion-icon>
 </ion-button>
 
-<!-- this is a button for css purposes only -->
-<ion-button
-  *ngIf="data.invalid"
-  class="slot-start"
-  fill="clear"
-  size="small"
-  color="danger"
->
-  <ion-icon name="warning-outline"></ion-icon>
-</ion-button>
-
 <span>{{ data.spec.name }}</span>
 
 <ion-text color="success" *ngIf="data.new">&nbsp;(New)</ion-text>

frontend/projects/ui/src/app/components/form-object/form-object.component.html

@@ -47,7 +47,10 @@
       <!-- string or number -->
       <ng-container *ngIf="spec.type === 'string' || spec.type === 'number'">
         <!-- label -->
-        <h4 class="input-label">
+        <h4
+          class="input-label"
+          [class.validation-error]="formGroup.get(entry.key)?.errors"
+        >
           <form-label
             [data]="{
               spec: spec,
@@ -98,6 +101,12 @@
             >{{ spec.units }}</ion-note
           >
         </ion-item>
+        <form-error
+          *ngIf="formGroup.get(entry.key)?.errors"
+          [control]="$any(formGroup.get(entry.key))"
+          [spec]="spec"
+        >
+        </form-error>
       </ng-container>
       <!-- boolean or enum -->
       <ion-item
@@ -164,6 +173,8 @@
         <ion-item-divider
           (click)="toggleExpandObject(entry.key)"
           style="cursor: pointer"
+          [class.error-border]="entry.value.invalid"
+          [class.validation-error]="entry.value.invalid"
         >
           <form-label
             [data]="{
@@ -217,7 +228,10 @@
           [formArrayName]="entry.key"
         >
           <!-- label -->
-          <ion-item-divider>
+          <ion-item-divider
+            [class.error-border]="entry.value.invalid"
+            [class.validation-error]="entry.value.invalid"
+          >
             <form-label
               [data]="{
                 spec: spec,
@@ -226,8 +240,9 @@
               }"
             ></form-label>
             <ion-button
+              strong
               fill="clear"
-              color="primary"
+              color="dark"
               slot="end"
               (click)="addListItemWrapper(entry.key, spec)"
             >
@@ -235,6 +250,12 @@
               Add
             </ion-button>
           </ion-item-divider>
+          <form-error
+            *ngIf="formGroup.get(entry.key)?.errors"
+            [control]="$any(formGroup.get(entry.key))"
+            [spec]="spec"
+          >
+          </form-error>
           <!-- body -->
           <div class="nested-wrapper">
             <div
@@ -249,7 +270,11 @@
                 *ngIf="spec.subtype === 'object' || spec.subtype === 'union'"
               >
                 <!-- nested label -->
-                <ion-item button (click)="toggleExpandListObject(entry.key, i)">
+                <ion-item
+                  button
+                  (click)="toggleExpandListObject(entry.key, i)"
+                  [class.error-border]="abstractControl.invalid"
+                >
                   <form-label
                     [data]="{
                       spec: $any({
@@ -258,8 +283,7 @@
                           'Entry ' + (i + 1)
                       }),
                       new: false,
-                      edited: abstractControl.dirty,
-                      invalid: abstractControl.invalid
+                      edited: abstractControl.dirty
                     }"
                   ></form-label>
                   <ion-icon
@@ -275,7 +299,7 @@
                 </ion-item>
                 <!-- nested body -->
                 <div
-                  class="ion-padding-start"
+                  style="padding-left: 24px"
                   [id]="getElementId(entry.key, i)"
                   [ngStyle]="{
                     'max-height': objectListDisplay[entry.key][i].height,
@@ -332,6 +356,7 @@
                   >
                   </ion-input>
                   <ion-button
+                    strong
                     slot="end"
                     color="danger"
                     (click)="presentAlertDelete(entry.key, i)"
@@ -359,6 +384,7 @@
           <!-- label -->
           <p class="input-label">
             <form-label
+              [class.validation-error]="entry.value.invalid"
               [data]="{
                 spec: spec,
                 new: original?.[entry.key] === undefined,
@@ -380,14 +406,14 @@
               <ion-icon slot="icon-only" name="chevron-down"></ion-icon>
             </ion-button>
           </ion-item>
+          <form-error
+            *ngIf="formGroup.get(entry.key)?.errors"
+            [control]="$any(formGroup.get(entry.key))"
+            [spec]="spec"
+          >
+          </form-error>
         </ng-container>
       </ng-container>
-      <form-error
-        *ngIf="formGroup.get(entry.key)?.errors"
-        [control]="$any(formGroup.get(entry.key))"
-        [spec]="spec"
-      >
-      </form-error>
     </div>
   </div>
 </ion-item-group>

frontend/projects/ui/src/app/components/form-object/form-object.component.scss

@@ -1,6 +1,13 @@
 .slot-start {
   display: inline-block;
   vertical-align: middle;
+  --padding-start: 0;
+  --padding-end: 7px;
+}
+
+.error-border {
+  border-color: var(--ion-color-danger-shade);
+  --border-color: var(--ion-color-danger-shade);
 }
 
 ion-input {
@@ -17,11 +24,16 @@ ion-item-divider {
 }
 
 .nested-wrapper {
-  padding: 0 0 24px 24px;
+  padding: 0 0 16px 24px;
 }
 
 .validation-error {
+  opacity: 1;
+}
+
+.error-message {
   p {
+    margin-bottom: 4px;
     font-size: small;
     color: var(--ion-color-danger);
   }

frontend/projects/ui/src/app/components/form-object/form-object.component.ts

@@ -168,7 +168,7 @@ export class FormObjectComponent {
       ]
       this.objectListDisplay[key].push({
         height: '0px',
-        expanded: true,
+        expanded: false,
         displayAs: displayAs ? Mustache.render(displayAs, newItem.value) : '',
       })
     }
@@ -372,7 +372,6 @@ interface HeaderData {
   edited: boolean
   new: boolean
   newOptions?: boolean
-  invalid?: boolean
 }
 
 @Component({

frontend/projects/ui/src/app/components/logs/logs.page.html

@@ -1,19 +1,30 @@
-<ion-content 
+<ion-content
   [scrollEvents]="true"
   (ionScroll)="scrollEvent()"
-  style="height: 100%;"
+  style="height: 100%"
   class="ion-padding"
 >
-  <ion-infinite-scroll id="scroller" *ngIf="!loading && needInfinite" position="top" threshold="0" (ionInfinite)="loadData($event)">
-    <ion-infinite-scroll-content loadingSpinner="lines"></ion-infinite-scroll-content>
+  <ion-infinite-scroll
+    id="scroller"
+    *ngIf="!loading && needInfinite"
+    position="top"
+    threshold="0"
+    (ionInfinite)="loadData($event)"
+  >
+    <ion-infinite-scroll-content
+      loadingSpinner="lines"
+    ></ion-infinite-scroll-content>
   </ion-infinite-scroll>
 
   <text-spinner *ngIf="loading" text="Loading Logs"></text-spinner>
 
   <div id="container">
-    <div id="template" style="white-space: pre-line; font-family: monospace;"></div>
+    <div
+      id="template"
+      style="white-space: pre-line; font-family: monospace"
+    ></div>
   </div>
-  <div id="button-div" *ngIf="!loading" style="width: 100%; text-align: center;">
+  <div id="button-div" *ngIf="!loading" style="width: 100%; text-align: center">
     <ion-button *ngIf="!loadingMore" (click)="loadMore()" strong color="dark">
       Load More
       <ion-icon slot="end" name="refresh"></ion-icon>
@@ -22,18 +33,29 @@
   </div>
 
   <div
+    *ngIf="!loading"
     [ngStyle]="{
       'position': 'fixed',
-      'bottom': '50px',
-      'right': isOnBottom ? '-52px' : '30px',
+      'bottom': '36px',
+      'right': isOnBottom ? '-52px' : '36px',
       'background-color': 'var(--ion-color-medium)',
       'border-radius': '100%',
       'transition': 'right 0.4s ease-out'
     }"
   >
-    <ion-button style="width: 50px; height: 50px; --padding-start: 0px; --padding-end: 0px; --border-radius: 100%;" color="dark" (click)="scrollToBottom()" strong>
+    <ion-button
+      style="
+        width: 50px;
+        height: 50px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        --border-radius: 100%;
+      "
+      color="dark"
+      (click)="scrollToBottom()"
+      strong
+    >
       <ion-icon name="chevron-down"></ion-icon>
     </ion-button>
   </div>
-
 </ion-content>