feat(Extensions): Add translation support for Extensions (#1410)

* feat(marketplace): Add comprehensive i18n support with German, French, and Spanish translations

* Removed translations from Skeletons

* Replaced Trans with MarkdownContent from @backstage/core-components

* Removed translation in featured.yaml file

* Added tranalation for PluginCollection

* Rebased with main branch

* feat(marketplace): Add exports configuration for alpha subpath

* get translated text from util for collections

* add api-reports to eslintignore

* mark translations resources and refs as alpha

* updating api report

Signed-off-by: its-mitesh-kumar <[email protected]>

* re-updating api report

Signed-off-by: its-mitesh-kumar <[email protected]>

---------

Signed-off-by: its-mitesh-kumar <[email protected]>
Co-authored-by: Karthik <[email protected]>
Co-authored-by: its-mitesh-kumar <[email protected]>

Author: 3 people

workspaces/marketplace/.changeset/add-marketplace-i18n-support.md

@@ -0,0 +1,8 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': minor
+'@red-hat-developer-hub/backstage-plugin-marketplace-backend': minor
+'@red-hat-developer-hub/backstage-plugin-marketplace-common': minor
+'@red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace': minor
+---
+
+Add internationalization (i18n) support with German, French and Spanish translations in marketplace.

workspaces/marketplace/.eslintignore

@@ -2,3 +2,4 @@ playwright.config.ts
 .eslintrc.js
 .prettierrc.js
 coverage
+report-alpha.api.md

workspaces/marketplace/.prettierignore

@@ -6,3 +6,4 @@ coverage
 .eslintrc.js
 report.api.md
 knip-report.md
+report-alpha.api.md

workspaces/marketplace/examples/collections/featured.yaml

@@ -5,7 +5,9 @@ metadata:
   namespace: marketplace-plugin-demo
   name: featured
   title: Featured Plugins
+  titleKey: collection.featured.title
   description: A set of great plugins! :)
+  descriptionKey: collection.featured.description
 spec:
   type: curated
   plugins:

workspaces/marketplace/json-schema/collections.json

@@ -35,9 +35,15 @@
         "title": {
           "type": "string"
         },
+        "titleKey": {
+          "type": "string"
+        },
         "description": {
           "type": "string"
         },
+        "descriptionKey": {
+          "type": "string"
+        },
         "tags": {
           "type": "array",
           "items": {

workspaces/marketplace/packages/app/src/App.tsx

@@ -53,6 +53,7 @@ import { githubAuthApiRef } from '@backstage/core-plugin-api';
 import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
 
 import { DynamicMarketplacePluginRouter as Marketplace } from '@red-hat-developer-hub/backstage-plugin-marketplace';
+import { marketplaceTranslations } from '@red-hat-developer-hub/backstage-plugin-marketplace/alpha';
 
 import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
@@ -61,6 +62,10 @@ import { Root } from './components/Root';
 
 const app = createApp({
   apis,
+  __experimentalTranslations: {
+    availableLanguages: ['en', 'de', 'fr', 'es'],
+    resources: [marketplaceTranslations],
+  },
   bindRoutes({ bind }) {
     bind(catalogPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,

workspaces/marketplace/plugins/marketplace/.eslintignore

@@ -1,3 +1,5 @@
 playwright.config.ts
 !.eslintrc.js
-!.prettierrc.js
+!.prettierrc.js
+report-alpha.api.md
+report.api.md

workspaces/marketplace/plugins/marketplace/.prettierignore

@@ -0,0 +1,9 @@
+dist
+dist-dynamic
+dist-types
+coverage
+.vscode
+.eslintrc.js
+report.api.md
+knip-report.md
+report-alpha.api.md

workspaces/marketplace/plugins/marketplace/dev/index.tsx

@@ -23,9 +23,13 @@ import {
   MarketplaceFullPageRouter,
   MarketplaceTabbedPageRouter,
 } from '../src/plugin';
+import { marketplaceTranslations } from '../src/translations';
 
 createDevApp()
   .registerPlugin(marketplacePlugin)
+  .addTranslationResource(marketplaceTranslations)
+  .setAvailableLanguages(['en', 'de', 'fr', 'es'])
+  .setDefaultLanguage('en')
   .addThemes(getAllThemes())
   .addPage({
     element: <MarketplaceFullPageRouter />,

workspaces/marketplace/plugins/marketplace/package.json

@@ -5,9 +5,7 @@
   "types": "src/index.ts",
   "license": "Apache-2.0",
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
   },
   "repository": {
     "type": "git",
@@ -24,6 +22,21 @@
     ]
   },
   "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./alpha": "./src/alpha.ts",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "src/alpha.ts"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "scripts": {
     "start": "backstage-cli package start",
     "build": "backstage-cli package build",