From 5dd1c706ec019a6f1b7fb3c688b0a69f13921004 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Wed, 7 Apr 2021 14:02:07 -0500
Subject: [PATCH 01/12] 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 +
 .../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 +
 17 files changed, 164 insertions(+), 39 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/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 9555f9b230..9aec9e2e80 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
@@ -10,6 +10,7 @@ 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 { FieldItemsPipe } from './field-items/field-items.pipe';
+import { ArgumentListComponent } from './argument-list/argument-list.component';
 
 @NgModule({
   imports: [CommonModule, ReactiveFormsModule],
@@ -23,6 +24,7 @@ import { FieldItemsPipe } from './field-items/field-items.pipe';
     MultipleSelectComponent,
     FormatTaskPipe,
     FieldItemsPipe,
+    ArgumentListComponent,
   ],
   exports: [
     AutocompleteComponent,
@@ -33,6 +35,7 @@ import { FieldItemsPipe } from './field-items/field-items.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);

From 878e7d9dd75911cf3716bf6400cbd211a04cd283 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Fri, 23 Apr 2021 15:50:18 -0500
Subject: [PATCH 02/12] row-reverse to improve semantic layout and allow
 selection of command with arguments

---
 .../src/lib/task-execution-form.component.html   |  4 ++--
 libs/vscode-ui/styles/src/lib/_flex.scss         | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

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 95f32f5fd3..36e33436b1 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
@@ -71,7 +71,8 @@
               </ng-container>
             </span>
           </div>
-          <div class="fx-row">
+          <div class="fx-row-reverse">
+            <nx-console-argument-list [args]="runCommandArguments$ | async"></nx-console-argument-list>
             <div>
               <ng-container *ngIf="defaultValues$ | async as defaultValues">
                 <nx-console-field
@@ -109,7 +110,6 @@
                 </ng-template>
               </div>
             </div>
-            <nx-console-argument-list [args]="runCommandArguments$ | async"></nx-console-argument-list>
           </div>
         </form>
       </div>
diff --git a/libs/vscode-ui/styles/src/lib/_flex.scss b/libs/vscode-ui/styles/src/lib/_flex.scss
index 7a3df9505b..a3c9b292f3 100644
--- a/libs/vscode-ui/styles/src/lib/_flex.scss
+++ b/libs/vscode-ui/styles/src/lib/_flex.scss
@@ -1,18 +1,26 @@
 .fx-row,
-.fx-row-wrap {
-  flex-direction: row;
+.fx-row-wrap,
+.fx-row-reverse,
+.fx-column {
   box-sizing: border-box;
   display: flex;
 }
 
+.fx-row,
+.fx-row-wrap {
+  flex-direction: row;
+}
+
 .fx-row-wrap {
   flex-flow: row wrap;
 }
 
+.fx-row-reverse {
+  flex-direction: row-reverse;
+}
+
 .fx-column {
   flex-direction: column;
-  box-sizing: border-box;
-  display: flex;
 }
 
 .fx-align-start-center {

From 27d69bc8ae60f23a49fed6f3018878b65507d6f5 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Mon, 26 Apr 2021 14:10:11 -0500
Subject: [PATCH 03/12] style and formatting to allow for long arguments

---
 .../argument-list.component.html              |  4 +--
 .../argument-list.component.scss              |  4 ++-
 .../argument-list.component.spec.ts           |  6 ++++
 .../argument-list/argument-list.component.ts  | 29 +++++++++++++++++--
 4 files changed, 36 insertions(+), 7 deletions(-)

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
index c50b2cb79f..77e85b021b 100644
--- 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
@@ -1,3 +1 @@
-<div *ngFor="let arg of args">
-  {{arg}}
-</div>
+<div *ngFor="let arg of args" [innerHtml]="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
index cf06fdc32c..80b5290b7a 100644
--- 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
@@ -1,3 +1,5 @@
 div {
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  margin-left: 1em;
+  text-indent: -1em;
 }
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
index 57a80fa0d9..fc31e23230 100644
--- 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
@@ -22,4 +22,10 @@ describe('ArgumentListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should format arguments for multiline break-word', () => {
+    component.args = ['--some-arg=withalistofoptions,that-may-not-fit-on-a-single-line'];
+    fixture.detectChanges();
+    expect(component.args).toEqual(['--some-arg=<wbr>withalistofoptions,that-may-not-fit-on-a-single-line']);
+  })
 });
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
index dd083bcb66..451a4b74a5 100644
--- 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
@@ -1,11 +1,34 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  SecurityContext,
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'nx-console-argument-list',
   templateUrl: './argument-list.component.html',
   styleUrls: ['./argument-list.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArgumentListComponent {
-  @Input() args: string[];
+  private _formattedArgs: string[];
+  @Input()
+  get args(): string[] {
+    return this._formattedArgs;
+  }
+  set args(values: string[]) {
+    this._formattedArgs = values && values.map(
+      (value) =>
+        this.domSanitizer.sanitize(
+          SecurityContext.HTML,
+          this.domSanitizer.bypassSecurityTrustHtml(
+            value.replace('=', '=<wbr>')
+          )
+        ) || ''
+    );
+  }
+
+  constructor(private readonly domSanitizer: DomSanitizer) {}
 }

From 8b69ae05ab47c5716462d8c5038cf28b2879b9c9 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Tue, 27 Apr 2021 09:57:07 -0500
Subject: [PATCH 04/12] argument list lib

---
 angular.json                                  | 44 ++++++++++++++++---
 jest.config.js                                |  1 +
 libs/vscode-ui/argument-list/.eslintrc.json   | 31 +++++++++++++
 libs/vscode-ui/argument-list/README.md        |  7 +++
 libs/vscode-ui/argument-list/jest.config.js   | 23 ++++++++++
 libs/vscode-ui/argument-list/src/index.ts     |  1 +
 .../src/lib}/argument-list.component.html     |  0
 .../src/lib}/argument-list.component.scss     |  0
 .../src/lib}/argument-list.component.spec.ts  |  0
 .../src/lib}/argument-list.component.ts       |  0
 .../src/lib/argument-list.module.ts           | 11 +++++
 .../vscode-ui/argument-list/src/test-setup.ts |  1 +
 libs/vscode-ui/argument-list/tsconfig.json    | 13 ++++++
 .../vscode-ui/argument-list/tsconfig.lib.json | 19 ++++++++
 .../argument-list/tsconfig.spec.json          | 10 +++++
 .../src/lib/vscode-ui-components.module.ts    |  3 --
 ...e-ui-feature-task-execution-form.module.ts |  8 +++-
 nx.json                                       |  1 +
 tsconfig.base.json                            |  3 ++
 19 files changed, 165 insertions(+), 11 deletions(-)
 create mode 100644 libs/vscode-ui/argument-list/.eslintrc.json
 create mode 100644 libs/vscode-ui/argument-list/README.md
 create mode 100644 libs/vscode-ui/argument-list/jest.config.js
 create mode 100644 libs/vscode-ui/argument-list/src/index.ts
 rename libs/vscode-ui/{components/src/lib/argument-list => argument-list/src/lib}/argument-list.component.html (100%)
 rename libs/vscode-ui/{components/src/lib/argument-list => argument-list/src/lib}/argument-list.component.scss (100%)
 rename libs/vscode-ui/{components/src/lib/argument-list => argument-list/src/lib}/argument-list.component.spec.ts (100%)
 rename libs/vscode-ui/{components/src/lib/argument-list => argument-list/src/lib}/argument-list.component.ts (100%)
 create mode 100644 libs/vscode-ui/argument-list/src/lib/argument-list.module.ts
 create mode 100644 libs/vscode-ui/argument-list/src/test-setup.ts
 create mode 100644 libs/vscode-ui/argument-list/tsconfig.json
 create mode 100644 libs/vscode-ui/argument-list/tsconfig.lib.json
 create mode 100644 libs/vscode-ui/argument-list/tsconfig.spec.json

