feat(extensions): rename plugins to extensions, enable marketplace plugin by default and show it as catalog on the new renamed page (redhat-developer#2358)

christoph-jerolimov · web-flow · commit a9001b8eaa57 · 2025-03-05T13:00:52.000+01:00
* feat(marketplace): allow plugins to extend the plugins page

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* feat(marketplace): update marketplace plugin

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): fix mount points in app-config.dynamic-plugins.yaml

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): fix e2e tests

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): enable marketplace plugin by default

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): update marketplace plugin

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): rename to extensions/catalog

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

---------

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;
diff --git a/app-config.dynamic-plugins.yaml b/app-config.dynamic-plugins.yaml
@@ -506,12 +506,11 @@ dynamicPlugins:
         - name: marketplace
           importName: MarketplaceIcon
       dynamicRoutes:
-        - path: /marketplace
-          importName: MarketplacePage
-          menuItem:
-            icon: marketplace
-            text: Marketplace
+        - path: /extensions/catalog
+          importName: DynamicMarketplacePluginRouter
       mountPoints:
-        - mountPoint: admin.page.plugins/cards
-          importName: MarketplaceCatalogContent
-
+        - mountPoint: internal.plugins/tab
+          importName: DynamicMarketplacePluginContent
+          config:
+            path: marketplace
+            title: Catalog
diff --git a/dynamic-plugins.default.yaml b/dynamic-plugins.default.yaml
@@ -1089,11 +1089,11 @@ plugins:
           pingIdentityOrg: {}
   # Group: Marketplace
   - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic
-    disabled: true
+    disabled: false
   - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-marketplace-backend-dynamic
-    disabled: true
+    disabled: false
   - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-marketplace
-    disabled: true
+    disabled: false
     pluginConfig:
       dynamicPlugins:
         frontend:
@@ -1102,11 +1102,11 @@ plugins:
               - name: marketplace
                 importName: MarketplaceIcon
             dynamicRoutes:
-              - path: /marketplace
-                importName: MarketplacePage
-                menuItem:
-                  icon: marketplace
-                  text: Marketplace
+              - path: /extensions/catalog
+                importName: DynamicMarketplacePluginRouter
             mountPoints:
-              - mountPoint: admin.page.plugins/cards
-                importName: MarketplaceCatalogContent
+              - mountPoint: internal.plugins/tab
+                importName: DynamicMarketplacePluginContent
+                config:
+                  path: marketplace
+                  title: Catalog
diff --git a/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic/package.json b/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic/package.json
@@ -1,50 +1,53 @@
 {
   "name": "red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
+  "private": true,
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.cjs.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
   },
   "backstage": {
     "role": "backend-plugin-module",
     "supported-versions": "1.35.1",
     "pluginId": "catalog",
     "pluginPackage": "@backstage/plugin-catalog-backend"
   },
-  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "scripts": {
     "tsc": "tsc",
     "build": "backstage-cli package build",
     "lint:check": "backstage-cli package lint",
     "test": "backstage-cli package test --passWithNoTests --coverage",
     "clean": "backstage-cli package clean",
     "clean-dynamic-sources": "yarn clean && rm -Rf node_modules",
-    "export-dynamic": "janus-cli package export-dynamic-plugin --embed-package @red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace",
+    "export-dynamic": "janus-cli package export-dynamic-plugin --embed-package @red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace --embed-package @red-hat-developer-hub/backstage-plugin-marketplace-common",
     "export-dynamic:clean": "run export-dynamic --clean"
   },
   "dependencies": {
-    "@red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace": "0.0.2"
+    "@red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace": "0.2.0"
   },
   "devDependencies": {
     "@backstage/cli": "0.29.6",
     "@janus-idp/cli": "3.2.0",
     "typescript": "5.7.3"
   },
   "files": [
-    "app-config.dynamic.yaml",
     "dist",
-    "dist-scalprum"
+    "dist-dynamic/*.*",
+    "dist-dynamic/dist/**"
   ],
