fix(graph): update atomizer metadata & pdv hint

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,60 +1,33 @@
-import { AtomizerTooltip, Tooltip } from '@nx/graph/ui-tooltips';
 import { Pill } from '../pill';
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
 
 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 (
     <header
       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,22 +48,18 @@ export function TargetConfigurationGroupList({
               <TargetConfigurationGroupContainer
                 targetGroupName={targetGroupName}
                 targetsNumber={targets.length}
-                nonAtomizedTarget={getNonAtomizedTargetForGroup(
-                  project,
-                  targetGroupName
-                )}
-                connectedToCloud={connectedToCloud}
-                nxConnectCallback={nxConnectCallback}
                 key={targetGroupName}
               >
                 <ul className={className}>
                   {targets.map((targetName) => (
                     <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;
-}