diff --git a/angular.json b/angular.json
index 812f38eaab..ec866a1413 100644
--- a/angular.json
+++ b/angular.json
@@ -20,11 +20,18 @@
       "framework": "express"
     },
     "@nrwl/angular:application": {
+      "style": "scss",
+      "linter": "eslint",
       "unitTestRunner": "jest",
       "e2eTestRunner": "cypress"
     },
     "@nrwl/angular:library": {
-      "unitTestRunner": "none"
+      "style": "scss",
+      "linter": "eslint",
+      "unitTestRunner": "jest"
+    },
+    "@nrwl/angular:component": {
+      "style": "scss"
     }
   },
   "projects": {
@@ -50,7 +57,10 @@
               "apps/vscode-ui/src/favicon.ico",
               "apps/vscode-ui/src/assets"
             ],
-            "styles": ["apps/vscode-ui/src/styles.scss"],
+            "styles": [
+              "apps/vscode-ui/src/styles.scss",
+              "node_modules/vscode-codicons/dist/codicon.css"
+            ],
             "namedChunks": false,
             "extractLicenses": true,
             "vendorChunk": false,
@@ -272,6 +282,31 @@
       },
       "schematics": {}
     },
+    "vscode-ui-argument-list": {
+      "projectType": "library",
+      "root": "libs/vscode-ui/argument-list",
+      "sourceRoot": "libs/vscode-ui/argument-list/src",
+      "prefix": "nx-console",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/vscode-ui/argument-list/src/**/*.ts",
+              "libs/vscode-ui/argument-list/src/**/*.html"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/vscode-ui/argument-list"],
+          "options": {
+            "jestConfig": "libs/vscode-ui/argument-list/jest.config.js",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
     "vscode-ui-components": {
       "projectType": "library",
       "root": "libs/vscode-ui/components",
@@ -294,11 +329,6 @@
           },
           "outputs": ["coverage/libs/vscode-ui/components"]
         }
-      },
-      "schematics": {
-        "@nrwl/angular:component": {
-          "styleext": "scss"
-        }
       }
     },
     "vscode-ui-styles": {
diff --git a/jest.config.js b/jest.config.js
index 1068d10a7e..dff135dc12 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,6 +2,7 @@ module.exports = {
   projects: [
     '<rootDir>/apps/vscode-ui',
     '<rootDir>/libs/server',
+    '<rootDir>/libs/vscode-ui/argument-list',
     '<rootDir>/libs/vscode-ui/components',
     '<rootDir>/libs/vscode-ui/feature-task-execution-form',
     '<rootDir>/libs/vscode/nx-project-view',
diff --git a/libs/vscode-ui/argument-list/.eslintrc.json b/libs/vscode-ui/argument-list/.eslintrc.json
new file mode 100644
index 0000000000..a8f03f4386
--- /dev/null
+++ b/libs/vscode-ui/argument-list/.eslintrc.json
@@ -0,0 +1,31 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "parserOptions": {
+        "project": ["libs/vscode-ui/argument-list/tsconfig.*?.json"]
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          { "type": "attribute", "prefix": "nx-console", "style": "camelCase" }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          { "type": "element", "prefix": "nx-console", "style": "kebab-case" }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/vscode-ui/argument-list/README.md b/libs/vscode-ui/argument-list/README.md
new file mode 100644
index 0000000000..84eeeb3930
--- /dev/null
+++ b/libs/vscode-ui/argument-list/README.md
@@ -0,0 +1,7 @@
+# vscode-ui-argument-list
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test vscode-ui-argument-list` to execute the unit tests.
diff --git a/libs/vscode-ui/argument-list/jest.config.js b/libs/vscode-ui/argument-list/jest.config.js
new file mode 100644
index 0000000000..1409af71cc
--- /dev/null
+++ b/libs/vscode-ui/argument-list/jest.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+  displayName: 'vscode-ui-argument-list',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+      astTransformers: {
+        before: [
+          'jest-preset-angular/build/InlineFilesTransformer',
+          'jest-preset-angular/build/StripStylesTransformer',
+        ],
+      },
+    },
+  },
+  coverageDirectory: '../../../coverage/libs/vscode-ui/argument-list',
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
+  ],
+};
diff --git a/libs/vscode-ui/argument-list/src/index.ts b/libs/vscode-ui/argument-list/src/index.ts
new file mode 100644
index 0000000000..a294fb67aa
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/argument-list.module';
diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.html b/libs/vscode-ui/argument-list/src/lib/argument-list.component.html
similarity index 100%
rename from libs/vscode-ui/components/src/lib/argument-list/argument-list.component.html
rename to libs/vscode-ui/argument-list/src/lib/argument-list.component.html
diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.scss b/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
similarity index 100%
rename from libs/vscode-ui/components/src/lib/argument-list/argument-list.component.scss
rename to libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.spec.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts
similarity index 100%
rename from libs/vscode-ui/components/src/lib/argument-list/argument-list.component.spec.ts
rename to libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts
diff --git a/libs/vscode-ui/components/src/lib/argument-list/argument-list.component.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts
similarity index 100%
rename from libs/vscode-ui/components/src/lib/argument-list/argument-list.component.ts
rename to libs/vscode-ui/argument-list/src/lib/argument-list.component.ts
diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.module.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.module.ts
new file mode 100644
index 0000000000..1d4bc3ff47
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ArgumentListComponent } from './argument-list.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ArgumentListComponent],
+  exports: [ArgumentListComponent],
+})
+export class ArgumentListModule {}
diff --git a/libs/vscode-ui/argument-list/src/test-setup.ts b/libs/vscode-ui/argument-list/src/test-setup.ts
new file mode 100644
index 0000000000..8d88704e8f
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/test-setup.ts
@@ -0,0 +1 @@
+import 'jest-preset-angular';
diff --git a/libs/vscode-ui/argument-list/tsconfig.json b/libs/vscode-ui/argument-list/tsconfig.json
new file mode 100644
index 0000000000..667a3463d1
--- /dev/null
+++ b/libs/vscode-ui/argument-list/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/libs/vscode-ui/argument-list/tsconfig.lib.json b/libs/vscode-ui/argument-list/tsconfig.lib.json
new file mode 100644
index 0000000000..890aaeb555
--- /dev/null
+++ b/libs/vscode-ui/argument-list/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}
diff --git a/libs/vscode-ui/argument-list/tsconfig.spec.json b/libs/vscode-ui/argument-list/tsconfig.spec.json
new file mode 100644
index 0000000000..fd405a65ef
--- /dev/null
+++ b/libs/vscode-ui/argument-list/tsconfig.spec.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}
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 9aec9e2e80..9555f9b230 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
@@ -10,7 +10,6 @@ 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 { FieldItemsPipe } from './field-items/field-items.pipe';
-import { ArgumentListComponent } from './argument-list/argument-list.component';
 
 @NgModule({
   imports: [CommonModule, ReactiveFormsModule],
@@ -24,7 +23,6 @@ import { ArgumentListComponent } from './argument-list/argument-list.component';
     MultipleSelectComponent,
     FormatTaskPipe,
     FieldItemsPipe,
-    ArgumentListComponent,
   ],
   exports: [
     AutocompleteComponent,
@@ -35,7 +33,6 @@ import { ArgumentListComponent } from './argument-list/argument-list.component';
     FieldTreeComponent,
     MultipleSelectComponent,
     FormatTaskPipe,
-    ArgumentListComponent,
   ],
 })
 export class VscodeUiComponentsModule {}
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
index 80955a39e6..45603f9980 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TaskExecutionFormComponent } from './task-execution-form.component';
 import { VscodeUiComponentsModule } from '@nx-console/vscode-ui/components';
+import { ArgumentListModule } from '@nx-console/vscode-ui/argument-list';
 
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
 import { TaskExecutionSchema } from '@nx-console/schema';
@@ -18,7 +19,12 @@ export function getSchema() {
 }
 
 @NgModule({
-  imports: [CommonModule, VscodeUiComponentsModule, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    VscodeUiComponentsModule,
+    ArgumentListModule,
+  ],
   declarations: [TaskExecutionFormComponent],
   exports: [TaskExecutionFormComponent],
   providers: [
diff --git a/nx.json b/nx.json
index c86fa89f73..d7e02bee9b 100644
--- a/nx.json
+++ b/nx.json
@@ -30,6 +30,7 @@
     "server": { "tags": [] },
     "vscode-ui": { "tags": [] },
     "vscode-ui-feature-task-execution-form": { "tags": [] },
+    "vscode-ui-argument-list": { "tags": [] },
     "vscode-ui-components": { "tags": [] },
     "vscode-ui-styles": { "tags": [] },
     "vscode-ui-feature-task-execution-form-e2e": {
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 559ffc930b..9cc8a07148 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -26,6 +26,9 @@
       "@nx-console/vscode-ui/feature-task-execution-form": [
         "libs/vscode-ui/feature-task-execution-form/src/index.ts"
       ],
+      "@nx-console/vscode-ui/argument-list": [
+        "libs/vscode-ui/argument-list/src/index.ts"
+      ],
       "@nx-console/vscode-ui/components": [
         "libs/vscode-ui/components/src/index.ts"
       ],

From 51d071f3c6109c9916f0718077a105529b67d611 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Tue, 27 Apr 2021 14:00:43 -0500
Subject: [PATCH 05/12] feat: copy nx task command to clipboard

---
 libs/vscode-ui/argument-list/README.md        |  7 ----
 .../src/lib/vscode-ui-components.module.ts    |  3 --
 .../lib/format-task/format-task.pipe.spec.ts  | 38 +++++++++++++++++++
 .../src/lib/format-task/format-task.pipe.ts   | 12 ++++++
 .../src/lib/format-task/format-task.ts        | 19 ++++++++++
 .../lib/task-execution-form.component.html    |  3 ++
 .../lib/task-execution-form.component.scss    | 12 ++++++
 .../lib/task-execution-form.component.spec.ts |  6 ++-
 .../src/lib/task-execution-form.component.ts  | 16 +++++++-
 ...e-ui-feature-task-execution-form.module.ts |  5 ++-
 libs/vscode-ui/styles/src/lib/_variables.scss |  3 ++
 libs/vscode/webview/src/lib/webview.ts        |  8 ++++
 package.json                                  |  2 +
 yarn.lock                                     | 16 +++++++-
 14 files changed, 135 insertions(+), 15 deletions(-)
 delete mode 100644 libs/vscode-ui/argument-list/README.md
 create mode 100644 libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts
 create mode 100644 libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts
 create mode 100644 libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts

diff --git a/libs/vscode-ui/argument-list/README.md b/libs/vscode-ui/argument-list/README.md
deleted file mode 100644
index 84eeeb3930..0000000000
--- a/libs/vscode-ui/argument-list/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# vscode-ui-argument-list
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test vscode-ui-argument-list` to execute the unit tests.
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 9555f9b230..44423fecd9 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
@@ -8,7 +8,6 @@ import { CheckboxComponent } from './checkbox/checkbox.component';
 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 { FieldItemsPipe } from './field-items/field-items.pipe';
 
 @NgModule({
@@ -21,7 +20,6 @@ import { FieldItemsPipe } from './field-items/field-items.pipe';
     FieldComponent,
     FieldTreeComponent,
     MultipleSelectComponent,
-    FormatTaskPipe,
     FieldItemsPipe,
   ],
   exports: [
@@ -32,7 +30,6 @@ import { FieldItemsPipe } from './field-items/field-items.pipe';
     FieldComponent,
     FieldTreeComponent,
     MultipleSelectComponent,
-    FormatTaskPipe,
   ],
 })
 export class VscodeUiComponentsModule {}
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts
new file mode 100644
index 0000000000..cb4ff5d380
--- /dev/null
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts
@@ -0,0 +1,38 @@
+import { FormatTaskPipe } from './format-task.pipe';
+
+describe('FormatTaskPipe', () => {
+  const pipe = new FormatTaskPipe();
+
+  it('should reformat workspace generator commands', () => {
+    expect(
+      pipe.transform({
+        name: '',
+        cliName: 'ng',
+        description: '',
+        options: [],
+        command: 'generate',
+        positional: 'workspace-schematic:xyz-name',
+      })
+    ).toEqual('nx workspace-schematic xyz-name');
+    expect(
+      pipe.transform({
+        name: '',
+        cliName: 'ng',
+        description: '',
+        options: [],
+        command: 'generate',
+        positional: 'workspace-generator:xyz-name',
+      })
+    ).toEqual('nx workspace-generator xyz-name');
+    expect(
+      pipe.transform({
+        name: '',
+        cliName: 'ng',
+        description: '',
+        options: [],
+        command: 'generate',
+        positional: '@nrwl/angular:library',
+      })
+    ).toEqual('ng generate @nrwl/angular:library');
+  });
+});
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts
new file mode 100644
index 0000000000..2f994aa128
--- /dev/null
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TaskExecutionSchema } from '@nx-console/schema';
+import { formatTask } from './format-task';
+
+@Pipe({
+  name: 'formatTask',
+})
+export class FormatTaskPipe implements PipeTransform {
+  transform(architect: TaskExecutionSchema): string {
+    return formatTask(architect);
+  }
+}
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts
new file mode 100644
index 0000000000..2fa6ed5e52
--- /dev/null
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts
@@ -0,0 +1,19 @@
+import {
+  TaskExecutionSchema,
+  WORKSPACE_GENERATOR_NAME_REGEX,
+} from '@nx-console/schema';
+
+export const formatTask = (architect: TaskExecutionSchema): string => {
+  const positionals = architect.positional.match(
+    WORKSPACE_GENERATOR_NAME_REGEX
+  );
+  if (architect.command === 'generate' && positionals && positionals.length) {
+    architect = {
+      ...architect,
+      cliName: 'nx',
+      command: `workspace-${positionals[1]}`,
+      positional: positionals[2],
+    };
+  }
+  return `${architect.cliName} ${architect.command} ${architect.positional}`;
+};
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 36e33436b1..f5bdc0c84e 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
@@ -70,6 +70,9 @@
                 }}
               </ng-container>
             </span>
