feat(graph): add sync generators to target details in project details…

… view (#27639)

Add a `Sync Generators` section to the target details in the PDV.

### Default


![image](https://github.com/user-attachments/assets/0390c301-a833-4230-8c6a-0d452a7b8c57)

### Heading tooltip


![image](https://github.com/user-attachments/assets/b8b1c19f-20f8-42e6-a914-16e4dd0b11f2)

### Source map


![image](https://github.com/user-attachments/assets/3b66d2e1-88b7-42e8-9771-5732a32b4cc3)

![image](https://github.com/user-attachments/assets/8b3b0f15-c2f1-411f-8eb6-1df6ff320c5c)

### Disabled sync generator tooltip


![image](https://github.com/user-attachments/assets/9fd35041-35fc-41c4-92b5-b613fed9e0ae)


<!-- 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 NXC-802 -->

Fixes #

graph/client/src/app/routes.tsx

@@ -84,6 +84,7 @@ const projectDetailsLoader = async (
   sourceMap: Record<string, string[]>;
   errors?: GraphError[];
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
 }> => {
   const workspaceData = await workspaceDataLoader(selectedWorkspaceId);
   const sourceMaps = await sourceMapsLoader(selectedWorkspaceId);
@@ -104,6 +105,7 @@ const projectDetailsLoader = async (
     sourceMap: sourceMaps[project.data.root],
     errors: workspaceData.errors,
     connectedToCloud: workspaceData.connectedToCloud,
+    disabledTaskSyncGenerators: workspaceData.disabledTaskSyncGenerators,
   };
 };
 

graph/project-details/src/lib/project-details-page.tsx

@@ -21,14 +21,21 @@ import {
 import { ProjectDetailsHeader } from './project-details-header';
 
 export function ProjectDetailsPage() {
-  const { project, sourceMap, hash, errors, connectedToCloud } =
-    useRouteLoaderData('selectedProjectDetails') as {
-      hash: string;
-      project: ProjectGraphProjectNode;
-      sourceMap: Record<string, string[]>;
-      errors?: GraphError[];
-      connectedToCloud?: boolean;
-    };
+  const {
+    project,
+    sourceMap,
+    hash,
+    errors,
+    connectedToCloud,
+    disabledTaskSyncGenerators,
+  } = useRouteLoaderData('selectedProjectDetails') as {
+    hash: string;
+    project: ProjectGraphProjectNode;
+    sourceMap: Record<string, string[]>;
+    errors?: GraphError[];
+    connectedToCloud?: boolean;
+    disabledTaskSyncGenerators?: string[];
+  };
 
   const { environment, watch, appConfig } = useEnvironmentConfig();
 
@@ -65,6 +72,7 @@ export function ProjectDetailsPage() {
             sourceMap={sourceMap}
             errors={errors}
             connectedToCloud={connectedToCloud}
+            disabledTaskSyncGenerators={disabledTaskSyncGenerators}
           ></ProjectDetailsWrapper>
         </div>
       </div>

graph/project-details/src/lib/project-details-wrapper.tsx

@@ -22,13 +22,15 @@ interface ProjectDetailsProps {
   sourceMap: Record<string, string[]>;
   errors?: GraphError[];
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
 }
 
 export function ProjectDetailsWrapper({
   project,
   sourceMap,
   errors,
   connectedToCloud,
+  disabledTaskSyncGenerators,
 }: ProjectDetailsProps) {
   const environment = useEnvironmentConfig()?.environment;
   const externalApiService = getExternalApiService();
@@ -174,6 +176,7 @@ export function ProjectDetailsWrapper({
         }
         connectedToCloud={connectedToCloud}
         onNxConnect={environment === 'nx-console' ? handleNxConnect : undefined}
+        disabledTaskSyncGenerators={disabledTaskSyncGenerators}
       />
       <ErrorToast errors={errors} />
     </>

graph/ui-project-details/src/lib/project-details/project-details.stories.tsx

@@ -83,6 +83,11 @@ export const Primary = {
               ],
             },
             configurations: {},
+            syncGenerators: [
+              '@nx/js:typescript-sync',
+              '@foo/bar:sync',
+              '@baz/qux:sync',
+            ],
           },
           build: {
             dependsOn: ['build-base', 'build-native'],
@@ -210,6 +215,7 @@ export const Primary = {
         'nx-core-build-project-json-nodes',
       ],
     },
+    disabledTaskSyncGenerators: ['@foo/bar:sync'],
   },
 };
 

graph/ui-project-details/src/lib/project-details/project-details.tsx

@@ -18,6 +18,7 @@ export interface ProjectDetailsProps {
   errors?: GraphError[];
   variant?: 'default' | 'compact';
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
   onViewInProjectGraph?: (data: { projectName: string }) => void;
   onViewInTaskGraph?: (data: {
     projectName: string;
@@ -44,6 +45,7 @@ export const ProjectDetails = ({
   onNxConnect,
   viewInProjectGraphPosition = 'top',
   connectedToCloud,
+  disabledTaskSyncGenerators,
 }: ProjectDetailsProps) => {
   const projectData = project.data;
   const isCompact = variant === 'compact';
@@ -153,6 +155,7 @@ export const ProjectDetails = ({
           onRunTarget={onRunTarget}
           onViewInTaskGraph={onViewInTaskGraph}
           connectedToCloud={connectedToCloud}
+          disabledTaskSyncGenerators={disabledTaskSyncGenerators}
           onNxConnect={onNxConnect}
         />
       </div>

graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx

@@ -18,6 +18,7 @@ export interface TargetConfigurationGroupListProps {
   }) => void;
   onNxConnect?: () => void;
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
   className?: string;
 }
 
@@ -30,6 +31,7 @@ export function TargetConfigurationGroupList({
   onNxConnect,
   className = '',
   connectedToCloud,
+  disabledTaskSyncGenerators,
 }: TargetConfigurationGroupListProps) {
   const targetsGroup = useMemo(() => groupTargets(project), [project]);
   const hasGroups = useMemo(() => {
@@ -56,6 +58,7 @@ export function TargetConfigurationGroupList({
                       project={project}
                       sourceMap={sourceMap}
                       connectedToCloud={connectedToCloud}
+                      disabledTaskSyncGenerators={disabledTaskSyncGenerators}
                       variant={variant}
                       onRunTarget={onRunTarget}
                       onViewInTaskGraph={onViewInTaskGraph}
@@ -82,6 +85,7 @@ export function TargetConfigurationGroupList({
                   project={project}
                   sourceMap={sourceMap}
                   connectedToCloud={connectedToCloud}
+                  disabledTaskSyncGenerators={disabledTaskSyncGenerators}
                   variant={variant}
                   onRunTarget={onRunTarget}
                   onViewInTaskGraph={onViewInTaskGraph}
@@ -105,6 +109,7 @@ export function TargetConfigurationGroupList({
               project={project}
               sourceMap={sourceMap}
               connectedToCloud={connectedToCloud}
+              disabledTaskSyncGenerators={disabledTaskSyncGenerators}
               variant={variant}
               onRunTarget={onRunTarget}
               onViewInTaskGraph={onViewInTaskGraph}

graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx

@@ -7,6 +7,7 @@ export interface TargetConfigurationDetailsListItemProps {
   project: ProjectGraphProjectNode;
   sourceMap: Record<string, string[]>;
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
   variant?: 'default' | 'compact';
   onRunTarget?: (data: { projectName: string; targetName: string }) => void;
   onViewInTaskGraph?: (data: {
@@ -23,6 +24,7 @@ export function TargetConfigurationDetailsListItem({
   variant,
   sourceMap,
   connectedToCloud,
+  disabledTaskSyncGenerators,
   onRunTarget,
   onViewInTaskGraph,
   onNxConnect,
@@ -42,6 +44,7 @@ export function TargetConfigurationDetailsListItem({
         targetConfiguration={target}
         sourceMap={sourceMap}
         connectedToCloud={connectedToCloud}
+        disabledTaskSyncGenerators={disabledTaskSyncGenerators}
         onRunTarget={onRunTarget}
         onViewInTaskGraph={onViewInTaskGraph}
         onNxConnect={onNxConnect}

graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx

@@ -14,6 +14,7 @@ import { TargetExecutorTitle } from '../target-executor/target-executor-title';
 import { getTargetExecutorSourceMapKey } from '../target-source-info/get-target-executor-source-map-key';
 import { TargetSourceInfo } from '../target-source-info/target-source-info';
 import { getDisplayHeaderFromTargetConfiguration } from '../utils/get-display-header-from-target-configuration';
+import { getTaskSyncGenerators } from '../utils/sync-generators';
 import { FadingCollapsible } from './fading-collapsible';
 import { TargetConfigurationProperty } from './target-configuration-property';
 import { TooltipTriggerText } from './tooltip-trigger-text';
@@ -24,6 +25,7 @@ interface TargetConfigurationDetailsProps {
   targetConfiguration: TargetConfiguration;
   sourceMap: Record<string, string[]>;
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
   variant?: 'default' | 'compact';
   onCollapse?: (targetName: string) => void;
   onExpand?: (targetName: string) => void;
@@ -43,6 +45,7 @@ export default function TargetConfigurationDetails({
   targetConfiguration,
   sourceMap,
   connectedToCloud,
+  disabledTaskSyncGenerators,
   onViewInTaskGraph,
   onRunTarget,
   onNxConnect,
@@ -84,6 +87,9 @@ export default function TargetConfigurationDetails({
       ? Object.keys(configurations).length
       : true);
 
+  const { enabledSyncGenerators, disabledSyncGenerators } =
+    getTaskSyncGenerators(targetConfiguration, disabledTaskSyncGenerators);
+
   return (
     <div className="relative rounded-md border border-slate-200 dark:border-slate-700/60">
       <TargetConfigurationDetailsHeader
@@ -374,6 +380,68 @@ export default function TargetConfigurationDetails({
               </div>
             </div>
           ) : null}
+
+          {enabledSyncGenerators.length > 0 && (
+            <div className="group">
+              <h4 className="mb-4">
+                <Tooltip
+                  openAction="hover"
+                  content={
+                    (<PropertyInfoTooltip type="syncGenerators" />) as any
+                  }
+                >
+                  <span className="font-medium">
+                    <TooltipTriggerText>Sync Generators</TooltipTriggerText>
+                  </span>
+                </Tooltip>
+              </h4>
+              <ul className="mb-4 list-disc pl-5">
+                {enabledSyncGenerators.map((generator, idx) => (
+                  <li
+                    className="group/line overflow-hidden whitespace-nowrap"
+                    key={`syncGenerators-${idx}`}
+                  >
+                    <TargetConfigurationProperty data={generator}>
+                      <TargetSourceInfo
+                        className="min-w-0 flex-1 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100"
+                        propertyKey={`targets.${targetName}.syncGenerators`}
+                        sourceMap={sourceMap}
+                      />
+                    </TargetConfigurationProperty>
+                  </li>
+                ))}
+                {disabledSyncGenerators.length > 0 &&
+                  disabledSyncGenerators.map((generator, idx) => (
+                    <li
+                      className="group/line overflow-hidden whitespace-nowrap"
+                      key={`syncGenerators-${idx}`}
+                    >
+                      <TargetConfigurationProperty
+                        data={generator}
+                        disabled={true}
+                        disabledTooltip={
+                          <p className="max-w-sm whitespace-pre-wrap py-2 font-mono text-sm normal-case text-slate-700 dark:text-slate-400">
+                            The Sync Generator is disabled in the{' '}
+                            <code className="font-bold italic">
+                              sync.disabledTaskSyncGenerators
+                            </code>{' '}
+                            property in the{' '}
+                            <code className="font-bold italic">nx.json</code>{' '}
+                            file.
+                          </p>
+                        }
+                      >
+                        <TargetSourceInfo
+                          className="min-w-0 flex-1 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100"
+                          propertyKey={`targets.${targetName}.syncGenerators`}
+                          sourceMap={sourceMap}
+                        />
+                      </TargetConfigurationProperty>
+                    </li>
+                  ))}
+              </ul>
+            </div>
+          )}
         </div>
       )}
     </div>

graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property-text.tsx

@@ -0,0 +1,31 @@
+import { Tooltip } from '@nx/graph/ui-tooltips';
+import { JSX, ReactNode } from 'react';
+import { TooltipTriggerText } from './tooltip-trigger-text';
+import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
+
+interface TargetConfigurationPropertyTextProps {
+  content: ReactNode;
+  disabled?: boolean;
+  disabledTooltip?: ReactNode;
+}
+
+export function TargetConfigurationPropertyText({
+  content,
+  disabled,
+  disabledTooltip,
+}: TargetConfigurationPropertyTextProps): JSX.Element | null {
+  return (
+    <>
+      <span className={disabled ? 'opacity-50' : ''}>{content}</span>
+      {disabledTooltip && (
+        <Tooltip openAction="hover" content={disabledTooltip}>
+          <span className="pl-2 font-medium">
+            <TooltipTriggerText>
+              <QuestionMarkCircleIcon className="inline h-4 w-4" />
+            </TooltipTriggerText>
+          </span>
+        </Tooltip>
+      )}
+    </>
+  );
+}

graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property.tsx

@@ -1,18 +1,27 @@
 import { JSX, ReactNode } from 'react';
+import { TargetConfigurationPropertyText } from './target-configuration-property-text';
 
 interface RenderPropertyProps {
   data: string | Record<string, any> | any[];
+  disabled?: boolean;
+  disabledTooltip?: ReactNode;
   children?: ReactNode;
 }
 
 export function TargetConfigurationProperty({
   data,
   children,
+  disabled,
+  disabledTooltip,
 }: RenderPropertyProps): JSX.Element | null {
   if (typeof data === 'string') {
     return (
       <span className="flex font-mono text-sm">
-        {data}
+        <TargetConfigurationPropertyText
+          content={data}
+          disabled={disabled}
+          disabledTooltip={disabledTooltip}
+        />
         {children}
       </span>
     );
@@ -21,7 +30,11 @@ export function TargetConfigurationProperty({
       <ul>
         {data.map((item, index) => (
           <li key={index} className="flex font-mono text-sm">
-            {String(item)}
+            <TargetConfigurationPropertyText
+              content={String(item)}
+              disabled={disabled}
+              disabledTooltip={disabledTooltip}
+            />
             {children}
           </li>
         ))}
@@ -32,7 +45,15 @@ export function TargetConfigurationProperty({
       <ul>
         {Object.entries(data).map(([key, value], index) => (
           <li key={index} className="flex font-mono text-sm">
-            <strong>{key}</strong>: {String(value)}
+            <TargetConfigurationPropertyText
+              content={
+                <>
+                  <strong>{key}</strong>: {String(value)}
+                </>
+              }
+              disabled={disabled}
+              disabledTooltip={disabledTooltip}
+            />
             {children}
           </li>
         ))}