fix(extensions): improve plugin installation alert message (#1642)

Author: debsmita1

workspaces/marketplace/.changeset/odd-moles-divide.md

@@ -0,0 +1,7 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+- improve plugin installation alert message with link to documentation
+- show err message on the drawer when plugin/package content is not available
+- show an alert when the dynamicArtifact for a package is missing

workspaces/marketplace/plugins/marketplace/app-config.dynamic.yaml

@@ -1,17 +1,20 @@
 dynamicPlugins:
   frontend:
     red-hat-developer-hub.backstage-plugin-marketplace:
+      translationResources:
+        - importName: marketplaceTranslations
+          ref: marketplaceTranslationRef
+          module: Alpha
       appIcons:
-        - name: marketplace
-          importName: MarketplaceIcon
+        - name: pluginsIcon
+          importName: PluginsIcon
       dynamicRoutes:
-        - path: /extensions/catalog
+        - path: /extensions
           importName: DynamicMarketplacePluginRouter
-      mountPoints:
-        - mountPoint: application/provider
-          importName: InstallationContextProvider
-        - mountPoint: internal.plugins/tab
-          importName: DynamicMarketplacePluginContent
-          config:
-            path: extensions
-            title: Catalog
+          menuItem:
+            icon: pluginsIcon
+            text: Extensions
+            textKey: menuItem.extensions
+      menuItems:
+        extensions:
+          parent: default.admin

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

@@ -60,12 +60,16 @@ readonly "metadata.about": string;
 readonly "metadata.highlights": string;
 readonly "metadata.category": string;
 readonly "metadata.by": string;
+readonly "metadata.comma": string;
 readonly "metadata.versions": string;
 readonly "metadata.pluginNotFound": string;
+readonly "metadata.pluginNotAvailable": string;
+readonly "metadata.ensureCatalogEntityPlugin": string;
 readonly "metadata.publisher": string;
 readonly "metadata.supportProvider": string;
 readonly "metadata.entryName": string;
 readonly "metadata.bySomeone": string;
+readonly "metadata.backstageCompatibility": string;
 readonly "role.backend": string;
 readonly "role.backendModule": string;
 readonly "role.frontend": string;
@@ -98,6 +102,8 @@ readonly "install.back": string;
 readonly "install.packageUpdated": string;
 readonly "install.packageEnabled": string;
 readonly "install.packageDisabled": string;
+readonly "install.pluginEnabled": string;
+readonly "install.pluginDisabled": string;
 readonly "install.errors.missingPluginsList": string;
 readonly "install.errors.missingPackageItem": string;
 readonly "install.errors.missingPackageField": string;
@@ -109,6 +115,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.installationDisabled": string;
 readonly "installedPackages.table.tooltips.packageProductionDisabled": string;
 readonly "installedPackages.table.tooltips.enableActions": string;
 readonly "installedPackages.table.tooltips.noDownloadPermissions": string;
@@ -131,6 +138,10 @@ readonly "emptyState.noPluginsDescription": string;
 readonly "emptyState.configureBackend": string;
 readonly "alert.productionDisabled": string;
 readonly "alert.installationDisabled": string;
+readonly "alert.missingDynamicArtifact": string;
+readonly "alert.missingDynamicArtifactTitle": string;
+readonly "alert.missingDynamicArtifactForPlugin": string;
+readonly "alert.missingDynamicArtifactTitlePlugin": string;
 readonly "alert.extensionsExample": string;
 readonly "alert.singlePluginRestart": string;
 readonly "alert.multiplePluginRestart": string;
@@ -170,6 +181,8 @@ readonly "package.highlights": string;
 readonly "package.dynamicPluginPath": string;
 readonly "package.backstageRole": string;
 readonly "package.notFound": string;
+readonly "package.notAvailable": string;
+readonly "package.ensureCatalogEntity": string;
 readonly "actions.view": string;
 readonly "actions.install": string;
 readonly "actions.enable": string;
@@ -186,6 +199,7 @@ readonly "actions.packageCurrentlyDisabled": string;
 readonly "actions.installTitle": string;
 readonly "actions.editTitle": string;
 readonly "tooltips.productionDisabled": string;
+readonly "tooltips.missingDynamicArtifact": string;
 readonly "tooltips.extensionsDisabled": string;
 readonly "tooltips.noPermissions": string;
 readonly "supportTypes.certifiedBy": string;

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

@@ -0,0 +1,58 @@
+/*
+ * Copyright The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CodeSnippet, WarningPanel } from '@backstage/core-components';
+import {
+  DYNAMIC_PLUGIN_CONFIG_YAML,
+  EXTENSIONS_CONFIG_YAML,
+  ExtensionsStatus,
+  getErrorMessage,
+} from '../utils';
+import { useTranslation } from '../hooks/useTranslation';
+
+export const InstallationWarning = ({ configData }: { configData: any }) => {
+  const { t } = useTranslation();
+  const errorMessage = getErrorMessage(
+    configData?.error?.reason,
+    configData?.error?.message,
+    t,
+  );
+
+  return (
+    <>
+      <WarningPanel
+        title={errorMessage.title}
+        severity="info"
+        message={
+          <>
+            {errorMessage.message}
+            <CodeSnippet
+              language="yaml"
+              showLineNumbers
+              highlightedNumbers={errorMessage?.highlightedLineNumbers}
+              text={`${
+                configData?.error?.reason === ExtensionsStatus.INVALID_CONFIG
+                  ? DYNAMIC_PLUGIN_CONFIG_YAML
+                  : EXTENSIONS_CONFIG_YAML
+              }`}
+            />
+          </>
+        }
+      />
+      <br />
+    </>
+  );
+};

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

@@ -27,10 +27,6 @@ import { Query, QueryResult } from '@material-table/core';
 import { useQuery } from '@tanstack/react-query';
 
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import AlertTitle from '@mui/material/AlertTitle';
-import Link from '@mui/material/Link';
-import Alert from '@mui/material/Alert';
 import {
   MarketplacePackage,
   MarketplacePackageInstallStatus,
@@ -53,9 +49,16 @@ import {
 import { useInstallationContext } from '../InstallationContext';
 import { useNodeEnvironment } from '../../hooks/useNodeEnvironment';
 import { InstalledPluginsDialog } from '../InstalledPluginsDialog';
+import { useExtensionsConfiguration } from '../../hooks/useExtensionsConfiguration';
+import {
+  ProductionEnvironmentAlert,
+  ExtensionsConfigurationAlert,
+  BackendRestartAlert,
+} from '../SharedAlerts';
 
 export const InstalledPackagesTable = () => {
   const { t } = useTranslation();
+  const extensionsConfig = useExtensionsConfiguration();
   const { installedPackages } = useInstallationContext();
   const nodeEnvironment = useNodeEnvironment();
   const [error, setError] = useState<Error | undefined>(undefined);
@@ -174,7 +177,11 @@ export const InstalledPackagesTable = () => {
       render: (row: InstalledPackageRow) => {
         return (
           <Box display="flex" gap={1}>
-            <EditPackage pkg={row} isProductionEnv={isProductionEnvironment} />
+            <EditPackage
+              pkg={row}
+              isProductionEnv={isProductionEnvironment}
+              isInstallationEnabled={extensionsConfig.data?.enabled ?? false}
+            />
             {/* Show it when uninstall functionality is implemented */}
             {showUninstall && <UninstallPackage pkg={row} />}
             <DownloadPackageYaml
