feat: Populates form with workspace defaults for build, e2e, lint, se…

…rve, and test targets (#1067)

libs/server/src/lib/utils/read-projects.ts

@@ -67,7 +67,8 @@ function readDefaultValues(configurations: any, name: string): DefaultValue[] {
 
 export async function readBuilderSchema(
   basedir: string,
-  builder: string
+  builder: string,
+  projectDefaults?: { [name: string]: string }
 ): Promise<Option[]> {
   const [npmPackage, builderName] = builder.split(':');
   const packageJson = readAndCacheJsonFile(
@@ -88,5 +89,5 @@ export async function readBuilderSchema(
     path.dirname(buildersJson.path)
   );
 
-  return await normalizeSchema(builderSchema.json);
+  return await normalizeSchema(builderSchema.json, projectDefaults);
 }

libs/server/src/lib/utils/utils.ts

@@ -20,7 +20,7 @@ export interface SchematicDefaults {
 }
 
 export const files: { [path: string]: string[] } = {};
-export let fileContents: { [path: string]: any } = {};
+export const fileContents: { [path: string]: any } = {};
 
 const IMPORTANT_FIELD_NAMES = [
   'name',
@@ -108,9 +108,13 @@ export function listFiles(dirName: string): string[] {
         } else if (statSync(child).isDirectory()) {
           res.push(...listFiles(child));
         }
-      } catch (e) {}
+      } catch (e) {
+        // noop
+      }
     });
-  } catch (e) {}
+  } catch (e) {
+    // noop
+  }
   return res;
 }
 
@@ -141,7 +145,7 @@ export function clearJsonCache(filePath: string, basedir = '') {
 
 export function readAndCacheJsonFile(
   filePath: string,
-  basedir: string = ''
+  basedir = ''
 ): { path: string; json: any } {
   const fullFilePath = path.join(basedir, filePath);
 
@@ -181,7 +185,7 @@ export async function normalizeSchema(
     const nxOption: Option = {
       ...option,
       required: isFieldRequired(requiredFields, option, xPrompt, $default),
-      ...(workspaceDefault && { default: workspaceDefault }),
+      ...(workspaceDefault !== undefined && { default: workspaceDefault }),
       ...($default && { $default }),
       ...(option.enum && { items: option.enum.map((item) => item.toString()) }),
       // Strongly suspect items does not belong in the Option schema.
@@ -259,7 +263,7 @@ function getItems(option: Option): { items: string[] } | undefined {
   return (
     option.items && {
       items:
-        (option.items as ItemsWithEnum)!.enum ||
+        (option.items as ItemsWithEnum)?.enum ||
         ((option.items as string[]).length && option.items),
     }
   );

libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts

@@ -35,4 +35,17 @@ describe('FormatTaskPipe', () => {
       })
     ).toEqual('ng generate @nrwl/angular:library');
   });
+
+  it('should optionally include configuration flag', () => {
+    expect(
+      pipe.transform({
+        name: '',
+        cliName: 'nx',
+        description: '',
+        options: [],
+        command: 'build',
+        positional: 'the-project',
+      }, 'production')
+    ).toEqual('nx build the-project --prod');
+  })
 });

libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts

