refactor(cmsui): drop the marketplace catalog, keep the add-on search

Author: richardbenedikt

packages/cmsui/locales/de/common.json

@@ -65,8 +65,6 @@
       "install": "Installieren",
       "uninstall": "Deinstallieren",
       "upgrade": "Aktualisieren",
-      "details": "Details",
-      "catalog": "Katalog",
       "updatesAvailable": "Updates verfügbar",
       "upgradeFromTo": "Update {{from}} → {{to}}",
       "prev": "Zurück",
@@ -75,8 +73,6 @@
       "searchPlaceholder": "Erweiterungen filtern…",
       "installHint": "Damit neue Add-ons hier erscheinen, füge sie zur Konfiguration hinzu, baue das Projekt neu und starte den Server-Prozess neu. Eine ausführliche Anleitung findest du unter",
       "installHintLink": "Ein Add-on eines Drittanbieters installieren",
-      "pairsWith": "Passt zu",
-      "opensInNewTab": "(öffnet in neuem Tab)",
       "resultsCount": "{{total}} Add-ons gefunden",
       "actionError": "Aktion fehlgeschlagen. Bitte erneut versuchen."
     },

packages/cmsui/locales/en/common.json

@@ -113,8 +113,6 @@
       "install": "Install",
       "uninstall": "Uninstall",
       "upgrade": "Upgrade",
-      "details": "Details",
-      "catalog": "Catalog",
       "updatesAvailable": "Updates available",
       "upgradeFromTo": "Update {{from}} → {{to}}",
       "prev": "Previous",
@@ -123,8 +121,6 @@
       "searchPlaceholder": "Filter add-ons…",
       "installHint": "To make new add-ons show up here, add them to your configuration, build, and restart the server process. For detailed instructions see",
       "installHintLink": "Installing a third party add-on",
-      "pairsWith": "Pairs with",
-      "opensInNewTab": "(opens in a new tab)",
       "resultsCount": "{{total}} add-ons found",
       "actionError": "Action failed. Please try again."
     },

packages/cmsui/locales/it/common.json

@@ -103,8 +103,6 @@
       "install": "Installa",
       "uninstall": "Disinstalla",
       "upgrade": "Aggiorna",
-      "details": "Dettagli",
-      "catalog": "Catalogo",
       "updatesAvailable": "Aggiornamenti disponibili",
       "upgradeFromTo": "Aggiorna {{from}} → {{to}}",
       "prev": "Precedente",
@@ -113,8 +111,6 @@
       "searchPlaceholder": "Filtra i prodotti aggiuntivi…",
       "installHint": "Per visualizzare qui nuovi add-on, aggiungili alla configurazione, ricompila e riavvia il processo del server. Per istruzioni dettagliate consulta",
       "installHintLink": "Installare un add-on di terze parti",
-      "pairsWith": "Si abbina a",
-      "opensInNewTab": "(si apre in una nuova scheda)",
       "resultsCount": "{{total}} add-on trovati",
       "actionError": "Operazione non riuscita. Riprova."
     },

packages/cmsui/news/+addons-control-panel.feature

@@ -1 +1 @@
-Add the add-ons marketplace control panel at `/controlpanel/addons`. @redram404, @veyxos, @richardbenedikt
+Add a control panel to search and manage the site's add-ons at `/controlpanel/addons`. @redram404, @veyxos, @richardbenedikt

packages/cmsui/package.json

@@ -83,8 +83,7 @@
     "tailwind-variants": "catalog:",
     "tailwindcss": "catalog:",
     "tailwindcss-react-aria-components": "^2.0.0",
-    "usehooks-ts": "^3.1.1",
-    "zod": "^3.22.4"
+    "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
     "@plone/types": "workspace:*",

packages/cmsui/routes/controlpanelAddons.stories.tsx

