feat: shows argument list and highlights changed and invalid fields in menu

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": {
@@ -272,6 +279,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 +326,6 @@
           },
           "outputs": ["coverage/libs/vscode-ui/components"]
         }
-      },
-      "schematics": {
-        "@nrwl/angular:component": {
-          "styleext": "scss"
-        }
       }
     },
     "vscode-ui-styles": {

apps/vscode-ui/src/styles.scss

@@ -1,5 +1,6 @@
 @import 'flex';
 @import 'variables';
+@import '~vscode-codicons/dist/codicon';
 
 html,
 body {

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',

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": {}
+    }
+  ]
+}

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',
+  ],
+};

libs/vscode-ui/argument-list/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/argument-list.module';

libs/vscode-ui/argument-list/src/lib/argument-list.component.html

@@ -0,0 +1 @@
+<div *ngFor="let arg of args" [innerHtml]="arg"></div>

libs/vscode-ui/argument-list/src/lib/argument-list.component.scss

@@ -0,0 +1,5 @@
+div {
+  overflow-wrap: break-word;
+  margin-left: 1em;
+  text-indent: -1em;
+}

libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts

@@ -0,0 +1,34 @@
+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();
+  });
+
+  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',
+    ]);
+  });
+});

libs/vscode-ui/argument-list/src/lib/argument-list.component.ts

@@ -0,0 +1,36 @@
+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,
+})
+export class ArgumentListComponent {
+  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) {}
+}

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 {}

libs/vscode-ui/argument-list/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular';

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"
+    }
+  ]
+}

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"]
+}

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"]
+}

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'"
 >

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;
+  }
 }

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;
+  }
 }

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 {

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 {}

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');
+  });
+});