diff --git a/packages/app-next/src/index-public-experimental.tsx b/packages/app-next/src/index-public-experimental.tsx index 4c01c428df..ce558ed4f0 100644 --- a/packages/app-next/src/index-public-experimental.tsx +++ b/packages/app-next/src/index-public-experimental.tsx @@ -15,9 +15,13 @@ */ import ReactDOM from 'react-dom/client'; -import { createPublicSignInApp } from '@backstage/frontend-defaults/alpha'; +import { createApp } from '@backstage/frontend-defaults'; +import { appModulePublicSignIn } from '@backstage/plugin-app/alpha'; + import '@backstage/ui/css/styles.css'; -const app = createPublicSignInApp(); +const app = createApp({ + features: [appModulePublicSignIn], +}); ReactDOM.createRoot(document.getElementById('root')!).render(app.createRoot()); diff --git a/packages/frontend-defaults/package.json b/packages/frontend-defaults/package.json index 4bbbf8986d..5a2cfb6eb3 100644 --- a/packages/frontend-defaults/package.json +++ b/packages/frontend-defaults/package.json @@ -5,7 +5,9 @@ "role": "web-library" }, "publishConfig": { - "access": "public" + "access": "public", + "main": "dist/index.esm.js", + "types": "dist/index.d.ts" }, "repository": { "type": "git", @@ -14,23 +16,8 @@ }, "license": "Apache-2.0", "sideEffects": false, - "exports": { - ".": "./src/index.ts", - "./alpha": "./src/alpha/index.ts", - "./package.json": "./package.json" - }, "main": "src/index.ts", "types": "src/index.ts", - "typesVersions": { - "*": { - "alpha": [ - "src/alpha/index.ts" - ], - "package.json": [ - "package.json" - ] - } - }, "files": [ "dist" ], diff --git a/packages/frontend-defaults/report-alpha.api.md b/packages/frontend-defaults/report-alpha.api.md deleted file mode 100644 index 1bd66e6521..0000000000 --- a/packages/frontend-defaults/report-alpha.api.md +++ /dev/null @@ -1,15 +0,0 @@ -## API Report File for "@backstage/frontend-defaults" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts -import { CreateAppOptions } from '@backstage/frontend-defaults'; -import { JSX as JSX_2 } from 'react'; - -// @alpha -export function createPublicSignInApp(options?: CreateAppOptions): { - createRoot(): JSX_2.Element; -}; - -// (No @packageDocumentation comment for this package) -``` diff --git a/plugins/app/package.json b/plugins/app/package.json index 199054f141..9cefaa8609 100644 --- a/plugins/app/package.json +++ b/plugins/app/package.json @@ -11,9 +11,7 @@ ] }, "publishConfig": { - "access": "public", - "main": "dist/index.esm.js", - "types": "dist/index.d.ts" + "access": "public" }, "repository": { "type": "git", @@ -22,6 +20,21 @@ }, "license": "Apache-2.0", "sideEffects": false, + "exports": { + ".": "./src/index.ts", + "./alpha": "./src/alpha/index.ts", + "./package.json": "./package.json" + }, + "typesVersions": { + "*": { + "alpha": [ + "src/alpha/index.ts" + ], + "package.json": [ + "package.json" + ] + } + }, "main": "src/index.ts", "types": "src/index.ts", "files": [ @@ -47,12 +60,15 @@ "@material-ui/core": "^4.9.13", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.61", + "@react-hookz/web": "^24.0.0", "react-use": "^17.2.4" }, "devDependencies": { "@backstage/cli": "workspace:^", "@backstage/dev-utils": "workspace:^", + "@backstage/frontend-defaults": "workspace:^", "@backstage/frontend-test-utils": "workspace:^", + "@backstage/test-utils": "workspace:^", "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.0.0", diff --git a/plugins/app/report-alpha.api.md b/plugins/app/report-alpha.api.md new file mode 100644 index 0000000000..9496430e7b --- /dev/null +++ b/plugins/app/report-alpha.api.md @@ -0,0 +1,12 @@ +## API Report File for "@backstage/plugin-app" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts +import { FrontendModule } from '@backstage/frontend-plugin-api'; + +// @alpha +export const appModulePublicSignIn: FrontendModule; + +// (No @packageDocumentation comment for this package) +``` diff --git a/packages/frontend-defaults/src/alpha/createPublicSignInApp.test.tsx b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx similarity index 91% rename from packages/frontend-defaults/src/alpha/createPublicSignInApp.test.tsx rename to plugins/app/src/alpha/appModulePublicSignIn.test.tsx index 58a264e81d..14dba9416b 100644 --- a/packages/frontend-defaults/src/alpha/createPublicSignInApp.test.tsx +++ b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx @@ -20,18 +20,20 @@ import { } from '@backstage/frontend-plugin-api'; import { render, screen, waitFor } from '@testing-library/react'; import { useEffect } from 'react'; -import { createPublicSignInApp } from './createPublicSignInApp'; +import { appModulePublicSignIn } from './appModulePublicSignIn'; import { mockApis } from '@backstage/test-utils'; +import { createApp } from '@backstage/frontend-defaults'; -describe('createPublicSignInApp', () => { +describe('appModulePublicSignIn', () => { beforeEach(() => { jest.resetAllMocks(); }); it('should render a sign-in page', async () => { - const app = createPublicSignInApp({ + const app = createApp({ configLoader: async () => ({ config: mockApis.config() }), features: [ + appModulePublicSignIn, createFrontendModule({ pluginId: 'app', extensions: [ @@ -57,9 +59,10 @@ describe('createPublicSignInApp', () => { .spyOn(HTMLFormElement.prototype, 'submit') .mockReturnValue(); - const app = createPublicSignInApp({ + const app = createApp({ configLoader: async () => ({ config: mockApis.config() }), features: [ + appModulePublicSignIn, createFrontendModule({ pluginId: 'app', extensions: [ diff --git a/packages/frontend-defaults/src/alpha/createPublicSignInApp.tsx b/plugins/app/src/alpha/appModulePublicSignIn.tsx similarity index 59% rename from packages/frontend-defaults/src/alpha/createPublicSignInApp.tsx rename to plugins/app/src/alpha/appModulePublicSignIn.tsx index 90c6e5e178..4a188d1d5f 100644 --- a/packages/frontend-defaults/src/alpha/createPublicSignInApp.tsx +++ b/plugins/app/src/alpha/appModulePublicSignIn.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,16 +14,14 @@ * limitations under the License. */ +import appPlugin from '@backstage/plugin-app'; +import { useAsync, useMountEffect } from '@react-hookz/web'; import { coreExtensionData, createFrontendModule, identityApiRef, useApi, } from '@backstage/frontend-plugin-api'; -import { useAsync, useMountEffect } from '@react-hookz/web'; -import { createApp } from '../createApp'; -import { CreateAppOptions } from '@backstage/frontend-defaults'; -import appPlugin from '@backstage/plugin-app'; // This is a copy of the CookieAuthRedirect component from the auth-react // plugin, to avoid a dependency on that package. Long-term we want this to be @@ -68,41 +66,61 @@ export function InternalCookieAuthRedirect() { } /** - * Creates an app that is suitable for the public sign-in page, for use in the `index-public-experimental.tsx` file. + * This module is intended for use in public sign-in page apps, in the + * `index-public-experimental.tsx` file. * * @remarks * - * This app has an override for the `app/layout` extension, which means that - * most extension typically installed in an app will be ignored. However, you - * can still for example install API and root element extensions. + * This module is used to enable the public sign-in flow where the build output + * is split into one small publicly accessible app, and the full app protected + * by auth. + * + * This module overrides the `app/layout` extension, which means that most + * extension typically installed in an app will be ignored. However, you can + * still for example install API and root element extensions. * * A typical setup of this app will only install a custom sign-in page. * * @example - * ```ts - * const app = createPublicSignInApp({ - * features: [signInPageModule], - * }); - * ``` + * + *#### In `index-public-experimental.tsx` + * + *```ts + *import { createApp } from '@backstage/frontend-defaults + *import { appModulePublicSignIn } from '@backstage/plugin-app/alpha'; + *import { appModuleSignInPage } from './appModuleSignInPage'; + * + *const app = createApp({ + * features: [appModuleSignInPage, appModulePublicSignIn], + *}); + *``` + * + *#### In `appModuleSignInPage.tsx` + * + *```tsx + *import { createFrontendModule, SignInPageBlueprint } from '@backstage/frontend-plugin-api'; + * + *export const appModuleSignInPage = createFrontendModule({ + * pluginId: 'app', + * extensions: [ + * SignInPageBlueprint.make({ + * params: { + * ... + * } + * }), + * ], + *}) + *``` * * @alpha */ -export function createPublicSignInApp(options?: CreateAppOptions) { - return createApp({ - ...options, - features: [ - ...(options?.features ?? []), - // This is a rather than app plugin override in order for it to take precedence over any supplied app plugin override - createFrontendModule({ - pluginId: 'app', - extensions: [ - appPlugin.getExtension('app/layout').override({ - factory: () => [ - coreExtensionData.reactElement(), - ], - }), - ], - }), - ], - }); -} +export const appModulePublicSignIn = createFrontendModule({ + pluginId: 'app', + extensions: [ + appPlugin.getExtension('app/layout').override({ + factory: () => [ + coreExtensionData.reactElement(), + ], + }), + ], +}); diff --git a/packages/frontend-defaults/src/alpha/index.ts b/plugins/app/src/alpha/index.ts similarity index 90% rename from packages/frontend-defaults/src/alpha/index.ts rename to plugins/app/src/alpha/index.ts index f9e45bdeec..8ffa92e8aa 100644 --- a/packages/frontend-defaults/src/alpha/index.ts +++ b/plugins/app/src/alpha/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { createPublicSignInApp } from './createPublicSignInApp'; +export { appModulePublicSignIn } from './appModulePublicSignIn'; diff --git a/yarn.lock b/yarn.lock index 9b0a90acec..a336f69e8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4743,15 +4743,18 @@ __metadata: "@backstage/core-components": "workspace:^" "@backstage/core-plugin-api": "workspace:^" "@backstage/dev-utils": "workspace:^" + "@backstage/frontend-defaults": "workspace:^" "@backstage/frontend-plugin-api": "workspace:^" "@backstage/frontend-test-utils": "workspace:^" "@backstage/integration-react": "workspace:^" "@backstage/plugin-permission-react": "workspace:^" + "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" "@backstage/types": "workspace:^" "@material-ui/core": "npm:^4.9.13" "@material-ui/icons": "npm:^4.9.1" "@material-ui/lab": "npm:^4.0.0-alpha.61" + "@react-hookz/web": "npm:^24.0.0" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^16.0.0" "@testing-library/user-event": "npm:^14.0.0"