fix(extensions): disable row actions in prod env (#1665)

debsmita1 · its-mitesh-kumar · web-flow · commit b6c9d5c84ffe · 2025-10-17T14:28:46.000+05:30
Co-authored-by: Mitesh Kumar &lt;itsmiteshkumar98@gmail.com&gt;
diff --git a/workspaces/marketplace/.changeset/small-apes-drop.md b/workspaces/marketplace/.changeset/small-apes-drop.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+Disabled row actions in the "Installed packages" tab for the production environment
diff --git a/workspaces/marketplace/plugins/marketplace/report-alpha.api.md b/workspaces/marketplace/plugins/marketplace/report-alpha.api.md
@@ -109,6 +109,7 @@ readonly "installedPackages.table.columns.version": string;
 readonly "installedPackages.table.columns.role": string;
 readonly "installedPackages.table.columns.name": string;
 readonly "installedPackages.table.columns.actions": string;
+readonly "installedPackages.table.tooltips.packageProductionDisabled": string;
 readonly "installedPackages.table.tooltips.enableActions": string;
 readonly "installedPackages.table.tooltips.noDownloadPermissions": string;
 readonly "installedPackages.table.tooltips.noEditPermissions": string;
diff --git a/workspaces/marketplace/plugins/marketplace/src/components/InstalledPackages/InstalledPackagesTable.test.tsx b/workspaces/marketplace/plugins/marketplace/src/components/InstalledPackages/InstalledPackagesTable.test.tsx
@@ -18,20 +18,27 @@ import { BrowserRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { mockApis, MockErrorApi, TestApiProvider } from '@backstage/test-utils';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { errorApiRef } from '@backstage/core-plugin-api';
+import { translationApiRef } from '@backstage/core-plugin-api/alpha';
 
 import { queryClient } from '../../queryclient';
 import { marketplaceApiRef } from '../../api';
 import { dynamicPluginsInfoApiRef } from '../../api';
 import { InstalledPackagesTable } from './InstalledPackagesTable';
-import { errorApiRef } from '@backstage/core-plugin-api';
-import { translationApiRef } from '@backstage/core-plugin-api/alpha';
+import { useNodeEnvironment } from '../../hooks/useNodeEnvironment';
 
 jest.mock('@backstage/core-plugin-api', () => ({
   ...jest.requireActual('@backstage/core-plugin-api'),
   useRouteRef: () => (params: any) =>
     `/packages/${params.namespace}/${params.name}`,
 }));
 
+jest.mock('../../hooks/useNodeEnvironment', () => ({
+  useNodeEnvironment: jest.fn(),
+}));
+
+const useNodeEnvironmentMock = useNodeEnvironment as jest.Mock;
+
 describe('InstalledPackagesTable', () => {
   const renderWithProviders = (apis: any) =>
     render(
@@ -156,6 +163,60 @@ describe('InstalledPackagesTable', () => {
     expect(disabledButtons.length).toBeGreaterThanOrEqual(3);
   });
 
+  it('disables actions in the production env', async () => {
+    useNodeEnvironmentMock.mockReturnValue({
+      data: {
+        nodeEnv: 'production',
+      },
+    });
+    const dynamicPlugins = [
+      {
+        name: '@scope/pkg-a-dynamic',
+        version: '1.0.0',
+        role: 'frontend-plugin',
+        platform: 'fe',
+      },
+    ];
+
+    const entities = {
+      items: [
+        {
+          apiVersion: 'extensions.backstage.io/v1alpha1',
+          kind: 'Package',
+          metadata: {
+            namespace: 'rhdh',
+            name: 'scope-pkg-a',
+            title: 'Package A',
+          },
+          spec: { packageName: '@scope/pkg-a', version: '1.0.0' },
+        },
+      ],
+      totalItems: 1,
+      pageInfo: {},
+    };
+
+    const apis = [
+      [
+        dynamicPluginsInfoApiRef,
+        { listLoadedPlugins: jest.fn().mockResolvedValue(dynamicPlugins) },
+      ],
+      [
+        marketplaceApiRef,
+        { getPackages: jest.fn().mockResolvedValue(entities) },
+      ],
+    ] as const;
+
+    renderWithProviders(apis);
+
+    await waitFor(() =>
+      expect(screen.getByText('Installed packages (1)')).toBeInTheDocument(),
+    );
+
+    const disabledButtons = screen.getAllByRole('button', { hidden: true });
+    // There are three disabled action buttons rendered wrapped in span
+    expect(disabledButtons.length).toBeGreaterThanOrEqual(3);
+  });
+
   it('filters by search query', async () => {
     const dynamicPlugins = [
       {
diff --git a/workspaces/marketplace/plugins/marketplace/src/components/InstalledPackages/InstalledPackagesTable.tsx b/workspaces/marketplace/plugins/marketplace/src/components/InstalledPackages/InstalledPackagesTable.tsx
@@ -171,11 +171,17 @@ export const InstalledPackagesTable = () => {
       render: (row: InstalledPackageRow) => {
         return (
           <Box display="flex" gap={1}>
-            <EditPackage pkg={row} />
+            <EditPackage pkg={row} isProductionEnv={isProductionEnvironment} />
             {/* Show it when uninstall functionality is implemented */}
             {showUninstall && <UninstallPackage pkg={row} />}
-            <DownloadPackageYaml pkg={row} />
-            <TogglePackage pkg={row} />
+            <DownloadPackageYaml
+              pkg={row}
+              isProductionEnv={isProductionEnvironment}
+            />
+            <TogglePackage
+              pkg={row}
+              isProductionEnv={isProductionEnvironment}
+            />
           </Box>
         );
       },
diff --git a/workspaces/marketplace/plugins/marketplace/src/components/InstalledPackages/RowActions.tsx b/workspaces/marketplace/plugins/marketplace/src/components/InstalledPackages/RowActions.tsx
@@ -49,13 +49,41 @@ export type InstalledPackageRow = {
   name?: string;
 };
 
-export const DownloadPackageYaml = ({ pkg }: { pkg: InstalledPackageRow }) => {
+export const DownloadPackageYaml = ({
+  pkg,
+  isProductionEnv,
+}: {
+  pkg: InstalledPackageRow;
+  isProductionEnv: boolean;
+}) => {
   const { t } = useTranslation();
   const pkgConfig = usePackageConfig(pkg.namespace!, pkg.name!);
   const packageConfigPermission = usePluginConfigurationPermissions(
     pkg.namespace!,
     pkg.parentPlugin ?? '',
   );
+
+  const disabledIcon = (
+    <Box component="span" display="inline-flex">
+      <IconButton
+        size="small"
+        disabled
+        sx={{ color: theme => theme.palette.action.disabled }}
+      >
+        <FileDownloadOutlinedIcon />
+      </IconButton>
+    </Box>
+  );
+
+  if (isProductionEnv) {
+    return (
+      <Tooltip
+        title={t('installedPackages.table.tooltips.packageProductionDisabled')}
+      >
+        {disabledIcon}
+      </Tooltip>
+    );
+  }
   const disabled =
     !pkg.hasEntity || packageConfigPermission.data?.read !== 'ALLOW';
 
@@ -68,15 +96,7 @@ export const DownloadPackageYaml = ({ pkg }: { pkg: InstalledPackageRow }) => {
             : t('installedPackages.table.tooltips.enableActions')
         }
       >
-        <Box component="span" display="inline-flex">
-          <IconButton
-            size="small"
-            disabled
-            sx={{ color: theme => theme.palette.action.disabled }}
-          >
-            <FileDownloadOutlinedIcon />
-          </IconButton>
-        </Box>
+        {disabledIcon}
       </Tooltip>
     );
   }
@@ -99,7 +119,13 @@ export const DownloadPackageYaml = ({ pkg }: { pkg: InstalledPackageRow }) => {
   );
 };
 
-export const EditPackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
+export const EditPackage = ({
+  pkg,
+  isProductionEnv,
+}: {
+  pkg: InstalledPackageRow;
+  isProductionEnv: boolean;
+}) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const getPackagePath = useRouteRef(packageInstallRouteRef);
@@ -121,6 +147,16 @@ export const EditPackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
     </Box>
   );
 
+  if (isProductionEnv) {
+    return (
+      <Tooltip
+        title={t('installedPackages.table.tooltips.packageProductionDisabled')}
+      >
+        {disabledEditIcon}
+      </Tooltip>
+    );
+  }
+
   if (!pkg.hasEntity) {
     return (
       <Tooltip title={t('installedPackages.table.tooltips.enableActions')}>
@@ -158,7 +194,13 @@ export const EditPackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
   );
 };
 
-export const TogglePackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
+export const TogglePackage = ({
+  pkg,
+  isProductionEnv,
+}: {
+  pkg: InstalledPackageRow;
+  isProductionEnv: boolean;
+}) => {
   const { t } = useTranslation();
   const { installedPackages, setInstalledPackages } = useInstallationContext();
   const { mutateAsync: enablePlugin } = useEnablePlugin(true);
@@ -170,6 +212,23 @@ export const TogglePackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
     pkg.installStatus === MarketplacePackageInstallStatus.Installed ||
       pkg.installStatus === MarketplacePackageInstallStatus.UpdateAvailable,
   );
+  const disabledIcon = (
+    <Box component="span" display="inline-flex">
+      <IconButton size="small" disabled>
+        {isPackageEnabled ? <Switch checked disabled /> : <Switch disabled />}
+      </IconButton>
+    </Box>
+  );
+
+  if (isProductionEnv) {
+    return (
+      <Tooltip
+        title={t('installedPackages.table.tooltips.packageProductionDisabled')}
+      >
+        {disabledIcon}
+      </Tooltip>
+    );
+  }
 
   if (!pkg.hasEntity || packageConfigPermission.data?.write !== 'ALLOW') {
     return (
@@ -180,15 +239,7 @@ export const TogglePackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
             : t('installedPackages.table.tooltips.enableActions')
         }
       >
-        <Box component="span" display="inline-flex">
-          <IconButton size="small" disabled>
-            {isPackageEnabled ? (
-              <Switch checked disabled />
-            ) : (
-              <Switch disabled />
-            )}
-          </IconButton>
-        </Box>
+        {disabledIcon}
       </Tooltip>
     );
   }
diff --git a/workspaces/marketplace/plugins/marketplace/src/translations/de.ts b/workspaces/marketplace/plugins/marketplace/src/translations/de.ts
@@ -166,6 +166,8 @@ const marketplaceTranslationDe = createTranslationMessages({
     'installedPackages.table.columns.role': 'Rolle',
     'installedPackages.table.columns.version': 'Version',
     'installedPackages.table.columns.actions': 'Aktionen',
+    'installedPackages.table.tooltips.packageProductionDisabled':
+      'Das Paket kann in der Produktionsumgebung nicht verwaltet werden.',
     'installedPackages.table.tooltips.enableActions':
       'Um Aktionen zu aktivieren, fügen Sie eine Katalogeintrag für dieses Paket hinzu',
     'installedPackages.table.tooltips.noDownloadPermissions':
diff --git a/workspaces/marketplace/plugins/marketplace/src/translations/es.ts b/workspaces/marketplace/plugins/marketplace/src/translations/es.ts
@@ -166,6 +166,8 @@ const marketplaceTranslationEs = createTranslationMessages({
     'installedPackages.table.columns.role': 'Rol',
     'installedPackages.table.columns.version': 'Versión',
     'installedPackages.table.columns.actions': 'Acciones',
+    'installedPackages.table.tooltips.packageProductionDisabled':
+      'El paquete no puede ser gestionado en el entorno de producción.',
     'installedPackages.table.tooltips.enableActions':
       'Para habilitar acciones, agregue una entidad de catálogo para este paquete',
     'installedPackages.table.tooltips.noDownloadPermissions':
diff --git a/workspaces/marketplace/plugins/marketplace/src/translations/fr.ts b/workspaces/marketplace/plugins/marketplace/src/translations/fr.ts
@@ -187,6 +187,8 @@ const marketplaceTranslationFr = createTranslationMessages({
       'Aucun résultat trouvé. Essayez un autre terme de recherche.',
     'installedPackages.table.searchPlaceholder': 'Rechercher',
     'installedPackages.table.title': 'Paquets installés ({{count}})',
+    'installedPackages.table.tooltips.packageProductionDisabled':
+      "Le paquet ne peut pas être géré dans l'environnement de production.",
     'installedPackages.table.tooltips.enableActions':
       'Pour activer les actions, ajoutez une entité de catalogue pour ce package',
     'installedPackages.table.tooltips.noDownloadPermissions':
diff --git a/workspaces/marketplace/plugins/marketplace/src/translations/it.ts b/workspaces/marketplace/plugins/marketplace/src/translations/it.ts
@@ -165,6 +165,8 @@ const marketplaceTranslationIt = createTranslationMessages({
     'installedPackages.table.columns.role': 'Ruolo',
     'installedPackages.table.columns.version': 'Versione',
     'installedPackages.table.columns.actions': 'Azioni',
+    'installedPackages.table.tooltips.packageProductionDisabled':
+      "Il pacchetto non può essere gestito nell'ambiente di produzione.",
     'installedPackages.table.tooltips.enableActions':
       "Per abilitare le azioni, aggiungi un'entità del catalogo per questo pacchetto",
     'installedPackages.table.tooltips.noDownloadPermissions':
diff --git a/workspaces/marketplace/plugins/marketplace/src/translations/ref.ts b/workspaces/marketplace/plugins/marketplace/src/translations/ref.ts
@@ -192,6 +192,8 @@ export const marketplaceMessages = {
         actions: 'Actions',
       },
       tooltips: {
+        packageProductionDisabled:
+          'Package cannot be managed in the production environment.',
         enableActions:
           'To enable actions, add a catalog entity for this package',
         noDownloadPermissions:

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@red-hat-developer-hub/backstage-plugin-marketplace': patch
 +---
++
 +Disabled row actions in the "Installed packages" tab for the production environment