Switch Variables tab Add form to on-submit validation

Replace the reactive (per-keystroke) Angular form-state validation with
a validate-on-click flow that pairs better with the L5 inline-form
pattern.

Why: reactive validation produced two surprises in the new L5 layout.
First, "Name is required" appeared after a type-then-erase ("xx" then
backspace) because Angular's `dirty` flag never resets to `pristine` —
the field was visually identical to its initial state but flagged
invalid. Second, inline error messages below the input pushed the
form's box height past the 42px input, breaking the row's pixel
stability.

What changed:

- Drop the `<form #addForm>` wrapper, the `required`/`[appUnique]`
  validators on the Name input, and `[disabled]="!addForm.valid"` on
  the ✓ button.
- Validation now runs in the new `validateAndSave()` click handler:
  required (non-empty, non-whitespace), pattern
  (`/^[A-Za-z_][A-Za-z0-9_]*$/` — CF env var convention), and
  uniqueness against `envVarNames()`. On any failure the click
  handler populates the new `nameError` signal; on success it calls
  `envVarsDataSource.saveAdd()`.
- Render the error in an absolute-positioned `<div>` above the Name
  input, sitting in the L5 row's 12px top-padding zone — out of flow,
  so the row stays at 68px in every state (closed, open empty, open
  with required error, open with pattern error, open with duplicate
  error).
- Clear the error reactively as the user types (`(input)`) and on
  cancel (×) so a stale error doesn't carry across open/close cycles.
- Drop the `UniqueDirective` import along with the validator removal;
  uniqueness is now checked manually in `validateAndSave()`.
- Drop `[addForm]="addForm"` from the `<app-list>` — the legacy list
  no longer needs to know about the form since it lives in the L5
  sub-nav.

Tests: 6 new vitest cases covering validateAndSave (empty, whitespace,
space in name, leading digit, valid input clears prior error) and
clearNameError.

Author: nabramovitz

src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/variables-tab/variables-tab.component.html

@@ -7,35 +7,38 @@
            model bindings the legacy in-toolbar form used; save/cancel
            call dataSource methods directly. -->
       <div subNavForm class="flex items-center gap-2">
-        <form #addForm="ngForm" novalidate class="flex items-center gap-2">
-          <div class="flex flex-col">
-            <input class="bg-white rounded-md border border-gray-300 px-3 py-2 text-base text-slate-800 placeholder:text-gray-400 placeholder:opacity-70 focus:outline-none focus:ring-1 focus:ring-primary" id="envVarName" name="envVarName" #envVarName="ngModel" placeholder="Name"
-              [(ngModel)]="envVarsDataSource.addItem.name" required [appUnique]="envVarNames()">
-            @if (envVarName.errors?.required && envVarName.dirty) {
-              <div class="text-red-500 text-xs mt-0.5">Name is required</div>
-            }
-            @if (envVarName.errors?.appUnique && envVarName.dirty) {
-              <div class="text-red-500 text-xs mt-0.5">{{envVarName.errors.appUnique.message}}</div>
-            }
-          </div>
-          <div class="flex flex-col">
-            <input class="bg-white rounded-md border border-gray-300 px-3 py-2 text-base text-slate-800 placeholder:text-gray-400 placeholder:opacity-70 focus:outline-none focus:ring-1 focus:ring-primary" id="envVarValue" name="envVarValue" placeholder="Value"
-              [(ngModel)]="envVarsDataSource.addItem.value">
-          </div>
-        </form>
+        <!-- Validation runs on ✓ click, not reactively. Errors land in
+             an absolute-positioned label above the Name input (sitting
+             in the L5 row's top padding) so the row stays pixel-stable
+             whether the form is closed, open and valid, or open and
+             invalid. -->
+        <div class="relative">
+          @if (nameError()) {
+            <div class="absolute -top-3 left-1 text-red-500 text-[11px] leading-none whitespace-nowrap">
+              {{ nameError() }}
+            </div>
+          }
+          <input class="bg-white rounded-md border border-gray-300 px-3 py-2 text-base text-slate-800 placeholder:text-gray-400 placeholder:opacity-70 focus:outline-none focus:ring-1 focus:ring-primary"
+            id="envVarName" name="envVarName" placeholder="Name"
+            [(ngModel)]="envVarsDataSource.addItem.name"
+            (input)="clearNameError()">
+        </div>
+        <input class="bg-white rounded-md border border-gray-300 px-3 py-2 text-base text-slate-800 placeholder:text-gray-400 placeholder:opacity-70 focus:outline-none focus:ring-1 focus:ring-primary"
+          id="envVarValue" name="envVarValue" placeholder="Value"
+          [(ngModel)]="envVarsDataSource.addItem.value">
         <button id="addFormButtonAdd" class="btn btn-icon btn-success h-9"
                 type="button"
-                (click)="envVarsDataSource.saveAdd()" [disabled]="!addForm.valid">
+                (click)="validateAndSave()">
           <span class="material-icons">done</span>
         </button>
         <button id="addFormButtonCancel" class="btn btn-icon h-9"
                 type="button"
-                (click)="envVarsDataSource.cancelAdd()">
+                (click)="clearNameError(); envVarsDataSource.cancelAdd()">
           <span class="material-icons">clear</span>
         </button>
       </div>
     </app-list-sub-nav>
-    <app-list [addForm]="addForm" [suppressAddButton]="true"></app-list>
+    <app-list [suppressAddButton]="true"></app-list>
   </div>
 
   <div class="pt-5">

src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/variables-tab/variables-tab.component.spec.ts

@@ -56,4 +56,55 @@ describe('VariablesTabComponent', () => {
   it('envVarNames returns empty array when app signal is undefined', () => {
     expect(component.envVarNames()).toEqual([]);
   });
+
+  describe('validateAndSave()', () => {
+    beforeEach(() => {
+      // The data source's addItem is the model the form binds to. Stub it
+      // so validateAndSave can read .name without dragging in the full
+      // legacy paginator pipeline.
+      (component.envVarsDataSource as any).addItem = { name: '', value: '' };
+    });
+
+    it('flags Name is required when the name is empty', () => {
+      (component.envVarsDataSource as any).addItem.name = '';
+      component.validateAndSave();
+      expect(component.nameError()).toBe('Name is required');
+    });
+
+    it('flags Name is required when the name is whitespace-only', () => {
+      (component.envVarsDataSource as any).addItem.name = '   ';
+      component.validateAndSave();
+      expect(component.nameError()).toBe('Name is required');
+    });
+
+    it('flags an invalid pattern when the name contains spaces', () => {
+      (component.envVarsDataSource as any).addItem.name = 'bad name';
+      component.validateAndSave();
+      expect(component.nameError()).toMatch(/letters, digits, and underscores/i);
+    });
+
+    it('flags an invalid pattern when the name starts with a digit', () => {
+      (component.envVarsDataSource as any).addItem.name = '1FOO';
+      component.validateAndSave();
+      expect(component.nameError()).toMatch(/letters, digits, and underscores/i);
+    });
+
+    it('accepts a valid name and clears any prior error', () => {
+      component.nameError.set('Name is required');
+      (component.envVarsDataSource as any).addItem.name = 'MY_VAR';
+      // The legacy data source's saveAdd dispatches ngrx actions; stub it
+      // so the test stays scoped to validation behavior.
+      (component.envVarsDataSource as any).saveAdd = () => undefined;
+      component.validateAndSave();
+      expect(component.nameError()).toBe('');
+    });
+  });
+
+  describe('clearNameError()', () => {
+    it('resets the error signal when called', () => {
+      component.nameError.set('Name is required');
+      component.clearNameError();
+      expect(component.nameError()).toBe('');
+    });
+  });
 });

src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/variables-tab/variables-tab.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit, ChangeDetectionStrategy, computed, inject, Signal } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, computed, inject, signal, Signal, WritableSignal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { Store } from '@ngrx/store';
@@ -17,7 +17,6 @@ import {
   ListSubNavAddAction,
   ListSubNavComponent,
 } from '../../../../../../../../core/src/shared/components/list-sub-nav/list-sub-nav.component';
