chore(graph): selected task is persisted in url (#13189)

graph/client-e2e/project.json

@@ -34,7 +34,7 @@
       },
       "defaultConfiguration": "dev"
     },
-    "e2e": {
+    "e2e-local": {
       "executor": "nx:run-commands",
       "outputs": [],
       "options": {
@@ -47,6 +47,18 @@
         "parallel": false
       }
     },
+    "e2e": {
+      "executor": "nx:run-commands",
+      "outputs": [],
+      "options": {
+        "commands": [
+          "npx nx e2e-base e2e-graph-client --configuration dev",
+          "npx nx e2e-base e2e-graph-client --configuration release",
+          "npx nx e2e-base e2e-graph-client --configuration release-static"
+        ],
+        "parallel": false
+      }
+    },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],

graph/client-e2e/src/e2e/app.cy.ts

@@ -315,7 +315,7 @@ describe('loading graph client with url params', () => {
 
   // check that params work from old base url of /
   // and also new /projects route
-  testProjectsRoutes('browser', ['/', '/projects']);
+  testProjectsRoutes('browser', ['/', '/e2e/projects']);
 });
 
 describe('theme preferences', () => {

graph/client-e2e/src/support/app.po.ts

@@ -7,7 +7,8 @@ export const getSelectAffectedButton = () => cy.get('[data-cy=affectedButton]');
 
 export const getUnfocusProjectButton = () => cy.get('[data-cy=unfocusButton]');
 
-export const getProjectItems = () => cy.get('[data-project]');
+export const getProjectItems = () =>
+  cy.get('[data-project]', { timeout: 6000 });
 
 export const getCheckedProjectItems = () => cy.get('[data-active="true"]');
 export const getUncheckedProjectItems = () => cy.get('[data-active="false"]');

graph/client-e2e/src/watch-mode-integration/watch-mode.cy.ts

@@ -2,53 +2,35 @@ import { getProjectItems } from '../support/app.po';
 
 describe('graph-client in watch mode', () => {
   beforeEach(() => {
-    cy.clock();
     cy.visit('/projects');
-    cy.tick(3000);
   });
 
   it('should auto-select new libs as they are created', () => {
     const excludedValues = ['existing-app-1', 'existing-lib-1'];
-
-    cy.tick(5000);
+    checkSelectedProjects(2, excludedValues);
     checkSelectedProjects(3, excludedValues);
-
-    cy.tick(5000);
     checkSelectedProjects(4, excludedValues);
-
-    cy.tick(5000);
-    checkSelectedProjects(5, excludedValues);
   });
 
-  // 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.get('[data-project="existing-app-1"]').click();
     cy.get('[data-project="existing-lib-1"]').click();
 
-    cy.tick(5000);
-
     checkSelectedProjects(3, []);
-
-    cy.tick(5000);
     checkSelectedProjects(4, []);
-
-    cy.tick(5000);
     checkSelectedProjects(5, []);
   });
 
   it('should not re-add new libs if they were un-selected', () => {
-    cy.tick(5000);
-    cy.get('[data-project*="3"][data-active="true"]')
+    cy.get('[data-project*="3"][data-active="true"]', { timeout: 6000 })
       .should('exist')
       .click({ force: true });
 
-    cy.get('[data-project*="3"][data-active="false"]').should('exist');
-
-    cy.tick(5000);
-    cy.tick(5000);
+    cy.get('[data-project*="3"][data-active="false"]', {
+      timeout: 6000,
+    }).should('exist');
 
-    cy.get('[data-project*="3"]')
+    cy.get('[data-project*="3"]', { timeout: 6000 })
       .first()
       .should((project) => {
         expect(project.data('active')).to.be.false;

graph/client/src/app/app.tsx

@@ -5,7 +5,7 @@ import {
   createHashRouter,
   RouterProvider,
 } from 'react-router-dom';
-import { routes } from './routes';
+import { getRoutesForEnvironment } from './routes';
 import { getEnvironmentConfig } from './hooks/use-environment-config';
 
 themeInit();
@@ -18,7 +18,7 @@ if (environmentConfig.localMode === 'build') {
   routerCreate = createHashRouter;
 }
 
-const router = routerCreate(routes);
+const router = routerCreate(getRoutesForEnvironment());
 
 export function App() {
   return <RouterProvider router={router} />;

graph/client/src/app/feature-projects/machines/interfaces.ts

@@ -52,7 +52,7 @@ export type ProjectGraphMachineEvents =
   | { type: 'filterByText'; search: string }
   | { type: 'clearTextFilter' }
   | {
-      type: 'notifyProjectGraphSetProjects';
+      type: 'setProjects';
       projects: ProjectGraphProjectNode[];
       dependencies: Record<string, ProjectGraphDependency[]>;
       affectedProjects: string[];

graph/client/src/app/feature-projects/machines/project-graph.machine.ts

@@ -58,7 +58,7 @@ export const projectGraphMachine = createMachine<
       tracing: tracingStateConfig,
     },
     on: {
-      notifyProjectGraphSetProjects: {
+      setProjects: {
         target: 'unselected',
         actions: [
           'setGraph',
@@ -280,10 +280,7 @@ export const projectGraphMachine = createMachine<
         ctx.includePath = event.includeProjectsByPath;
       }),
       setGraph: assign((ctx, event) => {
-        if (
-          event.type !== 'notifyProjectGraphSetProjects' &&
-          event.type !== 'updateGraph'
-        )
+        if (event.type !== 'setProjects' && event.type !== 'updateGraph')
           return;
 
         ctx.projects = event.projects;
@@ -293,7 +290,7 @@ export const projectGraphMachine = createMachine<
           name: 'route',
         });
 
-        if (event.type === 'notifyProjectGraphSetProjects') {
+        if (event.type === 'setProjects') {
           ctx.workspaceLayout = event.workspaceLayout;
           ctx.affectedProjects = event.affectedProjects;
         }

graph/client/src/app/feature-projects/machines/project-graph.spec.ts

@@ -100,7 +100,7 @@ describe('dep-graph machine', () => {
       const result = projectGraphMachine.transition(
         projectGraphMachine.initialState,
         {
-          type: 'notifyProjectGraphSetProjects',
+          type: 'setProjects',
           projects: mockProjects,
           dependencies: mockDependencies,
           affectedProjects: [],
@@ -119,7 +119,7 @@ describe('dep-graph machine', () => {
       const result = projectGraphMachine.transition(
         projectGraphMachine.initialState,
         {
-          type: 'notifyProjectGraphSetProjects',
+          type: 'setProjects',
           projects: mockProjects,
           dependencies: mockDependencies,
           affectedProjects: [],
@@ -147,7 +147,7 @@ describe('dep-graph machine', () => {
       service.start();
 
       service.send({
-        type: 'notifyProjectGraphSetProjects',
+        type: 'setProjects',
         projects: mockProjects,
         dependencies: mockDependencies,
         affectedProjects: [],
@@ -181,7 +181,7 @@ describe('dep-graph machine', () => {
       service.start();
 
       service.send({
-        type: 'notifyProjectGraphSetProjects',
+        type: 'setProjects',
         projects: mockProjects,
         dependencies: mockDependencies,
         affectedProjects: [],
@@ -208,7 +208,7 @@ describe('dep-graph machine', () => {
       let result = projectGraphMachine.transition(
         projectGraphMachine.initialState,
         {
-          type: 'notifyProjectGraphSetProjects',
+          type: 'setProjects',
           projects: mockProjects,
           dependencies: mockDependencies,
           affectedProjects: [],
@@ -246,7 +246,7 @@ describe('dep-graph machine', () => {
       let result = projectGraphMachine.transition(
         projectGraphMachine.initialState,
         {
-          type: 'notifyProjectGraphSetProjects',
+          type: 'setProjects',
           projects: mockProjects,
           dependencies: mockDependencies,
           affectedProjects: [],
@@ -279,7 +279,7 @@ describe('dep-graph machine', () => {
       service.start();
 
       service.send({
-        type: 'notifyProjectGraphSetProjects',
+        type: 'setProjects',
         projects: mockProjects,
         dependencies: mockDependencies,
         affectedProjects: [],
@@ -296,7 +296,7 @@ describe('dep-graph machine', () => {
       let result = projectGraphMachine.transition(
         projectGraphMachine.initialState,
         {
-          type: 'notifyProjectGraphSetProjects',
+          type: 'setProjects',
           projects: mockProjects,
           dependencies: mockDependencies,
           affectedProjects: [],
@@ -323,7 +323,7 @@ describe('dep-graph machine', () => {
       let result = projectGraphMachine.transition(
         projectGraphMachine.initialState,
         {
-          type: 'notifyProjectGraphSetProjects',
+          type: 'setProjects',
           projects: mockProjects,
           dependencies: mockDependencies,
           affectedProjects: [],
@@ -387,7 +387,7 @@ describe('dep-graph machine', () => {
       let result = projectGraphMachine.transition(
         projectGraphMachine.initialState,
         {
-          type: 'notifyProjectGraphSetProjects',
+          type: 'setProjects',
           projects: mockProjects,
           dependencies: mockDependencies,
           affectedProjects: [],

graph/client/src/app/feature-projects/project-list.tsx

@@ -13,17 +13,11 @@ import {
   selectedProjectNamesSelector,
   workspaceLayoutSelector,
 } from './machines/selectors';
-import { parseParentDirectoriesFromFilePath } from '../util';
+import { getProjectsByType, parseParentDirectoriesFromFilePath } from '../util';
 import ExperimentalFeature from '../ui-components/experimental-feature';
 import { TracingAlgorithmType } from './machines/interfaces';
 import { getProjectGraphService } from '../machines/get-services';
 
-function getProjectsByType(type: string, projects: ProjectGraphNode[]) {
-  return projects
-    .filter((project) => project.type === type)
-    .sort((a, b) => a.name.localeCompare(b.name));
-}
-
 interface SidebarProject {
   projectGraphNode: ProjectGraphNode;
   isSelected: boolean;

graph/client/src/app/feature-projects/projects-sidebar.tsx

@@ -12,7 +12,7 @@ import {
   textFilterSelector,
 } from './machines/selectors';
 import CollapseEdgesPanel from './panels/collapse-edges-panel';
-import FocusedProjectPanel from './panels/focused-project-panel';
+import FocusedPanel from '../ui-components/focused-panel';
 import GroupByFolderPanel from './panels/group-by-folder-panel';
 import ProjectList from './project-list';
 import SearchDepth from './panels/search-depth';
@@ -120,10 +120,10 @@ export function ProjectsSidebar(): JSX.Element {
   return (
     <>
       {focusedProject ? (
-        <FocusedProjectPanel
-          focusedProject={focusedProject}
+        <FocusedPanel
+          focusedLabel={focusedProject}
           resetFocus={resetFocus}
-        ></FocusedProjectPanel>
+        ></FocusedPanel>
       ) : null}
       {isTracing ? (
         <TracingPanel