From a392bd38abc16bfb62a67728f8589d9c7e463e65 Mon Sep 17 00:00:00 2001
From: hram_wh <hakkam@Hakkams-MacBook-Pro.local>
Date: Thu, 3 Nov 2022 10:53:53 +0530
Subject: [PATCH] readme section for tools content customization

Signed-off-by: hram_wh <hakkam@Hakkams-MacBook-Pro.local>
---
 plugins/explore/README.md                     | 24 +++++++++++++++++++
 plugins/explore/api-report.md                 |  6 +----
 .../DefaultExplorePage/DefaultExplorePage.tsx |  7 ++----
 .../components/ExplorePage/ExplorePage.tsx    |  7 ++----
 .../ToolExplorerContent.tsx                   | 15 ++++--------
 5 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/plugins/explore/README.md b/plugins/explore/README.md
index 8e1cbaed02..b28fd8ceb6 100644
--- a/plugins/explore/README.md
+++ b/plugins/explore/README.md
@@ -79,3 +79,27 @@ const routes = (
   </FlatRoutes>
 );
 ```
+
+## ToolExplorer Content Customization
+
+Override the `exploreToolsConfigRef` API in `/packages/app/src/apis.ts`.
+
+```tsx
+import { exploreToolsConfigRef } from '@backstage/plugin-explore-react';
+
+export const apis: AnyApiFactory[] = [
+  ...
+
+  createApiFactory({
+    api: exploreToolsConfigRef,
+    deps: {},
+    factory: () => ({
+      /*  pass the tools array */
+    }),
+  }),
+
+  ....
+
+];
+
+```
diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md
index 7816c1c60f..9653c0fb63 100644
--- a/plugins/explore/api-report.md
+++ b/plugins/explore/api-report.md
@@ -8,7 +8,6 @@
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { default as default_2 } from 'react';
 import { DomainEntity } from '@backstage/catalog-model';
-import { ExploreTool } from '@backstage/plugin-explore-react';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { TabProps } from '@material-ui/core';
@@ -45,9 +44,7 @@ export type ExploreLayoutProps = {
 };
 
 // @public (undocumented)
-export const ExplorePage: (props: {
-  exploreTools?: ExploreTool[] | undefined;
-}) => JSX.Element;
+export const ExplorePage: () => JSX.Element;
 
 // @public (undocumented)
 const explorePlugin: BackstagePlugin<
@@ -93,6 +90,5 @@ export type SubRoute = {
 // @public (undocumented)
 export const ToolExplorerContent: (props: {
   title?: string | undefined;
-  exploreTools?: ExploreTool[] | undefined;
 }) => JSX.Element;
 ```
diff --git a/plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx b/plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx
index 193034ea87..54beb59619 100644
--- a/plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx
+++ b/plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx
@@ -20,11 +20,8 @@ import { ExploreLayout } from '../ExploreLayout';
 import { GroupsExplorerContent } from '../GroupsExplorerContent';
 import { ToolExplorerContent } from '../ToolExplorerContent';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import { ExploreTool } from '@backstage/plugin-explore-react';
 
-export const DefaultExplorePage = (props: {
-  exploreTools?: Array<ExploreTool>;
-}) => {
+export const DefaultExplorePage = () => {
   const configApi = useApi(configApiRef);
   const organizationName =
     configApi.getOptionalString('organization.name') ?? 'Backstage';
@@ -41,7 +38,7 @@ export const DefaultExplorePage = (props: {
         <GroupsExplorerContent />
       </ExploreLayout.Route>
       <ExploreLayout.Route path="tools" title="Tools">
-        <ToolExplorerContent exploreTools={props?.exploreTools} />
+        <ToolExplorerContent />
       </ExploreLayout.Route>
     </ExploreLayout>
   );
diff --git a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx
index 266c816f74..80fe3febec 100644
--- a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx
+++ b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx
@@ -17,12 +17,9 @@
 import React from 'react';
 import { useOutlet } from 'react-router';
 import { DefaultExplorePage } from '../DefaultExplorePage';
-import { ExploreTool } from '@backstage/plugin-explore-react';
 
-export const ExplorePage = (props: { exploreTools?: Array<ExploreTool> }) => {
+export const ExplorePage = () => {
   const outlet = useOutlet();
 
-  return (
-    <>{outlet || <DefaultExplorePage exploreTools={props?.exploreTools} />}</>
-  );
+  return <>{outlet || <DefaultExplorePage />}</>;
 };
diff --git a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx
index 79d8fda6fe..92ba9b7b16 100644
--- a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx
+++ b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx
@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  ExploreTool,
-  exploreToolsConfigRef,
-} from '@backstage/plugin-explore-react';
+import { exploreToolsConfigRef } from '@backstage/plugin-explore-react';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { ToolCard } from '../ToolCard';
@@ -32,14 +29,13 @@ import {
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const Body = (props: { exploreTools?: Array<ExploreTool> }) => {
+const Body = () => {
   const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
   const {
     value: tools,
     loading,
     error,
   } = useAsync(async () => {
-    if (props?.exploreTools) return props?.exploreTools;
     return await exploreToolsConfigApi.getTools();
   }, [exploreToolsConfigApi]);
 
@@ -70,14 +66,11 @@ const Body = (props: { exploreTools?: Array<ExploreTool> }) => {
   );
 };
 
-export const ToolExplorerContent = (props: {
-  title?: string;
-  exploreTools?: Array<ExploreTool>;
-}) => (
+export const ToolExplorerContent = (props: { title?: string }) => (
   <Content noPadding>
     <ContentHeader title={props.title ?? 'Tools'}>
       <SupportButton>Discover the tools in your ecosystem.</SupportButton>
     </ContentHeader>
-    <Body exploreTools={props?.exploreTools} />
+    <Body />
   </Content>
 );