feat(core): add --affected flag to nx graph (#17340)

.gitignore

@@ -31,5 +31,6 @@ CHANGELOG.md
 
 # Local dev files
 .env
+.bashrc
 
 *.node

docs/generated/cli/graph.md

@@ -67,11 +67,23 @@ Watch for changes to project graph and update in-browser:
 
 ## Options
 
+### affected
+
+Type: `boolean`
+
+Highlight affected projects
+
+### base
+
+Type: `string`
+
+Base of the current branch (usually main)
+
 ### exclude
 
 Type: `string`
 
-List of projects delimited by commas to exclude from the project graph.
+Exclude certain projects from being processed
 
 ### file
 
@@ -79,6 +91,12 @@ Type: `string`
 
 Output file (e.g. --file=output.json or --file=dep-graph.html)
 
+### files
+
+Type: `string`
+
+Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas or spaces
+
 ### focus
 
 Type: `string`
@@ -91,6 +109,12 @@ Type: `boolean`
 
 Group projects by folder in the project graph
 
+### head
+
+Type: `string`
+
+Latest commit of the current branch (usually HEAD)
+
 ### help
 
 Type: `boolean`
@@ -123,6 +147,18 @@ Type: `string`
 
 The target to show tasks for in the task graph
 
+### uncommitted
+
+Type: `boolean`
+
+Uncommitted changes
+
+### untracked
+
+Type: `boolean`
+
+Untracked changes
+
 ### version
 
 Type: `boolean`

docs/generated/packages/nx/documents/dep-graph.md

@@ -67,11 +67,23 @@ Watch for changes to project graph and update in-browser:
 
 ## Options
 
+### affected
+
+Type: `boolean`
+
+Highlight affected projects
+
+### base
+
+Type: `string`
+
+Base of the current branch (usually main)
+
 ### exclude
 
 Type: `string`
 
-List of projects delimited by commas to exclude from the project graph.
+Exclude certain projects from being processed
 
 ### file
 
@@ -79,6 +91,12 @@ Type: `string`
 
 Output file (e.g. --file=output.json or --file=dep-graph.html)
 
+### files
+
+Type: `string`
+
+Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas or spaces
+
 ### focus
 
 Type: `string`
@@ -91,6 +109,12 @@ Type: `boolean`
 
 Group projects by folder in the project graph
 
+### head
+
+Type: `string`
+
+Latest commit of the current branch (usually HEAD)
+
 ### help
 
 Type: `boolean`
@@ -123,6 +147,18 @@ Type: `string`
 
 The target to show tasks for in the task graph
 
+### uncommitted
+
+Type: `boolean`
+
+Uncommitted changes
+
+### untracked
+
+Type: `boolean`
+
+Untracked changes
+
 ### version
 
 Type: `boolean`

packages/nx/src/command-line/affected/affected.ts

@@ -54,7 +54,7 @@ export async function affected(
   await connectToNxCloudIfExplicitlyAsked(nxArgs);
 
   const projectGraph = await createProjectGraphAsync({ exitOnError: true });
-  const projects = await projectsToRun(nxArgs, projectGraph);
+  const projects = await getAffectedGraphNodes(nxArgs, projectGraph);
 
   try {
     switch (command) {
@@ -122,7 +122,7 @@ export async function affected(
   }
 }
 
-async function projectsToRun(
+export async function getAffectedGraphNodes(
   nxArgs: NxArgs,
   projectGraph: ProjectGraph
 ): Promise<ProjectGraphProjectNode[]> {

packages/nx/src/command-line/graph/command-object.ts

@@ -1,13 +1,28 @@
 import { CommandModule } from 'yargs';
 import { linkToNxDevAndExamples } from '../yargs-utils/documentation';
-import { withDepGraphOptions } from '../yargs-utils/shared-options';
+import {
+  withAffectedOptions,
+  withDepGraphOptions,
+} from '../yargs-utils/shared-options';
 
 export const yargsDepGraphCommand: CommandModule = {
   command: 'graph',
   describe: 'Graph dependencies within workspace',
   aliases: ['dep-graph'],
   builder: (yargs) =>
-    linkToNxDevAndExamples(withDepGraphOptions(yargs), 'dep-graph'),
+    linkToNxDevAndExamples(
+      withAffectedOptions(withDepGraphOptions(yargs)),
+      'dep-graph'
+    )
+      .option('affected', {
+        type: 'boolean',
+        description: 'Highlight affected projects',
+      })
+      .implies('untracked', 'affected')
+      .implies('uncommitted', 'affected')
+      .implies('files', 'affected')
+      .implies('base', 'affected')
+      .implies('head', 'affected'),
   handler: async (args) =>
     await (await import('./graph')).generateGraph(args as any, []),
 };

packages/nx/src/command-line/graph/graph.ts

@@ -25,6 +25,8 @@ import { TaskGraph } from '../../config/task-graph';
 import { daemonClient } from '../../daemon/client/client';
 import { Server } from 'net';
 import { readProjectFileMapCache } from '../../project-graph/nx-deps-cache';
+import { getAffectedGraphNodes } from '../affected/affected';
+import { splitArgsIntoNxArgsAndOverrides } from '../../utils/command-line-utils';
 
 export interface ProjectGraphClientResponse {
   hash: string;
@@ -187,6 +189,7 @@ export async function generateGraph(
     targets?: string[];
     focus?: string;
     exclude?: string[];
+    affected?: boolean;
   },
   affectedProjects: string[]
 ): Promise<void> {
@@ -228,6 +231,20 @@ export async function generateGraph(
     }
   }
 
+  if (args.affected) {
+    affectedProjects = (
+      await getAffectedGraphNodes(
+        splitArgsIntoNxArgsAndOverrides(
+          args,
+          'affected',
+          { printWarnings: true },
+          readNxJson()
+        ).nxArgs,
+        graph
+      )
+    ).map((n) => n.name);
+  }
+
   if (args.exclude) {
     const invalidExcludes: string[] = [];
 
@@ -379,6 +396,8 @@ export async function generateGraph(
           .map((projectName) => encodeURIComponent(projectName))
           .join(' ')
       );
+    } else if (args.affected) {
+      url.pathname += '/affected';
     }
     if (args.groupByFolder) {
       url.searchParams.append('groupByFolder', 'true');