redhat-developer · rohitratannagar · Jul 6, 2026 · Jul 6, 2026 · Jul 6, 2026
@@ -0,0 +1,6 @@
+---
+'@red-hat-developer-hub/backstage-plugin-translations': minor
+'@red-hat-developer-hub/backstage-plugin-translations-test': minor
+---
+
+Add NFS (New Frontend System) support and graduate to stable. NFS extensions include PageBlueprint, ApiBlueprint, TranslationBlueprint, and AppRootWrapperBlueprint. OFS exports are now available at `./legacy`.
@@ -50,7 +50,7 @@ site
 *.session.sql
 
 # E2E test reports
-e2e-test-report/
+e2e-test-report*/
 
 # Cache
 .cache/
@@ -1,6 +1,15 @@
 app:
   title: Scaffolded Backstage App
   baseUrl: http://localhost:3000
+  extensions:
+    - app/routes:
+        config:
+          redirects:
+            - from: /
+              to: /catalog
+    - api:app/app-language:
+        config:
+          availableLanguages: [en, de, es, fr, it, ja]
 
 organization:
   name: My Company

@@ -7,6 +7,7 @@
   },
   "scripts": {
     "start": "backstage-cli repo start",
+    "start:legacy": "backstage-cli repo start packages/app-legacy packages/backend",
     "start-backend": "yarn workspace backend start",
     "build:backend": "yarn workspace backend build",
     "tsc": "tsc",
@@ -20,6 +21,10 @@
     "test": "backstage-cli repo test --detectOpenHandles",
     "test:all": "backstage-cli repo test --coverage --detectOpenHandles",
     "test:e2e": "playwright test",
+    "test:e2e:legacy": "APP_MODE=legacy playwright test",
+    "test:e2e:nfs": "APP_MODE=nfs playwright test",
+    "test:e2e:all": "yarn test:e2e:legacy && yarn test:e2e:nfs",
+    "playwright": "bash -c 'if [[ \"$*\" == \"test\" ]]; then yarn test:e2e:all; else npx playwright \"$@\"; fi' _",
     "fix": "backstage-cli repo fix",
     "lint": "backstage-cli repo lint --since origin/main",
     "lint:all": "backstage-cli repo lint",
@@ -46,6 +51,9 @@
     "@changesets/cli": "^2.27.1",
     "@jest/environment-jsdom-abstract": "^30.3.0",
     "@playwright/test": "1.60.0",
+    "@react-aria/interactions": "^3.27.1",
+    "@react-stately/layout": "^4.7.1",
+    "@react-stately/overlays": "^3.6.23",
     "@types/jest": "^30.0.0",
     "@types/jsdom": "^27.0.0",
     "jest": "^30.3.0",

@@ -0,0 +1,18 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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.
+ */
+
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config
+module.exports = require('../../eslint.frontend-shared.cjs')(__dirname);
@@ -20,8 +20,10 @@ test('App should render the welcome page', async ({ page }) => {
   await page.goto('/');
 
   const enterButton = page.getByRole('button', { name: 'Enter' });
-  await expect(enterButton).toBeVisible();
+  await expect(enterButton).toBeVisible({ timeout: 30_000 });
   await enterButton.click();
 
-  await expect(page.getByText('My Company Catalog')).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Home' }).first()).toBeVisible({
+    timeout: 30_000,
+  });
 });
