From 52a91372c3408739180d5dac7cbd8e184890edd2 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Wed, 7 Apr 2021 14:02:07 -0500
Subject: [PATCH] feat: shows argument list and highlights changed and invalid
 fields in menu

---
 .../argument-list.component.html              |  3 +
 .../argument-list.component.scss              |  3 +
 .../argument-list.component.spec.ts           | 25 ++++++
 .../argument-list/argument-list.component.ts  | 11 +++
 .../autocomplete/autocomplete.component.scss  |  1 +
 .../autocomplete/autocomplete.component.ts    |  6 +-
 .../src/lib/checkbox/checkbox.component.scss  |  1 +
 .../lib/field-tree/field-tree.component.html  |  2 +
 .../lib/field-tree/field-tree.component.scss  |  7 ++
 .../lib/field-tree/field-tree.component.ts    | 10 +++
 .../src/lib/input/input.component.scss        |  1 +
 .../multiple-select.component.scss            |  1 +
 .../src/lib/select/select.component.scss      |  1 +
 .../src/lib/vscode-ui-components.module.ts    |  3 +
 .../lib/task-execution-form.component.html    | 80 ++++++++++---------
 .../lib/task-execution-form.component.scss    |  3 +-
 .../src/lib/task-execution-form.component.ts  | 49 ++++++++++++
 libs/vscode-ui/styles/src/lib/_variables.scss |  2 +
 18 files changed, 166 insertions(+), 43 deletions(-)
 create mode 100644 libs/vscode-ui/components/src/lib/argument-list/argument-list.component.html
 create mode 100644 libs/vscode-ui/components/src/lib/argument-list/argument-list.component.scss
 create mode 100644 libs/vscode-ui/components/src/lib/argument-list/argument-list.component.spec.ts
 create mode 100644 libs/vscode-ui/components/src/lib/argument-list/argument-list.component.ts

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 @@
+<div *ngFor="let arg of args">
+  {{arg}}
+</div>
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<ArgumentListComponent>;
+
+  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<Option>;
   @Input() activeFieldName: string;
   @Input() filteredFields: Set<string>;
+  @Input() validFields: {[name: string]: string[] | string | number | boolean};
+  @Input() invalidFields: {[name: string]: string[] | string | number | boolean};
 
   userSelectedField?: string;
 
@@ -73,4 +75,12 @@ export class FieldTreeComponent implements OnChanges {
       });
     }
   }
+
+  isFieldValid(fieldName: string): boolean {
+    return this.validFields && !!this.validFields[fieldName];
+  }
+
+  isFieldInvalid(fieldName: string): boolean {
+    return this.invalidFields && this.invalidFields[fieldName] !== undefined;
+  }
 }
diff --git a/libs/vscode-ui/components/src/lib/input/input.component.scss b/libs/vscode-ui/components/src/lib/input/input.component.scss
index 9054a2305c..b457ae6766 100644
--- a/libs/vscode-ui/components/src/lib/input/input.component.scss
+++ b/libs/vscode-ui/components/src/lib/input/input.component.scss
@@ -4,6 +4,7 @@
   margin: 0 0 0.5rem 0;
   user-select: text;
   white-space: normal;
