diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.html b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.html
new file mode 100644
index 0000000000..c50b2cb79f
--- /dev/null
+++ b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.html
@@ -0,0 +1,3 @@
+
+ {{arg}}
+
diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.scss b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.scss
new file mode 100644
index 0000000000..cf06fdc32c
--- /dev/null
+++ b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.scss
@@ -0,0 +1,3 @@
+div {
+ white-space: nowrap;
+}
diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.spec.ts b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.spec.ts
new file mode 100644
index 0000000000..57a80fa0d9
--- /dev/null
+++ b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArgumentListComponent } from './argument-list.component';
+
+describe('ArgumentListComponent', () => {
+ let component: ArgumentListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ArgumentListComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ArgumentListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.ts b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.ts
new file mode 100644
index 0000000000..dd083bcb66
--- /dev/null
+++ b/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+ selector: 'nx-console-argument-list',
+ templateUrl: './argument-list.component.html',
+ styleUrls: ['./argument-list.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArgumentListComponent {
+ @Input() args: string[];
+}
diff --git a/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.scss b/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.scss
index bf70be3235..ec714e8e21 100644
--- a/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.scss
+++ b/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.scss
@@ -5,6 +5,7 @@ nx-console-autocomplete {
margin: 0 0 0.5rem 0;
user-select: text;
white-space: normal;
+ width: $description-width;
}
.autocomplete-container {
diff --git a/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.ts b/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.ts
index 7453c425bb..f476fd4ed7 100644
--- a/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.ts
+++ b/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.ts
@@ -85,10 +85,7 @@ export class AutocompleteComponent
if (this.control) {
this.control.setValue(value);
} else {
- this.control = new FormControl(
- value,
- this.parentFormGroup.controls[this.field.name].validator
- );
+ this.control = this.parentFormGroup.controls[this.field.name] as FormControl;
this.visibleOptions = this._options$.pipe(
switchMap((options) =>
this.control.valueChanges.pipe(
@@ -178,6 +175,7 @@ export class AutocompleteComponent
this.textInput.nativeElement.blur();
}
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
registerOnChange(fn: any) {
this.control.valueChanges
.pipe(tap(fn), takeUntil(this.destroying))
diff --git a/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss b/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
index eb04d95ab0..18c5ba14e4 100644
--- a/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
+++ b/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
@@ -5,6 +5,7 @@ nx-console-checkbox {
margin: 0;
user-select: text;
white-space: normal;
+ width: $description-width
}
.bool-control {
diff --git a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html
index 56a3525b56..d1cdef359f 100644
--- a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html
+++ b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html
@@ -3,6 +3,8 @@
*ngFor="let field of fields"
(click)="scrollToField(field.name)"
[class.active]="activeFieldName === field.name"
+ [class.valid]="isFieldValid(field.name)"
+ [class.error]="isFieldInvalid(field.name)"
[id]="field.name + '-field-tree-item'"
[style.display]="filteredFields.has(field.name) ? 'block' : 'none'"
>
diff --git a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss
index 8b92433be4..999f89c5c2 100644
--- a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss
+++ b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss
@@ -36,4 +36,11 @@
font-weight: 700;
opacity: 1;
}
+
+ &.valid {
+ color: $modified-text-color;
+ }
+ &.error {
+ color: $error-text-color;
+ }
}
diff --git a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts
index 77c7cacc95..bf8413ce3e 100644
--- a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts
+++ b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts
@@ -19,6 +19,8 @@ export class FieldTreeComponent implements OnChanges {
@Input() fields: Array