Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Align import references of Link component to use @backstage/core-components

See original GitHub issue

This issue is to collect a list of outstanding places where the Link component is imported not from @backstage/core-components but instead from other, generally 3rd party packages (e.g., MUI). The intent is to properly align the functionality of links across the system as a whole.

Links in the Backstage UI should be generated out of this component: https://backstage.io/storybook/?path=/story/navigation-link--default

Backstage Core

packages/app https://github.com/backstage/backstage/blob/153eac4252f2b47d246cdfff3f567644761af201/packages/app/src/components/Root/Root.tsx#L18
- Not fixed as of 2022-07-14
create-app template https://github.com/backstage/backstage/blob/153eac4252f2b47d246cdfff3f567644761af201/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx#L18
- Not fixed as of 2022-07-14
techdocs-cli-embedded-app https://github.com/backstage/backstage/blob/ff7fdcb1b1241a570c8fcf4565a2177464987ea0/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx#L19
- Package was refactored from embedded-techdocs-app to techdocs-cli-embedded-app but still is old link
- Not fixed as of 2022-07-14
@backstage/core-components layout/ErrorPage https://github.com/backstage/backstage/blob/153eac4252f2b47d246cdfff3f567644761af201/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx#L19
@backstage/core-components HeaderLabel https://github.com/backstage/backstage/blob/153eac4252f2b47d246cdfff3f567644761af201/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx#L18
@backstage/core-components Sidebar https://github.com/backstage/backstage/blob/153eac4252f2b47d246cdfff3f567644761af201/packages/core-components/src/layout/Sidebar/Intro.tsx#L20
- Not fixed as of 2022-07-14

Plugins

@backstage/plugin-bazaar (multiple references)
@backstage/plugin-catalog https://github.com/backstage/backstage/blob/fb03c47c8b1e6d37bfe182e88d675e7b330615d9/plugins/catalog/src/components/Router.tsx#L22
@backstage/plugin-circleci (multiple references)

Context

Specifically, @freben noted in a PR review,

Could you try to change the import of Link in this file to instead use the one from @backstage/core-components? That one is supposed to be used everywhere (but apparently wasn’t in this file), and it is meant to set target and rel automatically and correctly so you could remove these here hopefully. The other benefit is that it’ll be connected to analytics, styling etc etc in a cross-app way.

_Originally posted by @freben in https://github.com/backstage/backstage/pull/8115#discussion_r752158316_

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:8 (6 by maintainers)

Top GitHub Comments

1reaction

WarlenRodriguescommented, Nov 18, 2021

Working on this!

0reactions

dmitry-lobanovcommented, Oct 11, 2022

Hi everyone, I had some time to work on this issue, created a PR #14050

aligned import references of Link component
added a lint rule (please let me know if there’s a better place for it)

Top Results From Across the Web

TechDocs How-To guides - Backstage.io

In your Backstage instance's app-config.yaml , set techdocs.builder from ... React from 'react'; import { Content } from '@backstage/core-components'; ...

Material-ui adding Link component from react-router

If I try to wrap <Tab/> component into <Link/> component, I'm getting error that <Tabs/> component accepts only <Tab/> component. This doesn't work...

Links - Material UI - MUI

The Link component allows you to easily customize anchor elements with your theme colors and typography styles.

Link - Chakra UI

Here is an example using the Link component: import NextLink from 'next/link'. import { Link } from '@chakra-ui/react'. <Link as={NextLink} href='/home'>.

Using the Link and NavLink Components to Navigate to a Route

React-Router provides the and components, which allow you to navigate ... import { Link } from 'react-router-dom'; classAppextendsComponent ...