WIP
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com> Co-authored-by: Johan Haals <johan.haals@gmail.com> Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
committed by
Patrik Oldsberg
Patrik Oldsberg
parent
3438bdeb7d
commit
321eb06b5c
@@ -1,107 +1,146 @@
|
||||
app:
|
||||
packages: 'all' # ✨
|
||||
extensions:
|
||||
- graphiql.page:
|
||||
config:
|
||||
path: /
|
||||
|
||||
# - core.signInPage:
|
||||
# props:
|
||||
# provider:
|
||||
# id: google
|
||||
# title: Google
|
||||
# message: Sign In using Google
|
||||
# apiRef: googleAuthApiRef # ???
|
||||
|
||||
# - core.nav:
|
||||
# config:
|
||||
# logo: assets/logo.png
|
||||
# layout:
|
||||
# - label: Search
|
||||
# icon: search
|
||||
# to: /search
|
||||
# items:
|
||||
# - point: search
|
||||
# - type: divider
|
||||
# - label: Menu
|
||||
# icon: menu
|
||||
# items:
|
||||
# - label: Home
|
||||
# icon: home
|
||||
# to: /catalog
|
||||
# - label: Create...
|
||||
# icon: create
|
||||
# to: /create
|
||||
# - type: divider
|
||||
# - type: scroll-wrapper
|
||||
# items:
|
||||
# - label: Tech Radar
|
||||
# icon: map
|
||||
# to: /tech-radar
|
||||
# - label: GraphiQL
|
||||
# icon: graphiql
|
||||
# to: /graphiql
|
||||
# - type: divider
|
||||
# - point: shortcuts
|
||||
# - type: space
|
||||
# - type: divider
|
||||
# - label: Settings
|
||||
# icon: avatar
|
||||
# to: /settings
|
||||
# items:
|
||||
# - point: settings
|
||||
# - core.nav/search: '@backstage/plugin-search#SidebarSearchModal'
|
||||
# - core.nav/shortcuts:
|
||||
# use: '@backstage/plugin-shortcuts#Shortcuts'
|
||||
# config:
|
||||
# allowExternalLinks: true
|
||||
# - core.nav/settings: '@backstage/plugin-user-settings#SidebarSettings'
|
||||
# scmAuthExtension: >-
|
||||
# createScmAuthExtension({
|
||||
# id: 'apis.scmAuth.addons.ghe',
|
||||
# factory({ bind }) {
|
||||
# bind.scmAuthAddon({
|
||||
# baseUrl: 'https://github.spotify.net',
|
||||
# api: githubAuthApiRef,
|
||||
# })
|
||||
# }
|
||||
# })
|
||||
|
||||
# - core.pages.index:
|
||||
# at:
|
||||
# point: core.routes
|
||||
# config:
|
||||
# path: /
|
||||
# use: 'react-router-dom#Navigate'
|
||||
# config:
|
||||
# to: /catalog
|
||||
# externalRouteRefs:
|
||||
# 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,
|
||||
# });
|
||||
|
||||
# - scaffolder.page:
|
||||
# config:
|
||||
# groups:
|
||||
# - title: Recommended
|
||||
# filter:
|
||||
# entity.metadata.tags: recommended
|
||||
# - scaffolder.page/fields: '@backstage/plugin-scaffolder#LowerCaseValuePickerFieldExtension'
|
||||
# - scaffolder.page/layout: '@backstage/plugin-scaffolder#TwoColumnLayout'
|
||||
# extensions:
|
||||
# - plugin.catalog:
|
||||
# config:
|
||||
# externalRoutes:
|
||||
# createComponent: plugin.scaffolder.page
|
||||
# viewTechDoc: plugin.techdocs.docRootPage
|
||||
# createFromTemplate: plugin.scaffolder.templatePage
|
||||
# - graphiql.page:
|
||||
# config:
|
||||
# path: /
|
||||
# - apis.auth.providers.github:
|
||||
# config:
|
||||
# provider: ghe
|
||||
|
||||
# - search.page/content: 'app#customSearchPage' # custom search page from somewhere
|
||||
# - core.signInPage:
|
||||
# props:
|
||||
# provider:
|
||||
# id: google
|
||||
# title: Google
|
||||
# message: Sign In using Google
|
||||
# apiRef: googleAuthApiRef # ???
|
||||
|
||||
# - user-settings.page.routes.advanced:
|
||||
# at:
|
||||
# point: user-settings.page/routes
|
||||
# config:
|
||||
# title: Advanced
|
||||
# path: /advanced
|
||||
# use: '@backstage/plugin-user-settings#AdvancedSettings'
|
||||
# - core.nav:
|
||||
# config:
|
||||
# logo: assets/logo.png
|
||||
# layout:
|
||||
# - label: Search
|
||||
# icon: search
|
||||
# to: /search
|
||||
# items:
|
||||
# - point: search
|
||||
# - type: divider
|
||||
# - label: Menu
|
||||
# icon: menu
|
||||
# items:
|
||||
# - label: Home
|
||||
# icon: home
|
||||
# to: /catalog
|
||||
# - label: Create...
|
||||
# icon: create
|
||||
# to: /create
|
||||
# - type: divider
|
||||
# - type: scroll-wrapper
|
||||
# items:
|
||||
# - label: Tech Radar
|
||||
# icon: map
|
||||
# to: /tech-radar
|
||||
# - label: GraphiQL
|
||||
# icon: graphiql
|
||||
# to: /graphiql
|
||||
# - type: divider
|
||||
# - point: shortcuts
|
||||
# - type: space
|
||||
# - type: divider
|
||||
# - label: Settings
|
||||
# icon: avatar
|
||||
# to: /settings
|
||||
# items:
|
||||
# - point: settings
|
||||
# - core.nav/search: '@backstage/plugin-search#SidebarSearchModal'
|
||||
# - core.nav/shortcuts:
|
||||
# use: '@backstage/plugin-shortcuts#Shortcuts'
|
||||
# config:
|
||||
# allowExternalLinks: true
|
||||
# - core.nav/settings: '@backstage/plugin-user-settings#SidebarSettings'
|
||||
|
||||
# - entity.card.orphanWarning
|
||||
# - entity.card.processingErrors
|
||||
# - entity.card.about
|
||||
# - entity.card.catalogGraph
|
||||
# - entity.card.pagerDuty
|
||||
# - entity.card.links
|
||||
# - entity.card.labels
|
||||
# - entity.card.githubInsightsLanguages
|
||||
# - entity.card.githubInsightsReleases
|
||||
# - entity.card.githubInsightsReadme:
|
||||
# config:
|
||||
# maxHeight: 350 # Throwing this config in to have an example, but in practice rely on default
|
||||
# - entity.card.subcomponentsCard
|
||||
# - entity.card.userProfile
|
||||
# - entity.card.ownership
|
||||
# - entity.card.likeDislikeRatings
|
||||
# - entity.content.dependsOnComponents
|
||||
# - entity.content.codeInsights
|
||||
# - entity.content.todo
|
||||
# - entity.content.feedbackResponse
|
||||
# - core.pages.index:
|
||||
# at:
|
||||
# point: core.routes
|
||||
# config:
|
||||
# path: /
|
||||
# use: 'react-router-dom#Navigate'
|
||||
# config:
|
||||
# to: /catalog
|
||||
|
||||
# - scaffolder.page:
|
||||
# config:
|
||||
# groups:
|
||||
# - title: Recommended
|
||||
# filter:
|
||||
# entity.metadata.tags: recommended
|
||||
# - scaffolder.page/fields: '@backstage/plugin-scaffolder#LowerCaseValuePickerFieldExtension'
|
||||
# - scaffolder.page/layout: '@backstage/plugin-scaffolder#TwoColumnLayout'
|
||||
|
||||
# - search.page/content: 'app#customSearchPage' # custom search page from somewhere
|
||||
|
||||
# - user-settings.page.routes.advanced:
|
||||
# at:
|
||||
# point: user-settings.page/routes
|
||||
# config:
|
||||
# title: Advanced
|
||||
# path: /advanced
|
||||
# use: '@backstage/plugin-user-settings#AdvancedSettings'
|
||||
|
||||
# - entity.card.orphanWarning
|
||||
# - entity.card.processingErrors
|
||||
# - entity.card.about
|
||||
# - entity.card.catalogGraph
|
||||
# - entity.card.pagerDuty
|
||||
# - entity.card.links
|
||||
# - entity.card.labels
|
||||
# - entity.card.githubInsightsLanguages
|
||||
# - entity.card.githubInsightsReleases
|
||||
# - entity.card.githubInsightsReadme:
|
||||
# config:
|
||||
# maxHeight: 350 # Throwing this config in to have an example, but in practice rely on default
|
||||
# - entity.card.subcomponentsCard
|
||||
# - entity.card.userProfile
|
||||
# - entity.card.ownership
|
||||
# - entity.card.likeDislikeRatings
|
||||
# - entity.content.dependsOnComponents
|
||||
# - entity.content.codeInsights
|
||||
# - entity.content.todo
|
||||
# - entity.content.feedbackResponse
|
||||
|
||||
@@ -23,6 +23,7 @@ import React from 'react';
|
||||
export const GraphiqlPage = createPageExtension({
|
||||
id: 'graphiql.page',
|
||||
defaultPath: '/graphiql',
|
||||
disabled: true,
|
||||
component: () =>
|
||||
import('@backstage/plugin-graphiql').then(({ Router }) => <Router />),
|
||||
});
|
||||
|
||||
@@ -19,19 +19,31 @@ import { Link } from '@backstage/core-components';
|
||||
import {
|
||||
createPageExtension,
|
||||
createPlugin,
|
||||
useRouteRef,
|
||||
} from '@backstage/frontend-plugin-api';
|
||||
import { createRouteRef, createSubRouteRef } from '@backstage/core-plugin-api';
|
||||
import { Route, Routes } from 'react-router-dom';
|
||||
|
||||
const indexRouteRef = createRouteRef({ id: 'index' });
|
||||
const page1RouteRef = createRouteRef({ id: 'page1' });
|
||||
// const page2RouteRef = createSubRouteRef({
|
||||
// id: 'page2',
|
||||
// parent: page1RouteRef,
|
||||
// path: '/page2',
|
||||
// });
|
||||
|
||||
const IndexPage = createPageExtension({
|
||||
id: 'index',
|
||||
defaultPath: '/',
|
||||
// indexRouteRef
|
||||
component: async () => {
|
||||
const Component = () => {
|
||||
// const page1 = useRouteRef();
|
||||
const page1Link = useRouteRef(page1RouteRef);
|
||||
return (
|
||||
<div>
|
||||
op
|
||||
<div>
|
||||
<Link to="/page1">Page 1</Link>
|
||||
<Link to={page1Link()}>Page 1</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/graphiql">GraphiQL</Link>
|
||||
@@ -46,17 +58,42 @@ const IndexPage = createPageExtension({
|
||||
const Page1 = createPageExtension({
|
||||
id: 'page1',
|
||||
defaultPath: '/page1',
|
||||
routeRef: page1RouteRef,
|
||||
component: async () => {
|
||||
const Component = () => (
|
||||
<div>
|
||||
<h1>This is page 1</h1>
|
||||
</div>
|
||||
);
|
||||
const Component = () => {
|
||||
const indexLink = useRouteRef(indexRouteRef);
|
||||
// const page2Link = useRouteRef(page2RouteRef);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>This is page 1</h1>
|
||||
<Link to={indexLink()}>Go back</Link>
|
||||
{/* <Link to={page2Link()}>Page 2</Link> */}
|
||||
|
||||
<div>
|
||||
Sub-page content:
|
||||
<div>
|
||||
<Routes>
|
||||
<Route path="/" element={<h2>This is also page 1</h2>} />
|
||||
<Route path="/page2" element={<h2>This is page 2</h2>} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return <Component />;
|
||||
},
|
||||
});
|
||||
|
||||
export const pagesPlugin = createPlugin({
|
||||
id: 'pages',
|
||||
// routes: {
|
||||
// index: indexRouteRef,
|
||||
// // reference in config:
|
||||
// // 'plugin.pages.routes.index'
|
||||
// // OR
|
||||
// // 'page1'
|
||||
// },
|
||||
extensions: [IndexPage, Page1],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user