fix(graph): make sure disabledTaskSyncGenerators can be set correctly…

… from nx console (#28466)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

graph/client/src/app/console-project-details/project-details.app.tsx

@@ -1,16 +1,16 @@
-import { useCallback } from 'react';
+import { ProjectDetails } from '@nx/graph-internal/ui-project-details';
 import {
   ErrorToastUI,
   ExpandedTargetsProvider,
   getExternalApiService,
 } from '@nx/graph/shared';
-import { useMachine, useSelector } from '@xstate/react';
-import { ProjectDetails } from '@nx/graph-internal/ui-project-details';
+import { useSelector } from '@xstate/react';
+import { useCallback } from 'react';
+import { Interpreter } from 'xstate';
 import {
   ProjectDetailsEvents,
   ProjectDetailsState,
 } from './project-details.machine';
-import { Interpreter } from 'xstate';
 
 export function ProjectDetailsApp({
   service,
@@ -26,6 +26,10 @@ export function ProjectDetailsApp({
     service,
     (state) => state.context.connectedToCloud
   );
+  const disabledTaskSyncGenerators = useSelector(
+    service,
+    (state) => state.context.disabledTaskSyncGenerators
+  );
 
   const handleViewInProjectGraph = useCallback(
     (data: { projectName: string }) => {
@@ -83,6 +87,7 @@ export function ProjectDetailsApp({
             viewInProjectGraphPosition="bottom"
             connectedToCloud={connectedToCloud}
             onNxConnect={handleNxConnect}
+            disabledTaskSyncGenerators={disabledTaskSyncGenerators}
           />
         </ExpandedTargetsProvider>
         <ErrorToastUI errors={errors} />

graph/client/src/app/console-project-details/project-details.machine.ts

@@ -12,6 +12,7 @@ export interface ProjectDetailsState {
   sourceMap: null | Record<string, string[]>;
   errors?: GraphError[];
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
 }
 
 export type ProjectDetailsEvents = {
@@ -20,6 +21,7 @@ export type ProjectDetailsEvents = {
   sourceMap: Record<string, string[]>;
   connectedToCloud: boolean;
   errors?: GraphError[];
+  disabledTaskSyncGenerators?: string[];
 };
 
 const initialContext: ProjectDetailsState = {
@@ -50,6 +52,7 @@ export const projectDetailsMachine = createMachine<
             ctx.sourceMap = event.sourceMap;
             ctx.connectedToCloud = event.connectedToCloud;
             ctx.errors = event.errors;
+            ctx.disabledTaskSyncGenerators = event.disabledTaskSyncGenerators;
           }),
         ],
       },