@@ -7,11 +7,6 @@ import AddonsControlPanel from './controlpanelAddons';
 
 type LoaderData = {
   siteAddons: any[];
-  query: string;
-  catalog: any[];
-  catalogTotal: number;
-  catalogStart: number;
-  catalogSize: number;
 };
 
 const translations = {
@@ -24,14 +19,10 @@ const translations = {
   'cmsui.addons.install': 'Install',
   'cmsui.addons.uninstall': 'Uninstall',
   'cmsui.addons.upgrade': 'Upgrade',
-  'cmsui.addons.details': 'Details',
-  'cmsui.addons.catalog': 'Catalog',
   'cmsui.addons.prev': 'Previous',
   'cmsui.addons.next': 'Next',
   'cmsui.addons.page': '{{current}} / {{total}}',
   'cmsui.addons.searchPlaceholder': 'Filter add-ons…',
-  'cmsui.addons.pairsWith': 'Pairs with',
-  'cmsui.addons.opensInNewTab': '(opens in a new tab)',
   'cmsui.addons.resultsCount': '{{total}} add-ons found',
   'cmsui.addons.actionError': 'Action failed. Please try again.',
 } as const;
@@ -117,53 +108,12 @@ const SITE_ADDONS = [
   },
 ];
 
-const CATALOG = [
-  {
-    id: 'pypi:collective.volto.formsupport',
-    name: 'collective.volto.formsupport',
-    title: 'Volto Form Support',
-    summary: 'Backend support for Volto forms.',
-    kind: 'backend',
-    source: 'pypi',
-    latest_version: '5.0.0',
-    trust: 'community',
-    status: 'available',
-    repo_url: 'https://github.com/collective/collective.volto.formsupport',
-    homepage: 'https://github.com/collective/collective.volto.formsupport',
-    pairs_with: ['npm:@kitconcept/volto-form-block'],
-  },
-  {
-    id: 'pypi:eea.facetednavigation',
-    name: 'eea.facetednavigation',
-    title: 'EEA Faceted Navigation',
-    summary: 'Faceted search and navigation for Plone.',
-    kind: 'backend',
-    source: 'pypi',
-    latest_version: '20.0',
-    trust: 'community',
-    status: 'available',
-    repo_url: 'https://github.com/eea/eea.facetednavigation',
-    homepage: 'https://github.com/eea/eea.facetednavigation',
-    pairs_with: [],
-  },
-];
-
 const POPULATED: LoaderData = {
   siteAddons: SITE_ADDONS,
-  query: '',
-  catalog: CATALOG,
-  catalogTotal: CATALOG.length,
-  catalogStart: 0,
-  catalogSize: 24,
 };
 
 const EMPTY: LoaderData = {
   siteAddons: [],
-  query: '',
-  catalog: [],
-  catalogTotal: 0,
-  catalogStart: 0,
-  catalogSize: 24,
 };
 
 const createAddonsRouter = (data: LoaderData) =>

packages/cmsui/routes/controlpanelAddons.test.tsx

@@ -33,34 +33,6 @@ const mockSiteAddons = {
   ],
 };
 