@@ -6,7 +6,12 @@ import { formatTask } from './format-task';
   name: 'formatTask',
 })
 export class FormatTaskPipe implements PipeTransform {
-  transform(architect: TaskExecutionSchema): string {
-    return formatTask(architect);
+  /**
+   * Formats nx/ng task from the Task Execution Form Observable
+   * @param {architect, form} maps to the taskExecForm$ Observable
+   * @returns format task string with optional configuruation (args not included)
+   */
+  transform(architect: TaskExecutionSchema, configuration?: string): string {
+    return formatTask(architect, configuration);
   }
 }

libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts

@@ -3,8 +3,8 @@ import {
   WORKSPACE_GENERATOR_NAME_REGEX,
 } from '@nx-console/schema';
 
-export const formatTask = (architect: TaskExecutionSchema): string => {
-  const positionals = architect.positional.match(
+export const formatTask = (architect: TaskExecutionSchema, configuration?: string): string => {
+  const positionals = architect.positional?.match(
     WORKSPACE_GENERATOR_NAME_REGEX
   );
   if (architect.command === 'generate' && positionals && positionals.length) {
@@ -15,5 +15,18 @@ export const formatTask = (architect: TaskExecutionSchema): string => {
       positional: positionals[2],
     };
   }
-  return `${architect.cliName} ${architect.command} ${architect.positional}`;
+
+  return configuration
+    ? `${architect.cliName} ${architect.command} ${architect.positional} ${getConfigurationFlag(configuration)}`
+    : `${architect.cliName} ${architect.command} ${architect.positional}`;
 };
+
+export const getConfigurationFlag = (configuration?: string): string => {
+  if (!configuration || !configuration.length) {
+    return '';
+  } else if (configuration === 'production') {
+    return '--prod';
+  } else {
+    return `-c=${configuration}`;
+  }
+}

libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html

@@ -57,18 +57,7 @@
         <form class="fields" [formGroup]="taskExecForm.form">
           <div class="title-container">
             <span class="title">
-              {{ taskExecForm.architect | formatTask }}
-              <ng-container
-                *ngIf="
-                  taskExecForm.form.get('configuration')?.value as configuration
-                "
-              >
-                {{
-                  configuration === 'production'
-                    ? '--prod'
-                    : '--c=' + configuration
-                }}
-              </ng-container>
+              {{ taskExecForm.architect | formatTask: taskExecForm.form.get('configuration')?.value }}
             </span>
             <button
               (click)="

libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts

@@ -38,15 +38,15 @@ import {
   filter,
   withLatestFrom,
 } from 'rxjs/operators';
-import { formatTask } from './format-task/format-task';
+import { getConfigurationFlag, formatTask } from './format-task/format-task';
 
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
 import {
   TaskExecutionSchema,
   TaskExecutionMessage,
-  ItemsWithEnum,
+  ItemsWithEnum
 } from '@nx-console/schema';
-import { Value } from '@angular/cli/models/interface';
+import { OptionType, Value } from '@angular/cli/models/interface';
 
 declare global {
   interface Window {
@@ -172,7 +172,13 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
         map(() => taskExecForm)
       )
     ),
-    map(({ architect, form }) => this.serializeArgs(form.value, architect))
+    map(({ architect, form }) =>
+      this.serializeArgs(
+        form.value,
+        architect,
+        form.get('configuration')?.value
+      )
+    )
   );
 
   validFields$ = this.getValidFields$(true);
@@ -334,7 +340,7 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
         defaultValues[field.name] = field.default.map((item) => String(item));
       } else {
         defaultValues[field.name] =
-          String(field.default) || (field.type === 'boolean' ? 'false' : '');
+          String(field.default) || (field.type === OptionType.Boolean ? 'false' : '');
       }
     });
 
@@ -361,7 +367,14 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     architect: TaskExecutionSchema;
     dryRun?: boolean;
   }) {
-    const flags = this.serializeArgs(form.value, architect);
+    const configuration = form.get('configuration')?.value;
+    const args = this.serializeArgs(form.value, architect, configuration);
+    const flags = configuration
+      ? [
+          getConfigurationFlag(configuration),
+          ...args,
+        ]
+      : args;
     if (architect.command === 'generate') {
       flags.push('--no-interactive');
     }
@@ -395,11 +408,18 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
           .filter((option) => {
             const control = form.controls[option.name];
             return (
+              // ** VALID fields **
               (valid &&
                 control.valid &&
                 // touched is not working with checkbox, so ignore touched and just check !== defaultValue
                 // control.touched &&
-                control.value !== defaultValues[option.name]) ||
+                ((option.type !== OptionType.Array && control.value !== defaultValues[option.name]) ||
+                  (option.type === OptionType.Array &&
+                    control.value &&
+                    control.value.join(',') !== ((defaultValues[option.name] || []) as string[]).join(',')
+                  )
+                )) ||
+              // ** INVALID fields **
               // invalid and touched (checkbox is always valid as true/false)
               (!valid && control.touched && control.invalid)
             );
@@ -428,9 +448,15 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     fields.forEach((f) => {
       if (defaultValues[f.name] === value[f.name]) return;
       if (!defaultValues[f.name] && !value[f.name]) return;
+      if (
+        Array.isArray(defaultValues[f.name]) &&
+        (defaultValues[f.name] as string[]).join(',') === value[f.name].join(',')
+      )
+        return;
+
       if (f.positional) {
         args.push(sanitizeWhitespace(value[f.name]));
-      } else if (f.type === 'boolean') {
+      } else if (f.type === OptionType.Boolean) {
         args.push(value[f.name] === 'false' ? `--no-${f.name}` : `--${f.name}`);
       } else {
         const fieldValue = value[f.name];
@@ -448,7 +474,7 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
   copyCommandToClipboard(form: FormGroup, architect: TaskExecutionSchema) {
     const configuration = form.get('configuration')?.value;
     this.clipboard.copy(
-      `${formatTask(architect)} ${this.serializeArgs(
+      `${formatTask(architect, configuration)} ${this.serializeArgs(
         form.value,
         architect,
         configuration

libs/vscode/verify/src/lib/verify-builder-definition.ts

@@ -86,7 +86,11 @@ export async function verifyBuilderDefinition(
     };
   }
 
-  const options = await readBuilderSchema(workspacePath(), builderName);
+  const options = await readBuilderSchema(
+    workspacePath(),
+    builderName,
+    commandDef.options
+  );
 
   if (!options) {
     window