feat(graph): display expanded task inputs (#19597)

.gitignore

@@ -18,6 +18,7 @@ jest.debug.config.js
 /graph/client/src/assets/dev/environment.js
 /graph/client/src/assets/generated-project-graphs
 /graph/client/src/assets/generated-task-graphs
+/graph/client/src/assets/generated-task-inputs
 /nx-dev/nx-dev/public/documentation
 /nx-dev/nx-dev/public/images/open-graph
 

e2e/nx-misc/src/extras.test.ts

@@ -1,3 +1,4 @@
+import { parseJson } from '@nx/devkit';
 import {
   checkFilesExist,
   cleanupProject,
@@ -8,6 +9,7 @@ import {
   setMaxWorkers,
   uniq,
   updateFile,
+  readFile,
   updateJson,
 } from '@nx/e2e/utils';
 import { join } from 'path';
@@ -321,4 +323,108 @@ describe('Extra Nx Misc Tests', () => {
       expect(unitTestsOutput).toContain('Successfully ran target test');
     });
   });
+
+  describe('task graph inputs', () => {
+    const readExpandedTaskInputResponse = (): Record<
+      string,
+      Record<string, string[]>
+    > =>
+      parseJson(
+        readFile('static/environment.js').match(
+          /window\.expandedTaskInputsResponse\s*=\s*(.*?);/
+        )[1]
+      );
+
+    const baseLib = 'lib-base-123';
+    beforeAll(() => {
+      runCLI(`generate @nx/js:lib ${baseLib}`);
+    });
+
+    it('should correctly expand default task inputs', () => {
+      runCLI('graph --file=graph.html');
+
+      expect(readExpandedTaskInputResponse()[`${baseLib}:build`])
+        .toMatchInlineSnapshot(`
+        {
+          "external": [
+            "npm:@nx/js",
+            "npm:tslib",
+          ],
+          "general": [
+            ".gitignore",
+            "nx.json",
+          ],
+          "lib-base-123": [
+            "libs/lib-base-123/README.md",
+            "libs/lib-base-123/package.json",
+            "libs/lib-base-123/project.json",
+            "libs/lib-base-123/src/index.ts",
+            "libs/lib-base-123/src/lib/lib-base-123.ts",
+            "libs/lib-base-123/tsconfig.json",
+            "libs/lib-base-123/tsconfig.lib.json",
+          ],
+        }
+      `);
+    });
+
+    it('should correctly expand dependent task inputs', () => {
+      const dependentLib = 'lib-dependent-123';
+      runCLI(`generate @nx/js:lib ${dependentLib}`);
+
+      updateJson(join('libs', baseLib, 'project.json'), (config) => {
+        config.targets['build'].inputs = ['default', '^default'];
+        config.implicitDependencies = [dependentLib];
+        return config;
+      });
+
+      updateJson('nx.json', (json) => {
+        json.namedInputs = {
+          ...json.namedInputs,
+          default: ['{projectRoot}/**/*'],
+        };
+        return json;
+      });
+      runCLI('graph --file=graph.html');
+
+      expect(readExpandedTaskInputResponse()[`${baseLib}:build`])
+        .toMatchInlineSnapshot(`
+        {
+          "external": [
+            "npm:@nx/js",
+            "npm:tslib",
+          ],
+          "general": [
+            ".gitignore",
+            "nx.json",
+          ],
+          "lib-base-123": [
+            "libs/lib-base-123/.eslintrc.json",
+            "libs/lib-base-123/README.md",
+            "libs/lib-base-123/jest.config.ts",
+            "libs/lib-base-123/package.json",
+            "libs/lib-base-123/project.json",
+            "libs/lib-base-123/src/index.ts",
+            "libs/lib-base-123/src/lib/lib-base-123.spec.ts",
+            "libs/lib-base-123/src/lib/lib-base-123.ts",
+            "libs/lib-base-123/tsconfig.json",
+            "libs/lib-base-123/tsconfig.lib.json",
+            "libs/lib-base-123/tsconfig.spec.json",
+          ],
+          "lib-dependent-123": [
+            "libs/lib-dependent-123/.eslintrc.json",
+            "libs/lib-dependent-123/README.md",
+            "libs/lib-dependent-123/jest.config.ts",
+            "libs/lib-dependent-123/package.json",
+            "libs/lib-dependent-123/project.json",
+            "libs/lib-dependent-123/src/index.ts",
+            "libs/lib-dependent-123/src/lib/lib-dependent-123.spec.ts",
+            "libs/lib-dependent-123/src/lib/lib-dependent-123.ts",
+            "libs/lib-dependent-123/tsconfig.json",
+            "libs/lib-dependent-123/tsconfig.lib.json",
+            "libs/lib-dependent-123/tsconfig.spec.json",
+          ],
+        }
+      `);
+    });
+  });
 });

graph/client-e2e/cypress/downloads/downloads.html

@@ -0,0 +1 @@
+Cr24

graph/client-e2e/src/e2e/dev-task-graph.cy.ts

@@ -18,11 +18,12 @@ import {
   getToggleAllButtonForFolder,
   getUncheckedProjectItems,
   getUnfocusProjectButton,
+  openTooltipForNode,
 } from '../support/app.po';
 
 import * as affectedJson from '../fixtures/affected.json';
 import { testProjectsRoutes, testTaskRoutes } from '../support/routing-tests';
-import * as nxExamplesJson from '../fixtures/nx-examples-project-graph.json';
+import * as nxExamplesTaskInputs from '../fixtures/nx-examples-task-inputs.json';
 
 describe('dev mode - task graph', () => {
   before(() => {
@@ -183,4 +184,54 @@ describe('dev mode - task graph', () => {
     // and also new /projects route
     testTaskRoutes('browser', ['/e2e/tasks']);
   });
+
+  describe('file inputs', () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: '/task-inputs.json*',
+        },
+        async (req) => {
+          // Extract the desired query parameter
+          const taskId = req.url.split('taskId=')[1];
+          // Load the fixture data and find the property based on the query parameter
+
+          const expandedInputs = nxExamplesTaskInputs[taskId];
+
+          // Reply with the selected property
+          req.reply({
+            body: expandedInputs,
+          });
+        }
+      ).as('getTaskInputs');
+    });
+    it('should display input files', () => {
+      getSelectTargetDropdown().select('build', { force: true });
+      cy.get('[data-project="cart"]').click({
+        force: true,
+      });
+      openTooltipForNode('cart:build');
+      cy.get('[data-cy="inputs-accordion"]').click();
+
+      cy.get('[data-cy="input-list-entry"]').should('have.length', 18);
+      const expectedSections = [
+        'cart-cart-page',
+        'shared-assets',
+        'shared-header',
+        'shared-styles',
+        'External Inputs',
+      ];
+      cy.get('[data-cy="input-section-entry"]').each((el, idx) => {
+        expect(el.text()).to.equal(expectedSections[idx]);
+      });
+
+      const sharedHeaderSelector =
+        '[data-cy="input-section-entry"]:contains(shared-header)';
+      cy.get(sharedHeaderSelector).click();
+      cy.get(sharedHeaderSelector)
+        .nextAll('[data-cy="input-list-entry"]')
+        .should('have.length', 9);
+    });
+  });
 });