No manual inputs required.
} @else {
+
@if (globalExecutionInputs().length) {
-
-
Globals
-
Provide the shared flow-level inputs once before execution starts.
+
+
Flow inputs
+
+ {{ providedGlobalCount() }} of {{ globalExecutionInputs().length }} provided
+
@for (executionInput of globalExecutionInputs(); track executionInput.key) {
-
-
-
-
{{ executionInput.subtitle }}
-
-
Type: {{ inputTypeLabel(executionInput) }}
-
- @if (isFileInput(executionInput)) {
-
- } @else {
- @if (isMultipleInput(executionInput)) {
-
- @for (textValue of textValues(executionInput); track $index) {
-
-
- {{ executionInput.subtitle }} {{ $index + 1 }}
-
-
-
-
- }
-
-
-
-
-
- } @else {
-
-
- {{ executionInput.subtitle }}
-
-
-
-
-
-
- }
- }
-
- @if (isInputSaving(executionInput.key)) {
-
Saving...
- }
- @if (inputSavingError(executionInput.key); as errorMessage) {
-
{{ errorMessage }}
- }
-
+
}
}
@if (nodeExecutionInputs().length) {
-
Manual Inputs
- }
+
Manual inputs
@for (executionInput of nodeExecutionInputs(); track executionInput.key) {
-
-
-
-
{{ executionInput.subtitle }}
-
-
Type: {{ inputTypeLabel(executionInput) }}
+
+ }
+ }
- @if (isFileInput(executionInput)) {
-
- } @else {
- @if (isMultipleInput(executionInput)) {
-
- @for (textValue of textValues(executionInput); track $index) {
-
-
- {{ executionInput.subtitle }} {{ $index + 1 }}
-
-
-
-
-
- }
-
-
-
-
-
-
-
+ @if (editableInputs().length && !readOnly()) {
+
}
}
+
+
+
+
+
diff --git a/src/app/shared/task-execution-inputs-panel/task-execution-inputs-panel.spec.ts b/src/app/shared/task-execution-inputs-panel/task-execution-inputs-panel.spec.ts
new file mode 100644
index 0000000..cb62b08
--- /dev/null
+++ b/src/app/shared/task-execution-inputs-panel/task-execution-inputs-panel.spec.ts
@@ -0,0 +1,121 @@
+import { TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+
+import { EditableExecutionInput, TaskExecutionInputsPanelComponent } from './task-execution-inputs-panel';
+
+function makeInput(overrides: Partial
= {}): EditableExecutionInput {
+ return {
+ key: 'global:role',
+ scope: 'global',
+ nodeId: null,
+ inputName: 'role',
+ title: 'Flow',
+ subtitle: 'role',
+ type: 'TEXT',
+ multiple: false,
+ value: '',
+ ...overrides
+ };
+}
+
+async function build(inputs: EditableExecutionInput[], options: {
+ pendingKeys?: string[];
+ missing?: string[];
+ saving?: Record;
+ readOnly?: boolean;
+} = {}) {
+ await TestBed.configureTestingModule({ imports: [TaskExecutionInputsPanelComponent] }).compileComponents();
+
+ const fixture = TestBed.createComponent(TaskExecutionInputsPanelComponent);
+ fixture.componentRef.setInput('editableInputs', inputs);
+ fixture.componentRef.setInput('pendingKeys', options.pendingKeys ?? []);
+ fixture.componentRef.setInput('missingGlobalInputNames', options.missing ?? []);
+ fixture.componentRef.setInput('savingInputs', options.saving ?? {});
+ fixture.componentRef.setInput('readOnly', options.readOnly ?? false);
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ return fixture;
+}
+
+describe('TaskExecutionInputsPanelComponent', () => {
+ afterEach(() => TestBed.resetTestingModule());
+
+ it('reports how many flow inputs are still missing', async () => {
+ const fixture = await build(
+ [makeInput({ key: 'g:a', inputName: 'a' }), makeInput({ key: 'g:b', inputName: 'b' })],
+ { missing: ['b'] }
+ );
+
+ expect(fixture.componentInstance.providedGlobalCount()).toBe(1);
+ expect(fixture.nativeElement.textContent).toContain('1 of 2 provided');
+ });
+
+ it('marks only the inputs the backend still considers unsatisfied', async () => {
+ const provided = makeInput({ key: 'g:a', inputName: 'a' });
+ const missing = makeInput({ key: 'g:b', inputName: 'b' });
+ const fixture = await build([provided, missing], { missing: ['b'] });
+
+ expect(fixture.componentInstance.isMissing(provided)).toBe(false);
+ expect(fixture.componentInstance.isMissing(missing)).toBe(true);
+ });
+
+ it('never marks a node input as missing, since only globals gate the start', async () => {
+ const nodeInput = makeInput({ key: 'n:x', scope: 'node', inputName: 'x', title: 'Reviewer' });
+ const fixture = await build([nodeInput], { missing: ['x'] });
+
+ expect(fixture.componentInstance.isMissing(nodeInput)).toBe(false);
+ });
+
+ it('offers a single save for every pending edit', async () => {
+ const fixture = await build(
+ [makeInput({ key: 'g:a', inputName: 'a' }), makeInput({ key: 'g:b', inputName: 'b' })],
+ { pendingKeys: ['g:a', 'g:b'] }
+ );
+
+ expect(fixture.componentInstance.pendingCount()).toBe(2);
+ expect(fixture.componentInstance.canSubmitAll()).toBe(true);
+ expect(fixture.nativeElement.textContent).toContain('2 unsaved changes');
+
+ const submitted = vi.fn();
+ fixture.componentInstance.submitAllInputs.subscribe(submitted);
+ fixture.componentInstance.submitAll();
+ expect(submitted).toHaveBeenCalledTimes(1);
+ });
+
+ it('says everything is saved, and refuses to save, with nothing pending', async () => {
+ const fixture = await build([makeInput()], {});
+
+ expect(fixture.componentInstance.canSubmitAll()).toBe(false);
+ expect(fixture.nativeElement.textContent).toContain('All changes saved');
+
+ const submitted = vi.fn();
+ fixture.componentInstance.submitAllInputs.subscribe(submitted);
+ fixture.componentInstance.submitAll();
+ expect(submitted).not.toHaveBeenCalled();
+ });
+
+ it('does not let a second save start while one is in flight', async () => {
+ const fixture = await build([makeInput({ key: 'g:a', inputName: 'a' })],
+ { pendingKeys: ['g:a'], saving: { 'g:a': true } });
+
+ expect(fixture.componentInstance.anySaving()).toBe(true);
+ expect(fixture.componentInstance.canSubmitAll()).toBe(false);
+ });
+
+ it('hides the save bar when the panel is read-only', async () => {
+ const fixture = await build([makeInput()], { readOnly: true, pendingKeys: ['global:role'] });
+
+ expect(fixture.nativeElement.querySelector('.inputs-panel-savebar')).toBeNull();
+ expect(fixture.componentInstance.canSubmitAll()).toBe(false);
+ });
+
+ it('renders one row per item of a multi-value input, plus a way to add one', async () => {
+ const fixture = await build([makeInput({ multiple: true, type: 'TEXT', value: ['one', 'two'] })]);
+
+ expect(fixture.nativeElement.querySelectorAll('.inputs-panel-row').length).toBe(2);
+ expect(fixture.nativeElement.querySelector('.inputs-panel-add')).not.toBeNull();
+ // The type label says it is a list, which is what the editor is offering.
+ expect(fixture.nativeElement.textContent).toContain('TEXT[]');
+ });
+});
diff --git a/src/app/shared/task-execution-inputs-panel/task-execution-inputs-panel.ts b/src/app/shared/task-execution-inputs-panel/task-execution-inputs-panel.ts
index 0dd724e..70c275f 100644
--- a/src/app/shared/task-execution-inputs-panel/task-execution-inputs-panel.ts
+++ b/src/app/shared/task-execution-inputs-panel/task-execution-inputs-panel.ts
@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { TaskExecutionAuthorizationRequirement } from '@models/task-execution';
@@ -20,8 +22,9 @@ export type EditableExecutionInput = {
@Component({
selector: 'app-task-execution-inputs-panel',
- imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+ imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTooltipModule],
templateUrl: './task-execution-inputs-panel.html',
+ styleUrl: './task-execution-inputs-panel.css',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TaskExecutionInputsPanelComponent {
@@ -33,17 +36,52 @@ export class TaskExecutionInputsPanelComponent {
readonly savingInputs = input>({});
readonly savingErrors = input>({});
readonly readOnly = input(false);
+ /** Keys the user has edited but not saved; drives the single Save at the foot of the panel. */
+ readonly pendingKeys = input([]);
+ /** Names the backend still considers unsatisfied - the ones actually blocking the start. */
+ readonly missingGlobalInputNames = input([]);
readonly textInputChange = output<{ input: EditableExecutionInput; value: string | string[] }>();
readonly textInputSubmit = output();
readonly fileInputChange = output<{ input: EditableExecutionInput; files: File[] }>();
readonly authorizationValueChange = output<{ requirement: TaskExecutionAuthorizationRequirement; value: string }>();
readonly authorizationSubmit = output();
+ readonly submitAllInputs = output();
readonly globalExecutionInputs = computed(() => this.editableInputs().filter((input) => input.scope === 'global'));
readonly nodeExecutionInputs = computed(() => this.editableInputs().filter((input) => input.scope === 'node'));
private readonly authorizationVisibility = new Map();
+ private readonly pendingKeySet = computed(() => new Set(this.pendingKeys()));
+ private readonly missingNameSet = computed(() => new Set(this.missingGlobalInputNames()));
+
+ readonly pendingCount = computed(() => this.editableInputs()
+ .filter((input) => this.pendingKeySet().has(input.key)).length);
+
+ readonly anySaving = computed(() => Object.values(this.savingInputs()).some(Boolean));
+
+ readonly canSubmitAll = computed(() =>
+ !this.readOnly() && this.pendingCount() > 0 && !this.anySaving());
+
+ /** Completion is reported for globals only: those are what gate the start. */
+ readonly providedGlobalCount = computed(() => this.globalExecutionInputs()
+ .filter((input) => !this.isMissing(input)).length);
+
+ isPending(input: EditableExecutionInput): boolean {
+ return this.pendingKeySet().has(input.key);
+ }
+
+ isMissing(input: EditableExecutionInput): boolean {
+ return input.scope === 'global' && this.missingNameSet().has(input.inputName);
+ }
+
+ submitAll(event?: Event) {
+ event?.preventDefault();
+ event?.stopPropagation();
+ if (!this.canSubmitAll()) return;
+ this.submitAllInputs.emit();
+ }
+
isFileInput(input: EditableExecutionInput): boolean {
return input.type.includes('FILE') || input.type.includes('BINARY');
}
diff --git a/src/app/shared/task-execution-viewer/task-execution-viewer.html b/src/app/shared/task-execution-viewer/task-execution-viewer.html
index 8115260..1744061 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.html
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.html
@@ -399,10 +399,13 @@
[savingInputs]="savingInputs()"
[savingErrors]="savingErrors()"
[readOnly]="inputsReadOnly()"
+ [pendingKeys]="pendingInputKeys()"
+ [missingGlobalInputNames]="missingGlobalInputNames()"
(authorizationValueChange)="onAuthorizationValueChange($event.requirement, $event.value)"
(authorizationSubmit)="submitAuthorization($event)"
(textInputChange)="onTextInputChange($event.input, $event.value)"
(textInputSubmit)="submitTextInput($event)"
+ (submitAllInputs)="submitAllTextInputs()"
(fileInputChange)="onFileInputChange($event.input, $event.files)">
} @else if (activeAsideTab() === 'intermediate') {
diff --git a/src/app/shared/task-execution-viewer/task-execution-viewer.ts b/src/app/shared/task-execution-viewer/task-execution-viewer.ts
index 8e2089b..f1af8bd 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.ts
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.ts
@@ -137,6 +137,12 @@ export class TaskExecutionViewerComponent implements OnDestroy {
readonly savingInputs = signal>({});
readonly savingErrors = signal>({});
readonly pendingTextInputs = signal>({});
+
+ /** Edited but not yet sent, so the panel can offer one Save for the lot. */
+ readonly pendingInputKeys = computed(() => Object.keys(this.pendingTextInputs()));
+
+ /** The backend's own answer on what still blocks the start, by input name. */
+ readonly missingGlobalInputNames = computed(() => this.execution()?.missingGlobalInputKeys ?? []);
readonly pendingAuthorizationValues = signal>({});
readonly savingAuthorizations = signal>({});
readonly authorizationErrors = signal>({});
@@ -1232,6 +1238,18 @@ export class TaskExecutionViewerComponent implements OnDestroy {
this.authorizationErrors.update((current) => ({ ...current, [key]: message }));
}
+ /**
+ * Saves every edited input in one go. Each still goes through the same single-input request the
+ * per-field button used - only the trigger is shared - so a failure is reported per input.
+ */
+ submitAllTextInputs() {
+ if (this.inputsReadOnly()) return;
+ const pending = new Set(Object.keys(this.pendingTextInputs()));
+ this.editableInputs()
+ .filter((input) => pending.has(input.key))
+ .forEach((input) => this.submitTextInput(input));
+ }
+
private sendPreparedTextInput(input: EditableExecutionInput, executionId: string) {
if (this.inputsReadOnly() || this.execution()?.id !== executionId) return;