diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index a6c613ded7..a807df9943 100644
--- a/packages/app/src/App.tsx
+++ b/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 = (
- } />
+
+ }
+ />
}
diff --git a/plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx b/plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx
index 54beb59619..2f329861ab 100644
--- a/plugins/explore/src/components/DefaultExplorePage/DefaultExplorePage.tsx
+++ b/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}) => {
const configApi = useApi(configApiRef);
const organizationName =
configApi.getOptionalString('organization.name') ?? 'Backstage';
@@ -38,7 +39,9 @@ export const DefaultExplorePage = () => {
-
+
);
diff --git a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx
index 80fe3febec..62e893feb6 100644
--- a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx
+++ b/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}) => {
const outlet = useOutlet();
- return <>{outlet || }>;
+ return <>{outlet || }>;
};
diff --git a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx
index 5404c67393..f57d9ea43d 100644
--- a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx
+++ b/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}) => {
+ var exploreTools;
+ if(!props?.exploreTools){
+ const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
+ const {
+ value: tools,
+ loading,
+ error,
+ } = useAsync(async () => {
+ return await exploreToolsConfigApi.getTools();
+ }, [exploreToolsConfigApi]);
- if (loading) {
- return ;
- }
+ if (loading) {
+ return ;
+ }
- if (error) {
- return ;
- }
+ if (error) {
+ return ;
+ }
- if (!tools?.length) {
- return (
-
- );
+ if (!tools?.length) {
+ return (
+
+ );
+ }
+ exploreTools = tools;
+ } else if(props?.exploreTools) {
+ exploreTools = props?.exploreTools;
+ if (!props?.exploreTools?.length) {
+ return (
+
+ );
+ }
}
return (
- {tools.map((tool, index) => (
+ {exploreTools?.map((tool, index) => (
))}
);
};
-export const ToolExplorerContent = (props: { title?: string }) => (
+export const ToolExplorerContent = (props: { title?: string, exploreTools?: Array}) => (
Discover the tools in your ecosystem.
-
+
);