diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx index 60de5fef85..3ee1ed45a9 100644 --- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ import { + DEFAULT_NAMESPACE, Entity, EntityLink, parseEntityRef, @@ -62,6 +63,7 @@ import { useApp, useRouteRef, } from '@backstage/core-plugin-api'; +import { viewTechDocRouteRef } from '@backstage/plugin-catalog/src/routes'; const useStyles = makeStyles(theme => ({ cardHeader: { @@ -189,6 +191,19 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => { const { name, namespace } = parseEntityRef(stringifyEntityRef(template)); const href = templateRoute({ templateName: name, namespace }); + // TechDocs Links + const viewTechdocRoute = useRouteRef(viewTechDocRouteRef); + const viewTechdocAnnotation = + template.metadata.annotations?.['backstage.io/techdocs-ref']; + const viewTechdocLink = + !!viewTechdocAnnotation && + !!viewTechdocRoute && + viewTechdocRoute({ + namespace: template.metadata?.namespace || DEFAULT_NAMESPACE, + kind: template.kind, + name: template.metadata.name, + }); + const iconResolver = (key?: string): IconComponent => key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon; @@ -260,6 +275,13 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => { )} + {viewTechdocLink && ( + + + + + + )} {templateProps.links?.map((link, i) => (