forked from janus-idp/backstage-showcase
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add dynamic frontends (janus-idp#659)
Co-authored-by: Tomas Coufal <tcoufal@redhat.com> Co-authored-by: David Festal <dfestal@redhat.com>
- Loading branch information
3 people
committed
Nov 1, 2023
1 parent
c5d4177
commit da696fd
Showing
26 changed files
with
977 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| --- | ||
| 'backstage-plugin-catalog-backend-module-github-org': minor | ||
| 'backstage-plugin-scaffolder-backend-module-gitlab': minor | ||
| 'immobiliarelabs-backstage-plugin-gitlab-backend': minor | ||
| 'backstage-plugin-catalog-backend-module-github': minor | ||
| 'backstage-plugin-catalog-backend-module-gitlab': minor | ||
| 'janus-idp-backstage-plugin-keycloak-backend': minor | ||
| 'roadiehq-backstage-plugin-argo-cd-backend': minor | ||
| 'roadiehq-scaffolder-backend-module-utils': minor | ||
| 'janus-idp-backstage-plugin-aap-backend': minor | ||
| 'janus-idp-backstage-plugin-ocm-backend': minor | ||
| 'backstage-plugin-azure-devops-backend': minor | ||
| 'backstage-plugin-kubernetes-backend': minor | ||
| 'backstage-plugin-sonarqube-backend': minor | ||
| 'roadiehq-scaffolder-backend-argocd': minor | ||
| 'backstage-plugin-techdocs-backend': minor | ||
| 'backstage-plugin-jenkins-backend': minor | ||
| '@internal/plugin-scalprum-backend': minor | ||
| 'dynamic-plugins-imports': minor | ||
| 'dynamic-plugins-utils': minor | ||
| 'backend': minor | ||
| 'app': minor | ||
| --- | ||
|
|
||
| Enabling dynamic frontend plugins |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -342,3 +342,4 @@ enabled: | |
|
|
||
| dynamicPlugins: | ||
| rootDirectory: dynamic-plugins-root | ||
| frontend: {} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,195 +1,9 @@ | ||
| import { createApp } from '@backstage/app-defaults'; | ||
| import { AppRouter, FlatRoutes } from '@backstage/core-app-api'; | ||
| import { | ||
| AlertDisplay, | ||
| OAuthRequestDialog, | ||
| ProxiedSignInPage, | ||
| SignInPage, | ||
| } from '@backstage/core-components'; | ||
| import { ApiExplorerPage, apiDocsPlugin } from '@backstage/plugin-api-docs'; | ||
| import { | ||
| CatalogEntityPage, | ||
| CatalogIndexPage, | ||
| catalogPlugin, | ||
| } from '@backstage/plugin-catalog'; | ||
| import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; | ||
| import { CatalogGraphPage } from '@backstage/plugin-catalog-graph'; | ||
| import { | ||
| CatalogImportPage, | ||
| catalogImportPlugin, | ||
| } from '@backstage/plugin-catalog-import'; | ||
| import { HomepageCompositionRoot } from '@backstage/plugin-home'; | ||
| import { orgPlugin } from '@backstage/plugin-org'; | ||
| import { RequirePermission } from '@backstage/plugin-permission-react'; | ||
| import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; | ||
| import { SearchPage as BackstageSearchPage } from '@backstage/plugin-search'; | ||
| import { TechRadarPage } from '@backstage/plugin-tech-radar'; | ||
| import { | ||
| TechDocsIndexPage, | ||
| TechDocsReaderPage, | ||
| techdocsPlugin, | ||
| } from '@backstage/plugin-techdocs'; | ||
| import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; | ||
| import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; | ||
| import { UserSettingsPage } from '@backstage/plugin-user-settings'; | ||
| import { UnifiedThemeProvider } from '@backstage/theme'; | ||
| import LightIcon from '@mui/icons-material/WbSunny'; | ||
| import DarkIcon from '@mui/icons-material/Brightness2'; | ||
| import { OcmPage } from '@janus-idp/backstage-plugin-ocm'; | ||
| import React from 'react'; | ||
| import { Route } from 'react-router-dom'; | ||
| import DynamicRoot from './components/DynamicRoot'; | ||
| import { apis } from './apis'; | ||
| import { Root } from './components/Root'; | ||
| import { entityPage } from './components/catalog/EntityPage'; | ||
| import { HomePage } from './components/home/HomePage'; | ||
| import { LearningPaths } from './components/learningPaths/LearningPathsPage'; | ||
| import { SearchPage } from './components/search/SearchPage'; | ||
| import { LighthousePage } from '@backstage/plugin-lighthouse'; | ||
| import { | ||
| configApiRef, | ||
| githubAuthApiRef, | ||
| useApi, | ||
| } from '@backstage/core-plugin-api'; | ||
| import { customLightTheme } from './themes/lightTheme'; | ||
| import { customDarkTheme } from './themes/darkTheme'; | ||
| import { useUpdateTheme } from './hooks/useUpdateTheme'; | ||
|
|
||
| const app = createApp({ | ||
| apis, | ||
| bindRoutes({ bind }) { | ||
| bind(catalogPlugin.externalRoutes, { | ||
| createComponent: scaffolderPlugin.routes.root, | ||
| viewTechDoc: techdocsPlugin.routes.docRoot, | ||
| createFromTemplate: scaffolderPlugin.routes.selectedTemplate, | ||
| }); | ||
| bind(apiDocsPlugin.externalRoutes, { | ||
| registerApi: catalogImportPlugin.routes.importPage, | ||
| }); | ||
| bind(scaffolderPlugin.externalRoutes, { | ||
| registerComponent: catalogImportPlugin.routes.importPage, | ||
| viewTechDoc: techdocsPlugin.routes.docRoot, | ||
| }); | ||
| bind(orgPlugin.externalRoutes, { | ||
| catalogIndex: catalogPlugin.routes.catalogIndex, | ||
| }); | ||
| }, | ||
| themes: [ | ||
| { | ||
| id: 'light', | ||
| title: 'Light Theme', | ||
| variant: 'light', | ||
| icon: <LightIcon />, | ||
| Provider: ({ children }) => { | ||
| const themeColors = useUpdateTheme('light'); | ||
| return ( | ||
| <UnifiedThemeProvider | ||
| theme={customLightTheme(themeColors)} | ||
| children={children} | ||
| /> | ||
| ); | ||
| }, | ||
| }, | ||
| { | ||
| id: 'dark', | ||
| title: 'Dark Theme', | ||
| variant: 'dark', | ||
| icon: <DarkIcon />, | ||
| Provider: ({ children }) => { | ||
| const themeColors = useUpdateTheme('dark'); | ||
| return ( | ||
| <UnifiedThemeProvider | ||
| theme={customDarkTheme(themeColors)} | ||
| children={children} | ||
| /> | ||
| ); | ||
| }, | ||
| }, | ||
| ], | ||
| components: { | ||
| SignInPage: props => { | ||
| const configApi = useApi(configApiRef); | ||
| if (configApi.getString('auth.environment') === 'development') { | ||
| return ( | ||
| <SignInPage | ||
| {...props} | ||
| title="Select a sign-in method" | ||
| align="center" | ||
| providers={[ | ||
| 'guest', | ||
| { | ||
| id: 'github-auth-provider', | ||
| title: 'GitHub', | ||
| message: 'Sign in using GitHub', | ||
| apiRef: githubAuthApiRef, | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
| } | ||
| return <ProxiedSignInPage {...props} provider="oauth2Proxy" />; | ||
| }, | ||
| }, | ||
| }); | ||
| import React from 'react'; | ||
|
|
||
| // `routes` and every subsequent child needs to be static JSX, so the router can traverse the tree without rendering. | ||
| // This is why we can't use a function component here. | ||
| const routes = ( | ||
| <FlatRoutes> | ||
| <Route path="/" element={<HomepageCompositionRoot />}> | ||
| <HomePage /> | ||
| </Route> | ||
| <Route path="/catalog" element={<CatalogIndexPage />} /> | ||
| <Route | ||
| path="/catalog/:namespace/:kind/:name" | ||
| element={<CatalogEntityPage />} | ||
| > | ||
| {entityPage} | ||
| </Route> | ||
| <Route path="/docs" element={<TechDocsIndexPage />} /> | ||
| <Route | ||
| path="/docs/:namespace/:kind/:name/*" | ||
| element={<TechDocsReaderPage />} | ||
| > | ||
| <TechDocsAddons> | ||
| <ReportIssue /> | ||
| </TechDocsAddons> | ||
| </Route> | ||
| <Route | ||
| path="/create" | ||
| element={ | ||
| <ScaffolderPage headerOptions={{ title: 'Golden Path Templates' }} /> | ||
| } | ||
| /> | ||
| <Route path="/api-docs" element={<ApiExplorerPage />} /> | ||
| <Route | ||
| path="/tech-radar" | ||
| element={<TechRadarPage width={1500} height={800} id="default" />} | ||
| /> | ||
| <Route | ||
| path="/catalog-import" | ||
| element={ | ||
| <RequirePermission permission={catalogEntityCreatePermission}> | ||
| <CatalogImportPage /> | ||
| </RequirePermission> | ||
| } | ||
| /> | ||
| <Route path="/search" element={<BackstageSearchPage />}> | ||
| <SearchPage /> | ||
| </Route> | ||
| <Route path="/settings" element={<UserSettingsPage />} /> | ||
| <Route path="/catalog-graph" element={<CatalogGraphPage />} /> | ||
| <Route path="/ocm" element={<OcmPage />} /> | ||
| <Route path="/learning-paths" element={<LearningPaths />} /> | ||
| <Route path="/lighthouse" element={<LighthousePage />} /> | ||
| </FlatRoutes> | ||
| const AppRoot = () => ( | ||
| <DynamicRoot apis={apis} afterInit={() => import('./components/AppBase')} /> | ||
| ); | ||
|
|
||
| export default app.createRoot( | ||
| <> | ||
| <AlertDisplay /> | ||
| <OAuthRequestDialog /> | ||
| <AppRouter> | ||
| <Root>{routes}</Root> | ||
| </AppRouter> | ||
| </>, | ||
| ); | ||
| export default AppRoot; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import '@backstage/cli/asset-types'; | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import App from './App'; | ||
|
|
||
| ReactDOM.render(<App />, document.getElementById('root')); |
Oops, something went wrong.