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

… view
nrwl · Sep 17, 2024 · 1932fd4 · 1932fd4
1 parent 0a8202a
commit 1932fd4
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 9 deletions.
diff --git a/graph/client/src/app/routes.tsx b/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,
   };
 };
 

diff --git a/graph/project-details/src/lib/project-details-page.tsx b/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>

diff --git a/graph/project-details/src/lib/project-details-wrapper.tsx b/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} />
     </>

diff --git a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx b/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'],
   },
 };
 

diff --git a/graph/ui-project-details/src/lib/project-details/project-details.tsx b/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>

diff --git a/...c/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx b/...c/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}

diff --git a/...src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx b/...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}

diff --git a/.../ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx b/.../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,76 @@ 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>
+                      Enabled 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>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {disabledSyncGenerators.length > 0 && (
+            <div className="group">
+              <h4 className="mb-4">
+                <Tooltip
+                  openAction="hover"
+                  content={
+                    (<PropertyInfoTooltip type="syncGenerators" />) as any
+                  }
+                >
+                  <span className="font-medium">
+                    <TooltipTriggerText>
+                      Disabled Sync Generators
+                    </TooltipTriggerText>
+                  </span>
+                </Tooltip>
+              </h4>
+              <ul className="mb-4 list-disc pl-5">
+                {disabledSyncGenerators.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>
+                ))}
+              </ul>
+            </div>
+          )}
         </div>
       )}
     </div>

diff --git a/graph/ui-project-details/src/lib/utils/sync-generators.ts b/graph/ui-project-details/src/lib/utils/sync-generators.ts
@@ -0,0 +1,34 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { TargetConfiguration } from '@nx/devkit';
+
+export function getTaskSyncGenerators(
+  targetConfiguration: TargetConfiguration,
+  disabledTaskSyncGenerators: string[] | undefined
+): {
+  enabledSyncGenerators: string[];
+  disabledSyncGenerators: string[];
+} {
+  const enabledSyncGenerators: string[] = [];
+  const disabledSyncGenerators: string[] = [];
+
+  if (!targetConfiguration.syncGenerators?.length) {
+    return { enabledSyncGenerators, disabledSyncGenerators };
+  }
+
+  if (!disabledTaskSyncGenerators?.length) {
+    enabledSyncGenerators.push(...targetConfiguration.syncGenerators);
+    return { enabledSyncGenerators, disabledSyncGenerators };
+  }
+
+  const disabledGeneratorsSet = new Set(disabledTaskSyncGenerators);
+  for (const generator of targetConfiguration.syncGenerators) {
+    if (disabledGeneratorsSet.has(generator)) {
+      disabledSyncGenerators.push(generator);
+    } else {
+      enabledSyncGenerators.push(generator);
+    }
+  }
+
+  return { enabledSyncGenerators, disabledSyncGenerators };
+}
diff --git a/packages/nx/src/command-line/graph/graph.ts b/packages/nx/src/command-line/graph/graph.ts
@@ -78,6 +78,7 @@ export interface ProjectGraphClientResponse {
   isPartial: boolean;
   errors?: GraphError[];
   connectedToCloud?: boolean;
+  disabledTaskSyncGenerators?: string[];
 }
 
 export interface TaskGraphClientResponse {
@@ -773,13 +774,16 @@ async function createProjectGraphAndSourceMapClientResponse(
   let isPartial = false;
   let errors: GraphError[] | undefined;
   let connectedToCloud: boolean | undefined;
+  let disabledTaskSyncGenerators: string[] | undefined;
   try {
     const projectGraphAndSourceMaps =
       await createProjectGraphAndSourceMapsAsync({ exitOnError: false });
     projectGraph = projectGraphAndSourceMaps.projectGraph;
     sourceMaps = projectGraphAndSourceMaps.sourceMaps;
 
-    connectedToCloud = isNxCloudUsed(readNxJson());
+    const nxJson = readNxJson();
+    connectedToCloud = isNxCloudUsed(nxJson);
+    disabledTaskSyncGenerators = nxJson.sync?.disabledTaskSyncGenerators;
   } catch (e) {
     if (e instanceof ProjectGraphError) {
       projectGraph = e.getPartialProjectGraph();
@@ -820,6 +824,7 @@ async function createProjectGraphAndSourceMapClientResponse(
       sourceMaps,
       errors,
       connectedToCloud,
+      disabledTaskSyncGenerators,
     })
   );
 
@@ -851,6 +856,7 @@ async function createProjectGraphAndSourceMapClientResponse(
       isPartial,
       errors,
       connectedToCloud,
+      disabledTaskSyncGenerators,
     },
     sourceMapResponse: sourceMaps,
   };