+  width: $input-width
 }
 
 input {
diff --git a/libs/vscode-ui/components/src/lib/multiple-select/multiple-select.component.scss b/libs/vscode-ui/components/src/lib/multiple-select/multiple-select.component.scss
index c12719d242..d6a1457cf5 100644
--- a/libs/vscode-ui/components/src/lib/multiple-select/multiple-select.component.scss
+++ b/libs/vscode-ui/components/src/lib/multiple-select/multiple-select.component.scss
@@ -4,6 +4,7 @@
   margin: 0 0 0.5rem 0;
   user-select: text;
   white-space: normal;
+  width: $description-width
 }
 
 select {
diff --git a/libs/vscode-ui/components/src/lib/select/select.component.scss b/libs/vscode-ui/components/src/lib/select/select.component.scss
index d50a6610cf..38be0bd787 100644
--- a/libs/vscode-ui/components/src/lib/select/select.component.scss
+++ b/libs/vscode-ui/components/src/lib/select/select.component.scss
@@ -4,6 +4,7 @@
   margin: 0 0 0.5rem 0;
   user-select: text;
   white-space: normal;
+  width: $description-width
 }
 
 select {
diff --git a/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts b/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts
index de6e37fda0..6450eb3302 100644
--- a/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts
+++ b/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts
@@ -9,6 +9,7 @@ import { FieldComponent } from './field/field.component';
 import { FieldTreeComponent } from './field-tree/field-tree.component';
 import { MultipleSelectComponent } from './multiple-select/multiple-select.component';
 import { FormatTaskPipe } from './format-task/format-task.pipe';
+import { ArgumentListComponent } from './argument-list/argument-list.component';
 
 @NgModule({
   imports: [CommonModule, ReactiveFormsModule],
@@ -21,6 +22,7 @@ import { FormatTaskPipe } from './format-task/format-task.pipe';
     FieldTreeComponent,
     MultipleSelectComponent,
     FormatTaskPipe,
+    ArgumentListComponent,
   ],
   exports: [
     AutocompleteComponent,
@@ -31,6 +33,7 @@ import { FormatTaskPipe } from './format-task/format-task.pipe';
     FieldTreeComponent,
     MultipleSelectComponent,
     FormatTaskPipe,
+    ArgumentListComponent,
   ],
 })
 export class VscodeUiComponentsModule {}
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html
index aa012a05dc..95f32f5fd3 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html
@@ -7,8 +7,8 @@
   >
     <div class="form-header-container" #formHeaderContainer>
       <div class="form-header">
-        <div class="fx-align-start-center fx-row fx-flex">
-          <div class="filter-container fx-flex fx-align-start-center fx-row">
+        <div class="fx-align-start-center fx-row">
+          <div class="filter-container fx-align-start-center fx-flex">
             <input
               type="text"
               placeholder="Search flags"
@@ -51,10 +51,12 @@
           [activeFieldName]="activeFieldName$ | async"
           [fields]="taskExecForm.architect.options"
           [filteredFields]="filteredFields"
+          [validFields]="validFields$ | async"
+          [invalidFields]="invalidFields$ | async"
         ></vscode-ui-field-tree>
-        <form class="fields fx-flex" [formGroup]="taskExecForm.form">
-          <div class="title-container fx-row">
-            <span class="fx-flex title">
+        <form class="fields" [formGroup]="taskExecForm.form">
+          <div class="title-container">
+            <span class="title">
               {{ taskExecForm.architect | formatTask }}
               <ng-container
                 *ngIf="
@@ -69,41 +71,45 @@
               </ng-container>
             </span>
           </div>
+          <div class="fx-row">
+            <div>
+              <ng-container *ngIf="defaultValues$ | async as defaultValues">
+                <nx-console-field
+                  [id]="field.name + '-nx-console-field'"
+                  *ngFor="let field of taskExecForm.architect.options"
+                  [class.changed-from-default]="
+                    defaultValues[field.name] !==
+                    taskExecForm.form.value[field.name]
+                  "
+                  [field]="field"
+                  [formControlName]="field.name"
+                  [style.display]="
+                    filteredFields.has(field.name) ? 'block' : 'none'
+                  "
+                ></nx-console-field>
+              </ng-container>
 
-          <ng-container *ngIf="defaultValues$ | async as defaultValues">
-            <nx-console-field
-              [id]="field.name + '-nx-console-field'"
-              *ngFor="let field of taskExecForm.architect.options"
-              [class.changed-from-default]="
-                defaultValues[field.name] !==
-                taskExecForm.form.value[field.name]
-              "
-              [field]="field"
-              [formControlName]="field.name"
-              [style.display]="
-                filteredFields.has(field.name) ? 'block' : 'none'
-              "
-            ></nx-console-field>
-          </ng-container>
-
-          <div
-            class="filter-flags-message"
-            *ngIf="filteredFields.size === 0"
-            #noMatch
-          >
-            <div *ngIf="taskExecForm.architect.options.length; else noFlags">
-              No flags found -
-              <span
-                class="clear-search"
-                (click)="filterFieldsControl.setValue('')"
+              <div
+                class="filter-flags-message"
+                *ngIf="filteredFields.size === 0"
+                #noMatch
               >
-                Clear search
-              </span>
-            </div>
+                <div *ngIf="taskExecForm.architect.options.length; else noFlags">
+                  No flags found -
+                  <span
+                    class="clear-search"
+                    (click)="filterFieldsControl.setValue('')"
+                  >
+                    Clear search
+                  </span>
+                </div>
 