@@ -0,0 +1,84 @@
+{
+  "name": "app-legacy",
+  "version": "0.0.0",
+  "private": true,
+  "bundled": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/translations/packages/app-legacy"
+  },
+  "backstage": {
+    "role": "frontend"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "test": "backstage-cli package test",
+    "lint": "backstage-cli package lint"
+  },
+  "dependencies": {
+    "@backstage/app-defaults": "^1.7.6",
+    "@backstage/catalog-model": "^1.7.7",
+    "@backstage/cli": "^0.36.0",
+    "@backstage/core-app-api": "^1.19.6",
+    "@backstage/core-components": "^0.18.8",
+    "@backstage/core-plugin-api": "^1.12.4",
+    "@backstage/integration-react": "^1.2.16",
+    "@backstage/plugin-api-docs": "^0.13.5",
+    "@backstage/plugin-catalog": "^2.0.1",
+    "@backstage/plugin-catalog-common": "^1.1.8",
+    "@backstage/plugin-catalog-graph": "^0.6.0",
+    "@backstage/plugin-catalog-import": "^0.13.11",
+    "@backstage/plugin-catalog-react": "^2.1.1",
+    "@backstage/plugin-kubernetes": "^0.12.17",
+    "@backstage/plugin-notifications": "^0.5.15",
+    "@backstage/plugin-org": "^0.7.0",
+    "@backstage/plugin-permission-react": "^0.4.41",
+    "@backstage/plugin-scaffolder": "^1.36.1",
+    "@backstage/plugin-search": "^1.7.0",
+    "@backstage/plugin-search-react": "^1.11.0",
+    "@backstage/plugin-signals": "^0.0.29",
+    "@backstage/plugin-techdocs": "^1.17.2",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.34",
+    "@backstage/plugin-techdocs-react": "^1.3.9",
+    "@backstage/plugin-user-settings": "^0.9.1",
+    "@backstage/theme": "^0.7.2",
+    "@backstage/ui": "^0.13.2",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.14.0",
+    "@red-hat-developer-hub/backstage-plugin-translations": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-translations-test": "workspace:^",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "react-router": "^6.30.4",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@backstage/test-utils": "^1.7.16",
+    "@playwright/test": "1.60.0",
+    "@testing-library/dom": "^9.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/react-dom": "*",
+    "cross-env": "^7.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -0,0 +1,141 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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 { Navigate, Route } from 'react-router-dom';
+import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
+import {
+  CatalogEntityPage,
+  CatalogIndexPage,
+  catalogPlugin,
+} from '@backstage/plugin-catalog';
+import {
+  CatalogImportPage,
+  catalogImportPlugin,
+} from '@backstage/plugin-catalog-import';
+import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
+import { orgPlugin } from '@backstage/plugin-org';
+import { SearchPage } from '@backstage/plugin-search';
+import {
+  TechDocsIndexPage,
+  techdocsPlugin,
+  TechDocsReaderPage,
+} from '@backstage/plugin-techdocs';
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import { UserSettingsPage } from '@backstage/plugin-user-settings';
+import { apis } from './apis';
+import { entityPage } from './components/catalog/EntityPage';
+import { searchPage } from './components/search/SearchPage';
+import { Root } from './components/Root';
+
+import {
+  AlertDisplay,
+  OAuthRequestDialog,
+  SignInPage,
+} from '@backstage/core-components';
+import { createApp } from '@backstage/app-defaults';
+import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
+import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
+import { RequirePermission } from '@backstage/plugin-permission-react';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import { NotificationsPage } from '@backstage/plugin-notifications';
+import { SignalsDisplay } from '@backstage/plugin-signals';
+
+import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
+
+import {
+  TranslationsPage,
+  PseudoLocalizationProvider,
+} from '@red-hat-developer-hub/backstage-plugin-translations/legacy';
+import { TranslationsTestPage } from '@red-hat-developer-hub/backstage-plugin-translations-test/legacy';
+
+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,
+    });
+  },
+  components: {
+    SignInPage: props => <SignInPage {...props} auto providers={['guest']} />,
+  },
+  themes: getThemes(),
+  __experimentalTranslations: {
+    availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja'],
+  },
+});
+
+const routes = (
+  <FlatRoutes>
+    <Route path="/" element={<Navigate to="catalog" />} />
+    <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 />} />
+    <Route path="/api-docs" element={<ApiExplorerPage />} />
+    <Route
+      path="/catalog-import"
+      element={
+        <RequirePermission permission={catalogEntityCreatePermission}>
+          <CatalogImportPage />
+        </RequirePermission>
+      }
+    />
+    <Route path="/search" element={<SearchPage />}>
+      {searchPage}
+    </Route>
+    <Route path="/settings" element={<UserSettingsPage />} />
+    <Route path="/catalog-graph" element={<CatalogGraphPage />} />
+    <Route path="/notifications" element={<NotificationsPage />} />
+    <Route path="/translations" element={<TranslationsPage />} />
+    <Route path="/translations-test" element={<TranslationsTestPage />} />
+  </FlatRoutes>
+);
+
+export default app.createRoot(
+  <PseudoLocalizationProvider>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <SignalsDisplay />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </PseudoLocalizationProvider>,
+);
@@ -31,7 +31,7 @@ import {
   translationApiRef,
 } from '@backstage/core-plugin-api/alpha';
 
-import { I18nextTranslationApi } from '@red-hat-developer-hub/backstage-plugin-translations';
+import { I18nextTranslationApi } from '@red-hat-developer-hub/backstage-plugin-translations/legacy';
 import { translationsPluginTranslations } from '@red-hat-developer-hub/backstage-plugin-translations/alpha';
 import { userSettingsTranslationRef } from '@backstage/plugin-user-settings/alpha';
 

@@ -0,0 +1,21 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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 '@backstage/cli/asset-types';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import '@backstage/ui/css/styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);