miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(graph): remove dangling - and move button when PDV is rendered in console (#23144)

Browse Source
This commit is contained in:
MaxKless 2024-05-02 18:24:51 +02:00 committed by GitHub
parent 11fec5a4e8
commit 2e85b1dbe5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 58 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
graph/project-details/src/lib/project-details-wrapper.tsx
View File

@ -171,6 +171,9 @@ export function ProjectDetailsWrapperComponent({
onViewInProjectGraph={handleViewInProjectGraph} onViewInProjectGraph={handleViewInProjectGraph}
onViewInTaskGraph={handleViewInTaskGraph} onViewInTaskGraph={handleViewInTaskGraph}
onRunTarget={environment === 'nx-console' ? handleRunTarget : undefined} onRunTarget={environment === 'nx-console' ? handleRunTarget : undefined}
viewInProjectGraphPosition={
environment === 'nx-console' ? 'bottom' : 'top'
}
/> />
<ErrorToast errors={errors} /> <ErrorToast errors={errors} />
</> </>

4
graph/ui-components/src/lib/error-renderer.tsx
View File

@ -18,7 +18,9 @@ export function ErrorRenderer({ errors }: { errors: GraphError[] }) {
<div className="overflow-hidden pb-4"> <div className="overflow-hidden pb-4">
<span className="inline-flex max-w-full flex-col break-words font-bold font-normal text-gray-900 md:inline dark:text-slate-200"> <span className="inline-flex max-w-full flex-col break-words font-bold font-normal text-gray-900 md:inline dark:text-slate-200">
<span>{errorHeading}</span> <span>{errorHeading}</span>
<span className="hidden px-1 md:inline">-</span> {fileSpecifier && (
<span className="hidden px-1 md:inline">-</span>
)}
<span>{fileSpecifier}</span> <span>{fileSpecifier}</span>
</span> </span>
<pre className="overflow-x-scroll pl-4 pt-3"> <pre className="overflow-x-scroll pl-4 pt-3">

80
graph/ui-project-details/src/lib/project-details/project-details.tsx
View File

@ -26,6 +26,7 @@ export interface ProjectDetailsProps {
targetName: string; targetName: string;
}) => void; }) => void;
onRunTarget?: (data: { projectName: string; targetName: string }) => void; onRunTarget?: (data: { projectName: string; targetName: string }) => void;
viewInProjectGraphPosition?: 'top' | 'bottom';
} }
export const ProjectDetails = ({ export const ProjectDetails = ({
@ -35,6 +36,7 @@ export const ProjectDetails = ({
onViewInProjectGraph, onViewInProjectGraph,
onViewInTaskGraph, onViewInTaskGraph,
onRunTarget, onRunTarget,
viewInProjectGraphPosition = 'top',
}: ProjectDetailsProps) => { }: ProjectDetailsProps) => {
const projectData = project.data; const projectData = project.data;
const isCompact = variant === 'compact'; const isCompact = variant === 'compact';
@ -84,40 +86,50 @@ export const ProjectDetails = ({
/> />
</div> </div>
<span> <span>
{onViewInProjectGraph ? ( {onViewInProjectGraph && viewInProjectGraphPosition === 'top' && (
<button <ViewInProjectGraphButton
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" callback={() =>
onClick={() =>
onViewInProjectGraph({ projectName: project.name }) onViewInProjectGraph({ projectName: project.name })
} }
> />
<EyeIcon className="h-5 w-5 "></EyeIcon> )}{' '}
<span>View In Graph</span>
</button>
) : null}{' '}
</span> </span>
</div> </div>
<div className="py-2 "> <div className="flex justify-between py-2">
{projectData.tags && projectData.tags.length ? ( <div>
{projectData.tags && projectData.tags.length ? (
<p>
<span className="inline-block w-10 font-medium">Tags:</span>
{projectData.tags?.map((tag) => (
<span className="ml-2 font-mono">
<Pill text={tag} />
</span>
))}
</p>
) : null}
<p> <p>
<span className="inline-block w-10 font-medium">Tags:</span> <span className="inline-block w-10 font-medium">Root:</span>
{projectData.tags?.map((tag) => ( <span className="font-mono"> {projectData.root}</span>
<span className="ml-2 font-mono">
<Pill text={tag} />
</span>
))}
</p> </p>
) : null} {displayType ? (
<p> <p>
<span className="inline-block w-10 font-medium">Root:</span> <span className="inline-block w-10 font-medium">Type:</span>
<span className="font-mono"> {projectData.root}</span> <span className="font-mono"> {displayType}</span>
</p> </p>
{displayType ? ( ) : null}
<p> </div>
<span className="inline-block w-10 font-medium">Type:</span> <div className="self-end">
<span className="font-mono"> {displayType}</span> <span>
</p> {onViewInProjectGraph &&
) : null} viewInProjectGraphPosition === 'bottom' && (
<ViewInProjectGraphButton
callback={() =>
onViewInProjectGraph({ projectName: project.name })
}
/>
)}{' '}
</span>
</div>
</div> </div>
</header> </header>
<div> <div>
@ -146,3 +158,15 @@ export const ProjectDetails = ({
}; };
export default ProjectDetails; export default ProjectDetails;
function ViewInProjectGraphButton({ callback }: { callback: () => void }) {
return (
<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={() => callback()}
>
<EyeIcon className="h-5 w-5 "></EyeIcon>
<span>View In Graph</span>
</button>
);
}