rename app/router to app/root

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
2024-01-09 18:51:48 +01:00
parent 1f008c27a1
commit d4149bf6d4
12 changed files with 80 additions and 72 deletions
+7
View File
@@ -0,0 +1,7 @@
---
'@backstage/frontend-app-api': minor
'@backstage/frontend-plugin-api': minor
'@backstage/frontend-test-utils': patch
---
Rename the `app/router` extension to `app/root`.
@@ -24,7 +24,7 @@ import {
createTranslationExtension,
} from '@backstage/frontend-plugin-api';
export const Core = createExtension({
export const App = createExtension({
namespace: 'app',
attachTo: { id: 'root', input: 'default' }, // ignored
inputs: {
@@ -22,10 +22,10 @@ import {
} from '@backstage/frontend-plugin-api';
import { SidebarPage } from '@backstage/core-components';
export const CoreLayout = createExtension({
export const AppLayout = createExtension({
namespace: 'app',
name: 'layout',
attachTo: { id: 'app/router', input: 'children' },
attachTo: { id: 'app/root', input: 'children' },
inputs: {
nav: createExtensionInput(
{
@@ -78,7 +78,7 @@ const SidebarNavItem = (
return <SidebarItem to={to} icon={Icon} text={title} />;
};
export const CoreNav = createExtension({
export const AppNav = createExtension({
namespace: 'app',
name: 'nav',
attachTo: { id: 'app/layout', input: 'nav' },
@@ -34,9 +34,9 @@ import { AppIdentityProxy } from '../../../core-app-api/src/apis/implementations
import { BrowserRouter } from 'react-router-dom';
import { RouteTracker } from '../routing/RouteTracker';
export const CoreRouter = createExtension({
export const AppRoot = createExtension({
namespace: 'app',
name: 'router',
name: 'root',
attachTo: { id: 'app', input: 'root' },
inputs: {
signInPage: createExtensionInput(
@@ -24,7 +24,7 @@ import {
} from '@backstage/frontend-plugin-api';
import { useRoutes } from 'react-router-dom';
export const CoreRoutes = createExtension({
export const AppRoutes = createExtension({
namespace: 'app',
name: 'routes',
attachTo: { id: 'app/layout', input: 'content' },
@@ -57,6 +57,7 @@ export const CoreRoutes = createExtension({
return element;
};
return {
element: <Routes />,
};
@@ -25,18 +25,18 @@ describe('readAppExtensionsConfig', () => {
it('should disable extension with shorthand notation', () => {
expect(
readAppExtensionsConfig(
new ConfigReader({ app: { extensions: [{ 'app/router': false }] } }),
new ConfigReader({ app: { extensions: [{ 'app/root': false }] } }),
),
).toEqual([
{
id: 'app/router',
id: 'app/root',
disabled: true,
},
]);
expect(
readAppExtensionsConfig(
new ConfigReader({
app: { extensions: [{ 'app/router': { disabled: true } }] },
app: { extensions: [{ 'app/root': { disabled: true } }] },
}),
),
).toEqual([
@@ -44,7 +44,7 @@ describe('readAppExtensionsConfig', () => {
at: undefined,
config: undefined,
disabled: true,
id: 'app/router',
id: 'app/root',
},
]);
});
@@ -52,33 +52,33 @@ describe('readAppExtensionsConfig', () => {
it('should enable extension with shorthand notation', () => {
expect(
readAppExtensionsConfig(
new ConfigReader({ app: { extensions: ['app/router'] } }),
new ConfigReader({ app: { extensions: ['app/root'] } }),
),
).toEqual([
{
id: 'app/router',
id: 'app/root',
disabled: false,
},
]);
expect(
readAppExtensionsConfig(
new ConfigReader({ app: { extensions: [{ 'app/router': true }] } }),
new ConfigReader({ app: { extensions: [{ 'app/root': true }] } }),
),
).toEqual([
{
id: 'app/router',
id: 'app/root',
disabled: false,
},
]);
expect(
readAppExtensionsConfig(
new ConfigReader({
app: { extensions: [{ 'app/router': { disabled: false } }] },
app: { extensions: [{ 'app/root': { disabled: false } }] },
}),
),
).toEqual([
{
id: 'app/router',
id: 'app/root',
disabled: false,
},
]);
@@ -89,12 +89,12 @@ describe('readAppExtensionsConfig', () => {
readAppExtensionsConfig(
new ConfigReader({
app: {
extensions: [{ 'app/router': 'some-string' }],
extensions: [{ 'app/root': 'some-string' }],
},
}),
),
).toThrow(
'Invalid extension configuration at app.extensions[0][app/router], value must be a boolean or object',
'Invalid extension configuration at app.extensions[0][app/root], value must be a boolean or object',
);
});
@@ -156,8 +156,8 @@ describe('expandShorthandExtensionParameters', () => {
});
it('supports string key', () => {
expect(run('app/router')).toEqual({
id: 'app/router',
expect(run('app/root')).toEqual({
id: 'app/root',
disabled: false,
});
expect(() => run('')).toThrowErrorMatchingInlineSnapshot(
@@ -170,96 +170,96 @@ describe('expandShorthandExtensionParameters', () => {
it('supports null value', () => {
// this is the result of typing:
// - app/router:
// - app/root:
// The missing value is interpreted as null by the yaml parser so we deal with that
expect(run({ 'app/router': null })).toEqual({
id: 'app/router',
expect(run({ 'app/root': null })).toEqual({
id: 'app/root',
disabled: false,
});
});
it('supports boolean value', () => {
expect(run({ 'app/router': true })).toEqual({
id: 'app/router',
expect(run({ 'app/root': true })).toEqual({
id: 'app/root',
disabled: false,
});
expect(run({ 'app/router': false })).toEqual({
id: 'app/router',
expect(run({ 'app/root': false })).toEqual({
id: 'app/root',
disabled: true,
});
});
it('should not support string values', () => {
expect(() =>
run({ 'app/router': 'example-package#MyRouter' }),
run({ 'app/root': 'example-package#MyRouter' }),
).toThrowErrorMatchingInlineSnapshot(
`"Invalid extension configuration at app.extensions[1][app/router], value must be a boolean or object"`,
`"Invalid extension configuration at app.extensions[1][app/root], value must be a boolean or object"`,
);
});
it('supports object id only in the key', () => {
expect(() =>
run({ 'app/router': { id: 'some.id' } }),
run({ 'app/root': { id: 'some.id' } }),
).toThrowErrorMatchingInlineSnapshot(
`"Invalid extension configuration at app.extensions[1][app/router].id, unknown parameter; expected one of 'attachTo', 'disabled', 'config'"`,
`"Invalid extension configuration at app.extensions[1][app/root].id, unknown parameter; expected one of 'attachTo', 'disabled', 'config'"`,
);
});
it('supports object attachTo', () => {
expect(
run({
'app/router': { attachTo: { id: 'other.root', input: 'inputs' } },
'app/root': { attachTo: { id: 'other.root', input: 'inputs' } },
}),
).toEqual({
id: 'app/router',
id: 'app/root',
attachTo: { id: 'other.root', input: 'inputs' },
});
expect(() =>
run({
'app/router': {
'app/root': {
id: 'other-id',
},
}),
).toThrowErrorMatchingInlineSnapshot(
`"Invalid extension configuration at app.extensions[1][app/router].id, unknown parameter; expected one of 'attachTo', 'disabled', 'config'"`,
`"Invalid extension configuration at app.extensions[1][app/root].id, unknown parameter; expected one of 'attachTo', 'disabled', 'config'"`,
);
});
it('supports object disabled', () => {
expect(run({ 'app/router': { disabled: true } })).toEqual({
id: 'app/router',
expect(run({ 'app/root': { disabled: true } })).toEqual({
id: 'app/root',
disabled: true,
});
expect(run({ 'app/router': { disabled: false } })).toEqual({
id: 'app/router',
expect(run({ 'app/root': { disabled: false } })).toEqual({
id: 'app/root',
disabled: false,
});
expect(() =>
run({ 'app/router': { disabled: 0 } }),
run({ 'app/root': { disabled: 0 } }),
).toThrowErrorMatchingInlineSnapshot(
`"Invalid extension configuration at app.extensions[1][app/router].disabled, must be a boolean"`,
`"Invalid extension configuration at app.extensions[1][app/root].disabled, must be a boolean"`,
);
});
it('supports object config', () => {
expect(
run({ 'app/router': { config: { disableRedirects: true } } }),
).toEqual({
id: 'app/router',
config: { disableRedirects: true },
});
expect(run({ 'app/root': { config: { disableRedirects: true } } })).toEqual(
{
id: 'app/root',
config: { disableRedirects: true },
},
);
expect(() =>
run({ 'app/router': { config: 0 } }),
run({ 'app/root': { config: 0 } }),
).toThrowErrorMatchingInlineSnapshot(
`"Invalid extension configuration at app.extensions[1][app/router].config, must be an object"`,
`"Invalid extension configuration at app.extensions[1][app/root].config, must be an object"`,
);
});
it('rejects unknown object keys', () => {
expect(() =>
run({ 'app/router': { foo: { settings: true } } }),
run({ 'app/root': { foo: { settings: true } } }),
).toThrowErrorMatchingInlineSnapshot(
`"Invalid extension configuration at app.extensions[1][app/router].foo, unknown parameter; expected one of 'attachTo', 'disabled', 'config'"`,
`"Invalid extension configuration at app.extensions[1][app/root].foo, unknown parameter; expected one of 'attachTo', 'disabled', 'config'"`,
);
});
});
@@ -194,7 +194,7 @@ describe('createApp', () => {
extensions: [
createExtension({
namespace: 'app',
name: 'router',
name: 'root',
attachTo: { id: 'app', input: 'root' },
disabled: true,
output: {},
@@ -244,7 +244,7 @@ describe('createApp', () => {
expect(String(tree.root)).toMatchInlineSnapshot(`
"<app out=[core.reactElement]>
root [
<app/router out=[core.reactElement]>
<app/root out=[core.reactElement]>
children [
<app/layout out=[core.reactElement]>
content [
@@ -259,7 +259,7 @@ describe('createApp', () => {
]
</app/layout>
]
</app/router>
</app/root>
]
components [
<component:core.components.progress out=[core.component.component] />
@@ -32,10 +32,10 @@ import {
RouteRef,
useRouteRef,
} from '@backstage/frontend-plugin-api';
import { Core } from '../extensions/Core';
import { CoreRoutes } from '../extensions/CoreRoutes';
import { CoreLayout } from '../extensions/CoreLayout';
import { CoreNav } from '../extensions/CoreNav';
import { App } from '../extensions/App';
import { AppRoutes } from '../extensions/AppRoutes';
import { AppLayout } from '../extensions/AppLayout';
import { AppNav } from '../extensions/AppNav';
import {
AnyApiFactory,
ApiHolder,
@@ -95,7 +95,7 @@ import {
} from '../extensions/components';
import { AppNode } from '@backstage/frontend-plugin-api';
import { InternalAppContext } from './InternalAppContext';
import { CoreRouter } from '../extensions/CoreRouter';
import { AppRoot } from '../extensions/AppRoot';
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
import { toInternalBackstagePlugin } from '../../../frontend-plugin-api/src/wiring/createPlugin';
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
@@ -106,11 +106,11 @@ import { stringifyError } from '@backstage/errors';
const DefaultApis = defaultApis.map(factory => createApiExtension({ factory }));
export const builtinExtensions = [
Core,
CoreRouter,
CoreRoutes,
CoreNav,
CoreLayout,
App,
AppRoot,
AppRoutes,
AppNav,
AppLayout,
DefaultProgressComponent,
DefaultErrorBoundaryComponent,
DefaultNotFoundErrorPageComponent,
@@ -371,7 +371,7 @@ export function createSpecializedApp(options?: {
);
const rootEl = tree.root.instance!.getData(coreExtensionData.reactElement);
const App = () => (
const AppComponent = () => (
<ApiProvider apis={apiHolder}>
<AppThemeProvider>
<RoutingProvider {...routeInfo} routeBindings={routeBindings}>
@@ -387,7 +387,7 @@ export function createSpecializedApp(options?: {
return {
createRoot() {
return <App />;
return <AppComponent />;
},
};
}
@@ -50,7 +50,7 @@ export function createSignInPageExtension<
kind: 'sign-in-page',
namespace: options?.namespace,
name: options?.name,
attachTo: options.attachTo ?? { id: 'app/router', input: 'signInPage' },
attachTo: options.attachTo ?? { id: 'app/root', input: 'signInPage' },
configSchema: options.configSchema,
inputs: options.inputs,
disabled: options.disabled,
@@ -150,7 +150,7 @@ describe('createPlugin', () => {
await renderWithEffects(
createTestAppRoot({
features: [plugin],
config: { app: { extensions: [{ 'app/router': false }] } },
config: { app: { extensions: [{ 'app/root': false }] } },
}),
);
@@ -172,7 +172,7 @@ describe('createPlugin', () => {
config: {
app: {
extensions: [
{ 'app/router': false },
{ 'app/root': false },
{
'test/2': {
config: { name: 'extension-2-renamed' },
@@ -210,7 +210,7 @@ describe('createPlugin', () => {
features: [plugin],
config: {
app: {
extensions: [{ 'app/router': false }],
extensions: [{ 'app/root': false }],
},
},
}),
@@ -151,7 +151,7 @@ const AuthenticationProvider = (props: {
const TestCoreRouterExtension = createExtension({
namespace: 'app',
name: 'router',
name: 'root',
attachTo: { id: 'app', input: 'root' },
inputs: {
signInPage: createExtensionInput(