chore: update react imports

Signed-off-by: Paul Schultz <pschultz@pobox.com>
This commit is contained in:
Paul Schultz
2025-01-28 10:21:17 -06:00
parent 02981a2377
commit 2e26579e06
1282 changed files with 2776 additions and 3434 deletions
@@ -40,7 +40,6 @@ Route refs do not have any behavior themselves. They are an opaque value that re
The code snippet in the previous section does not indicate which plugin the route belongs to. To do so, you have to use it in the creation of any kind of routable extension, such as a page extension:
```tsx title="plugins/catalog/src/plugin.tsx"
import React from 'react';
import {
createFrontendPlugin,
createPageExtension,
@@ -91,7 +90,6 @@ Route references can be used to link to page in the same plugin, or to pages in
Suppose we are creating a plugin that renders a Catalog index page with a link to a "Foo" component details page. Here is the code for the index page:
```tsx title="plugins/catalog/src/components/IndexPage.tsx"
import React from 'react';
import { useRouteRef } from '@backstage/frontend-plugin-api';
import { detailsRouteRef } from '../routes';
@@ -125,7 +123,6 @@ We use the `useRouteRef` hook to create a link generator function that returns t
Let's see how the details page can get the parameters from the URL:
```tsx title="plugins/catalog/src/components/DetailsPage.tsx"
import React from 'react';
import { useRouteRefParams } from '@backstage/frontend-plugin-api';
import { detailsRouteRef } from '../routes';
@@ -169,7 +166,6 @@ export const createComponentExternalRouteRef = createExternalRouteRef();
External routes are also used in a similar way as regular routes:
```tsx title="plugins/catalog/src/components/IndexPage.tsx"
import React from 'react';
import { useRouteRef } from '@backstage/frontend-plugin-api';
import { createComponentExternalRouteRef } from '../routes';
@@ -194,7 +190,6 @@ Given the above binding, using `useRouteRef(createComponentExternalRouteRef)` wi
Now the only thing left is to provide the page and external route via a plugin:
```tsx title="plugins/catalog/src/plugin.tsx"
import React from 'react';
import {
createFrontendPlugin,
createPageExtension,
@@ -333,7 +328,6 @@ export const detailsSubRouteRef = createSubRouteRef({
Using subroutes in a page extension is as simple as this:
```tsx title="plugins/catalog/src/components/IndexPage.tsx"
import React from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { useRouteRef } from '@backstage/frontend-plugin-api';
import { indexRouteRef, detailsSubRouteRef } from '../routes';
@@ -381,7 +375,6 @@ export const IndexPage = () => {
This is how you can get the parameters of a sub route URL:
```tsx title="plugins/catalog/src/components/DetailsPage.tsx"
import React from 'react';
import { useParams } from 'react-router-dom';
export const DetailsPage = () => {
@@ -405,7 +398,6 @@ export const DetailsPage = () => {
Finally, see how a plugin can provide subroutes:
```tsx title="plugins/catalog/src/plugin.tsx"
import React from 'react';
import {
createFrontendPlugin,
createPageExtension,
@@ -86,7 +86,6 @@ There is one more detail that we need to deal with before moving on. The `app.cr
```tsx title="in packages/app/src/index.tsx"
import '@backstage/cli/asset-types';
import React from 'react';
import ReactDOM from 'react-dom/client';
// highlight-remove-next-line
import App from './App';
@@ -25,7 +25,6 @@ A component can be used for more than one extension, and it should be tested ind
Use the `renderInTestApp` helper to render a given component inside a Backstage test app:
```tsx
import React from 'react';
import { screen } from '@testing-library/react';
import { renderInTestApp } from '@backstage/frontend-test-utils';
import { EntityDetails } from './plugin';
@@ -44,7 +43,6 @@ describe('Entity details component', () => {
To mock [Utility APIs](../architecture/33-utility-apis.md) that are used by your component you can use the `TestApiProvider` to override individual API implementations. In the snippet below, we wrap the component within a `TestApiProvider` in order to mock the catalog client API:
```tsx
import React from 'react';
import { screen } from '@testing-library/react';
import {
renderInTestApp,