@@ -184,6 +191,7 @@ export const InstalledPackagesTable = () => {
             <TogglePackage
               pkg={row}
               isProductionEnv={isProductionEnvironment}
+              isInstallationEnabled={extensionsConfig.data?.enabled ?? false}
             />
           </Box>
         );
@@ -247,6 +255,7 @@ export const InstalledPackagesTable = () => {
               (entity?.spec?.version as string | undefined) ??
               undefined,
             hasEntity: !!entity,
+            missingDynamicArtifact: !entity?.spec?.dynamicArtifact,
             namespace: entity?.metadata?.namespace ?? 'default',
             name: entity?.metadata?.name,
           } as InstalledPackageRow;
@@ -298,32 +307,19 @@ export const InstalledPackagesTable = () => {
     ? t('installedPackages.table.emptyMessages.noResults')
     : t('installedPackages.table.emptyMessages.noRecords');
 
+  const showExtensionsConfigurationAlert =
+    !isProductionEnvironment && !extensionsConfig.data?.enabled;
+
   return (
     <>
-      {isProductionEnvironment && (
-        <Alert severity="info" sx={{ mb: '1rem' }}>
-          <AlertTitle>{t('alert.productionDisabled')}</AlertTitle>
-        </Alert>
-      )}
-      {installedPackagesCount > 0 && (
-        <Alert severity="info" sx={{ mb: '1rem' }}>
-          <AlertTitle>{t('alert.backendRestartRequired')}</AlertTitle>
-          {packageInfo()}
-          {installedPackagesCount > 1 && (
-            <Typography component="div" sx={{ pt: '8px' }}>
-              <Link
-                component="button"
-                underline="none"
-                onClick={() => {
-                  setOpenInstalledPackagesDialog(true);
-                }}
-              >
-                {t('alert.viewPackages')}
-              </Link>
-            </Typography>
-          )}
-        </Alert>
-      )}
+      {isProductionEnvironment && <ProductionEnvironmentAlert />}
+      {showExtensionsConfigurationAlert && <ExtensionsConfigurationAlert />}
+      <BackendRestartAlert
+        count={installedPackagesCount}
+        itemInfo={packageInfo()}
+        viewItemsLabel={t('alert.viewPackages')}
+        onViewItems={() => setOpenInstalledPackagesDialog(true)}
+      />
 
       <div
         style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 8 }}