fix(extensions): show error state when backend is missing (#783)

Author: debsmita1

workspaces/marketplace/.changeset/selfish-parents-turn.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+show error state when backend is missing

workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogContent.test.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { MarketplaceCatalogContent } from './MarketplaceCatalogContent';
+import { useFilteredPlugins } from '../hooks/useFilteredPlugins';
+
+const useFilteredPluginsMock = useFilteredPlugins as jest.Mock;
+
+jest.mock('../hooks/useCollections', () => ({
+  useCollections: jest.fn(),
+}));
+
+jest.mock('../hooks/useFilteredPlugins', () => ({
+  useFilteredPlugins: jest.fn(),
+}));
+
+describe('MarketplaceCatalogContent', () => {
+  it('should show empty state with no plugins', async () => {
+    useFilteredPluginsMock.mockReturnValue({
+      data: {
+        totalItems: 0,
+      },
+    });
+
+    const { getByText } = await renderInTestApp(<MarketplaceCatalogContent />);
+    expect(getByText('No plugins found')).toBeInTheDocument();
+  });
+
+  it('should show empty state with no extensions backend found', async () => {
+    useFilteredPluginsMock.mockReturnValue({
+      error: {
+        message: '404',
+      },
+    });
+
+    const { getByText } = await renderInTestApp(<MarketplaceCatalogContent />);
+    expect(
+      getByText('Must enable the Extensions backend plugin'),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -23,6 +23,7 @@ import Card from '@mui/material/Card';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import Launch from '@mui/icons-material/Launch';
 
 import { SearchTextField } from '../shared-components/SearchTextField';
 
@@ -34,7 +35,7 @@ import { CollectionHorizontalScrollRow } from './CollectionHorizontalScrollRow';
 
 import notFoundImag from '../assets/notfound.png';
 
-const NoPluginsFound = () => (
+const EmptyState = ({ isError }: { isError?: boolean }) => (
   <Content>
     <Grid
       container
@@ -43,19 +44,35 @@ const NoPluginsFound = () => (
     >
       <Grid item xs={6}>
         <Stack gap={3} justifyContent="center">
-          <Typography variant="h1">No plugins found</Typography>
+          <Typography variant="h1">
+            {isError
+              ? 'Must enable the Extensions backend plugin'
+              : 'No plugins found'}
+          </Typography>
           <Typography variant="body1">
-            There was an error with loading plugins. Check your configuration or
-            review plugin documentation to resolve. You can also explore other
-            available plugins.
+            {isError
+              ? "Configure the '@red-hat-developer-hub/backstage-plugin-marketplace-backend' plugin."
+              : 'There was an error with loading plugins. Check your configuration or review plugin documentation to resolve. You can also explore other available plugins.'}
           </Typography>
           <Grid container spacing={2}>
+            {!isError && (
+              <Grid item>
+                <LinkButton
+                  variant="contained"
+                  color="primary"
+                  to="https://developers.redhat.com/products/rhdh/plugins#communitypreinstalled"
+                  endIcon={<Launch />}
+                >
+                  View all plugins
+                </LinkButton>
+              </Grid>
+            )}
             <Grid item>
               <LinkButton
                 variant="outlined"
                 color="primary"
                 to="https://docs.redhat.com/en/documentation/red_hat_developer_hub/"
-                externalLinkIcon
+                endIcon={<Launch />}
               >
                 View documentation
               </LinkButton>
@@ -90,8 +107,12 @@ export const MarketplaceCatalogContent = () => {
     title += ` (${filteredPlugins.data.filteredItems})`;
   }
 
+  if (filteredPlugins.error?.message.includes('404')) {
+    return <EmptyState isError />;
+  }
+
   if (filteredPlugins.data?.totalItems === 0) {
-    return <NoPluginsFound />;
+    return <EmptyState />;
   }
 
   return (

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

@@ -25,5 +25,6 @@ export const useCollections = (request: GetEntitiesRequest) => {
   return useQuery({
     queryKey: ['marketplaceApi', 'getCollections', request],
     queryFn: () => marketplaceApi.getCollections(request),
+    refetchOnWindowFocus: false,
   });
 };

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

@@ -42,6 +42,7 @@ export const useFilteredPlugins = () => {
 
   const marketplaceApi = useMarketplaceApi();
   return useQuery({
+    refetchOnWindowFocus: false,
     queryKey: ['marketplaceApi', 'getPlugins', filteredPluginsRequest],
     queryFn: () => marketplaceApi.getPlugins(filteredPluginsRequest),
     select: data => {