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}
onViewInTaskGraph={handleViewInTaskGraph}
onRunTarget={environment === 'nx-console' ? handleRunTarget : undefined}
viewInProjectGraphPosition={
environment === 'nx-console' ? 'bottom' : 'top'
}
/>
<ErrorToast errors={errors} />
</>

2
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">
<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>
{fileSpecifier && (
<span className="hidden px-1 md:inline">-</span>
)}
<span>{fileSpecifier}</span>
</span>
<pre className="overflow-x-scroll pl-4 pt-3">

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

@ -26,6 +26,7 @@ export interface ProjectDetailsProps {
targetName: string;
}) => void;
onRunTarget?: (data: { projectName: string; targetName: string }) => void;
viewInProjectGraphPosition?: 'top' | 'bottom';
}
export const ProjectDetails = ({
@ -35,6 +36,7 @@ export const ProjectDetails = ({
onViewInProjectGraph,
onViewInTaskGraph,
onRunTarget,
viewInProjectGraphPosition = 'top',
}: ProjectDetailsProps) => {
const projectData = project.data;
const isCompact = variant === 'compact';
@ -84,20 +86,17 @@ export const ProjectDetails = ({
/>
</div>
<span>
{onViewInProjectGraph ? (
<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={() =>
{onViewInProjectGraph && viewInProjectGraphPosition === 'top' && (
<ViewInProjectGraphButton
callback={() =>
onViewInProjectGraph({ projectName: project.name })
}
>
<EyeIcon className="h-5 w-5 "></EyeIcon>
<span>View In Graph</span>
</button>
) : null}{' '}
/>
)}{' '}
</span>
</div>
<div className="py-2 ">
<div className="flex justify-between py-2">
<div>
{projectData.tags && projectData.tags.length ? (
<p>
<span className="inline-block w-10 font-medium">Tags:</span>
@ -119,6 +118,19 @@ export const ProjectDetails = ({
</p>
) : null}
</div>
<div className="self-end">
<span>
{onViewInProjectGraph &&
viewInProjectGraphPosition === 'bottom' && (
<ViewInProjectGraphButton
callback={() =>
onViewInProjectGraph({ projectName: project.name })
}
/>
)}{' '}
</span>
</div>
</div>
</header>
<div>
<h2 className={isCompact ? `mb-3 text-lg` : `mb-4 text-xl`}>
@ -146,3 +158,15 @@ export const 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>
);
}