+            <button (click)="copyCommandToClipboard(taskExecForm.form, taskExecForm.architect)" title="Copy to clipboard">
+              <i class="codicon codicon-clippy"></i>
+            </button>
           </div>
           <div class="fx-row-reverse">
             <nx-console-argument-list [args]="runCommandArguments$ | async"></nx-console-argument-list>
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 579ac17ac7..a6475e0170 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
@@ -145,6 +145,18 @@ nx-console-field {
     line-height: 21px;
   }
 
+  button {
+    background-color: $button-secondary-color;
+    color: $secondary-text-color;
+    padding: 2px 2px 1px 2px;
+    border: none;
+    margin-left: 0.5em;
+
+    &:hover, &:focus {
+      background-color: $button-secondary-hover-color;
+    }
+  }
+
   margin-bottom: 1rem;
 }
 
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
index c111d58d3d..70db17c165 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
@@ -5,6 +5,8 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TaskExecutionSchema } from '@nx-console/schema';
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
 import { VscodeUiComponentsModule } from '@nx-console/vscode-ui/components';
+import { ArgumentListModule } from '@nx-console/vscode-ui/argument-list';
+import { FormatTaskPipe } from './format-task/format-task.pipe';
 import { TaskExecutionFormComponent } from './task-execution-form.component';
 
 const initialSchema: TaskExecutionSchema = {
@@ -52,8 +54,8 @@ describe('TaskExecutionFormComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [TaskExecutionFormComponent],
-        imports: [ReactiveFormsModule, VscodeUiComponentsModule],
+        declarations: [TaskExecutionFormComponent, FormatTaskPipe],
+        imports: [ReactiveFormsModule, VscodeUiComponentsModule, ArgumentListModule],
         providers: [
           { provide: TASK_EXECUTION_SCHEMA, useValue: initialSchema },
         ],
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 cbf89c8ca7..2e4424d9db 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
@@ -9,6 +9,7 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
 import {
   FormBuilder,
   FormControl,
@@ -37,6 +38,7 @@ import {
   filter,
   withLatestFrom,
 } from 'rxjs/operators';
+import { formatTask } from './format-task/format-task';
 
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
 import {
@@ -178,7 +180,8 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     private readonly fb: FormBuilder,
     @Inject(TASK_EXECUTION_SCHEMA) public initialSchema: TaskExecutionSchema,
     private readonly ngZone: NgZone,
-    private readonly changeDetectorRef: ChangeDetectorRef
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    private readonly clipboard: Clipboard
   ) {}
 
   ngOnInit() {
@@ -436,6 +439,17 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     });
     return args;
   }
+
+  copyCommandToClipboard(form: FormGroup, architect: TaskExecutionSchema) {
+    const configuration = form.get('configuration')?.value;
+    this.clipboard.copy(
+      `${formatTask(architect)} ${this.serializeArgs(
+        form.value,
+        architect,
+        configuration
+      ).join(' ')}`
+    );
+  }
 }
 
 function sanitizeWhitespace(value: string) {
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
index 45603f9980..6c265a03d4 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TaskExecutionFormComponent } from './task-execution-form.component';
+import { FormatTaskPipe } from './format-task/format-task.pipe';
 import { VscodeUiComponentsModule } from '@nx-console/vscode-ui/components';
 import { ArgumentListModule } from '@nx-console/vscode-ui/argument-list';
 
