feat(marketplace): use catalogApi to fetch marketplace plugins (#170)

* marketplace: add catalog and backend api clients

* use catalogApi client to fetch data

Author: karthikjeeyar

workspaces/marketplace/plugins/marketplace/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@backstage/core-components": "^0.15.1",
     "@backstage/core-plugin-api": "^1.10.0",
+    "@backstage/plugin-catalog-react": "^1.14.0",
     "@backstage/theme": "^0.6.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.12.2",

…arketplace/src/api/MarketplaceClient.tsx …ace/src/api/MarketplaceBackendClient.tsxworkspaces/marketplace/plugins/marketplace/src/api/MarketplaceClient.tsx renamed to workspaces/marketplace/plugins/marketplace/src/api/MarketplaceBackendClient.tsx workspaces/marketplace/plugins/marketplace/src/api/MarketplaceClient.tsx renamed to workspaces/marketplace/plugins/marketplace/src/api/MarketplaceBackendClient.tsx

@@ -27,7 +27,7 @@ export type Options = {
   fetchApi: FetchApi;
 };
 
-export class MarketplaceClient implements MarketplaceApi {
+export class MarketplaceBackendClient implements MarketplaceApi {
   private readonly discoveryApi: DiscoveryApi;
   private readonly fetchApi: FetchApi;
 

workspaces/marketplace/plugins/marketplace/src/api/MarketplaceCatalogClient.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2024 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 {
+  MarketplacePluginEntry,
+  MarketplacePluginList,
+} from '@red-hat-developer-hub/backstage-plugin-marketplace-common';
+
+import { MarketplaceApi } from './MarketplaceApi';
+import { CatalogApi } from '@backstage/plugin-catalog-react';
+
+type CatalogApiOptions = {
+  catalogApi: CatalogApi;
+};
+
+export class MarketplaceCatalogClient implements MarketplaceApi {
+  private readonly catalogApi: CatalogApi;
+
+  constructor(options: CatalogApiOptions) {
+    this.catalogApi = options.catalogApi;
+  }
+
+  async getPlugins(): Promise<MarketplacePluginEntry[]> {
+    const result = await this.catalogApi.getEntities({
+      filter: {
+        kind: 'plugin',
+      },
+    });
+
+    return result?.items as MarketplacePluginEntry[];
+  }
+
+  async getPluginList(): Promise<MarketplacePluginList[]> {
+    const result = await this.catalogApi.getEntities({
+      filter: {
+        kind: 'pluginList',
+      },
+    });
+    return result.items as MarketplacePluginList[];
+  }
+}

workspaces/marketplace/plugins/marketplace/src/api/index.ts

@@ -18,7 +18,8 @@ import { createApiRef } from '@backstage/core-plugin-api';
 import { MarketplaceApi } from './MarketplaceApi';
 
 export * from './MarketplaceApi';
-export * from './MarketplaceClient';
+export * from './MarketplaceBackendClient';
+export * from './MarketplaceCatalogClient';
 
 export const marketplaceApiRef = createApiRef<MarketplaceApi>({
   id: 'plugin.marketplace.api-ref',

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

@@ -36,7 +36,7 @@ export const MarketplaceCatalogContent = () => {
         >
           <Typography variant="h5">
             All plugins
-            {plugins.data ? ` (${plugins.data.length})` : null}
+            {plugins.data ? ` (${plugins.data?.length})` : null}
           </Typography>
           <SearchTextField variant="filter" />
         </Stack>

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

@@ -16,14 +16,10 @@
 import { useApi } from '@backstage/core-plugin-api';
 
 import { useQuery } from '@tanstack/react-query';
-
 import { marketplaceApiRef } from '../api';
 
 export const usePlugins = () => {
   const marketplaceApi = useApi(marketplaceApiRef);
-
-  //   const [search, setSearch] = useQueryParamState<string | undefined>('q');
-
   return useQuery({
     queryKey: ['plugins'],
     queryFn: () => marketplaceApi.getPlugins(),

workspaces/marketplace/plugins/marketplace/src/plugin.ts

@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 import {
-  createApiFactory,
   createPlugin,
   createRoutableExtension,
   createComponentExtension,
+  type IconComponent,
+  createApiFactory,
   discoveryApiRef,
   fetchApiRef,
-  type IconComponent,
 } from '@backstage/core-plugin-api';
 
 import MUIMarketplaceIcon from '@mui/icons-material/ShoppingBasketOutlined';
 
 import { rootRouteRef } from './routes';
-import { marketplaceApiRef, MarketplaceClient } from './api';
+import { marketplaceApiRef, MarketplaceBackendClient } from './api';
 
 /**
  * Marketplace Plugin
@@ -45,7 +45,7 @@ export const marketplacePlugin = createPlugin({
         fetchApi: fetchApiRef,
       },
       factory: ({ discoveryApi, fetchApi }) =>
-        new MarketplaceClient({
+        new MarketplaceBackendClient({
           discoveryApi,
           fetchApi,
         }),

workspaces/marketplace/yarn.lock

@@ -10082,6 +10082,7 @@ __metadata:
     "@backstage/core-components": ^0.15.1
     "@backstage/core-plugin-api": ^1.10.0
     "@backstage/dev-utils": ^1.1.2
+    "@backstage/plugin-catalog-react": ^1.14.0
     "@backstage/test-utils": ^1.7.0
     "@backstage/theme": ^0.6.0
     "@mui/icons-material": ^5.16.7