npm - version:bump to v1.47.2 (#7244)

Author: backstage-service

workspaces/npm/.changeset/forty-boxes-boil.md

@@ -0,0 +1,42 @@
+---
+'@backstage-community/plugin-npm': minor
+---
+
+**Breaking change in the alpha export / New Frontend System adopters**:
+
+Backstage v1.47.0 [deprecates](https://backstage.io/docs/releases/v1.47.0#deprecation-and-upcoming-restrictions-of-blueprints-for-app-customization-in-backstagefrontend-plugin-api) `TranslationBlueprint` in `@backstage/frontend-plugin-api` and that plugins can add translation resource to their own extensions list.
+
+The `npm` plugin is following this and doesn't export an `npmTranslation` extension anymore.
+
+It also doesn't add the `TranslationBlueprint` to the plugin extensions anymore.
+
+To enable translation support for the npm plugin again you must add this extension to your app (in many cases `App.tsx`):
+
+```tsx
+import { TranslationBlueprint } from '@backstage/plugin-app-react';
+
+import npmPlugin, {
+  npmTranslations,
+} from '@backstage-community/plugin-npm/alpha';
+
+const npmTranslation = TranslationBlueprint.make({
+  name: 'npmTranslation',
+  params: {
+    resource: npmTranslations,
+  },
+});
+
+export default createApp({
+  features: [
+    createFrontendModule({
+      pluginId: 'app',
+      extensions: [
+        // ...other extensions
+        npmTranslation,
+      ],
+    }),
+    // ...other plugins
+    npmPlugin,
+  ],
+});
+```

workspaces/npm/.changeset/version-bump-1-47-2.md

@@ -0,0 +1,7 @@
+---
+'@backstage-community/plugin-npm': minor
+'@backstage-community/plugin-npm-backend': minor
+'@backstage-community/plugin-npm-common': minor
+---
+
+Backstage version bump to v1.47.2

workspaces/npm/README.md

@@ -91,6 +91,70 @@ you must install also the backend plugin and [configure it](./registries.md).
 
 ### Frontend plugin
 
+### Load plugin via the new frontend system (alpha)
+
+For early adaopters of the new frontend system.
+
+Your Backstage frontend app must use that new frontend system which isn't the default at the moment.
+
+1. Install the frontend dependency:
+
+   ```sh
+   yarn workspace app-next add @backstage-community/plugin-npm
+   ```
+
+2. Add the package to your `packages/app-next/src/App.tsx`.
+
+   ```tsx
+   import npmPlugin from '@backstage-community/plugin-npm/alpha';
+   ```
+
+   And extend your createApp:
+
+   ```tsx
+   export const app = createApp({
+     features: [
+       // ...other plugins
+       npmPlugin,
+     ],
+   });
+   ```
+
+3. Optional enable translation via the `TranslationBlueprint` extension:
+
+   ```tsx
+   import { TranslationBlueprint } from '@backstage/plugin-app-react';
+
+   import npmPlugin, {
+     npmTranslations,
+   } from '@backstage-community/plugin-npm/alpha';
+   ```
+
+   ```tsx
+   const npmTranslation = TranslationBlueprint.make({
+     name: 'npmTranslation',
+     params: {
+       resource: npmTranslations,
+     },
+   });
+
+   export default createApp({
+     features: [
+       createFrontendModule({
+         pluginId: 'app',
+         extensions: [
+           // ...other extensions
+           npmTranslation,
+         ],
+       }),
+       // ...other plugins
+       npmPlugin,
+     ],
+   });
+   ```
+
+### Manual wiring the frontend plugin ("Old Frontend System")
+
 1. Install the frontend dependency:
 
    ```sh
@@ -140,44 +204,12 @@ you must install also the backend plugin and [configure it](./registries.md).
    </EntityLayout.Route>
    ```
 
-### Alternative: Use the new frontend system (alpha)
-
-For early adaopters of the new frontend system.
-
-Your Backstage frontend app must use that new frontend system which isn't the default at the moment.
-
-1. Install the frontend dependency:
-
-   ```sh
-   yarn workspace app-next add @backstage-community/plugin-npm
-   ```
-
-2. Add the package to your `packages/app[-next]/src/App.tsx`.
-
-   ```tsx
-   import npmPlugin from '@backstage-community/plugin-npm/alpha';
-   ```
-
-   And extend your createApp:
-
-   ```tsx
-   export const app = createApp({
-     features: [
-       catalogPlugin,
-       catalogImportPlugin,
-       userSettingsPlugin,
-       npmPlugin,
-       // ...
-     ],
-   });
-   ```
-
 ### Optional: Backend plugin (req. for private packages or alternative registries)
 
 1. Install the backend plugin:
 
    ```sh
-   yarn workspace backend add @backstage-community/plugin-npm
+   yarn workspace backend add @backstage-community/plugin-npm-backend
    ```
 
 2. Add it to `packages/backend/src/index.ts`:

workspaces/npm/app-config.yaml

@@ -2,6 +2,12 @@ app:
   title: npm plugin example app
   baseUrl: http://localhost:3000
 
+  extensions:
+    - api:app/app-language:
+        config:
+          availableLanguages: ['en', 'es', 'fr', 'de', 'ja']
+          defaultLanguage: 'en'
+
 organization:
   name: npm plugin example
 

workspaces/npm/backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.46.2"
+  "version": "1.47.2"
 }

workspaces/npm/package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "dev": "yarn workspaces foreach -A --include @backstage-community/plugin-npm --include @backstage-community/plugin-npm-backend --parallel -v -i run start",
     "start": "backstage-cli repo start",
-    "start-next": "yarn workspaces foreach -A --include backend --include app-next --parallel -v -i run start",
+    "start:next": "yarn workspaces foreach -A --include backend --include app-next --parallel -v -i run start",
     "build:backend": "yarn workspace backend build",
     "build-image": "yarn workspace backend build-image",
     "tsc": "tsc",
@@ -42,9 +42,9 @@
     "directory": "workspaces/npm"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.35.1",
+    "@backstage/cli": "^0.35.3",
     "@backstage/e2e-test-utils": "^0.1.1",
-    "@backstage/repo-tools": "^0.16.1",
+    "@backstage/repo-tools": "^0.16.3",
     "@changesets/cli": "^2.27.1",
     "@playwright/test": "^1.32.3",
     "knip": "^5.27.4",

workspaces/npm/packages/app-next/knip-report.md

@@ -4,18 +4,18 @@
 
 | Name                            | Location          | Severity |
 | :------------------------------ | :---------------- | :------- |
-| @backstage/plugin-notifications | package.json:32:6 | error    |
+| @backstage/plugin-notifications | package.json:33:6 | error    |
 | @backstage/integration-react    | package.json:29:6 | error    |
-| @backstage/plugin-scaffolder    | package.json:34:6 | error    |
+| @backstage/plugin-scaffolder    | package.json:35:6 | error    |
 | @backstage/core-plugin-api      | package.json:26:6 | error    |
-| @backstage/plugin-org           | package.json:33:6 | error    |
+| @backstage/plugin-org           | package.json:34:6 | error    |
 
 ## Unused devDependencies (4)
 
 | Name                        | Location          | Severity |
 | :-------------------------- | :---------------- | :------- |
-| @testing-library/user-event | package.json:52:6 | error    |
-| @backstage/test-utils       | package.json:47:6 | error    |
-| @testing-library/dom        | package.json:49:6 | error    |
-| @playwright/test            | package.json:48:6 | error    |
+| @testing-library/user-event | package.json:53:6 | error    |
+| @backstage/test-utils       | package.json:48:6 | error    |
+| @testing-library/dom        | package.json:50:6 | error    |
+| @playwright/test            | package.json:49:6 | error    |
 

workspaces/npm/packages/app-next/package.json

@@ -20,22 +20,23 @@
   },
   "dependencies": {
     "@backstage-community/plugin-npm": "workspace:^",
-    "@backstage/cli": "^0.35.1",
-    "@backstage/core-compat-api": "^0.5.5",
-    "@backstage/core-components": "^0.18.4",
-    "@backstage/core-plugin-api": "^1.12.1",
-    "@backstage/frontend-defaults": "^0.3.4",
-    "@backstage/frontend-plugin-api": "^0.13.2",
-    "@backstage/integration-react": "^1.2.13",
-    "@backstage/plugin-catalog": "^1.32.1",
-    "@backstage/plugin-catalog-import": "^0.13.8",
-    "@backstage/plugin-notifications": "^0.5.12",
-    "@backstage/plugin-org": "^0.6.47",
-    "@backstage/plugin-scaffolder": "^1.35.0",
-    "@backstage/plugin-search": "^1.5.1",
-    "@backstage/plugin-signals": "^0.0.26",
-    "@backstage/plugin-user-settings": "^0.8.30",
-    "@backstage/ui": "^0.10.0",
+    "@backstage/cli": "^0.35.3",
+    "@backstage/core-compat-api": "^0.5.7",
+    "@backstage/core-components": "^0.18.6",
+    "@backstage/core-plugin-api": "^1.12.2",
+    "@backstage/frontend-defaults": "^0.3.6",
+    "@backstage/frontend-plugin-api": "^0.13.4",
+    "@backstage/integration-react": "^1.2.14",
+    "@backstage/plugin-app-react": "^0.1.0",
+    "@backstage/plugin-catalog": "^1.32.2",
+    "@backstage/plugin-catalog-import": "^0.13.9",
+    "@backstage/plugin-notifications": "^0.5.13",
+    "@backstage/plugin-org": "^0.6.48",
+    "@backstage/plugin-scaffolder": "^1.35.2",
+    "@backstage/plugin-search": "^1.5.3",
+    "@backstage/plugin-signals": "^0.0.27",
+    "@backstage/plugin-user-settings": "^0.8.31",
+    "@backstage/ui": "^0.11.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "react": "^18.0.2",

workspaces/npm/packages/app-next/src/App.tsx

@@ -20,13 +20,16 @@ import {
   PageBlueprint,
 } from '@backstage/frontend-plugin-api';
 import { createApp } from '@backstage/frontend-defaults';
+import { TranslationBlueprint } from '@backstage/plugin-app-react';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
 import catalogImportPlugin from '@backstage/plugin-catalog-import/alpha';
 import userSettingsPlugin from '@backstage/plugin-user-settings/alpha';
 import searchPlugin from '@backstage/plugin-search/alpha';
 import signalsPlugin from '@backstage/plugin-signals/alpha';
 
-import npmPlugin from '@backstage-community/plugin-npm/alpha';
+import npmPlugin, {
+  npmTranslations,
+} from '@backstage-community/plugin-npm/alpha';
 
 import { navModule } from './modules/nav';
 
@@ -38,11 +41,20 @@ const homePageExtension = PageBlueprint.make({
   },
 });
 
+const npmTranslation = TranslationBlueprint.make({
+  name: 'npmTranslation',
+  params: {
+    resource: npmTranslations,
+  },
+});
+
+const translations = [npmTranslation];
+
 export default createApp({
   features: [
     createFrontendModule({
       pluginId: 'app',
-      extensions: [homePageExtension],
+      extensions: [homePageExtension, ...translations],
     }),
     catalogPlugin,
     catalogImportPlugin,

workspaces/npm/packages/app-next/src/modules/nav/Sidebar.tsx

@@ -22,7 +22,7 @@ import {
 } from '@backstage/core-components';
 import { compatWrapper } from '@backstage/core-compat-api';
 import { Sidebar } from '@backstage/core-components';
-import { NavContentBlueprint } from '@backstage/frontend-plugin-api';
+import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarLogo } from './SidebarLogo';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';