fix(graph): update atomizer metadata & pdv hint (#26733)

<!-- 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/project-details/src/lib/project-details-wrapper.tsx

@@ -173,9 +173,7 @@ export function ProjectDetailsWrapper({
           environment === 'nx-console' ? 'bottom' : 'top'
         }
         connectedToCloud={connectedToCloud}
-        nxConnectCallback={
-          environment === 'nx-console' ? handleNxConnect : undefined
-        }
+        onNxConnect={environment === 'nx-console' ? handleNxConnect : undefined}
       />
       <ErrorToast errors={errors} />
     </>

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

@@ -26,7 +26,7 @@ export interface ProjectDetailsProps {
     targetName: string;
   }) => void;
   onRunTarget?: (data: { projectName: string; targetName: string }) => void;
-  nxConnectCallback?: () => void;
+  onNxConnect?: () => void;
   viewInProjectGraphPosition?: 'top' | 'bottom';
 }
 
@@ -43,7 +43,7 @@ export const ProjectDetails = ({
   onViewInProjectGraph,
   onViewInTaskGraph,
   onRunTarget,
-  nxConnectCallback,
+  onNxConnect,
   viewInProjectGraphPosition = 'top',
   connectedToCloud,
 }: ProjectDetailsProps) => {
@@ -166,7 +166,7 @@ export const ProjectDetails = ({
           onRunTarget={onRunTarget}
           onViewInTaskGraph={onViewInTaskGraph}
           connectedToCloud={connectedToCloud}
-          nxConnectCallback={nxConnectCallback}
+          onNxConnect={onNxConnect}
         />
       </div>
     </>

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

@@ -3,18 +3,12 @@ import { TargetConfigurationGroupHeader } from '../target-configuration-details-
 export interface TargetConfigurationGroupContainerProps {
   targetGroupName: string;
   targetsNumber: number;
-  nonAtomizedTarget?: string;
-  connectedToCloud?: boolean;
-  nxConnectCallback?: () => void;
   children: React.ReactNode;
 }
 
 export function TargetConfigurationGroupContainer({
   targetGroupName,
   targetsNumber,
-  nonAtomizedTarget,
-  connectedToCloud,
-  nxConnectCallback,
   children,
 }: TargetConfigurationGroupContainerProps) {
   if (targetsNumber === 0) {
@@ -25,9 +19,6 @@ export function TargetConfigurationGroupContainer({
       <TargetConfigurationGroupHeader
         targetGroupName={targetGroupName}
         targetsNumber={targetsNumber}
-        nonAtomizedTarget={nonAtomizedTarget}
-        connectedToCloud={connectedToCloud}
-        nxConnectCallback={nxConnectCallback}
         className="sticky top-0 z-10 bg-white dark:bg-slate-900"
       />
       <div className="rounded-md border border-slate-200 p-2 dark:border-slate-700">

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

@@ -1,4 +1,3 @@
-import { AtomizerTooltip, Tooltip } from '@nx/graph/ui-tooltips';
 import { Pill } from '../pill';
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
 
@@ -6,18 +5,13 @@ export interface TargetConfigurationGroupHeaderProps {
   targetGroupName: string;
   targetsNumber: number;
   className?: string;
-  nonAtomizedTarget?: string;
-  connectedToCloud?: boolean;
-  nxConnectCallback?: () => void;
   showIcon?: boolean;
 }
 
 export const TargetConfigurationGroupHeader = ({
   targetGroupName,
   targetsNumber,
-  nonAtomizedTarget,
-  connectedToCloud = true,
-  nxConnectCallback,
+
   className = '',
 }: TargetConfigurationGroupHeaderProps) => {
   return (
@@ -25,36 +19,15 @@ export const TargetConfigurationGroupHeader = ({
       className={`flex items-center gap-2 px-4 py-2 text-lg capitalize ${className}`}
     >
       {targetGroupName}{' '}
-      {nonAtomizedTarget && <Square3Stack3DIcon className="h-5 w-5" />}
+      {targetGroupName !== 'Others' && (
+        <Square3Stack3DIcon className="h-5 w-5" />
+      )}
       <Pill
         text={
           targetsNumber.toString() +
           (targetsNumber === 1 ? ' target' : ' targets')
         }
       />
-      {nonAtomizedTarget && (
-        <Tooltip
-          openAction="hover"
-          strategy="fixed"
-          usePortal={true}
-          content={
-            (
-              <AtomizerTooltip
-                connectedToCloud={connectedToCloud}
-                nonAtomizedTarget={nonAtomizedTarget}
-                nxConnectCallback={nxConnectCallback}
-              />
-            ) as any
-          }
-        >
-          <span className="inline-flex">
-            <Pill
-              color={connectedToCloud ? 'grey' : 'yellow'}
-              text={'Atomizer'}
-            />
-          </span>
-        </Tooltip>
-      )}
     </header>
   );
 };

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

@@ -4,10 +4,7 @@ import type { ProjectGraphProjectNode } from '@nx/devkit';
 
 import { TargetConfigurationDetailsListItem } from '../target-configuration-details-list-item/target-configuration-details-list-item';
 import { TargetConfigurationGroupContainer } from '../target-configuration-details-group-container/target-configuration-details-group-container';
-import {
-  getNonAtomizedTargetForGroup,
-  groupTargets,
-} from '../utils/group-targets';
+import { groupTargets } from '../utils/group-targets';
 import { useMemo } from 'react';
 
 export interface TargetConfigurationGroupListProps {
@@ -19,7 +16,7 @@ export interface TargetConfigurationGroupListProps {
     projectName: string;
     targetName: string;
   }) => void;
-  nxConnectCallback?: () => void;
+  onNxConnect?: () => void;
   connectedToCloud?: boolean;
   className?: string;
 }
@@ -30,7 +27,7 @@ export function TargetConfigurationGroupList({
   sourceMap,
   onRunTarget,
   onViewInTaskGraph,
-  nxConnectCallback,
+  onNxConnect,
   className = '',
   connectedToCloud,
 }: TargetConfigurationGroupListProps) {
@@ -51,12 +48,6 @@ export function TargetConfigurationGroupList({
               <TargetConfigurationGroupContainer
                 targetGroupName={targetGroupName}
                 targetsNumber={targets.length}
-                nonAtomizedTarget={getNonAtomizedTargetForGroup(
-                  project,
-                  targetGroupName
-                )}
-                connectedToCloud={connectedToCloud}
-                nxConnectCallback={nxConnectCallback}
                 key={targetGroupName}
               >
                 <ul className={className}>
@@ -64,9 +55,11 @@ export function TargetConfigurationGroupList({
                     <TargetConfigurationDetailsListItem
                       project={project}
                       sourceMap={sourceMap}
+                      connectedToCloud={connectedToCloud}
                       variant={variant}
                       onRunTarget={onRunTarget}
                       onViewInTaskGraph={onViewInTaskGraph}
+                      onNxConnect={onNxConnect}
                       targetName={targetName}
                       collapsable={true}
                       key={targetName}
@@ -88,9 +81,11 @@ export function TargetConfigurationGroupList({
                 <TargetConfigurationDetailsListItem
                   project={project}
                   sourceMap={sourceMap}
+                  connectedToCloud={connectedToCloud}
                   variant={variant}
                   onRunTarget={onRunTarget}
                   onViewInTaskGraph={onViewInTaskGraph}
+                  onNxConnect={onNxConnect}
                   targetName={targetName}
                   collapsable={true}
                   key={targetName}
@@ -109,9 +104,11 @@ export function TargetConfigurationGroupList({
             <TargetConfigurationDetailsListItem
               project={project}
               sourceMap={sourceMap}
+              connectedToCloud={connectedToCloud}
               variant={variant}
               onRunTarget={onRunTarget}
               onViewInTaskGraph={onViewInTaskGraph}
+              onNxConnect={onNxConnect}
               targetName={targetName}
               collapsable={true}
               key={targetName}

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

@@ -8,7 +8,11 @@ import {
   PlayIcon,
 } from '@heroicons/react/24/outline';
 
-import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
+import {
+  AtomizerTooltip,
+  PropertyInfoTooltip,
+  Tooltip,
+} from '@nx/graph/ui-tooltips';
 import { twMerge } from 'tailwind-merge';
 import { Pill } from '../pill';
 import { TargetTechnologies } from '../target-technologies/target-technologies';
@@ -26,11 +30,13 @@ export interface TargetConfigurationDetailsHeaderProps {
   projectName: string;
   targetName: string;
   sourceMap: Record<string, string[]>;
+  connectedToCloud?: boolean;
   onRunTarget?: (data: { projectName: string; targetName: string }) => void;
   onViewInTaskGraph?: (data: {
     projectName: string;
     targetName: string;
   }) => void;
+  onNxConnect?: () => void;
 }
 
 export const TargetConfigurationDetailsHeader = ({
@@ -41,9 +47,11 @@ export const TargetConfigurationDetailsHeader = ({
   targetConfiguration,
   projectName,
   targetName,
+  connectedToCloud = true,
   sourceMap,
   onRunTarget,
   onViewInTaskGraph,
+  onNxConnect,
 }: TargetConfigurationDetailsHeaderProps) => {
   const handleCopyClick = async (copyText: string) => {
     await window.navigator.clipboard.writeText(copyText);
@@ -97,7 +105,7 @@ export const TargetConfigurationDetailsHeader = ({
                 </p>
               )}
           </div>
-          <div>
+          <div className="flex items-center gap-2">
             {targetName === 'nx-release-publish' && (
               <Tooltip
                 openAction="hover"
@@ -109,6 +117,31 @@ export const TargetConfigurationDetailsHeader = ({
                 </span>
               </Tooltip>
             )}
+            {targetConfiguration.metadata?.nonAtomizedTarget && (
+              <Tooltip
+                openAction="hover"
+                strategy="fixed"
+                usePortal={true}
+                content={
+                  (
+                    <AtomizerTooltip
+                      connectedToCloud={connectedToCloud}
+                      nonAtomizedTarget={
+                        targetConfiguration.metadata.nonAtomizedTarget
+                      }
+                      onNxConnect={onNxConnect}
+                    />
+                  ) as any
+                }
+              >
+                <span className="inline-flex">
+                  <Pill
+                    color={connectedToCloud ? 'grey' : 'yellow'}
+                    text={'Atomizer'}
+                  />
+                </span>
+              </Tooltip>
+            )}
             {targetConfiguration.cache && (
               <Tooltip
                 openAction="hover"

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

@@ -6,12 +6,14 @@ import TargetConfigurationDetails from '../target-configuration-details/target-c
 export interface TargetConfigurationDetailsListItemProps {
   project: ProjectGraphProjectNode;
   sourceMap: Record<string, string[]>;
+  connectedToCloud?: boolean;
   variant?: 'default' | 'compact';
   onRunTarget?: (data: { projectName: string; targetName: string }) => void;
   onViewInTaskGraph?: (data: {
     projectName: string;
     targetName: string;
   }) => void;
+  onNxConnect?: () => void;
   targetName: string;
   collapsable: boolean;
 }
@@ -20,8 +22,10 @@ export function TargetConfigurationDetailsListItem({
   project,
   variant,
   sourceMap,
+  connectedToCloud,
   onRunTarget,
   onViewInTaskGraph,
+  onNxConnect,
   targetName,
   collapsable,
 }: TargetConfigurationDetailsListItemProps) {
@@ -37,8 +41,10 @@ export function TargetConfigurationDetailsListItem({
         targetName={targetName}
         targetConfiguration={target}
         sourceMap={sourceMap}
+        connectedToCloud={connectedToCloud}
         onRunTarget={onRunTarget}
         onViewInTaskGraph={onViewInTaskGraph}
+        onNxConnect={onNxConnect}
         collapsable={collapsable}
       />
     </li>

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

@@ -24,6 +24,7 @@ interface TargetConfigurationDetailsProps {
   targetName: string;
   targetConfiguration: TargetConfiguration;
   sourceMap: Record<string, string[]>;
+  connectedToCloud?: boolean;
   variant?: 'default' | 'compact';
   onCollapse?: (targetName: string) => void;
   onExpand?: (targetName: string) => void;
@@ -32,6 +33,7 @@ interface TargetConfigurationDetailsProps {
     projectName: string;
     targetName: string;
   }) => void;
+  onNxConnect?: () => void;
   collapsable: boolean;
 }
 
@@ -41,8 +43,10 @@ export default function TargetConfigurationDetails({
   targetName,
   targetConfiguration,
   sourceMap,
+  connectedToCloud,
   onViewInTaskGraph,
   onRunTarget,
+  onNxConnect,
   collapsable,
 }: TargetConfigurationDetailsProps) {
   const isCompact = variant === 'compact';
@@ -95,9 +99,11 @@ export default function TargetConfigurationDetails({
         targetConfiguration={targetConfiguration}
         projectName={projectName}
         targetName={targetName}
+        connectedToCloud={connectedToCloud}
         sourceMap={sourceMap}
         onRunTarget={onRunTarget}
         onViewInTaskGraph={onViewInTaskGraph}
+        onNxConnect={onNxConnect}
       />
       {/* body */}
       {!collapsed && (

graph/ui-project-details/src/lib/utils/group-targets.ts

@@ -33,18 +33,3 @@ function sortNxReleasePublishLast(a: string, b: string) {
   if (b === 'nx-release-publish') return -1;
   return a.localeCompare(b);
 }
-
-export function getNonAtomizedTargetForGroup(
-  project: ProjectGraphProjectNode,
-  targetGroupName: string
-): string | undefined {
-  const targetWithNonAtomizedEquivalent = project.data.metadata?.targetGroups?.[
-    targetGroupName
-  ]?.find(
-    (target) => project.data.targets?.[target]?.metadata?.nonAtomizedTarget
-  );
-  return targetWithNonAtomizedEquivalent
-    ? project.data.targets?.[targetWithNonAtomizedEquivalent]?.metadata
-        ?.nonAtomizedTarget
-    : undefined;
-}

graph/ui-tooltips/src/lib/atomizer-tooltip.tsx

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 export interface AtomizerTooltipProps {
   connectedToCloud: boolean;
   nonAtomizedTarget: string;
-  nxConnectCallback?: () => void;
+  onNxConnect?: () => void;
 }
 export function AtomizerTooltip(props: AtomizerTooltipProps) {
   return (
@@ -26,19 +26,19 @@ export function AtomizerTooltip(props: AtomizerTooltipProps) {
             href="https://nx.dev/ci/features/split-e2e-tasks"
             text="automatically split"
           />
-          {
-            ' this potentially slow task into separate tasks for each file. We recommend enabling '
-          }
-          {!props.connectedToCloud && (
-            <>
-              <Link href="https://nx.app/" text="Nx Cloud" />
-              {' and '}
-            </>
+          {' the potentially slow'}
+          <code className="mx-2 rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+            {props.nonAtomizedTarget}
+          </code>
+          {'task into separate tasks for each file. Enable '}
+          {!props.connectedToCloud ? (
+            <Link href="https://nx.app/" text="Nx Cloud" />
+          ) : (
+            <Link
+              href="https://nx.dev/ci/features/distribute-task-execution"
+              text="Nx Agents"
+            />
           )}
-          <Link
-            href="https://nx.dev/ci/features/distribute-task-execution"
-            text="Nx Agents"
-          />
           {' to benefit from '}
           <Link
             href="https://nx.dev/ci/features/distribute-task-execution"
@@ -59,19 +59,20 @@ export function AtomizerTooltip(props: AtomizerTooltipProps) {
             text="flaky task re-runs"
           />
           . Use
-          <code className="mx-2 inline rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+          <code className="mx-2 rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
             {props.nonAtomizedTarget}
           </code>
-          when running without Nx Agents.
+          when running without{' '}
+          {!props.connectedToCloud ? 'Nx Cloud' : 'Nx Agents'}.
         </p>
       </div>
       {!props.connectedToCloud && (
         <div className="flex py-2">
           <p className="pr-4 normal-case">
-            {props.nxConnectCallback ? (
+            {props.onNxConnect ? (
               <button
                 className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
-                onClick={() => props.nxConnectCallback!()}
+                onClick={() => props.onNxConnect!()}
               >
                 <NxCloudIcon className="h-5 w-5 "></NxCloudIcon>
                 <span>Connect to Nx Cloud</span>
@@ -79,7 +80,7 @@ export function AtomizerTooltip(props: AtomizerTooltipProps) {
             ) : (
               <span className="font-mono">
                 {'Run'}
-                <code className="mx-2 inline rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                <code className="mx-2 rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                   nx connect
                 </code>
                 {'to connect to Nx Cloud'}