import React from 'react' ; import { Navigate , Route } from 'react-router' ; import { apiDocsPlugin , ApiExplorerPage } from '@backstage/plugin-api-docs' ; import { CatalogEntityPage , CatalogIndexPage , catalogPlugin , } from '@backstage/plugin-catalog' ; import { CatalogImportPage , catalogImportPlugin , } from '@backstage/plugin-catalog-import' ; import { ScaffolderPage , scaffolderPlugin } from '@backstage/plugin-scaffolder' ; import { SearchPage } from '@backstage/plugin-search' ; import { TechRadarPage } from '@backstage/plugin-tech-radar' ; import { TechdocsPage } from '@backstage/plugin-techdocs' ; import { UserSettingsPage } from '@backstage/plugin-user-settings' ; import { apis } from './apis' ; import { entityPage } from './components/catalog/EntityPage' ; import { Root } from './components/Root' ; import { AlertDisplay , OAuthRequestDialog } from '@backstage/core-components' ; import { FlatRoutes } from '@backstage/core-app-api' ; import { createApp } from '@backstage/app-defaults' ; const app = createApp ( { apis , bindRoutes ( { bind } ) { bind ( catalogPlugin . externalRoutes , { createComponent : scaffolderPlugin . routes . root , } ) ; bind ( apiDocsPlugin . externalRoutes , { createComponent : scaffolderPlugin . routes . root , } ) ; bind ( scaffolderPlugin . externalRoutes , { registerComponent : catalogImportPlugin . routes . importPage , } ) ; } , } ) ; const AppProvider = app . getProvider ( ) ; const AppRouter = app . getRouter ( ) ; const routes = ( < FlatRoutes > < Navigate key = "/" to = "/catalog" / > < Route path = "/catalog" element = { < CatalogIndexPage / > } /> < Route path = "/catalog/:namespace/:kind/:name" element = { < CatalogEntityPage / > } > { entityPage } < /Route> < Route path = "/docs" element = { < TechdocsPage / > } /> < Route path = "/create" element = { < ScaffolderPage / > } /> < Route path = "/api-docs" element = { < ApiExplorerPage / > } /> < Route path = "/tech-radar" element = { < TechRadarPage width = { 1500 } height = { 800 } / > } /> < Route path = "/catalog-import" element = { < CatalogImportPage / > } /> < Route path = "/search" element = { < SearchPage / > } /> < Route path = "/settings" element = { < UserSettingsPage / > } /> < /FlatRoutes>); const App = ( ) => ( < AppProvider > < AlertDisplay /> < OAuthRequestDialog / > < AppRouter > < Root > { routes } < /Root> < /AppRouter> < /AppProvider>); export default App ;