feat(extensions): ux improvements on the catalog page (#1260)

Co-authored-by: Mitesh Kumar <itsmiteshkumar98@gmail.com>

Author: debsmita1

workspaces/marketplace/.changeset/funny-trains-yawn.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+display a message when search returns no results

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

@@ -16,9 +16,12 @@
 import { renderInTestApp } from '@backstage/test-utils';
 import { MarketplaceCatalogContent } from './MarketplaceCatalogContent';
 import { useFilteredPlugins } from '../hooks/useFilteredPlugins';
+import { useCollections } from '../hooks/useCollections';
 import { useExtensionsConfiguration } from '../hooks/useExtensionsConfiguration';
+import { mockPlugins } from '../__fixtures__/mockPlugins';
 
 const useFilteredPluginsMock = useFilteredPlugins as jest.Mock;
+const useCollectionsMock = useCollections as jest.Mock;
 const useExtensionsConfigurationMock = useExtensionsConfiguration as jest.Mock;
 
 jest.mock('../hooks/useCollections', () => ({
@@ -37,6 +40,18 @@ jest.mock('../hooks/useFilteredPlugins', () => ({
   useFilteredPlugins: jest.fn(),
 }));
 
+jest.mock('../hooks/usePluginFacet', () => ({
+  usePluginFacet: jest.fn().mockReturnValue({
+    data: [],
+  }),
+}));
+
+jest.mock('../hooks/usePluginFacets', () => ({
+  usePluginFacets: jest.fn().mockReturnValue({
+    data: [],
+  }),
+}));
+
 afterAll(() => {
   jest.clearAllMocks();
 });
@@ -58,6 +73,31 @@ describe('MarketplaceCatalogContent', () => {
     expect(getByText('No plugins found')).toBeInTheDocument();
   });
 
+  it('should show empty state when filters return no results', async () => {
+    useExtensionsConfigurationMock.mockReturnValue({
+      data: {
+        enabled: false,
+      },
+    });
+    useCollectionsMock.mockReturnValue({
+      data: {
+        featuredCollections: [],
+      },
+    });
+    useFilteredPluginsMock.mockReturnValue({
+      data: {
+        totalItems: 10,
+        items: mockPlugins,
+        filteredItems: 0,
+      },
+    });
+
+    const { getByText } = await renderInTestApp(<MarketplaceCatalogContent />);
+    expect(
+      getByText('No results found. Adjust your filters and try again.'),
+    ).toBeInTheDocument();
+  });
+
   it('should show empty state with no extensions backend found', async () => {
     useFilteredPluginsMock.mockReturnValue({
       error: {

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

@@ -14,23 +14,29 @@
  * limitations under the License.
  */
 
+import Typography from '@mui/material/Typography';
 import { useFilteredPlugins } from '../hooks/useFilteredPlugins';
 
 import { PluginCard, PluginCardGrid, PluginCardSkeleton } from './PluginCard';
 
 export const MarketplaceCatalogGrid = () => {
   const filteredPlugins = useFilteredPlugins();
+  const skeletonComponents = Array(4).fill(<PluginCardSkeleton />);
+
+  if (filteredPlugins.isLoading) {
+    return <PluginCardGrid>{skeletonComponents}</PluginCardGrid>;
+  }
+
+  if (filteredPlugins.data?.filteredItems === 0) {
+    return (
+      <Typography sx={{ textAlign: 'center', pb: '16px' }} component="span">
+        No results found. Adjust your filters and try again.
+      </Typography>
+    );
+  }
 
   return (
     <PluginCardGrid>
-      {filteredPlugins.isLoading ? (
-        <>
-          <PluginCardSkeleton />
-          <PluginCardSkeleton />
-          <PluginCardSkeleton />
-          <PluginCardSkeleton />
-        </>
-      ) : null}
       {filteredPlugins.data?.items.map(plugin => (
         <PluginCard
           key={`${plugin.metadata.namespace}/${plugin.metadata.name}`}

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

@@ -118,23 +118,23 @@ const SupportTypeFilter = () => {
     const allSupportTypeItems: SelectItem[] = [];
 
     const certified = facets[facetsKeys[0]];
-    certified.forEach(certifiedBy => {
+    certified?.forEach(certifiedBy => {
       allSupportTypeItems.push({
         label: `Certified by ${certifiedBy.value} (${certifiedBy.count})`,
         value: `${facetsKeys[0]}=${certifiedBy.value}`,
       });
     });
 
     const verified = facets[facetsKeys[1]];
-    verified.forEach(verifiedBy => {
+    verified?.forEach(verifiedBy => {
       allSupportTypeItems.push({
         label: `Verified by ${verifiedBy.value} (${verifiedBy.count})`,
         value: `${facetsKeys[1]}=${verifiedBy.value}`,
       });
     });
 
     const preInstalled = facets[facetsKeys[2]];
-    preInstalled.forEach(preInstall => {
+    preInstalled?.forEach(preInstall => {
       if (preInstall.value === 'false') {
         allSupportTypeItems.push({
           label: `Custom plugins (${preInstall.count})`,
@@ -144,7 +144,7 @@ const SupportTypeFilter = () => {
     });
 
     const supportTypes = facets[facetsKeys[3]];
-    supportTypes.forEach(supportType => {
+    supportTypes?.forEach(supportType => {
       allSupportTypeItems.push({
         label: `${supportType.value} (${supportType.count})`,
         value: `${facetsKeys[3]}=${supportType.value}`,