-  "scalprum": {
-    "name": "red-hat-developer-hub.backstage-plugin-catalog-backend-module-marketplace-dynamic",
-    "exposedModules": {
-      "PluginRoot": "./src/index.ts"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/redhat-developer/rhdh",
diff --git a/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-marketplace-backend-dynamic/package.json b/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-marketplace-backend-dynamic/package.json
@@ -1,6 +1,6 @@
 {
   "name": "red-hat-developer-hub-backstage-plugin-marketplace-backend",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -35,11 +35,11 @@
     "test": "backstage-cli package test --passWithNoTests --coverage",
     "clean": "backstage-cli package clean",
     "clean-dynamic-sources": "yarn clean && rm -Rf node_modules",
-    "export-dynamic": "janus-cli package export-dynamic-plugin --embed-package @red-hat-developer-hub/backstage-plugin-marketplace-backend",
+    "export-dynamic": "janus-cli package export-dynamic-plugin --embed-package @red-hat-developer-hub/backstage-plugin-marketplace-backend --embed-package @red-hat-developer-hub/backstage-plugin-marketplace-common",
     "export-dynamic:clean": "run export-dynamic --clean"
   },
   "dependencies": {
-    "@red-hat-developer-hub/backstage-plugin-marketplace-backend": "0.0.2"
+    "@red-hat-developer-hub/backstage-plugin-marketplace-backend": "0.2.0"
   },
   "devDependencies": {
     "@backstage/cli": "0.29.6",
diff --git a/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-marketplace/package.json b/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-marketplace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "red-hat-developer-hub-backstage-plugin-marketplace",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "export-dynamic:clean": "run export-dynamic --clean"
   },
   "dependencies": {
-    "@red-hat-developer-hub/backstage-plugin-marketplace": "0.0.2"
+    "@red-hat-developer-hub/backstage-plugin-marketplace": "0.2.0"
   },
   "devDependencies": {
     "@backstage/cli": "0.29.6",
diff --git a/e2e-tests/playwright/e2e/extensions.spec.ts b/e2e-tests/playwright/e2e/extensions.spec.ts
@@ -0,0 +1,23 @@
+import { test as base } from "@playwright/test";
+import { Common } from "../utils/common";
+import { UIhelper } from "../utils/ui-helper";
+
+const test = base.extend<{ uiHelper: UIhelper }>({
+  uiHelper: async ({ page }, use) => {
+    use(new UIhelper(page));
+  },
+});
+
+test.describe("Admin > Extensions > Catalog", () => {
+  test.beforeEach(async ({ page, uiHelper }) => {
+    await new Common(page).loginAsKeycloakUser();
+    await uiHelper.openSidebarButton("Administration");
+    await uiHelper.openSidebar("Extensions");
+    await uiHelper.verifyHeading("Extensions");
+  });
+
+  test("Tabs includes a tab for extensions", async ({ uiHelper }) => {
+    await uiHelper.clickTab("Catalog");
+    // TODO: check plugins grid when we initialized some test data
+  });
+});
diff --git a/e2e-tests/playwright/e2e/plugin-marketplace.spec.ts b/e2e-tests/playwright/e2e/plugin-marketplace.spec.ts
diff --git a/e2e-tests/playwright/e2e/plugins/analytics/analytics-disabled-rbac.spec.ts b/e2e-tests/playwright/e2e/plugins/analytics/analytics-disabled-rbac.spec.ts
@@ -13,8 +13,9 @@ test.describe.skip('Check RBAC "analytics-provider-segment" plugin', () => {
     common = new Common(page);
     await common.loginAsKeycloakUser();
     await uiHelper.openSidebarButton("Administration");
-    await uiHelper.openSidebar("Plugins");
-    await uiHelper.verifyHeading("Plugins");
+    await uiHelper.openSidebar("Extensions");
+    await uiHelper.verifyHeading("Extensions");
+    await uiHelper.clickTab("Installed");
   });
 
   test("is disabled", async ({ page }) => {
diff --git a/e2e-tests/playwright/e2e/plugins/dynamic-plugins-info/dynamic-plugins-info.spec.ts b/e2e-tests/playwright/e2e/plugins/dynamic-plugins-info/dynamic-plugins-info.spec.ts
@@ -12,8 +12,9 @@ test.describe("dynamic-plugins-info UI tests", () => {
     common = new Common(page);
     await common.loginAsGuest();
     await uiHelper.openSidebarButton("Administration");
-    await uiHelper.openSidebar("Plugins");
-    await uiHelper.verifyHeading("Plugins");
+    await uiHelper.openSidebar("Extensions");
+    await uiHelper.verifyHeading("Extensions");
+    await uiHelper.clickTab("Installed");
   });
 
   test("it should show a table, and the table should contain techdocs plugins", async ({
diff --git a/e2e-tests/playwright/utils/navbar.ts b/e2e-tests/playwright/utils/navbar.ts
@@ -6,8 +6,7 @@ export type SidebarTabs =
   | "Home"
   | "Create..."
   | "Learning Paths"
-  | "Marketplace"
-  | "Plugins"
+  | "Extensions"
   | "Bulk import"
   | "Docs"
   | "Clusters"
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -23,19 +23,29 @@ const baseFrontendConfig = {
           ],
           dynamicRoutes: [
             {
-              path: '/plugins',
-              importName: 'DynamicPluginsInfo',
+              path: '/extensions',
+              importName: 'DynamicPluginsInfoPage',
               menuItem: { text: 'Plugins', icon: 'pluginsInfoIcon' },
             },
           ],
+          mountPoints: [
+            {
+              mountPoint: 'internal.plugins/tab',
+              importName: 'DynamicPluginsInfoContent',
+              config: {
+                path: 'installed',
+                title: 'Installed',
+              },
+            },
+          ],
           menuItems: {
             admin: {
               title: 'Administration',
               icon: 'adminIcon',
             },
-            plugins: {
+            extensions: {
               parent: 'admin',
-              title: 'Plugins',
+              title: 'Extensions',
               icon: 'pluginsInfoIcon',
             },
           },
diff --git a/plugins/dynamic-plugins-info/app-config.dynamic.yaml b/plugins/dynamic-plugins-info/app-config.dynamic.yaml
@@ -0,0 +1,29 @@
+# please keep this in sync with packages/app/src/App.tsx
+dynamicPlugins:
+  frontend:
+    internal.plugin-dynamic-plugins-info:
+      appIcons:
+        - name: pluginsInfoIcon
+          importName: PluginsInfoIcon
+        - name: adminIcon
+          importName: AdminIcon
+      dynamicRoutes:
+        - path: /extensions
+          importName: DynamicPluginsInfoPage
+          menuItem:
+            text: Extensions
+            icon: pluginsInfoIcon
+      mountPoints:
+        - mountPoint: internal.plugins/tab
+          importName: DynamicPluginsInfoContent
+          config:
+            path: installed
+            title: Installed
+      menuItems:
+        admin:
+          title: Administration
+          icon: adminIcon
+        extensions:
+          parent: admin
+          title: Extensions
+          icon: pluginsInfoIcon
diff --git a/plugins/dynamic-plugins-info/app-config.janus-idp.yaml b/plugins/dynamic-plugins-info/app-config.janus-idp.yaml
diff --git a/plugins/dynamic-plugins-info/package.json b/plugins/dynamic-plugins-info/package.json
@@ -39,6 +39,7 @@
     "@material-table/core": "3.2.5",
     "@mui/icons-material": "5.16.14",
     "@mui/material": "5.16.14",
+    "@scalprum/react-core": "0.9.3",
     "react-use": "17.6.0"
   },
   "peerDependencies": {
diff --git a/plugins/dynamic-plugins-info/src/components/DynamicPluginsInfoContent/DynamicPluginsInfoContent.tsx b/plugins/dynamic-plugins-info/src/components/DynamicPluginsInfoContent/DynamicPluginsInfoContent.tsx
@@ -1,3 +1,3 @@
-import { DynamicPluginsInfoPage } from '../DynamicPluginsInfoPage';
+import { DynamicPluginsTable } from '../DynamicPluginsTable/DynamicPluginsTable';
 
-export const DynamicPluginsInfoContent = () => <DynamicPluginsInfoPage />;
+export const DynamicPluginsInfoContent = () => <DynamicPluginsTable />;
diff --git a/plugins/dynamic-plugins-info/src/components/DynamicPluginsInfoPage.tsx b/plugins/dynamic-plugins-info/src/components/DynamicPluginsInfoPage.tsx
diff --git a/plugins/dynamic-plugins-info/src/index.ts b/plugins/dynamic-plugins-info/src/index.ts
diff --git a/plugins/dynamic-plugins-info/src/plugin.ts b/plugins/dynamic-plugins-info/src/plugin.ts
diff --git a/yarn.lock b/yarn.lock