-const mockCatalogResponse = {
-  query: '',
-  kind: null,
-  plone_version: '6.1.0',
-  volto_version: '19',
-  compatible: true,
-  total: 1,
-  b_start: 0,
-  b_size: 24,
-  count: 1,
-  results: [
-    {
-      id: 'pypi:collective.catalog',
-      name: 'collective.catalog',
-      title: 'Catalog Add-on',
-      summary: 'From the marketplace',
-      kind: 'backend',
-      source: 'pypi',
-      latest_version: '3.0.0',
-      trust: 'community',
-      status: 'available',
-      repo_url: 'https://example.com/repo',
-      homepage: 'https://example.com',
-      pairs_with: ['npm:@collective/catalog'],
-    },
-  ],
-};
-
 function makeClient(overrides: Record<string, unknown> = {}) {
   return {
     config: { apiPath, token: 'fake-token' },
@@ -97,107 +69,16 @@ describe('Addons control panel route', () => {
   });
 
   describe('loader', () => {
-    it('fetches site add-ons and queries the marketplace catalog endpoint', async () => {
-      const fetchMock = vi.fn().mockResolvedValue(
-        new Response(JSON.stringify(mockCatalogResponse), {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' },
-        }),
-      );
-      vi.stubGlobal('fetch', fetchMock);
-
+    it('returns the site add-ons from getAddons', async () => {
       const client = makeClient();
       const result = await callLoader(
         client,
-        'http://example.com/controlpanel/addons?q=catalog',
-      );
-
-      expect(client.getAddons).toHaveBeenCalledOnce();
-
-      // The full catalog is always requested (no compatibility filtering).
-      expect(fetchMock).toHaveBeenCalledOnce();
-      const [requestedUrl, requestInit] = fetchMock.mock.calls[0];
-      expect(requestedUrl).toContain(`${apiPath}/@addon-marketplace-search?`);
-      expect(requestedUrl).toContain('q=catalog');
-      expect(requestedUrl).toContain('b_start=0');
-      expect(requestedUrl).toContain('b_size=24');
-      expect(requestedUrl).toContain('compatible=0');
-      expect(requestInit.headers.Authorization).toBe('Bearer fake-token');
-
-      expect(result.siteAddons).toEqual(mockSiteAddons.items);
-      expect(result.query).toBe('catalog');
-      expect(result.catalog).toHaveLength(1);
-      expect(result.catalog[0].id).toBe('pypi:collective.catalog');
-      expect(result.catalogTotal).toBe(1);
-    });
-
-    it('clamps a negative b_start to 0 and always requests the full catalog', async () => {
-      const fetchMock = vi.fn().mockResolvedValue(
-        new Response(JSON.stringify(mockCatalogResponse), {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' },
-        }),
-      );
-      vi.stubGlobal('fetch', fetchMock);
-
-      await callLoader(
-        makeClient(),
-        'http://example.com/controlpanel/addons?b_start=-5',
-      );
-
-      const [requestedUrl] = fetchMock.mock.calls[0];
-      expect(requestedUrl).toContain('b_start=0');
-      expect(requestedUrl).toContain('compatible=0');
-      expect(requestedUrl).not.toContain('compatible=1');
-    });
-
-    it('falls back to the empty catalog when the endpoint responds non-ok', async () => {
-      const fetchMock = vi
-        .fn()
-        .mockResolvedValue(new Response('nope', { status: 500 }));
-      vi.stubGlobal('fetch', fetchMock);
-
-      const result = await callLoader(
-        makeClient(),
         'http://example.com/controlpanel/addons',
       );
 
-      expect(result.catalog).toEqual([]);
-      expect(result.catalogTotal).toBe(0);
-      // Site add-ons are still returned independently of the catalog failure.
+      expect(client.getAddons).toHaveBeenCalledOnce();
       expect(result.siteAddons).toEqual(mockSiteAddons.items);
     });
-
-    it('falls back to the empty catalog when the response fails zod validation', async () => {
-      const fetchMock = vi.fn().mockResolvedValue(
-        new Response(JSON.stringify({ totally: 'wrong shape' }), {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' },
-        }),
-      );
-      vi.stubGlobal('fetch', fetchMock);
-
-      const result = await callLoader(
-        makeClient(),
-        'http://example.com/controlpanel/addons',
-      );
-
-      expect(result.catalog).toEqual([]);
-      expect(result.catalogTotal).toBe(0);
-    });
-
-    it('falls back to the empty catalog when fetch throws', async () => {
-      const fetchMock = vi.fn().mockRejectedValue(new Error('network down'));
-      vi.stubGlobal('fetch', fetchMock);
-
-      const result = await callLoader(
-        makeClient(),
-        'http://example.com/controlpanel/addons',
-      );
-
-      expect(result.catalog).toEqual([]);
-      expect(result.catalogTotal).toBe(0);
-    });
   });
 
   describe('action', () => {
@@ -269,14 +150,7 @@ describe('Addons control panel route', () => {
   });
 
   describe('AddonsControlPanel component', () => {
-    const loaderData = {
-      siteAddons: mockSiteAddons.items,
-      query: '',
-      catalog: mockCatalogResponse.results,
-      catalogTotal: 1,
-      catalogStart: 0,
-      catalogSize: 24,
-    };
+    const loaderData = { siteAddons: mockSiteAddons.items };
 
     afterEach(() => {
       vi.resetModules();
@@ -286,6 +160,9 @@ describe('Addons control panel route', () => {
     // the default component can render in isolation (no router/provider tree).
     const renderPanel = async (fetcherData?: unknown, data = loaderData) => {
       vi.resetModules();
+      // resetModules defeats Testing Library's auto-cleanup, so clear any DOM
+      // left by a previous render to keep each render isolated.
+      document.body.innerHTML = '';
 
       vi.doMock('@plone/react-router', () => ({
         requireAuthCookie: vi.fn().mockResolvedValue('fake-token'),
@@ -311,8 +188,6 @@ describe('Addons control panel route', () => {
           ...actual,
           useLoaderData: () => data,
           useNavigate: () => vi.fn(),
-          useNavigation: () => ({ state: 'idle', location: null }),
-          useSearchParams: () => [new URLSearchParams(), vi.fn()],
           useFetcher: () => ({
             state: 'idle',
             data: fetcherData,
@@ -327,12 +202,12 @@ describe('Addons control panel route', () => {
         './controlpanelAddons'
       );
 
-      render(<AddonsControlPanel />);
-      return screen;
+      const result = render(<AddonsControlPanel />);
+      return { screen, ...result };
     };
 
-    it('groups installed/available site add-ons and renders the catalog', async () => {
-      const screen = await renderPanel();
+    it('groups installed and available site add-ons', async () => {
+      const { screen } = await renderPanel();
 
       // Section headings (i18n falls back to the raw key in tests).
       expect(
@@ -341,36 +216,39 @@ describe('Addons control panel route', () => {
       expect(
         screen.getByRole('heading', { name: 'cmsui.addons.available' }),
       ).toBeInTheDocument();
-      expect(
-        screen.getByRole('heading', { name: 'cmsui.addons.catalog' }),
-      ).toBeInTheDocument();
 
       expect(screen.getByText('Installed Add-on')).toBeInTheDocument();
       expect(screen.getByText('Available Add-on')).toBeInTheDocument();
-      expect(screen.getByText('Catalog Add-on')).toBeInTheDocument();
+    });
+
+    it('filters the list as you type in the search box', async () => {
+      const { screen } = await renderPanel();
+      const { fireEvent } = await import('@testing-library/react');
+
+      expect(screen.getByText('Installed Add-on')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByRole('searchbox'), {
+        target: { value: 'Available' },
+      });
+
+      expect(screen.getByText('Available Add-on')).toBeInTheDocument();
+      expect(screen.queryByText('Installed Add-on')).not.toBeInTheDocument();
     });
 
     it('shows the action error alert when fetcher.data.ok is false', async () => {
-      const screen = await renderPanel({ ok: false, error: 'boom' });
+      const { screen } = await renderPanel({ ok: false, error: 'boom' });
 
       const alerts = screen.getAllByRole('alert');
       expect(alerts.length).toBeGreaterThan(0);
-      // Site-add-on action errors surface the actionError message; locate it by text.
       const actionAlert = alerts.find((alert) =>
         alert.textContent?.includes('cmsui.addons.actionError'),
       );
       expect(actionAlert).toBeDefined();
-      // Raw error detail is surfaced via the title attribute.
       expect(actionAlert).toHaveAttribute('title', 'boom');
     });
 
-    it('shows the empty message when there are no add-ons at all', async () => {
-      const screen = await renderPanel(undefined, {
-        ...loaderData,
-        siteAddons: [],
-        catalog: [],
-        catalogTotal: 0,
-      });
+    it('shows the empty message when there are no add-ons', async () => {
+      const { screen } = await renderPanel(undefined, { siteAddons: [] });
 
       expect(screen.getByText('cmsui.addons.empty')).toBeInTheDocument();
     });