From 81af0b4ad3a966f095b3eb80cac5e483ad847037 Mon Sep 17 00:00:00 2001 From: Philip Fulcher Date: Wed, 20 Apr 2022 22:47:39 -0400 Subject: [PATCH] feat(dep-graph): default proximity search to enabled (#9917) --- .../client-e2e/src/integration/app.spec.ts | 35 +++++++++++++++---- dep-graph/client-e2e/src/support/app.po.ts | 5 +++ .../watch-mode-integration/watch-mode.spec.ts | 10 +++--- .../src/app/machines/dep-graph.machine.ts | 2 +- .../client/src/app/machines/dep-graph.spec.ts | 5 ++- .../src/app/machines/route-listener.actor.ts | 17 ++++++--- .../src/app/machines/route-setter.machine.ts | 10 ++++-- .../client/src/app/sidebar/search-depth.tsx | 2 ++ 8 files changed, 66 insertions(+), 20 deletions(-) diff --git a/dep-graph/client-e2e/src/integration/app.spec.ts b/dep-graph/client-e2e/src/integration/app.spec.ts index 7e7a0b0708114..c0d1880630822 100644 --- a/dep-graph/client-e2e/src/integration/app.spec.ts +++ b/dep-graph/client-e2e/src/integration/app.spec.ts @@ -6,6 +6,7 @@ import { getIncludeProjectsInPathButton, getProjectItems, getSearchDepthCheckbox, + getSearchDepthIncrementButton, getSelectAffectedButton, getSelectAllButton, getSelectProjectsMessage, @@ -147,7 +148,7 @@ describe('dep-graph-client', () => { cy.contains('nx-dev').scrollIntoView().should('be.visible'); cy.get('[data-project="nx-dev"]').prev('button').click({ force: true }); - getCheckedProjectItems().should('have.length', 15); + getCheckedProjectItems().should('have.length', 11); }); }); @@ -171,7 +172,7 @@ describe('dep-graph-client', () => { getTextFilterInput().type('nx-dev'); getIncludeProjectsInPathButton().click(); - getCheckedProjectItems().should('have.length', 24); + getCheckedProjectItems().should('have.length', 17); }); }); @@ -206,10 +207,18 @@ describe('dep-graph-client', () => { cy.url().should('contain', 'groupByFolder=true'); }); - it('should set search depth', () => { + it('should set search depth disabled', () => { + // it's on by default, clicking should disable it getSearchDepthCheckbox().click(); - cy.url().should('contain', 'searchDepth=1'); + cy.url().should('contain', 'searchDepth=0'); + }); + + it('should set search depth if greater than 1', () => { + // it's on by default and set to 1, clicking should change it to 2 + getSearchDepthIncrementButton().click(); + + cy.url().should('contain', 'searchDepth=2'); }); it('should set select to all', () => { @@ -229,18 +238,30 @@ describe('loading dep-graph client with url params', () => { // wait for first graph to finish loading cy.wait('@getGraph'); - getCheckedProjectItems().should('have.length', 15); + getCheckedProjectItems().should('have.length', 11); }); it('should focus projects with search depth', () => { cy.intercept('/assets/graphs/*').as('getGraph'); - cy.visit('/?focus=nx-dev&searchDepth=1'); + cy.visit('/?focus=nx-dev&searchDepth=2'); // wait for first graph to finish loading cy.wait('@getGraph'); - getCheckedProjectItems().should('have.length', 11); + getCheckedProjectItems().should('have.length', 15); + getSearchDepthCheckbox().should('exist'); + }); + + it('should focus projects with search depth disabled', () => { + cy.intercept('/assets/graphs/*').as('getGraph'); + + cy.visit('/?focus=nx-dev&searchDepth=0'); + + // wait for first graph to finish loading + cy.wait('@getGraph'); + + getCheckedProjectItems().should('have.length', 15); getSearchDepthCheckbox().should('exist'); }); diff --git a/dep-graph/client-e2e/src/support/app.po.ts b/dep-graph/client-e2e/src/support/app.po.ts index 5d698ea7c0b66..7539317db6381 100644 --- a/dep-graph/client-e2e/src/support/app.po.ts +++ b/dep-graph/client-e2e/src/support/app.po.ts @@ -19,6 +19,11 @@ export const getSearchDepthCheckbox = () => export const getTextFilterInput = () => cy.get('[data-cy=textFilterInput]'); export const getTextFilterReset = () => cy.get('[data-cy=textFilterReset]'); +export const getSearchDepthDecrementButton = () => + cy.get('[data-cy=decrement-depth-filter]'); +export const getSearchDepthIncrementButton = () => + cy.get('[data-cy=increment-depth-filter]'); + export const getIncludeProjectsInPathButton = () => cy.get('input[name=textFilterCheckbox]'); diff --git a/dep-graph/client-e2e/src/watch-mode-integration/watch-mode.spec.ts b/dep-graph/client-e2e/src/watch-mode-integration/watch-mode.spec.ts index d7a27c3559ba2..e9ed387a4a007 100644 --- a/dep-graph/client-e2e/src/watch-mode-integration/watch-mode.spec.ts +++ b/dep-graph/client-e2e/src/watch-mode-integration/watch-mode.spec.ts @@ -20,18 +20,20 @@ describe('dep-graph-client in watch mode', () => { checkSelectedProjects(5, excludedValues); }); - it('should retain selected projects new libs as they are created', () => { + // TODO: This test is getting flaky but was fixed by increasing the tick time between checks + // Figure out a better way to test this + it('should retain selected projects as new libs are created', () => { cy.contains('existing-app-1').siblings('button').click(); cy.contains('existing-lib-1').siblings('button').click(); - cy.tick(5000); + cy.tick(6000); checkSelectedProjects(3, []); - cy.tick(5000); + cy.tick(6000); checkSelectedProjects(4, []); - cy.tick(5000); + cy.tick(6000); checkSelectedProjects(5, []); }); diff --git a/dep-graph/client/src/app/machines/dep-graph.machine.ts b/dep-graph/client/src/app/machines/dep-graph.machine.ts index 8a4c032620c4e..e36b18ea2d850 100644 --- a/dep-graph/client/src/app/machines/dep-graph.machine.ts +++ b/dep-graph/client/src/app/machines/dep-graph.machine.ts @@ -22,7 +22,7 @@ export const initialContext: DepGraphContext = { textFilter: '', includePath: false, searchDepth: 1, - searchDepthEnabled: false, + searchDepthEnabled: true, groupByFolder: false, collapseEdges: false, workspaceLayout: { diff --git a/dep-graph/client/src/app/machines/dep-graph.spec.ts b/dep-graph/client/src/app/machines/dep-graph.spec.ts index c137514b71538..c0181e208bf9a 100644 --- a/dep-graph/client/src/app/machines/dep-graph.spec.ts +++ b/dep-graph/client/src/app/machines/dep-graph.spec.ts @@ -270,7 +270,10 @@ describe('dep-graph machine', () => { affectedProjects: [], workspaceLayout: { appsDir: 'apps', libsDir: 'libs' }, }); - + service.send({ + type: 'setSearchDepthEnabled', + searchDepthEnabled: false, + }); service.send({ type: 'focusProject', projectName: 'app1' }); }); diff --git a/dep-graph/client/src/app/machines/route-listener.actor.ts b/dep-graph/client/src/app/machines/route-listener.actor.ts index f214969e5bc4d..edf83bc846cf4 100644 --- a/dep-graph/client/src/app/machines/route-listener.actor.ts +++ b/dep-graph/client/src/app/machines/route-listener.actor.ts @@ -25,10 +25,19 @@ function parseSearchParamsToEvents(searchParams: string): DepGraphUIEvents[] { events.push({ type: 'setCollapseEdges', collapseEdges: true }); break; case 'searchDepth': - events.push({ - type: 'setSearchDepth', - searchDepth: parseInt(value), - }); + const parsedValue = parseInt(value, 10); + + if (parsedValue === 0) { + events.push({ + type: 'setSearchDepthEnabled', + searchDepthEnabled: false, + }); + } else if (parsedValue > 1) { + events.push({ + type: 'setSearchDepth', + searchDepth: parseInt(value), + }); + } break; case 'traceStart': events.push({ diff --git a/dep-graph/client/src/app/machines/route-setter.machine.ts b/dep-graph/client/src/app/machines/route-setter.machine.ts index 8e86b175e9398..5fb0e786599b4 100644 --- a/dep-graph/client/src/app/machines/route-setter.machine.ts +++ b/dep-graph/client/src/app/machines/route-setter.machine.ts @@ -118,9 +118,13 @@ export const createRouteMachine = () => { }, notifyRouteSearchDepth: { actions: assign((ctx, event) => { - ctx.params.searchDepth = event.searchDepthEnabled - ? event.searchDepth.toString() - : null; + if (event.searchDepthEnabled === false) { + ctx.params.searchDepth = '0'; + } else if (event.searchDepthEnabled && event.searchDepth !== 1) { + ctx.params.searchDepth = event.searchDepth.toString(); + } else { + ctx.params.searchDepth = null; + } }), }, notifyRouteTracing: { diff --git a/dep-graph/client/src/app/sidebar/search-depth.tsx b/dep-graph/client/src/app/sidebar/search-depth.tsx index 0f26604d60610..9f1550f53de49 100644 --- a/dep-graph/client/src/app/sidebar/search-depth.tsx +++ b/dep-graph/client/src/app/sidebar/search-depth.tsx @@ -47,6 +47,7 @@ export const SearchDepth = memo(