diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index af44085151..2a0a34823d 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -142,20 +142,22 @@ export const TemplateCard = (props: TemplateCardProps) => { - {props.additionalLinks?.map(({ icon, text, url }) => ( - + {props.additionalLinks?.map(({ icon, text, url }, index) => ( + ))} - {template.metadata.links?.map(({ url, icon, title }) => ( - - - - ))} + {template.metadata.links?.map( + ({ url, icon, title }, index) => ( + + + + ), + )} diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx index ccf12b9309..58e5e36173 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx @@ -21,18 +21,10 @@ import { isTemplateEntityV1beta3, TemplateEntityV1beta3, } from '@backstage/plugin-scaffolder-common'; -import { Progress, Link, DocsIcon } from '@backstage/core-components'; +import { Progress, Link } from '@backstage/core-components'; import { Typography } from '@material-ui/core'; -import { - errorApiRef, - IconComponent, - useApi, - useApp, - useRouteRef, -} from '@backstage/core-plugin-api'; +import { errorApiRef, IconComponent, useApi } from '@backstage/core-plugin-api'; import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha'; -import { viewTechDocRouteRef } from '../../routes'; -import { useNavigate } from 'react-router-dom'; /** * @alpha @@ -51,10 +43,7 @@ export interface TemplateGroupsProps { TemplateCardComponent?: React.ComponentType<{ template: TemplateEntityV1beta3; }>; - onTemplateSelected?: (template: { - namespace: string; - templateName: string; - }) => void; + onTemplateSelected?: (template: TemplateEntityV1beta3) => void; additionalLinksForEntity?: (template: TemplateEntityV1beta3) => { icon: IconComponent; text: string; @@ -72,8 +61,7 @@ export const TemplateGroups = (props: TemplateGroupsProps) => { const errorApi = useApi(errorApiRef); const onSelected = useCallback( (template: TemplateEntityV1beta3) => { - const { namespace, name } = parseEntityRef(stringifyEntityRef(template)); - onTemplateSelected?.({ namespace, templateName: name }); + onTemplateSelected?.(template); }, [onTemplateSelected], ); diff --git a/plugins/scaffolder-react/src/next/components/index.ts b/plugins/scaffolder-react/src/next/components/index.ts index a38b0689d5..5bfa5ccdc8 100644 --- a/plugins/scaffolder-react/src/next/components/index.ts +++ b/plugins/scaffolder-react/src/next/components/index.ts @@ -17,6 +17,7 @@ export * from './Stepper'; export * from './TemplateCard'; export * from './ReviewState'; export * from './TemplateGroup'; +export * from './TemplateGroups'; export * from './Workflow'; export * from './TemplateOutputs'; export * from './Form'; diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index 60a932c06d..b1d7a66a94 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx @@ -14,14 +14,15 @@ * limitations under the License. */ -import React from 'react'; +import React, { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import { useRouteRef } from '@backstage/core-plugin-api'; +import { useApp, useRouteRef } from '@backstage/core-plugin-api'; import { Content, ContentHeader, + DocsIcon, Header, Page, SupportButton, @@ -40,13 +41,19 @@ import { } from '@backstage/plugin-scaffolder-react/alpha'; import { RegisterExistingButton } from './RegisterExistingButton'; -import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups'; +import { + TemplateGroupFilter, + TemplateGroups, +} from '@backstage/plugin-scaffolder-react/alpha'; import { actionsRouteRef, editRouteRef, registerComponentRouteRef, scaffolderListTaskRouteRef, + selectedTemplateRouteRef, + viewTechDocRouteRef, } from '../../routes'; +import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model'; /** * @alpha @@ -93,6 +100,9 @@ export const TemplateListPage = (props: TemplateListPageProps) => { const editorLink = useRouteRef(editRouteRef); const actionsLink = useRouteRef(actionsRouteRef); const tasksLink = useRouteRef(scaffolderListTaskRouteRef); + const viewTechDocsLink = useRouteRef(viewTechDocRouteRef); + const templateRoute = useRouteRef(selectedTemplateRouteRef); + const app = useApp(); const groups = givenGroups.length ? createGroupsWithOther(givenGroups) @@ -113,6 +123,34 @@ export const TemplateListPage = (props: TemplateListPageProps) => { : undefined, }; + const additionalLinksForEntity = useCallback( + (template: TemplateEntityV1beta3) => { + const { kind, namespace, name } = parseEntityRef( + stringifyEntityRef(template), + ); + return template.metadata.annotations?.['backstage.io/techdocs-ref'] && + viewTechDocsLink + ? [ + { + icon: app.getSystemIcon('docs') ?? DocsIcon, + text: 'View TechDocs', + url: viewTechDocsLink({ kind, namespace, name }), + }, + ] + : []; + }, + [app, viewTechDocsLink], + ); + + const onTemplateSelected = useCallback( + (template: TemplateEntityV1beta3) => { + const { namespace, name } = parseEntityRef(stringifyEntityRef(template)); + + navigate(templateRoute({ namespace, templateName: name })); + }, + [navigate, templateRoute], + ); + return ( @@ -152,6 +190,8 @@ export const TemplateListPage = (props: TemplateListPageProps) => { groups={groups} templateFilter={templateFilter} TemplateCardComponent={TemplateCardComponent} + onTemplateSelected={onTemplateSelected} + additionalLinksForEntity={additionalLinksForEntity} /> diff --git a/plugins/scaffolder/src/next/TemplateListPage/index.ts b/plugins/scaffolder/src/next/TemplateListPage/index.ts index e0eb0bb021..c404a9352a 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/index.ts +++ b/plugins/scaffolder/src/next/TemplateListPage/index.ts @@ -15,9 +15,3 @@ */ export { TemplateListPage } from './TemplateListPage'; export type { TemplateListPageProps } from './TemplateListPage'; - -export { TemplateGroups } from './TemplateGroups'; -export type { - TemplateGroupFilter, - TemplateGroupsProps, -} from './TemplateGroups';