customize explore tools content

Signed-off-by: hram_wh <hakkam@Hakkams-MacBook-Pro.local>

packages/app/src/App.tsx

@@ -106,6 +106,7 @@ import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { PlaylistIndexPage } from '@backstage/plugin-playlist';
 import { TwoColumnLayout } from './components/scaffolder/customScaffolderLayouts';
+import { exploreTools } from './exploreTools';
 
 const app = createApp({
   apis,
@@ -242,7 +243,14 @@ const routes = (
         <DelayingComponentFieldExtension />
       </ScaffolderFieldExtensions>
     </Route>
-    <Route path="/explore" element={<ExplorePage />} />
+    <Route
+      path="/explore"
+      element={ 
+        <ExplorePage 
+          exploreTools={exploreTools} 
+        />
+      }
+    />
     <Route
       path="/tech-radar"
       element={<TechRadarPage width={1500} height={800} />}

plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx

@@ -20,8 +20,9 @@ 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 = () => {
+export const DefaultExplorePage = (props: {exploreTools?: Array<ExploreTool>}) => {
   const configApi = useApi(configApiRef);
   const organizationName =
     configApi.getOptionalString('organization.name') ?? 'Backstage';
@@ -38,7 +39,9 @@ export const DefaultExplorePage = () => {
         <GroupsExplorerContent />
       </ExploreLayout.Route>
       <ExploreLayout.Route path="tools" title="Tools">
-        <ToolExplorerContent />
+        <ToolExplorerContent 
+          exploreTools={props?.exploreTools} 
+        />
       </ExploreLayout.Route>
     </ExploreLayout>
   );

plugins/explore/src/components/ExplorePage/ExplorePage.tsx

@@ -17,9 +17,11 @@
 import React from 'react';
 import { useOutlet } from 'react-router';
 import { DefaultExplorePage } from '../DefaultExplorePage';
+import { ExploreTool } from '@backstage/plugin-explore-react';
 
-export const ExplorePage = () => {
+
+export const ExplorePage = (props: {exploreTools?: Array<ExploreTool>}) => {
   const outlet = useOutlet();
 
-  return <>{outlet || <DefaultExplorePage />}</>;
+  return <>{outlet || <DefaultExplorePage exploreTools={props?.exploreTools} />}</>;
 };

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { exploreToolsConfigRef } from '@backstage/plugin-explore-react';
+import { ExploreTool, exploreToolsConfigRef } from '@backstage/plugin-explore-react';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { ToolCard } from '../ToolCard';
@@ -29,48 +29,63 @@ import {
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const Body = () => {
-  const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
-  const {
-    value: tools,
-    loading,
-    error,
-  } = useAsync(async () => {
-    return await exploreToolsConfigApi.getTools();
-  }, [exploreToolsConfigApi]);
+const Body = (props: {exploreTools?: Array<ExploreTool>}) => {
+  var exploreTools;
+  if(!props?.exploreTools){
+    const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
+    const {
+      value: tools,
+      loading,
+      error,
+    } = useAsync(async () => {
+      return await exploreToolsConfigApi.getTools();
+    }, [exploreToolsConfigApi]);
 
-  if (loading) {
-    return <Progress />;
-  }
+    if (loading) {
+      return <Progress />;
+    }
 
-  if (error) {
-    return <WarningPanel title="Failed to load tools" />;
-  }
+    if (error) {
+      return <WarningPanel title="Failed to load tools" />;
+    }
 
-  if (!tools?.length) {
-    return (
-      <EmptyState
-        missing="info"
-        title="No tools to display"
-        description="You haven't added any tools yet."
-      />
-    );
+    if (!tools?.length) {
+      return (
+        <EmptyState
+          missing="info"
+          title="No tools to display"
+          description="You haven't added any tools yet."
+        />
+      );
+    }
+    exploreTools = tools;
+  } else if(props?.exploreTools) {
+    exploreTools = props?.exploreTools;
+    if (!props?.exploreTools?.length) {
+      return (
+        <EmptyState
+          missing="info"
+          title="No tools to display"
+          description="You haven't added any tools yet."
+        />
+      );
+    }
   }
 
   return (
     <ItemCardGrid>
-      {tools.map((tool, index) => (
+      {exploreTools?.map((tool, index) => (
         <ToolCard key={index} card={tool} />
       ))}
     </ItemCardGrid>
   );
 };
 
-export const ToolExplorerContent = (props: { title?: string }) => (
+export const ToolExplorerContent = (props: { title?: string, exploreTools?: Array<ExploreTool>}) => (
   <Content noPadding>
     <ContentHeader title={props.title ?? 'Tools'}>
       <SupportButton>Discover the tools in your ecosystem.</SupportButton>
     </ContentHeader>
-    <Body />
+    <Body exploreTools={props?.exploreTools}/>
   </Content>
 );