Merge pull request #23346 from drodil/migrate_local_dev

chore: migrate to new backend in local development
This commit is contained in:
Patrik Oldsberg
2024-04-14 13:49:28 +02:00
committed by GitHub
20 changed files with 295 additions and 342 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/dev-utils': patch
---
Allow defining custom sidebar item for page and login for the development app
+8
View File
@@ -0,0 +1,8 @@
---
'@backstage/plugin-notifications-backend': patch
'@backstage/plugin-signals-backend': patch
'@backstage/plugin-notifications': patch
'@backstage/plugin-signals': patch
---
Migrate signals and notifications to the new backend in local development
+10
View File
@@ -13,7 +13,9 @@ import { Entity } from '@backstage/catalog-model';
import { GridProps } from '@material-ui/core/Grid';
import { IconComponent } from '@backstage/core-plugin-api';
import { PropsWithChildren } from 'react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
import { SignInProviderConfig } from '@backstage/core-components';
// @public
export function createDevApp(): DevAppBuilder;
@@ -22,6 +24,8 @@ export function createDevApp(): DevAppBuilder;
export class DevAppBuilder {
addPage(opts: DevAppPageOptions): DevAppBuilder;
addRootChild(node: ReactNode): DevAppBuilder;
addSidebarItem(sidebarItem: JSX.Element): DevAppBuilder;
addSignInProvider(provider: SignInProviderConfig): this;
addThemes(themes: AppTheme[]): this;
build(): ComponentType<PropsWithChildren<{}>>;
registerApi<
@@ -50,4 +54,10 @@ export const EntityGridItem: (
entity: Entity;
},
) => JSX.Element;
// @public
export const SidebarSignOutButton: (props: {
icon?: IconComponent;
text?: string;
}) => React_2.JSX.Element;
```
@@ -0,0 +1,44 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { SidebarItem } from '@backstage/core-components';
import LockIcon from '@material-ui/icons/Lock';
import {
IconComponent,
identityApiRef,
useApi,
} from '@backstage/core-plugin-api';
/**
* Button for sidebar that signs out user
*
* @public
*/
export const SidebarSignOutButton = (props: {
icon?: IconComponent;
text?: string;
}) => {
const identityApi = useApi(identityApiRef);
return (
<SidebarItem
onClick={() => identityApi.signOut()}
icon={props.icon ?? LockIcon}
text={props.text ?? 'Sign Out'}
/>
);
};
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './SidebarSignOutButton';
@@ -15,3 +15,4 @@
*/
export * from './EntityGridItem';
export * from './SidebarSignOutButton';
@@ -17,7 +17,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { createDevApp } from './render';
import { useApi, configApiRef } from '@backstage/core-plugin-api';
import { configApiRef, useApi } from '@backstage/core-plugin-api';
const anyEnv = (process.env = { ...process.env }) as any;
@@ -28,6 +28,7 @@ describe('DevAppBuilder', () => {
context: 'test',
data: {
app: { title: 'Test App' },
backend: { baseUrl: 'http://localhost' },
},
},
];
+37 -1
View File
@@ -25,6 +25,8 @@ import {
SidebarPage,
SidebarSpace,
SidebarSpacer,
SignInPage,
SignInProviderConfig,
} from '@backstage/core-components';
import {
AnyApiFactory,
@@ -44,10 +46,11 @@ import {
} from '@backstage/integration-react';
import Box from '@material-ui/core/Box';
import BookmarkIcon from '@material-ui/icons/Bookmark';
import React, { ComponentType, ReactNode, PropsWithChildren } from 'react';
import React, { ComponentType, PropsWithChildren, ReactNode } from 'react';
import { createRoutesFromChildren, Route } from 'react-router-dom';
import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
import 'react-dom';
import { SidebarSignOutButton } from '../components';
let ReactDOMPromise: Promise<
typeof import('react-dom') | typeof import('react-dom/client')
@@ -94,6 +97,7 @@ export class DevAppBuilder {
private readonly rootChildren = new Array<ReactNode>();
private readonly routes = new Array<JSX.Element>();
private readonly sidebarItems = new Array<JSX.Element>();
private readonly signInProviders = new Array<SignInProviderConfig>();
private defaultPage?: string;
private themes?: Array<AppTheme>;
@@ -128,6 +132,16 @@ export class DevAppBuilder {
return this;
}
/**
* Adds a new sidebar item to the dev app.
*
* Useful for adding only sidebar items without a corresponding page.
*/
addSidebarItem(sidebarItem: JSX.Element): DevAppBuilder {
this.sidebarItems.push(sidebarItem);
return this;
}
/**
* Adds a page component along with accompanying sidebar item.
*
@@ -151,6 +165,7 @@ export class DevAppBuilder {
/>,
);
}
this.routes.push(
<MaybeGatheringRoute
key={path}
@@ -170,6 +185,14 @@ export class DevAppBuilder {
return this;
}
/**
* Adds new sign in provider for the dev app
*/
addSignInProvider(provider: SignInProviderConfig) {
this.signInProviders.push(provider);
return this;
}
/**
* Build a DevApp component using the resources registered so far
*/
@@ -193,6 +216,18 @@ export class DevAppBuilder {
apis,
plugins: this.plugins,
themes: this.themes,
components: {
SignInPage: props => {
return (
<SignInPage
{...props}
providers={['guest', ...this.signInProviders]}
title="Select a sign-in method"
align="center"
/>
);
},
},
bindRoutes: ({ bind }) => {
for (const plugin of this.plugins ?? []) {
const targets: Record<string, RouteRef<any>> = {};
@@ -217,6 +252,7 @@ export class DevAppBuilder {
<SidebarSpace />
<SidebarDivider />
<SidebarThemeSwitcher />
<SidebarSignOutButton />
</Sidebar>
<FlatRoutes>
{this.routes}
@@ -0,0 +1,63 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { createBackend } from '@backstage/backend-defaults';
import {
coreServices,
createBackendPlugin,
} from '@backstage/backend-plugin-api';
import { notificationService } from '@backstage/plugin-notifications-node';
const notificationsDebug = createBackendPlugin({
pluginId: 'notifications-debug',
register(env) {
env.registerInit({
deps: {
notifications: notificationService,
lifecycle: coreServices.lifecycle,
},
async init({ notifications, lifecycle }) {
let interval: NodeJS.Timeout | undefined;
lifecycle.addStartupHook(async () => {
interval = setInterval(async () => {
await notifications.send({
recipients: {
type: 'broadcast',
},
payload: { title: 'Test notification' },
});
}, 5000);
});
lifecycle.addShutdownHook(async () => {
if (interval) {
clearInterval(interval);
}
});
},
});
},
});
const backend = createBackend();
backend.add(import('@backstage/plugin-events-backend/alpha'));
backend.add(import('@backstage/plugin-signals-backend'));
backend.add(import('@backstage/plugin-auth-backend'));
backend.add(import('@backstage/plugin-auth-backend-module-guest-provider'));
backend.add(import('../src'));
backend.add(notificationsDebug);
backend.start();
@@ -51,8 +51,13 @@
"yn": "^4.0.0"
},
"devDependencies": {
"@backstage/backend-defaults": "workspace:^",
"@backstage/backend-test-utils": "workspace:^",
"@backstage/cli": "workspace:^",
"@backstage/plugin-auth-backend": "workspace:^",
"@backstage/plugin-auth-backend-module-guest-provider": "workspace:^",
"@backstage/plugin-events-backend": "workspace:^",
"@backstage/plugin-signals-backend": "workspace:^",
"@types/express": "^4.17.6",
"@types/supertest": "^2.0.8",
"msw": "^1.0.0",
-32
View File
@@ -1,32 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { getRootLogger } from '@backstage/backend-common';
import yn from 'yn';
import { startStandaloneServer } from './service/standaloneServer';
const port = process.env.PLUGIN_PORT ? Number(process.env.PLUGIN_PORT) : 7007;
const enableCors = yn(process.env.PLUGIN_CORS, { default: false });
const logger = getRootLogger();
startStandaloneServer({ port, enableCors, logger }).catch(err => {
logger.error(err);
process.exit(1);
});
process.on('SIGINT', () => {
logger.info('CTRL+C pressed; exiting.');
process.exit(0);
});
@@ -458,7 +458,7 @@ export async function createRouter(
if (!recipients || !title) {
logger.error(`Invalid notification request received`);
throw new InputError();
throw new InputError(`Invalid notification request received`);
}
const origin = credentials.principal.subject;
@@ -484,8 +484,10 @@ export async function createRouter(
try {
users = await getUsersForEntityRef(entityRef);
} catch (e) {
throw new InputError();
logger.error(`Failed to resolve notification receivers: ${e}`);
throw new InputError('Failed to resolve notification receivers', e);
}
const userNotifications = await sendUserNotifications(
baseNotification,
users,
@@ -1,150 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
createLegacyAuthAdapters,
createServiceBuilder,
HostDiscovery,
loadBackendConfig,
PluginDatabaseManager,
ServerTokenManager,
} from '@backstage/backend-common';
import { Server } from 'http';
import { Logger } from 'winston';
import { createRouter } from './router';
import Knex from 'knex';
import { IdentityApi } from '@backstage/plugin-auth-node';
import { Request } from 'express';
import {
CatalogApi,
CatalogRequestOptions,
GetEntitiesByRefsRequest,
} from '@backstage/catalog-client';
import { DefaultSignalsService } from '@backstage/plugin-signals-node';
import {
EventParams,
EventsService,
EventsServiceSubscribeOptions,
} from '@backstage/plugin-events-node';
import {
AuthService,
HttpAuthService,
UserInfoService,
} from '@backstage/backend-plugin-api';
export interface ServerOptions {
port: number;
enableCors: boolean;
logger: Logger;
}
export async function startStandaloneServer(
options: ServerOptions,
): Promise<Server> {
const logger = options.logger.child({ service: 'notifications-backend' });
logger.debug('Starting application server...');
const config = await loadBackendConfig({ logger, argv: process.argv });
const db = Knex(config.get('backend.database'));
const tokenManager = ServerTokenManager.fromConfig(config, {
logger,
});
const discovery = HostDiscovery.fromConfig(config);
const dbMock: PluginDatabaseManager = {
async getClient() {
return db;
},
};
const catalogApi = {
async getEntitiesByRefs(
_request: GetEntitiesByRefsRequest,
__options?: CatalogRequestOptions,
) {
return {
items: [
{
apiVersion: 'backstage.io/v1alpha1',
kind: 'User',
metadata: { name: 'user', namespace: 'default' },
spec: {},
},
],
};
},
} as Partial<CatalogApi> as CatalogApi;
const identityMock: IdentityApi = {
async getIdentity({ request }: { request: Request<unknown> }) {
const token = request.headers.authorization?.split(' ')[1];
return {
identity: {
type: 'user',
ownershipEntityRefs: [],
userEntityRef: 'user:default/guest',
},
token: token || 'no-token',
};
},
};
const mockSubscribers: EventsServiceSubscribeOptions[] = [];
const events: EventsService = {
async publish(params: EventParams): Promise<void> {
mockSubscribers.forEach(sub => sub.onEvent(params));
},
async subscribe(subscription: EventsServiceSubscribeOptions) {
mockSubscribers.push(subscription);
},
};
const signalService = DefaultSignalsService.create({ events });
// TODO: Move to use services instead this hack
const { auth, httpAuth, userInfo } = createLegacyAuthAdapters<
any,
{ auth: AuthService; httpAuth: HttpAuthService; userInfo: UserInfoService }
>({
identity: identityMock,
tokenManager,
discovery,
});
const router = await createRouter({
logger,
database: dbMock,
catalog: catalogApi,
discovery,
signals: signalService,
auth,
httpAuth,
userInfo,
});
let service = createServiceBuilder(module)
.setPort(options.port)
.addRouter('/notifications', router);
if (options.enableCors) {
service = service.enableCors({ origin: 'http://localhost:3000' });
}
return await service.start().catch(err => {
logger.error(err);
process.exit(1);
});
}
module.hot?.accept();
+4 -3
View File
@@ -15,13 +15,14 @@
*/
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
import { notificationsPlugin } from '../src/plugin';
import { NotificationsPage, notificationsPlugin } from '../src/plugin';
import { NotificationsSidebarItem } from '../src';
createDevApp()
.registerPlugin(notificationsPlugin)
.addPage({
element: <div />,
title: 'Root Page',
element: <NotificationsPage />,
path: '/notifications',
})
.addSidebarItem(<NotificationsSidebarItem />)
.render();
+61
View File
@@ -0,0 +1,61 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { createBackend } from '@backstage/backend-defaults';
import {
coreServices,
createBackendPlugin,
} from '@backstage/backend-plugin-api';
import { signalService } from '@backstage/plugin-signals-node';
const signalDebug = createBackendPlugin({
pluginId: 'signals-debug',
register(env) {
env.registerInit({
deps: {
signals: signalService,
lifecycle: coreServices.lifecycle,
},
async init({ signals, lifecycle }) {
let interval: NodeJS.Timeout | undefined;
lifecycle.addStartupHook(async () => {
interval = setInterval(async () => {
await signals.publish<{ date: string }>({
channel: 'debug',
message: { date: new Date().toISOString() },
recipients: { type: 'broadcast' },
});
}, 1000);
});
lifecycle.addShutdownHook(async () => {
if (interval) {
clearInterval(interval);
}
});
},
});
},
});
const backend = createBackend();
backend.add(import('@backstage/plugin-events-backend/alpha'));
backend.add(import('@backstage/plugin-auth-backend'));
backend.add(import('@backstage/plugin-auth-backend-module-guest-provider'));
backend.add(import('../src'));
backend.add(signalDebug);
backend.start();
+4
View File
@@ -45,7 +45,11 @@
"yn": "^4.0.0"
},
"devDependencies": {
"@backstage/backend-defaults": "workspace:^",
"@backstage/cli": "workspace:^",
"@backstage/plugin-auth-backend": "workspace:^",
"@backstage/plugin-auth-backend-module-guest-provider": "workspace:^",
"@backstage/plugin-events-backend": "workspace:^",
"@types/supertest": "^2.0.8",
"msw": "^1.0.0",
"supertest": "^6.2.4"
-32
View File
@@ -1,32 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { getRootLogger } from '@backstage/backend-common';
import yn from 'yn';
import { startStandaloneServer } from './service/standaloneServer';
const port = process.env.PLUGIN_PORT ? Number(process.env.PLUGIN_PORT) : 7007;
const enableCors = yn(process.env.PLUGIN_CORS, { default: false });
const logger = getRootLogger();
startStandaloneServer({ port, enableCors, logger }).catch(err => {
logger.error(err);
process.exit(1);
});
process.on('SIGINT', () => {
logger.info('CTRL+C pressed; exiting.');
process.exit(0);
});
@@ -1,112 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
createServiceBuilder,
HostDiscovery,
loadBackendConfig,
} from '@backstage/backend-common';
import { Server } from 'http';
import { Logger } from 'winston';
import { createRouter } from './router';
import { DefaultSignalsService } from '@backstage/plugin-signals-node';
import { DefaultIdentityClient } from '@backstage/plugin-auth-node';
import {
EventParams,
EventsService,
EventsServiceSubscribeOptions,
} from '@backstage/plugin-events-node';
import {
BackstageCredentials,
BackstageUserInfo,
UserInfoService,
} from '@backstage/backend-plugin-api';
export interface ServerOptions {
port: number;
enableCors: boolean;
logger: Logger;
}
export async function startStandaloneServer(
options: ServerOptions,
): Promise<Server> {
const logger = options.logger.child({ service: 'signals-backend' });
logger.debug('Starting application server...');
const config = await loadBackendConfig({ logger, argv: process.argv });
const discovery = HostDiscovery.fromConfig(config);
const identity = DefaultIdentityClient.create({
discovery,
issuer: await discovery.getExternalBaseUrl('auth'),
});
const mockSubscribers: EventsServiceSubscribeOptions[] = [];
const events: EventsService = {
async publish(params: EventParams): Promise<void> {
mockSubscribers.forEach(sub => sub.onEvent(params));
},
async subscribe(subscription: EventsServiceSubscribeOptions) {
mockSubscribers.push(subscription);
},
};
const signals = DefaultSignalsService.create({
events,
});
const userInfo: UserInfoService = {
async getUserInfo(_: BackstageCredentials): Promise<BackstageUserInfo> {
return {
userEntityRef: 'user:default/guest',
ownershipEntityRefs: ['user:default/guest'],
};
},
};
const router = await createRouter({
logger,
identity,
events,
discovery,
userInfo,
});
let service = createServiceBuilder(module)
.setPort(options.port)
.addRouter('/signals', router);
if (options.enableCors) {
service = service.enableCors({ origin: 'http://localhost:3000' });
}
let server: Promise<Server>;
try {
server = service.start();
setInterval(() => {
signals.publish({
recipients: { type: 'broadcast' },
channel: 'test',
message: { hello: 'world' },
});
}, 5000);
} catch (err) {
logger.error(err);
process.exit(1);
}
return server;
}
module.hot?.accept();
+22 -9
View File
@@ -16,20 +16,33 @@
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
import { signalsPlugin } from '../src/plugin';
import { Content, Header, Page } from '@backstage/core-components';
import { CodeSnippet, Content, Header, Page } from '@backstage/core-components';
import Typography from '@material-ui/core/Typography';
import { useSignal } from '@backstage/plugin-signals-react';
const SignalsDebugPage = () => {
const { lastSignal } = useSignal('debug');
return (
<Page themeId="home">
<Header title="Signals" />
<Content>
<Typography>Last signal:</Typography>
<Typography>
{lastSignal ? (
<CodeSnippet text={JSON.stringify(lastSignal)} language="json" />
) : (
'Not received'
)}
</Typography>
</Content>
</Page>
);
};
createDevApp()
.registerPlugin(signalsPlugin)
.addPage({
title: 'Debug',
element: (
<Page themeId="home">
<Header title="Signals" />
<Content>
<Typography>TODO</Typography>
</Content>
</Page>
),
element: <SignalsDebugPage />,
})
.render();
+9
View File
@@ -7900,6 +7900,7 @@ __metadata:
resolution: "@backstage/plugin-notifications-backend@workspace:plugins/notifications-backend"
dependencies:
"@backstage/backend-common": "workspace:^"
"@backstage/backend-defaults": "workspace:^"
"@backstage/backend-plugin-api": "workspace:^"
"@backstage/backend-test-utils": "workspace:^"
"@backstage/catalog-client": "workspace:^"
@@ -7907,10 +7908,14 @@ __metadata:
"@backstage/cli": "workspace:^"
"@backstage/config": "workspace:^"
"@backstage/errors": "workspace:^"
"@backstage/plugin-auth-backend": "workspace:^"
"@backstage/plugin-auth-backend-module-guest-provider": "workspace:^"
"@backstage/plugin-auth-node": "workspace:^"
"@backstage/plugin-events-backend": "workspace:^"
"@backstage/plugin-events-node": "workspace:^"
"@backstage/plugin-notifications-common": "workspace:^"
"@backstage/plugin-notifications-node": "workspace:^"
"@backstage/plugin-signals-backend": "workspace:^"
"@backstage/plugin-signals-node": "workspace:^"
"@types/express": ^4.17.6
"@types/supertest": ^2.0.8
@@ -9277,10 +9282,14 @@ __metadata:
resolution: "@backstage/plugin-signals-backend@workspace:plugins/signals-backend"
dependencies:
"@backstage/backend-common": "workspace:^"
"@backstage/backend-defaults": "workspace:^"
"@backstage/backend-plugin-api": "workspace:^"
"@backstage/cli": "workspace:^"
"@backstage/config": "workspace:^"
"@backstage/plugin-auth-backend": "workspace:^"
"@backstage/plugin-auth-backend-module-guest-provider": "workspace:^"
"@backstage/plugin-auth-node": "workspace:^"
"@backstage/plugin-events-backend": "workspace:^"
"@backstage/plugin-events-node": "workspace:^"
"@backstage/plugin-signals-node": "workspace:^"
"@backstage/types": "workspace:^"