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

* feat(extensions): add row actions to installed packages

* added restart alert in the installed packages tab

* handle rendering issue when there are no package examples

* updated translations

Author: debsmita1

workspaces/marketplace/.changeset/nasty-gifts-provide.md

@@ -0,0 +1,8 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace-backend': patch
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+'@red-hat-developer-hub/backstage-plugin-marketplace-common': patch
+---
+
+added row actions to the installed packages
+updated disablePackage Client API to make PATCH call instead of POST

workspaces/marketplace/package.json

@@ -50,8 +50,7 @@
     "minimatch": "3",
     "node-gyp": "^9.0.0",
     "prettier": "^3.4.2",
-    "typescript": "~5.3.0",
-    "yaml": "^2.8.1"
+    "typescript": "~5.3.0"
   },
   "resolutions": {
     "@backstage/app-defaults": "1.6.5",

workspaces/marketplace/plugins/marketplace-common/src/api/MarketplaceBackendClient.ts

@@ -208,7 +208,7 @@ export class MarketplaceBackendClient implements MarketplaceApi {
   ): Promise<{ status: string }> {
     return this.request(
       `/package/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/configuration/disable`,
-      'POST',
+      'PATCH',
       undefined,
       { disabled },
     );

workspaces/marketplace/plugins/marketplace/report-alpha.api.md

@@ -21,7 +21,8 @@ readonly "button.viewDocumentation": string;
 readonly "button.viewInstalledPlugins": string;
 readonly "button.restart": string;
 readonly "dialog.backendRestartRequired": string;
-readonly "dialog.restartMessage": string;
+readonly "dialog.packageRestartMessage": string;
+readonly "dialog.pluginRestartMessage": string;
 readonly "header.title": string;
 readonly "header.extensions": string;
 readonly "header.catalog": string;
@@ -57,10 +58,14 @@ readonly "table.packagesCount": string;
 readonly "table.pluginsTable": string;
 readonly "metadata.about": string;
 readonly "metadata.highlights": string;
+readonly "metadata.category": string;
 readonly "metadata.by": string;
+readonly "metadata.versions": string;
 readonly "metadata.pluginNotFound": string;
 readonly "metadata.publisher": string;
 readonly "metadata.supportProvider": string;
+readonly "metadata.entryName": string;
+readonly "metadata.bySomeone": string;
 readonly "role.backend": string;
 readonly "role.backendModule": string;
 readonly "role.frontend": string;
@@ -91,6 +96,8 @@ readonly "install.instructions": string;
 readonly "install.editInstructions": string;
 readonly "install.back": string;
 readonly "install.packageUpdated": string;
+readonly "install.packageEnabled": string;
+readonly "install.packageDisabled": string;
 readonly "install.errors.missingPluginsList": string;
 readonly "install.errors.missingPackageItem": string;
 readonly "install.errors.missingPackageField": string;
@@ -103,10 +110,17 @@ readonly "installedPackages.table.columns.role": string;
 readonly "installedPackages.table.columns.name": string;
 readonly "installedPackages.table.columns.actions": string;
 readonly "installedPackages.table.tooltips.enableActions": string;
+readonly "installedPackages.table.tooltips.noDownloadPermissions": string;
+readonly "installedPackages.table.tooltips.noEditPermissions": string;
+readonly "installedPackages.table.tooltips.noTogglePermissions": string;
+readonly "installedPackages.table.tooltips.editPackage": string;
+readonly "installedPackages.table.tooltips.downloadPackage": string;
+readonly "installedPackages.table.tooltips.enablePackage": string;
+readonly "installedPackages.table.tooltips.disablePackage": string;
 readonly "installedPackages.table.emptyMessages.noResults": string;
 readonly "installedPackages.table.emptyMessages.noRecords": string;
-readonly "status.installed": string;
 readonly "status.notInstalled": string;
+readonly "status.installed": string;
 readonly "status.disabled": string;
 readonly "status.partiallyInstalled": string;
 readonly "status.updateAvailable": string;
@@ -119,10 +133,12 @@ readonly "alert.installationDisabled": string;
 readonly "alert.extensionsExample": string;
 readonly "alert.singlePluginRestart": string;
 readonly "alert.multiplePluginRestart": string;
+readonly "alert.singlePackageRestart": string;
+readonly "alert.multiplePackageRestart": string;
 readonly "alert.restartRequired": string;
 readonly "alert.backendRestartRequired": string;
-readonly "alert.backendRestartMessage": string;
 readonly "alert.viewPlugins": string;
+readonly "alert.viewPackages": string;
 readonly "common.close": string;
 readonly "common.links": string;
 readonly "common.by": string;
@@ -135,6 +151,7 @@ readonly "plugin.version": string;
 readonly "plugin.author": string;
 readonly "plugin.installation": string;
 readonly "plugin.configuration": string;
+readonly "plugin.authors": string;
 readonly "plugin.description": string;
 readonly "plugin.documentation": string;
 readonly "plugin.repository": string;
@@ -160,8 +177,11 @@ readonly "actions.actions": string;
 readonly "actions.edit": string;
 readonly "actions.editConfiguration": string;
 readonly "actions.pluginConfigurations": string;
+readonly "actions.packageConfiguration": string;
 readonly "actions.pluginCurrentlyEnabled": string;
 readonly "actions.pluginCurrentlyDisabled": string;
+readonly "actions.packageCurrentlyEnabled": string;
+readonly "actions.packageCurrentlyDisabled": string;
 readonly "actions.installTitle": string;
 readonly "actions.editTitle": string;
 readonly "tooltips.productionDisabled": string;

workspaces/marketplace/plugins/marketplace/src/components/InstallationContext.tsx

@@ -19,11 +19,15 @@ export type InstallationType = { [pluginName: string]: string };
 
 type InstallationContextType = {
   installedPlugins: InstallationType;
+  installedPackages: InstallationType;
+  setInstalledPackages: (plugins: InstallationType) => void;
   setInstalledPlugins: (plugins: InstallationType) => void;
 };
 
 export const InstallationContext = createContext<InstallationContextType>({
   installedPlugins: {},
+  installedPackages: {},
+  setInstalledPackages: () => {},
   setInstalledPlugins: () => {},
 });
 
@@ -37,13 +41,23 @@ export const InstallationContextProvider = ({
   const [installedPlugins, setInstalledPlugins] = useState<InstallationType>(
     {},
   );
+  const [installedPackages, setInstalledPackages] = useState<InstallationType>(
+    {},
+  );
 
   const installationContexttProviderValue = useMemo(
     () => ({
       installedPlugins,
+      installedPackages,
+      setInstalledPackages,
       setInstalledPlugins,
     }),
-    [installedPlugins, setInstalledPlugins],
+    [
+      installedPlugins,
+      installedPackages,
+      setInstalledPlugins,
+      setInstalledPackages,
+    ],
   );
   return (
     <InstallationContext.Provider value={installationContexttProviderValue}>

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

@@ -26,6 +26,12 @@ import { InstalledPackagesTable } from './InstalledPackagesTable';
 import { errorApiRef } from '@backstage/core-plugin-api';
 import { translationApiRef } from '@backstage/core-plugin-api/alpha';
 
+jest.mock('@backstage/core-plugin-api', () => ({
+  ...jest.requireActual('@backstage/core-plugin-api'),
+  useRouteRef: () => (params: any) =>
+    `/packages/${params.namespace}/${params.name}`,
+}));
+
 describe('InstalledPackagesTable', () => {
   const renderWithProviders = (apis: any) =>
     render(