@@ -22,10 +24,11 @@ export function getSchema() {
   imports: [
     CommonModule,
     ReactiveFormsModule,
+    ClipboardModule,
     VscodeUiComponentsModule,
     ArgumentListModule,
   ],
-  declarations: [TaskExecutionFormComponent],
+  declarations: [TaskExecutionFormComponent, FormatTaskPipe],
   exports: [TaskExecutionFormComponent],
   providers: [
     {
diff --git a/libs/vscode-ui/styles/src/lib/_variables.scss b/libs/vscode-ui/styles/src/lib/_variables.scss
index 35283511a1..80ac62d60f 100644
--- a/libs/vscode-ui/styles/src/lib/_variables.scss
+++ b/libs/vscode-ui/styles/src/lib/_variables.scss
@@ -10,9 +10,12 @@ $button-primary-color: var(
   --vscode-statusBarItem-remoteBackground,
   #45bc98
 );
+$button-secondary-color: var(--vscode-button-secondaryBackground);
+$button-secondary-hover-color: var(--vscode-button-secondaryHoverBackground);
 $scroll-bar-width: 12px;
 
 $primary-text-color: var(--vscode-settings-headerForeground);
+$secondary-text-color: var(--vscode-button-secondaryForeground);
 $modified-text-color: var(--vscode-gitDecoration-modifiedResourceForeground, #e2c08d);
 $error-text-color: var(--vscode-errorForeground, #f00);
 
diff --git a/libs/vscode/webview/src/lib/webview.ts b/libs/vscode/webview/src/lib/webview.ts
index fa461b9d3b..cf216a41c7 100644
--- a/libs/vscode/webview/src/lib/webview.ts
+++ b/libs/vscode/webview/src/lib/webview.ts
@@ -154,6 +154,13 @@ export function getIframeHtml(
     'main.js'
   );
 
+  const codiconsPath = Uri.joinPath(
+    context.extensionUri,
+    'assets',
+    'public',
+    'codicon.css'
+  );
+
   const indexHtml = `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -178,6 +185,7 @@ export function getIframeHtml(
       window.vscode = acquireVsCodeApi();
     </script>
     <link href="${webView.asWebviewUri(stylePath)}" rel="stylesheet"/>
+    <link href="${webView.asWebviewUri(codiconsPath)}" rel="stylesheet" />
   </head>
   <body>
     <vscode-ui-task-execution-form></vscode-ui-task-execution-form>
diff --git a/package.json b/package.json
index ac51a62048..14beae41f9 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@angular-eslint/eslint-plugin": "~1.0.0",
     "@angular-eslint/eslint-plugin-template": "~1.0.0",
     "@angular-eslint/template-parser": "~1.0.0",
+    "@angular/cdk": "11.2.1",
     "@angular/cli": "11.2.1",
     "@angular/common": "11.2.1",
     "@angular/compiler": "11.2.1",
@@ -92,6 +93,7 @@
     "typescript": "4.0.7",
     "universal-analytics": "0.4.20",
     "vsce": "^1.69.0",
+    "vscode-codicons": "^0.0.16",
     "zlib": "^1.0.5",
     "zone.js": "0.10.3"
   }
diff --git a/yarn.lock b/yarn.lock
index 15c381361c..1833719f4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -170,6 +170,15 @@
   dependencies:
     eslint-scope "^5.1.0"
 
+"@angular/cdk@11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-11.2.1.tgz#c06aa5b0ac76706240a4851ff704d70cbc6f3bf5"
+  integrity sha512-d+ERvvWqGykBm5ooWG8TmMjL6q6aOpUd13ha1sx960EfKJqNyideYUfPMp6xprTyxmUIUZ/G9AQ/pxnzrLGnsA==
+  dependencies:
+    tslib "^2.0.0"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
 "@angular/cli@11.2.1":
   version "11.2.1"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-11.2.1.tgz#5b7d1b3608c63b6a08b66275a830798d36613ff5"
@@ -12297,7 +12306,7 @@ parse5-sax-parser@^6.0.1:
   dependencies:
     parse5 "^6.0.1"
 
-parse5@5.1.1:
+parse5@5.1.1, parse5@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
   integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
@@ -16593,6 +16602,11 @@ vsce@^1.69.0:
     yauzl "^2.3.1"
     yazl "^2.2.2"
 
+vscode-codicons@^0.0.16:
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/vscode-codicons/-/vscode-codicons-0.0.16.tgz#0bef18bfc0e9378ceb77213326495960cb53561f"
+  integrity sha512-OUijQNEJ78cmipWUR/LlUeTF9xAUW3/23YhgF3fNOKXKbajGTctUL8+sarVY1dZzv1ii7ilHXYkSJwh/d90XuA==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

From 6f00cdb44c2c7d428ce828d11cc11618da626873 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Tue, 27 Apr 2021 14:01:42 -0500
Subject: [PATCH 06/12] fix: update args on form reset

---
 .../src/lib/task-execution-form.component.ts               | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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 2e4424d9db..cad3fd45d1 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
@@ -166,7 +166,12 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
   );
 
   runCommandArguments$ = this.taskExecForm$.pipe(
-    mergeMap((taskExecForm) => taskExecForm.form.valueChanges.pipe(map(() => taskExecForm))),
+    mergeMap((taskExecForm) =>
+      taskExecForm.form.valueChanges.pipe(
+        startWith(taskExecForm.form.value),
+        map(() => taskExecForm)
+      )
+    ),
     map(({ architect, form }) => this.serializeArgs(form.value, architect))
   );
 

From d303e73439fa0c5af17af26c0ce5e1804427a12f Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Tue, 27 Apr 2021 14:12:53 -0500
Subject: [PATCH 07/12] format

---
 .../src/lib/argument-list.component.spec.ts   | 15 ++++++++------
 .../src/lib/argument-list.component.ts        | 20 ++++++++++---------
 .../src/lib/checkbox/checkbox.component.scss  |  2 +-
 .../src/lib/input/input.component.scss        |  2 +-
 .../multiple-select.component.scss            |  2 +-
 .../src/lib/select/select.component.scss      |  2 +-
 .../lib/task-execution-form.component.html    | 18 ++++++++++++++---
 .../lib/task-execution-form.component.scss    |  3 ++-
 .../lib/task-execution-form.component.spec.ts | 14 ++++++++++---
 libs/vscode-ui/styles/src/lib/_variables.scss |  5 ++++-
 10 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts
index fc31e23230..66e9036491 100644
--- a/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts
@@ -8,9 +8,8 @@ describe('ArgumentListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ArgumentListComponent ]
-    })
-    .compileComponents();
+      declarations: [ArgumentListComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -24,8 +23,12 @@ describe('ArgumentListComponent', () => {
   });
 
   it('should format arguments for multiline break-word', () => {
-    component.args = ['--some-arg=withalistofoptions,that-may-not-fit-on-a-single-line'];
+    component.args = [
+      '--some-arg=withalistofoptions,that-may-not-fit-on-a-single-line',
+    ];
     fixture.detectChanges();
-    expect(component.args).toEqual(['--some-arg=<wbr>withalistofoptions,that-may-not-fit-on-a-single-line']);
-  })
+    expect(component.args).toEqual([
+      '--some-arg=<wbr>withalistofoptions,that-may-not-fit-on-a-single-line',
+    ]);
+  });
 });
diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts
index 451a4b74a5..21a2e3d792 100644
--- a/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts
@@ -19,15 +19,17 @@ export class ArgumentListComponent {
     return this._formattedArgs;
   }
   set args(values: string[]) {
-    this._formattedArgs = values && values.map(
-      (value) =>
-        this.domSanitizer.sanitize(
-          SecurityContext.HTML,
-          this.domSanitizer.bypassSecurityTrustHtml(
-            value.replace('=', '=<wbr>')
-          )
-        ) || ''
-    );
+    this._formattedArgs =
+      values &&
+      values.map(
+        (value) =>
+          this.domSanitizer.sanitize(
+            SecurityContext.HTML,
+            this.domSanitizer.bypassSecurityTrustHtml(
+              value.replace('=', '=<wbr>')
+            )
+          ) || ''
+      );
   }
 
   constructor(private readonly domSanitizer: DomSanitizer) {}
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 18c5ba14e4..236736c19e 100644
--- a/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
+++ b/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
@@ -5,7 +5,7 @@ nx-console-checkbox {
     margin: 0;
     user-select: text;
     white-space: normal;
-    width: $description-width
+    width: $description-width;
   }
 
   .bool-control {
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 b457ae6766..0baf7c7abd 100644
--- a/libs/vscode-ui/components/src/lib/input/input.component.scss
+++ b/libs/vscode-ui/components/src/lib/input/input.component.scss
@@ -4,7 +4,7 @@
   margin: 0 0 0.5rem 0;
   user-select: text;
   white-space: normal;
-  width: $input-width
+  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 d6a1457cf5..a33f576a6e 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,7 +4,7 @@
   margin: 0 0 0.5rem 0;
   user-select: text;
   white-space: normal;
-  width: $description-width
+  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 38be0bd787..9fb5809173 100644
--- a/libs/vscode-ui/components/src/lib/select/select.component.scss
+++ b/libs/vscode-ui/components/src/lib/select/select.component.scss
@@ -4,7 +4,7 @@
   margin: 0 0 0.5rem 0;
   user-select: text;
   white-space: normal;
-  width: $description-width
+  width: $description-width;
 }
 
 select {
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 f5bdc0c84e..5779962325 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
@@ -70,12 +70,22 @@
                 }}
               </ng-container>
             </span>
-            <button (click)="copyCommandToClipboard(taskExecForm.form, taskExecForm.architect)" title="Copy to clipboard">
+            <button
+              (click)="
+                copyCommandToClipboard(
+                  taskExecForm.form,
+                  taskExecForm.architect
+                )
+              "
+              title="Copy to clipboard"
+            >
               <i class="codicon codicon-clippy"></i>
             </button>
           </div>
           <div class="fx-row-reverse">
-            <nx-console-argument-list [args]="runCommandArguments$ | async"></nx-console-argument-list>
+            <nx-console-argument-list
+              [args]="runCommandArguments$ | async"
+            ></nx-console-argument-list>
             <div>
               <ng-container *ngIf="defaultValues$ | async as defaultValues">
                 <nx-console-field
@@ -98,7 +108,9 @@
                 *ngIf="filteredFields.size === 0"
                 #noMatch
               >
-                <div *ngIf="taskExecForm.architect.options.length; else noFlags">
+                <div
+                  *ngIf="taskExecForm.architect.options.length; else noFlags"
+                >
                   No flags found -
                   <span
                     class="clear-search"
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 a6475e0170..41b5ef153b 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
@@ -152,7 +152,8 @@ nx-console-field {
     border: none;
     margin-left: 0.5em;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: $button-secondary-hover-color;
     }
   }
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
index 70db17c165..08d230e747 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
@@ -55,7 +55,11 @@ describe('TaskExecutionFormComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [TaskExecutionFormComponent, FormatTaskPipe],
-        imports: [ReactiveFormsModule, VscodeUiComponentsModule, ArgumentListModule],
+        imports: [
+          ReactiveFormsModule,
+          VscodeUiComponentsModule,
+          ArgumentListModule,
+        ],
         providers: [
           { provide: TASK_EXECUTION_SCHEMA, useValue: initialSchema },
         ],
@@ -76,7 +80,9 @@ describe('TaskExecutionFormComponent', () => {
 
   describe('validators', () => {
     it('should set validator for valid options', () => {
-      const formControl = formGroup.get('option-items-with-enum') as FormControl;
+      const formControl = formGroup.get(
+        'option-items-with-enum'
+      ) as FormControl;
       expect(formControl?.validator).toBeDefined();
       formControl.setValue('not a valid option');
       expect(formControl.invalid).toBeTruthy();
@@ -94,7 +100,9 @@ describe('TaskExecutionFormComponent', () => {
     });
 
     it('should set validator for long form options', () => {
-      const formControl = formGroup.get('a-long-form-multiselect-option') as FormControl;
+      const formControl = formGroup.get(
+        'a-long-form-multiselect-option'
+      ) as FormControl;
       expect(formControl?.validator).toBeDefined();
       formControl.setValue(['not valid']);
       expect(formControl.invalid).toBeTruthy();
diff --git a/libs/vscode-ui/styles/src/lib/_variables.scss b/libs/vscode-ui/styles/src/lib/_variables.scss
index 80ac62d60f..b545b9ec53 100644
--- a/libs/vscode-ui/styles/src/lib/_variables.scss
+++ b/libs/vscode-ui/styles/src/lib/_variables.scss
@@ -16,7 +16,10 @@ $scroll-bar-width: 12px;
 
 $primary-text-color: var(--vscode-settings-headerForeground);
 $secondary-text-color: var(--vscode-button-secondaryForeground);
-$modified-text-color: var(--vscode-gitDecoration-modifiedResourceForeground, #e2c08d);
+$modified-text-color: var(
+  --vscode-gitDecoration-modifiedResourceForeground,
+  #e2c08d
+);
 $error-text-color: var(--vscode-errorForeground, #f00);
 
 $error-border-color: var(--vscode-inputValidation-errorBorder, #f00);

From 23822914fe3b917f55928be1cdafeb4f0e652492 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Tue, 27 Apr 2021 16:14:44 -0500
Subject: [PATCH 08/12] allow longer description to push arguments right

---
 .../argument-list/src/lib/argument-list.component.scss         | 3 +++
 .../src/lib/autocomplete/autocomplete.component.scss           | 1 -
 .../components/src/lib/checkbox/checkbox.component.scss        | 1 -
 libs/vscode-ui/components/src/lib/input/input.component.scss   | 1 -
 .../src/lib/multiple-select/multiple-select.component.scss     | 1 -
 libs/vscode-ui/components/src/lib/select/select.component.scss | 1 -
 .../src/lib/task-execution-form.component.scss                 | 3 +++
 libs/vscode-ui/styles/src/lib/_flex.scss                       | 1 +
 libs/vscode-ui/styles/src/lib/_variables.scss                  | 1 -
 9 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss b/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
index 80b5290b7a..ac27d4ddb3 100644
--- a/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
@@ -1,3 +1,6 @@
+:host {
+  min-width: 120px;
+}
 div {
   overflow-wrap: break-word;
   margin-left: 1em;
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 ec714e8e21..bf70be3235 100644
--- a/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.scss
+++ b/libs/vscode-ui/components/src/lib/autocomplete/autocomplete.component.scss
@@ -5,7 +5,6 @@ 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/checkbox/checkbox.component.scss b/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
index 236736c19e..eb04d95ab0 100644
--- a/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
+++ b/libs/vscode-ui/components/src/lib/checkbox/checkbox.component.scss
@@ -5,7 +5,6 @@ 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/input/input.component.scss b/libs/vscode-ui/components/src/lib/input/input.component.scss
index 0baf7c7abd..9054a2305c 100644
--- a/libs/vscode-ui/components/src/lib/input/input.component.scss
+++ b/libs/vscode-ui/components/src/lib/input/input.component.scss
@@ -4,7 +4,6 @@
   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 a33f576a6e..c12719d242 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,7 +4,6 @@
   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 9fb5809173..d50a6610cf 100644
--- a/libs/vscode-ui/components/src/lib/select/select.component.scss
+++ b/libs/vscode-ui/components/src/lib/select/select.component.scss
@@ -4,7 +4,6 @@
   margin: 0 0 0.5rem 0;
   user-select: text;
   white-space: normal;
-  width: $description-width;
 }
 
 select {
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 41b5ef153b..b920468118 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
@@ -169,6 +169,9 @@ nx-console-field {
   vscode-ui-field-tree {
     display: none;
   }
+  nx-console-argument-list {
+    display: none;
+  }
 }
 
 .configurations-container {
diff --git a/libs/vscode-ui/styles/src/lib/_flex.scss b/libs/vscode-ui/styles/src/lib/_flex.scss
index a3c9b292f3..8218e5f598 100644
--- a/libs/vscode-ui/styles/src/lib/_flex.scss
+++ b/libs/vscode-ui/styles/src/lib/_flex.scss
@@ -17,6 +17,7 @@
 
 .fx-row-reverse {
   flex-direction: row-reverse;
+  justify-content: flex-end;
 }
 
 .fx-column {
diff --git a/libs/vscode-ui/styles/src/lib/_variables.scss b/libs/vscode-ui/styles/src/lib/_variables.scss
index b545b9ec53..25e7c2c810 100644
--- a/libs/vscode-ui/styles/src/lib/_variables.scss
+++ b/libs/vscode-ui/styles/src/lib/_variables.scss
@@ -1,7 +1,6 @@
 $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,

From 65ca46ac84fd80f030d679c9bf8893b9bf62b220 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Wed, 28 Apr 2021 11:35:31 -0500
Subject: [PATCH 09/12] fix: codicon.css dependency

---
 angular.json                           | 5 +----
 apps/vscode/src/package.json           | 3 ++-
 libs/vscode/webview/src/lib/webview.ts | 5 +++--
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/angular.json b/angular.json
index ec866a1413..ab1dac87d1 100644
--- a/angular.json
+++ b/angular.json
@@ -57,10 +57,7 @@
               "apps/vscode-ui/src/favicon.ico",
               "apps/vscode-ui/src/assets"
             ],
-            "styles": [
-              "apps/vscode-ui/src/styles.scss",
-              "node_modules/vscode-codicons/dist/codicon.css"
-            ],
+            "styles": ["apps/vscode-ui/src/styles.scss"],
             "namedChunks": false,
             "extractLicenses": true,
             "vendorChunk": false,
diff --git a/apps/vscode/src/package.json b/apps/vscode/src/package.json
index a3a04f7e23..74f2b803fa 100644
--- a/apps/vscode/src/package.json
+++ b/apps/vscode/src/package.json
@@ -41,7 +41,8 @@
   ],
   "dependencies": {
     "jsonc-parser": "^2.1.1",
-    "json5": "2.1.1"
+    "json5": "2.1.1",
+    "vscode-codicons": "^0.0.16"
   },
   "contributes": {
     "menus": {
diff --git a/libs/vscode/webview/src/lib/webview.ts b/libs/vscode/webview/src/lib/webview.ts
index cf216a41c7..38d20b5fc4 100644
--- a/libs/vscode/webview/src/lib/webview.ts
+++ b/libs/vscode/webview/src/lib/webview.ts
@@ -156,8 +156,9 @@ export function getIframeHtml(
 
   const codiconsPath = Uri.joinPath(
     context.extensionUri,
-    'assets',
-    'public',
+    'node_modules',
+    'vscode-codicons',
+    'dist',
     'codicon.css'
   );
 

From 484ab19a1099035adbb1451df210ea0f722f4eee Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Thu, 29 Apr 2021 09:38:34 -0500
Subject: [PATCH 10/12] flex layout fields and argument list

---
 .../argument-list/src/lib/argument-list.component.scss   | 3 ---
 .../src/lib/task-execution-form.component.html           | 2 +-
 .../src/lib/task-execution-form.component.scss           | 9 +++++++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss b/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
index ac27d4ddb3..80b5290b7a 100644
--- a/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
@@ -1,6 +1,3 @@
-:host {
-  min-width: 120px;
-}
 div {
   overflow-wrap: break-word;
   margin-left: 1em;
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 5779962325..7d963c4cb8 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
@@ -86,7 +86,7 @@
             <nx-console-argument-list
               [args]="runCommandArguments$ | async"
             ></nx-console-argument-list>
-            <div>
+            <div class ="fields-container">
               <ng-container *ngIf="defaultValues$ | async as defaultValues">
                 <nx-console-field
                   [id]="field.name + '-nx-console-field'"
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 b920468118..0442dc81b0 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
@@ -81,6 +81,15 @@ form {
   margin: auto;
 }
 
+nx-console-argument-list {
+  flex: 1 1 140px;
+  padding-left: $host-padding-left;
+}
+
+.fields-container {
+  flex: 1 1 $input-width;
+}
+
 .filter-container {
   border-width: 1px;
   border-style: solid;

From 597108e26c4f3de4306fe9bc1b9defb59032a59b Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Thu, 29 Apr 2021 09:46:41 -0500
Subject: [PATCH 11/12] fixes #1022 higher content density

---
 libs/vscode-ui/components/src/lib/field/field.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/vscode-ui/components/src/lib/field/field.component.scss b/libs/vscode-ui/components/src/lib/field/field.component.scss
index a6165d6321..74e7d6af8b 100644
--- a/libs/vscode-ui/components/src/lib/field/field.component.scss
+++ b/libs/vscode-ui/components/src/lib/field/field.component.scss
@@ -3,7 +3,7 @@
 :host {
   display: block;
   position: relative;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   white-space: normal;
 
   .field-title {

From 26bf6f5abe69d5668c13f8d5610c675f02600d18 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi@nrwl.io>
Date: Fri, 30 Apr 2021 10:13:46 -0500
Subject: [PATCH 12/12] vscode-codicons import

---
 apps/vscode-ui/src/styles.scss         | 1 +
 apps/vscode/src/package.json           | 3 +--
 libs/vscode/webview/src/lib/webview.ts | 9 ---------
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/apps/vscode-ui/src/styles.scss b/apps/vscode-ui/src/styles.scss
index 262e5eba49..bc9c27907a 100644
--- a/apps/vscode-ui/src/styles.scss
+++ b/apps/vscode-ui/src/styles.scss
@@ -1,5 +1,6 @@
 @import 'flex';
 @import 'variables';
+@import '~vscode-codicons/dist/codicon';
 
 html,
 body {
diff --git a/apps/vscode/src/package.json b/apps/vscode/src/package.json
index 74f2b803fa..a3a04f7e23 100644
--- a/apps/vscode/src/package.json
+++ b/apps/vscode/src/package.json
@@ -41,8 +41,7 @@
   ],
   "dependencies": {
     "jsonc-parser": "^2.1.1",
-    "json5": "2.1.1",
-    "vscode-codicons": "^0.0.16"
+    "json5": "2.1.1"
   },
   "contributes": {
     "menus": {
diff --git a/libs/vscode/webview/src/lib/webview.ts b/libs/vscode/webview/src/lib/webview.ts
index 38d20b5fc4..fa461b9d3b 100644
--- a/libs/vscode/webview/src/lib/webview.ts
+++ b/libs/vscode/webview/src/lib/webview.ts
@@ -154,14 +154,6 @@ export function getIframeHtml(
     'main.js'
   );
 
-  const codiconsPath = Uri.joinPath(
-    context.extensionUri,
-    'node_modules',
-    'vscode-codicons',
-    'dist',
-    'codicon.css'
-  );
-
   const indexHtml = `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -186,7 +178,6 @@ export function getIframeHtml(
       window.vscode = acquireVsCodeApi();
     </script>
     <link href="${webView.asWebviewUri(stylePath)}" rel="stylesheet"/>
-    <link href="${webView.asWebviewUri(codiconsPath)}" rel="stylesheet" />
   </head>
   <body>
     <vscode-ui-task-execution-form></vscode-ui-task-execution-form>