-            <ng-template #noFlags>
-              This command has no flags to set
-            </ng-template>
+                <ng-template #noFlags>
+                  This command has no flags to set
+                </ng-template>
+              </div>
+            </div>
+            <nx-console-argument-list [args]="runCommandArguments$ | async"></nx-console-argument-list>
           </div>
         </form>
       </div>
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss
index 256e37f402..579ac17ac7 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss
@@ -28,7 +28,6 @@ $offset-with-configurations: $offset-without-configurations +
   border: $input-border-width solid var(--vscode-settings-textInputBorder);
   color: #fff;
   text-align: center;
-  line-height: 30px;
   cursor: pointer;
   transition: background ease-in-out 0.1s;
   margin-left: 1rem;
@@ -66,7 +65,7 @@ vscode-ui-field-tree {
 }
 
 form {
-  margin-left: 206px;
+  margin-left: 190px;
   padding-right: $host-padding-right - $scrollbar-width;
 }
 
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts
index ae74809cd0..cbf89c8ca7 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts
@@ -19,6 +19,7 @@ import {
 import {
   BehaviorSubject,
   combineLatest,
+  merge,
   Observable,
   ReplaySubject,
   Subscription,
@@ -32,7 +33,9 @@ import {
   tap,
   flatMap,
   mapTo,
+  mergeMap,
   filter,
+  withLatestFrom,
 } from 'rxjs/operators';
 
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
@@ -160,6 +163,15 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     shareReplay()
   );
 
+  runCommandArguments$ = this.taskExecForm$.pipe(
+    mergeMap((taskExecForm) => taskExecForm.form.valueChanges.pipe(map(() => taskExecForm))),
+    map(({ architect, form }) => this.serializeArgs(form.value, architect))
+  );
+
+  validFields$ = this.getValidFields$(true);
+
+  invalidFields$ = this.getValidFields$(false);
+
   dryRunSubscription?: Subscription;
 
   constructor(
@@ -356,7 +368,44 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     });
   }
 
+  getValidFields$(
+    valid: boolean
+  ): Observable<{ [name: string]: string[] | string | number | boolean }> {
+    return this.taskExecForm$.pipe(
+      mergeMap((taskExecForm) =>
+        merge(
+          taskExecForm.form.valueChanges,
+          taskExecForm.form.statusChanges
+        ).pipe(
+          startWith(taskExecForm),
+          map(() => taskExecForm)
+        )
+      ),
+      withLatestFrom(this.defaultValues$),
+      map(([{ form, architect }, defaultValues]) => {
+        return architect.options
+          .filter((option) => {
+            const control = form.controls[option.name];
+            return (
+              (valid &&
+                control.valid &&
+                // touched is not working with checkbox, so ignore touched and just check !== defaultValue
+                // control.touched &&
+                control.value !== defaultValues[option.name]) ||
+              // invalid and touched (checkbox is always valid as true/false)
+              (!valid && control.touched && control.invalid)
+            );
+          })
+          .reduce((options, option) => ({
+            ...options,
+            [option.name]: form.controls[option.name].value,
+          }), {});
+      })
+    );
+  }
+
   private serializeArgs(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: { [p: string]: any },
     architect: TaskExecutionSchema,
     configurationName?: string
diff --git a/libs/vscode-ui/styles/src/lib/_variables.scss b/libs/vscode-ui/styles/src/lib/_variables.scss
index 3971a1b76b..35283511a1 100644
--- a/libs/vscode-ui/styles/src/lib/_variables.scss
+++ b/libs/vscode-ui/styles/src/lib/_variables.scss
@@ -1,6 +1,7 @@
 $input-border-width: 1px;
 $input-border-radius-size: 3px;
 $input-width: 320px;
+$description-width: 340px;
 $input-height: 26px;
 $button-primary-color: var(
   --vscode-settings-modifiedItemIndicator,
@@ -12,6 +13,7 @@ $button-primary-color: var(
 $scroll-bar-width: 12px;
 
 $primary-text-color: var(--vscode-settings-headerForeground);
+$modified-text-color: var(--vscode-gitDecoration-modifiedResourceForeground, #e2c08d);
 $error-text-color: var(--vscode-errorForeground, #f00);
 
 $error-border-color: var(--vscode-inputValidation-errorBorder, #f00);