make explore client backwards compatible

Signed-off-by: Andrew Thauer <athauer@wealthsimple.com>

plugins/explore/api-report.md

@@ -10,6 +10,7 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { default as default_2 } from 'react';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { DomainEntity } from '@backstage/catalog-model';
+import { ExploreToolsConfig } from '@backstage/plugin-explore-react';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { FetchApi } from '@backstage/core-plugin-api';
 import { GetExploreToolsRequest } from '@backstage/plugin-explore-common';
@@ -51,9 +52,11 @@ export class ExploreClient implements ExploreApi {
   constructor({
     discoveryApi,
     fetchApi,
+    exploreToolsConfig,
   }: {
     discoveryApi: DiscoveryApi;
     fetchApi: FetchApi;
+    exploreToolsConfig?: ExploreToolsConfig;
   });
   // (undocumented)
   getTools(request?: GetExploreToolsRequest): Promise<GetExploreToolsResponse>;

plugins/explore/src/api/client.ts

@@ -20,6 +20,7 @@ import {
   GetExploreToolsRequest,
   GetExploreToolsResponse,
 } from '@backstage/plugin-explore-common';
+import { ExploreToolsConfig } from '@backstage/plugin-explore-react';
 import { ExploreApi } from './types';
 
 /**
@@ -30,21 +31,38 @@ import { ExploreApi } from './types';
 export class ExploreClient implements ExploreApi {
   private readonly discoveryApi: DiscoveryApi;
   private readonly fetchApi: FetchApi;
+  // NOTE: This will be removed in the future as it is replaced by the ExploreApi.getTools method
+  private readonly exploreToolsConfig: ExploreToolsConfig | undefined;
 
+  /**
+   * @remarks The exploreToolsConfig is for backwards compatibility with the exporeToolsConfigRef
+   * and will be removed in the future.
+   */
   constructor({
     discoveryApi,
     fetchApi,
+    exploreToolsConfig = undefined,
   }: {
     discoveryApi: DiscoveryApi;
     fetchApi: FetchApi;
+    exploreToolsConfig?: ExploreToolsConfig;
   }) {
     this.discoveryApi = discoveryApi;
     this.fetchApi = fetchApi;
+    this.exploreToolsConfig = exploreToolsConfig;
   }
 
   async getTools(
     request: GetExploreToolsRequest = {},
   ): Promise<GetExploreToolsResponse> {
+    // NOTE: This will be removed in the future as it is replaced by the ExploreApi.getTools method
+    if (this.exploreToolsConfig) {
+      const tools = await this.exploreToolsConfig.getTools();
+      if (tools) {
+        return { tools };
+      }
+    }
+
     const { fetch } = this.fetchApi;
 
     const filter = request.filter ?? {};

plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { exploreToolsConfigRef } from '@backstage/plugin-explore-react';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { ToolCard } from '../ToolCard';
@@ -28,21 +27,18 @@ import {
   WarningPanel,
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-// import { exploreApiRef } from '../../api';
+import { exploreApiRef } from '../../api';
 
 const Body = () => {
-  const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
-  // const exploreApi = useApi(exploreApiRef);
+  const exploreApi = useApi(exploreApiRef);
 
   const {
     value: tools,
     loading,
     error,
   } = useAsync(async () => {
-    return await exploreToolsConfigApi.getTools();
-    // TODO: Enable the backend ExploreClient
-    // return (await exploreApi.getTools())?.tools;
-  }, [exploreToolsConfigApi]);
+    return (await exploreApi.getTools())?.tools;
+  }, [exploreApi]);
 
   if (loading) {
     return <Progress />;

plugins/explore/src/plugin.ts

@@ -23,6 +23,7 @@ import {
   fetchApiRef,
 } from '@backstage/core-plugin-api';
 import { ExploreClient, exploreApiRef } from './api';
+import { exampleTools } from './util/examples';
 
 /** @public */
 export const explorePlugin = createPlugin({
@@ -33,9 +34,11 @@ export const explorePlugin = createPlugin({
       deps: {
         discoveryApi: discoveryApiRef,
         fetchApi: fetchApiRef,
+        exploreToolsConfig: exploreToolsConfigRef,
       },
-      factory: ({ discoveryApi, fetchApi }) =>
-        new ExploreClient({ discoveryApi, fetchApi }),
+      factory: ({ discoveryApi, fetchApi, exploreToolsConfig }) =>
+        // NOTE: The exploreToolsConfig is for backwards compatibility and will be removed in the future
+        new ExploreClient({ discoveryApi, fetchApi, exploreToolsConfig }),
     }),
     /**
      * @deprecated Use ExploreApi from `@backstage/plugin-explore` instead
@@ -45,14 +48,15 @@ export const explorePlugin = createPlugin({
      */
     createApiFactory({
       api: exploreToolsConfigRef,
-      deps: {
-        exploreApi: exploreApiRef,
-      },
-      factory: ({ exploreApi }) => ({
+      deps: {},
+      factory: () => ({
         async getTools() {
-          // TODO: Can we make this backwards compatible so it works off the static frontend example tools?
-          // return exampleTools;
-          return (await exploreApi.getTools()).tools;
+          // TODO: Determine if this should return undefined or exampleTools
+          // - `undefined` will enable the explore-backend to be used via the ExploreClient backwards compatibility
+          //    which is likely the desired behavior for anyone that has not yet overriden this API
+          // return undefined as any;
+          // - `exampleTools` will disable the explore-backend fetching for users that have not yet overriden this API
+          return exampleTools;
         },
       }),
     }),