feat(marketplace): integrate plugins-info plugin #1395

ciiay · 2025-09-05T07:01:37Z

Hey, I just made a Pull Request!

For RHIDP-8301
This works with rhdh pr #3366

✔️ Checklist

A changeset describing the change and affected packages. (more info)
Added or Updated documentation
Tests for new functionality and regression tests for bug fixes
Screenshots attached (for UI changes)

Test config:

dynamicPlugins:
  rootDirectory: dynamic-plugins-root
  frontend:
    default.main-menu-items:
      menuItems:
        ...
        default.admin:
          title: Administration
          icon: admin
...
    red-hat-developer-hub.backstage-plugin-marketplace:
      appIcons:
        - name: pluginsIcon
          importName: PluginsIcon
      dynamicRoutes:
        - path: /extensions
          importName: DynamicMarketplacePluginRouter
          menuItem:
            icon: pluginsIcon
            text: Extensions
      menuItems:
        extensions:
          parent: default.admin

Screen recording of testing on RHDH
Updated on 9/19 (with rhdh pr #3366)

rhidp_8301_new.mp4

rhdh-gh-app · 2025-09-05T07:01:58Z

Important

This PR includes changes that affect public-facing API. Please ensure you are adding/updating documentation for new features or behavior.

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
app	workspaces/marketplace/packages/app	none	`v0.0.0`
@red-hat-developer-hub/backstage-plugin-marketplace-backend	workspaces/marketplace/plugins/marketplace-backend	minor	`v0.8.0`
@red-hat-developer-hub/backstage-plugin-marketplace	workspaces/marketplace/plugins/marketplace	minor	`v0.9.3`

ShiranHi · 2025-09-07T09:16:41Z

Thank you @ciiay for this PR, looks great. I have some questions:

For the empty state, can we use this text and reduce the table height?
Can we move the Version column closer to the plugin name and the Actions column to the right-hand side. like here?
I don't know if this is part of the PR but can we add tooltips that appear when hovering over the icons in the Actions column, like here?

...es/marketplace/plugins/marketplace/src/components/InstalledPlugins/InstalledPluginsTable.tsx

Signed-off-by: Yi Cai <[email protected]>

ciiay · 2025-09-09T01:17:19Z

Thank you @ciiay for this PR, looks great. I have some questions:

For the empty state, can we use this text and reduce the table height?

Can we move the Version column closer to the plugin name and the Actions column to the right-hand side. like here?

I don't know if this is part of the PR but can we add tooltips that appear when hovering over the icons in the Actions column, like here?

Thanks for the review. Uploaded the new screen recording for the fix.

debsmita1 · 2025-09-09T16:18:57Z

We want to show a single row for plugins(Ex: Marketplace) that have both backend and frontend components

@ShiranHi the backend and frontend components will have different versions, how do we display that ?

debsmita1 · 2025-09-09T15:43:01Z

...es/marketplace/plugins/marketplace/src/components/InstalledPlugins/InstalledPluginsTable.tsx

+      orderBy = { field: 'name' },
+      orderDirection = 'asc',


These properties are deprecated

workspaces/marketplace/plugins/marketplace/src/pages/DynamicMarketplacePluginRouter.tsx

ciiay · 2025-09-09T22:47:12Z

We want to show a single row for plugins(Ex: Marketplace) that have both backend and frontend components
@ShiranHi the backend and frontend components will have different versions, how do we display that ?

Good point. Sharing a quick heads-up on the “single row per plugin” work and a few pain points.

What my PR does now: I group rows by a normalized base name (strip org/prefix and -frontend/-backend/-dynamic), prefer the FE package when both exist, and show that version. This meets the single-row AC but doesn’t look at the plugin extension YAML.

Pain points:

Some plugins have more than FE/BE (e.g., Marketplace also has a catalog backend module), so string-based grouping is not reliable.
Package versions often differ across FE/BE/modules—unclear which version we should show in the single Version column.
“Installed count” is ambiguous: if only some packages are present, do we count it as installed or partial?
If we use the extension YAML as source of truth, doing runtime checks across YAMLs may be expensive.

Questions and concerns:

What should be the source of truth for grouping? The extension YAML packages or just the pluginProvider.plugins() returned values?
For the Version column on a single row, do we show frontend package version or what version we should show?
What should we do with partially installed plugins?
If extension YAML file is the source, are we okay with a lightweight/precomputed mapping to avoid heavy runtime checks?
Name alignment: Are pluginProvider.plugins() package names guaranteed to match the YAML entries (scope/suffix included)? If not, should we add a small story to align names or introduce a stable mapping/ID?

cc. @christoph-jerolimov

ShiranHi · 2025-09-10T06:09:57Z

@ShiranHi the backend and frontend components will have different versions, how do we display that ?

Yes, discussed here.

christoph-jerolimov

I think we're almost fine here. Some small details, nothing major and I'm fine if @debsmita1 will merge it.

workspaces/marketplace/plugins/marketplace/src/api/DynamicPluginsInfoClient.ts

...es/marketplace/plugins/marketplace/src/components/InstalledPlugins/InstalledPluginsTable.tsx

workspaces/marketplace/plugins/marketplace/src/plugin.ts

Signed-off-by: Yi Cai <[email protected]>

debsmita1

Why is the "Install" disabled, can we provide a tooltip ?

The action on the drawer shows "Update" but the installation page shows "Install" instead of "Edit"

Screen.Recording.2025-09-23.at.3.59.59.PM.mov

Should be packages

workspaces/marketplace/.changeset/unlucky-hornets-cross.md

.../marketplace/plugins/marketplace/src/components/InstalledPackages/InstalledPackagesTable.tsx

workspaces/marketplace/plugins/marketplace/src/hooks/useInstalledPackagesCount.ts

.../marketplace/plugins/marketplace/src/components/InstalledPackages/InstalledPackagesTable.tsx

...es/marketplace/plugins/marketplace/src/components/InstalledPlugins/InstalledPluginsTable.tsx

debsmita1 · 2025-09-23T10:21:44Z

Tested it locally along with redhat-developer/rhdh#3366, and the functionality works fine.

ciiay · 2025-09-24T00:08:45Z

Why is the "Install" disabled, can we provide a tooltip ?

Changed it to Save to align up with the plugin install page.

Should be packages

Updated to packages, also updated the plugin install page to use plugins too so both are consistent.

Signed-off-by: Yi Cai <[email protected]>

sonarqubecloud · 2025-09-24T18:25:08Z

Quality Gate failed

Failed conditions
2 Security Hotspots
3.7% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

debsmita1

Verified that changes made to a package config, updates the yaml file configured in the extensions configuration, and the same is reflected in the edit plugin configuration as well

Screen.Recording.2025-09-25.at.1.29.45.PM.mov

When updating the package config, users should be directed to the "Installed Packages" tab instead of the package info drawer.
Since there can be multiple packages with config updates, @ShiranHi could you guide us on how we should handle an alert message in this case?
Also, we should hide the "Edit Instructions" section if no instructions are available for the package.
@ShiranHi do you agree that we show the same "Actions" dropdown here like we have on the plugins info drawer (We can address this as part of https://issues.redhat.com/browse/RHIDP-6810)

Let's address the issues in a separate PR

/lgtm

christoph-jerolimov

I have a bunch of comment but I think we can merge it now and then take a look into this together:

christoph-jerolimov · 2025-09-25T14:07:43Z

workspaces/marketplace/package.json

    "prettier": "^3.4.2",
-    "typescript": "~5.3.0"
+    "typescript": "~5.3.0",
+    "yaml": "^2.8.1"


I don't think this is needed on the workspace level? :)

christoph-jerolimov · 2025-09-25T14:10:32Z

workspaces/marketplace/plugins/marketplace-backend/package.json

    "@red-hat-developer-hub/backstage-plugin-marketplace-common": "workspace:^",
    "express": "^4.17.1",
    "express-promise-router": "^4.1.0",
-    "yaml": "^2.7.1",


plugins/marketplace-backend/src/installation/FileInstallationStorage.ts is using the yaml package. Please move this back from devDependencies to dependencies.

christoph-jerolimov · 2025-09-25T14:27:46Z

workspaces/marketplace/plugins/marketplace/src/hooks/usePackage.ts

    queryKey: ['marketplaceApi', 'getPackageByName', namespace, name],
-    queryFn: () => marketplaceApi.getPackageByName(namespace, name),
+    queryFn: () => marketplaceApi.getPackageByName(namespace!, name!),
+    enabled: Boolean(namespace && name),


I think we should have another parameter or another hook for this. I think another hook would be right.

But we can keep it for now.

christoph-jerolimov · 2025-09-25T14:28:22Z

workspaces/marketplace/plugins/marketplace/src/hooks/useInstalledPackagesCount.ts

+  const [count, setCount] = useState<number>(0);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const dynamicPluginInfo = useApi(dynamicPluginsInfoApiRef);
+
+  useEffect(() => {
+    const fetchCount = async () => {
+      try {
+        setLoading(true);
+        setError(undefined);
+        const plugins = await dynamicPluginInfo.listLoadedPlugins();
+        setCount(plugins.length);
+      } catch (err) {
+        setError(err as Error);
+        setCount(0);
+      } finally {
+        setLoading(false);
+      }
+    };


In general we used react-query in this plugin instead of manual state handling

christoph-jerolimov · 2025-09-25T14:29:09Z

.../marketplace/plugins/marketplace/src/components/InstalledPackages/InstalledPackagesTable.tsx

+  const fetchData = async (
+    query: Query<InstalledPackageRow>,
+  ): Promise<QueryResult<InstalledPackageRow>> => {
+    const { page = 0, pageSize = 5 } = query || {};
+
+    try {
+      // Ensure data available; avoid re-fetching on search or pagination
+      const installed = installedQuery.data ?? [];
+      const packagesResponse = packagesQuery.data ?? { items: [] as any[] };
+
+      const entitiesByName = new Map(
+        (packagesResponse.items ?? []).map(entity => [
+          (entity.metadata?.name ?? '').toLowerCase(),
+          entity,
+        ]),
+      );
+
+      // Build rows for ALL installed items; if no matching entity, mark missing
+      const rows: InstalledPackageRow[] = installed.map(p => {
+        const normalized = p.name
+          .replace(/[@/]/g, '-')
+          .replace(/-dynamic$/, '')
+          .replace(/^-+/, '')
+          .toLowerCase();
+        const entity = entitiesByName.get(normalized) as any | undefined;
+        const rawName = entity
+          ? (entity.metadata?.title as string) ||
+            (entity.metadata?.name as string)
+          : getReadableName(p.name);
+        const cleanedName = rawName.replace(/\s+(frontend|backend)$/i, '');


I know this is copied but this looks like a lot of code to me that the backstage table is already doing? But maybe I'm wrong in the detail.

Fine for now.

christoph-jerolimov · 2025-09-25T14:34:42Z

workspaces/marketplace/plugins/marketplace/src/pages/DynamicMarketplacePluginRouter.tsx

-      <Route path="/*" Component={Tabs} />
-    </Routes>
-  </ReactQueryProvider>
+  <InstallationContextProvider>


We can get rid of the InstallationContextProvider or? Doesn't it return null?

christoph-jerolimov · 2025-09-25T14:35:14Z

workspaces/marketplace/plugins/marketplace/src/pages/MarketplaceFullPageRouter.tsx

        <Route
          path="/packages/:namespace/:name/install"
-          Component={MarketplacePackageInstallPage}
+          Component={MarketplacePackageEditPage}


Actually, why is it renamed? 😄

christoph-jerolimov · 2025-09-25T14:35:33Z

workspaces/marketplace/plugins/marketplace/src/pages/MarketplacePackageEditPage.tsx

+import { MarketplacePackageEditContentLoader } from '../components/MarketplacePackageEditContent';

-const PackageInstallHeader = () => {
+const PackageEditHeader = () => {


Why renaming things?

christoph-jerolimov · 2025-09-25T14:36:14Z

workspaces/marketplace/plugins/marketplace/src/pages/MarketplacePackageEditPage.tsx

+            {/* Force remount on navigation within same route to reseed editor */}
+            <MarketplacePackageEditContentLoader
+              key={`${location.key}-${location.search}`}
+            />


christoph-jerolimov · 2025-09-25T14:49:30Z

workspaces/marketplace/plugins/marketplace/src/utils/pluginProcessing.ts

+  const baseName = packageName
+    .replace(/^@Red Hat Developer Hub\/Backstage Plugin\s*/, '') // Red Hat plugins (display names)
+    .replace(/^@red-hat-developer-hub\/backstage-plugin-/, '') // Red Hat plugins (package names)
+    .replace(/^red-hat-developer-hub-backstage-plugin-/, '') // Red Hat kebab-case
+    .replace(/^@backstage-community\/plugin-/, '') // Community plugins
+    .replace(/^backstage-community-plugin-/, '') // Community plugins alt
+    .replace(/^@backstage\/plugin-/, '') // Official Backstage plugins
+    .replace(/^backstage-plugin-/, '') // Generic backstage plugins
+    .replace(/-dynamic$/, '') // Remove -dynamic suffix
+    .replace(/-frontend$/, '') // Remove -frontend suffix
+    .replace(/-backend$/, '') // Remove -backend suffix
+    .replace(/^[\s-]+/, '') // Remove leading spaces or dashes


debsmita1 · 2025-09-25T17:21:58Z

I will address these review comments as part of https://issues.redhat.com/browse/RHIDP-6810

ciiay requested review from christoph-jerolimov, debsmita1, divyanshiGupta, gashcrumb, its-mitesh-kumar, karthikjeeyar and logonoff as code owners September 5, 2025 07:01

ciiay mentioned this pull request Sep 5, 2025

fix(marketplace): remove dynamic-plugins-info plugins redhat-developer/rhdh#3366

Merged

5 tasks

logonoff removed their request for review September 8, 2025 01:01

debsmita1 reviewed Sep 8, 2025

View reviewed changes

...es/marketplace/plugins/marketplace/src/components/InstalledPlugins/InstalledPluginsTable.tsx Outdated Show resolved Hide resolved

ciiay requested a review from a team as a code owner September 9, 2025 01:15

ciiay added 6 commits September 8, 2025 21:16

feat(marketplace): integrate plugins-info plugin

db8f890

Signed-off-by: Yi Cai <[email protected]>

update package and yarn.lock

405e045

Signed-off-by: Yi Cai <[email protected]>

added changeset

2b7a4c6

Signed-off-by: Yi Cai <[email protected]>

yarn dedupe

d1f56b6

Signed-off-by: Yi Cai <[email protected]>

fix tsc issue

8d464ea

Signed-off-by: Yi Cai <[email protected]>

addressed review comments

a414de9

Signed-off-by: Yi Cai <[email protected]>

ciiay force-pushed the rhidp-8301-create-installed-plugins-tab branch from c6035e7 to a414de9 Compare September 9, 2025 01:16

ciiay requested a review from debsmita1 September 9, 2025 12:39

debsmita1 reviewed Sep 9, 2025

View reviewed changes

christoph-jerolimov reviewed Sep 10, 2025

View reviewed changes

christoph-jerolimov mentioned this pull request Sep 18, 2025

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

Merged

4 tasks

ciiay added 2 commits September 19, 2025 02:06

addressed feedback

8610897

Signed-off-by: Yi Cai <[email protected]>

code improvement

69f3930

Signed-off-by: Yi Cai <[email protected]>

updated report.api.md

0660152

Signed-off-by: Yi Cai <[email protected]>

ciiay requested a review from ShiranHi September 19, 2025 06:28

added link to name column

2aaaa38

Signed-off-by: Yi Cai <[email protected]>

debsmita1 self-requested a review September 22, 2025 15:25

debsmita1 requested changes Sep 23, 2025

View reviewed changes

addressed review comments

c290b15

Signed-off-by: Yi Cai <[email protected]>

ciiay requested a review from debsmita1 September 24, 2025 12:05

ciiay added 3 commits September 24, 2025 11:27

fixed saving issue

66609c9

Signed-off-by: Yi Cai <[email protected]>

fixed saving config error

42a921f

Signed-off-by: Yi Cai <[email protected]>

changeset updated to minor

e296c28

Signed-off-by: Yi Cai <[email protected]>

debsmita1 approved these changes Sep 25, 2025

View reviewed changes

openshift-ci bot assigned debsmita1 Sep 25, 2025

openshift-ci bot added the lgtm label Sep 25, 2025

invincibleJai requested a review from christoph-jerolimov September 25, 2025 11:15

christoph-jerolimov reviewed Sep 25, 2025

View reviewed changes

christoph-jerolimov merged commit dad9806 into redhat-developer:main Sep 25, 2025
9 of 10 checks passed

debsmita1 mentioned this pull request Oct 1, 2025

feat(extensions): add row actions to installed packages #1558

Merged

4 tasks

feat(marketplace): integrate plugins-info plugin #1395

feat(marketplace): integrate plugins-info plugin #1395

Uh oh!

Conversation

ciiay commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Hey, I just made a Pull Request!

✔️ Checklist

Uh oh!

rhdh-gh-app bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changed Packages

Uh oh!

ShiranHi commented Sep 7, 2025

Uh oh!

Uh oh!

ciiay commented Sep 9, 2025

Uh oh!

debsmita1 commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ciiay commented Sep 9, 2025

Uh oh!

ShiranHi commented Sep 10, 2025

Uh oh!

christoph-jerolimov left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

debsmita1 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

debsmita1 commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ciiay commented Sep 24, 2025

Uh oh!

sonarqubecloud bot commented Sep 24, 2025

Quality Gate failed

Uh oh!

debsmita1 left a comment

Choose a reason for hiding this comment

Uh oh!

christoph-jerolimov left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ciiay commented Sep 5, 2025 •

edited

Loading

rhdh-gh-app bot commented Sep 5, 2025 •

edited

Loading

debsmita1 commented Sep 9, 2025 •

edited

Loading

debsmita1 left a comment •

edited

Loading

debsmita1 commented Sep 23, 2025 •

edited

Loading