-import { UniqueDirective } from '../../../../../../../../core/src/shared/components/unique.directive';
 import { stratosEndpointGuidKey } from '../../../../../../../../store/src/entity-request-pipeline/pipeline.types';
 import {
   ListAppEnvVar,
@@ -49,7 +48,6 @@ export interface VariableTabAllEnvVarType {
     ListComponent,
     ListSubNavComponent,
     CodeBlockComponent,
-    UniqueDirective,
   ]
 })
 export class VariablesTabComponent implements OnInit {
@@ -103,6 +101,51 @@ export class VariablesTabComponent implements OnInit {
     invoke: () => this.envVarsDataSource.startAdd(),
   };
 
+  /**
+   * Validation error for the Name input — populated by validateAndSave()
+   * when the user clicks the ✓ button with an invalid Name. Empty string
+   * = no error to display. Cleared on every keystroke so the user sees
+   * the error disappear as they correct the input.
+   *
+   * Validation runs on submit, not reactively per-keystroke, to keep the
+   * L5 row pixel-stable: error sits in the row's top padding via absolute
+   * positioning and only renders after the user attempts to save.
+   */
+  readonly nameError: WritableSignal<string> = signal('');
+
+  /** CF env var names follow shell-variable convention: must start with a
+   *  letter or underscore, and contain only letters, digits, and
+   *  underscores. */
+  private static readonly NAME_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+  /** Validate the Add Variable form and either save or surface an error
+   *  in the absolute-positioned slot above the Name input. */
+  validateAndSave(): void {
+    const name = (this.envVarsDataSource.addItem?.name ?? '').trim();
+    if (!name) {
+      this.nameError.set('Name is required');
+      return;
+    }
+    if (!VariablesTabComponent.NAME_PATTERN.test(name)) {
+      this.nameError.set('Use letters, digits, and underscores only; must start with a letter or underscore');
+      return;
+    }
+    if (this.envVarNames().includes(name)) {
+      this.nameError.set(`'${name}' is already in use`);
+      return;
+    }
+    this.nameError.set('');
+    this.envVarsDataSource.saveAdd();
+  }
+
+  /** Clear any pending validation error so it doesn't linger as the user
+   *  edits. Bound to the Name input's (input) event. */
+  clearNameError(): void {
+    if (this.nameError()) {
+      this.nameError.set('');
+    }
+  }
+
   ngOnInit() {
     // appEnvVars is the paginator-backed ngrx path for all env var sections —
     // kept on the legacy path intentionally (Task 5 decision).