diff --git a/graph/project-details/src/lib/project-details-wrapper.tsx b/graph/project-details/src/lib/project-details-wrapper.tsx index 6ee8cd4364..74598094e8 100644 --- a/graph/project-details/src/lib/project-details-wrapper.tsx +++ b/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} /> 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 index b51838f44c..39b9508c6c 100644 --- a/graph/ui-project-details/src/lib/project-details/project-details.tsx +++ b/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} /> diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx index 5d46556112..cb2f867d27 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx +++ b/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({
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx index 93c7ba4d20..5675e689d7 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx +++ b/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 && } + {targetGroupName !== 'Others' && ( + + )} - {nonAtomizedTarget && ( - - ) as any - } - > - - - - - )} ); }; diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx index 7f1fcf298d..21f82053e1 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx +++ b/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({
    @@ -64,9 +55,11 @@ export function TargetConfigurationGroupList({ ; + 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 = ({

    )}
-
+
{targetName === 'nx-release-publish' && ( )} + {targetConfiguration.metadata?.nonAtomizedTarget && ( + + ) as any + } + > + + + + + )} {targetConfiguration.cache && ( ; + 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} /> diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx index b6e603f0ea..3e2efd10fe 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx +++ b/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; + 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 && ( diff --git a/graph/ui-project-details/src/lib/utils/group-targets.ts b/graph/ui-project-details/src/lib/utils/group-targets.ts index 5ff330bf7b..0e7c4b4cd6 100644 --- a/graph/ui-project-details/src/lib/utils/group-targets.ts +++ b/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; -} diff --git a/graph/ui-tooltips/src/lib/atomizer-tooltip.tsx b/graph/ui-tooltips/src/lib/atomizer-tooltip.tsx index 6b12f6774b..8576e728ca 100644 --- a/graph/ui-tooltips/src/lib/atomizer-tooltip.tsx +++ b/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 && ( - <> - - {' and '} - + {' the potentially slow'} + + {props.nonAtomizedTarget} + + {'task into separate tasks for each file. Enable '} + {!props.connectedToCloud ? ( + + ) : ( + )} - {' to benefit from '} . Use - + {props.nonAtomizedTarget} - when running without Nx Agents. + when running without{' '} + {!props.connectedToCloud ? 'Nx Cloud' : 'Nx Agents'}.

{!props.connectedToCloud && (

- {props.nxConnectCallback ? ( + {props.onNxConnect ? (