forked from nrwl/nx
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): add {% project-details %} as a tag in markdown docs (nrwl…
…#21288) Co-authored-by: Colum Ferry <[email protected]> Co-authored-by: Isaac Mann <[email protected]>
- Loading branch information
3 people
authored
Jan 24, 2024
1 parent
292d407
commit 7b680ec
Showing
36 changed files
with
1,473 additions
and
649 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| export * from './lib/project-details'; | ||
| export * from './lib/project-details-wrapper'; | ||
| export * from './lib/project-details-page'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
163 changes: 163 additions & 0 deletions
163
graph/project-details/src/lib/project-details-wrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
|
|
||
| import { useNavigate, useSearchParams } from 'react-router-dom'; | ||
|
|
||
| /* eslint-disable @nx/enforce-module-boundaries */ | ||
| // nx-ignore-next-line | ||
| import { ProjectGraphProjectNode } from '@nx/devkit'; | ||
| import { | ||
| getExternalApiService, | ||
| useEnvironmentConfig, | ||
| useRouteConstructor, | ||
| } from '@nx/graph/shared'; | ||
| import { | ||
| ProjectDetails, | ||
| ProjectDetailsImperativeHandle, | ||
| } from '@nx/graph/ui-project-details'; | ||
| import { useCallback, useLayoutEffect, useRef } from 'react'; | ||
|
|
||
| export interface ProjectDetailsProps { | ||
| project: ProjectGraphProjectNode; | ||
| sourceMap: Record<string, string[]>; | ||
| } | ||
|
|
||
| export function ProjectDetailsWrapper(props: ProjectDetailsProps) { | ||
| const projectDetailsRef = useRef<ProjectDetailsImperativeHandle>(null); | ||
| const environment = useEnvironmentConfig()?.environment; | ||
| const externalApiService = getExternalApiService(); | ||
| const navigate = useNavigate(); | ||
| const routeConstructor = useRouteConstructor(); | ||
| const [searchParams, setSearchParams] = useSearchParams(); | ||
|
|
||
| const handleViewInProjectGraph = useCallback( | ||
| (data: { projectName: string }) => { | ||
| if (environment === 'nx-console') { | ||
| externalApiService.postEvent({ | ||
| type: 'open-project-graph', | ||
| payload: { | ||
| projectName: data.projectName, | ||
| }, | ||
| }); | ||
| } else { | ||
| navigate( | ||
| routeConstructor( | ||
| `/projects/${encodeURIComponent(data.projectName)}`, | ||
| true | ||
| ) | ||
| ); | ||
| } | ||
| }, | ||
| [externalApiService, routeConstructor, navigate, environment] | ||
| ); | ||
|
|
||
| const handleViewInTaskGraph = useCallback( | ||
| (data: { projectName: string; targetName: string }) => { | ||
| if (environment === 'nx-console') { | ||
| externalApiService.postEvent({ | ||
| type: 'open-task-graph', | ||
| payload: { | ||
| projectName: data.projectName, | ||
| targetName: data.targetName, | ||
| }, | ||
| }); | ||
| } else { | ||
| navigate( | ||
| routeConstructor( | ||
| { | ||
| pathname: `/tasks/${encodeURIComponent(data.targetName)}`, | ||
| search: `?projects=${encodeURIComponent(data.projectName)}`, | ||
| }, | ||
| true | ||
| ) | ||
| ); | ||
| } | ||
| }, | ||
| [externalApiService, routeConstructor, navigate, environment] | ||
| ); | ||
|
|
||
| const handleRunTarget = useCallback( | ||
| (data: { projectName: string; targetName: string }) => { | ||
| externalApiService.postEvent({ | ||
| type: 'run-task', | ||
| payload: { taskId: `${data.projectName}:${data.targetName}` }, | ||
| }); | ||
| }, | ||
| [externalApiService] | ||
| ); | ||
|
|
||
| const updateSearchParams = (params: URLSearchParams, sections: string[]) => { | ||
| if (sections.length === 0) { | ||
| params.delete('expanded'); | ||
| } else { | ||
| params.set('expanded', sections.join(',')); | ||
| } | ||
| }; | ||
|
|
||
| const handleTargetCollapse = useCallback( | ||
| (targetName: string) => { | ||
| setSearchParams( | ||
| (currentSearchParams) => { | ||
| const expandedSections = | ||
| currentSearchParams.get('expanded')?.split(',') || []; | ||
| const newExpandedSections = expandedSections.filter( | ||
| (section) => section !== targetName | ||
| ); | ||
| updateSearchParams(currentSearchParams, newExpandedSections); | ||
| return currentSearchParams; | ||
| }, | ||
| { | ||
| replace: true, | ||
| preventScrollReset: true, | ||
| } | ||
| ); | ||
| }, | ||
| [setSearchParams] | ||
| ); | ||
|
|
||
| const handleTargetExpand = useCallback( | ||
| (targetName: string) => { | ||
| setSearchParams( | ||
| (currentSearchParams) => { | ||
| const expandedSections = | ||
| currentSearchParams.get('expanded')?.split(',') || []; | ||
| if (!expandedSections.includes(targetName)) { | ||
| expandedSections.push(targetName); | ||
| updateSearchParams(currentSearchParams, expandedSections); | ||
| } | ||
| return currentSearchParams; | ||
| }, | ||
| { replace: true, preventScrollReset: true } | ||
| ); | ||
| }, | ||
| [setSearchParams] | ||
| ); | ||
|
|
||
| // On initial render, expand the sections that are included in the URL search params. | ||
| const isExpandedHandled = useRef(false); | ||
| useLayoutEffect(() => { | ||
| if (!props.project.data.targets) return; | ||
| if (isExpandedHandled.current) return; | ||
| isExpandedHandled.current = true; | ||
|
|
||
| const expandedSections = searchParams.get('expanded')?.split(',') || []; | ||
| for (const targetName of Object.keys(props.project.data.targets)) { | ||
| if (expandedSections.includes(targetName)) { | ||
| projectDetailsRef.current?.expandTarget(targetName); | ||
| } | ||
| } | ||
| }, [searchParams, props.project.data.targets, projectDetailsRef]); | ||
|
|
||
| return ( | ||
| <ProjectDetails | ||
| ref={projectDetailsRef} | ||
| {...props} | ||
| onTargetCollapse={handleTargetCollapse} | ||
| onTargetExpand={handleTargetExpand} | ||
| onViewInProjectGraph={handleViewInProjectGraph} | ||
| onViewInTaskGraph={handleViewInTaskGraph} | ||
| onRunTarget={environment === 'nx-console' ? handleRunTarget : undefined} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default ProjectDetailsWrapper; |
Oops, something went wrong.