From 335a9cebde0929ca24abf3ecd2edc366d5c07d1e Mon Sep 17 00:00:00 2001 From: hram_wh Date: Fri, 23 Sep 2022 11:21:03 +0530 Subject: [PATCH 1/9] customize explore tools content Signed-off-by: hram_wh --- packages/app/src/App.tsx | 10 ++- .../DefaultExplorePage/DefaultExplorePage.tsx | 7 +- .../components/ExplorePage/ExplorePage.tsx | 6 +- .../ToolExplorerContent.tsx | 69 +++++++++++-------- 4 files changed, 60 insertions(+), 32 deletions(-) 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. - + ); From d04151817817affcd3c5da1bd6a3c1dab7c439df Mon Sep 17 00:00:00 2001 From: hram_wh Date: Fri, 23 Sep 2022 11:28:16 +0530 Subject: [PATCH 2/9] Prettier fix Signed-off-by: hram_wh --- packages/app/src/App.tsx | 6 +----- .../DefaultExplorePage/DefaultExplorePage.tsx | 8 ++++---- .../src/components/ExplorePage/ExplorePage.tsx | 7 ++++--- .../ToolExplorerContent.tsx | 18 ++++++++++++------ 4 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index a807df9943..a61990ed24 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -245,11 +245,7 @@ const routes = ( - } + element={} /> }) => { +export const DefaultExplorePage = (props: { + exploreTools?: Array; +}) => { const configApi = useApi(configApiRef); const organizationName = configApi.getOptionalString('organization.name') ?? 'Backstage'; @@ -39,9 +41,7 @@ export const DefaultExplorePage = (props: {exploreTools?: Array}) = - + ); diff --git a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx index 62e893feb6..266c816f74 100644 --- a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx +++ b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx @@ -19,9 +19,10 @@ import { useOutlet } from 'react-router'; import { DefaultExplorePage } from '../DefaultExplorePage'; import { ExploreTool } from '@backstage/plugin-explore-react'; - -export const ExplorePage = (props: {exploreTools?: Array}) => { +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 f57d9ea43d..c7ed23e185 100644 --- a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx +++ b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx @@ -14,7 +14,10 @@ * limitations under the License. */ -import { ExploreTool, 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,9 +32,9 @@ import { } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; -const Body = (props: {exploreTools?: Array}) => { +const Body = (props: { exploreTools?: Array }) => { var exploreTools; - if(!props?.exploreTools){ + if (!props?.exploreTools) { const exploreToolsConfigApi = useApi(exploreToolsConfigRef); const { value: tools, @@ -59,7 +62,7 @@ const Body = (props: {exploreTools?: Array}) => { ); } exploreTools = tools; - } else if(props?.exploreTools) { + } else if (props?.exploreTools) { exploreTools = props?.exploreTools; if (!props?.exploreTools?.length) { return ( @@ -81,11 +84,14 @@ const Body = (props: {exploreTools?: Array}) => { ); }; -export const ToolExplorerContent = (props: { title?: string, exploreTools?: Array}) => ( +export const ToolExplorerContent = (props: { + title?: string; + exploreTools?: Array; +}) => ( Discover the tools in your ecosystem. - + ); From 5c25ce6d9ede5646b7f7f7366954630b016a2f10 Mon Sep 17 00:00:00 2001 From: hram_wh Date: Fri, 23 Sep 2022 11:47:30 +0530 Subject: [PATCH 3/9] changeset added Signed-off-by: hram_wh --- .changeset/bright-pillows-build.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/bright-pillows-build.md diff --git a/.changeset/bright-pillows-build.md b/.changeset/bright-pillows-build.md new file mode 100644 index 0000000000..65517a6595 --- /dev/null +++ b/.changeset/bright-pillows-build.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-explore': patch +--- + +Added ability to customize the explore plugin tools tab content From 15bed4655e0c34d091eaf296c1fafbe3751d5f1d Mon Sep 17 00:00:00 2001 From: hram_wh Date: Fri, 23 Sep 2022 12:51:12 +0530 Subject: [PATCH 4/9] useApi hook implementation outside of conditional block Signed-off-by: hram_wh --- packages/app/src/App.tsx | 6 +- .../ToolExplorerContent.tsx | 62 +++++++------------ 2 files changed, 25 insertions(+), 43 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index a61990ed24..a6c613ded7 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -106,7 +106,6 @@ 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, @@ -243,10 +242,7 @@ const routes = ( - } - /> + } /> } diff --git a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx index c7ed23e185..79d8fda6fe 100644 --- a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx +++ b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx @@ -33,51 +33,37 @@ import { import { useApi } from '@backstage/core-plugin-api'; 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]); + const exploreToolsConfigApi = useApi(exploreToolsConfigRef); + const { + value: tools, + loading, + error, + } = useAsync(async () => { + if (props?.exploreTools) return props?.exploreTools; + return await exploreToolsConfigApi.getTools(); + }, [exploreToolsConfigApi]); - if (loading) { - return ; - } + if (loading) { + return ; + } - if (error) { - return ; - } + if (error) { + return ; + } - if (!tools?.length) { - return ( - - ); - } - exploreTools = tools; - } else if (props?.exploreTools) { - exploreTools = props?.exploreTools; - if (!props?.exploreTools?.length) { - return ( - - ); - } + if (!tools?.length) { + return ( + + ); } return ( - {exploreTools?.map((tool, index) => ( + {tools?.map((tool, index) => ( ))} From 235285373e20afbebce017c9d52f2708e3af58f6 Mon Sep 17 00:00:00 2001 From: hram_wh Date: Tue, 27 Sep 2022 12:52:53 +0530 Subject: [PATCH 5/9] changes in api reports Signed-off-by: hram_wh --- plugins/explore/api-report.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md index 9653c0fb63..7816c1c60f 100644 --- a/plugins/explore/api-report.md +++ b/plugins/explore/api-report.md @@ -8,6 +8,7 @@ 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'; @@ -44,7 +45,9 @@ export type ExploreLayoutProps = { }; // @public (undocumented) -export const ExplorePage: () => JSX.Element; +export const ExplorePage: (props: { + exploreTools?: ExploreTool[] | undefined; +}) => JSX.Element; // @public (undocumented) const explorePlugin: BackstagePlugin< @@ -90,5 +93,6 @@ export type SubRoute = { // @public (undocumented) export const ToolExplorerContent: (props: { title?: string | undefined; + exploreTools?: ExploreTool[] | undefined; }) => JSX.Element; ``` From a392bd38abc16bfb62a67728f8589d9c7e463e65 Mon Sep 17 00:00:00 2001 From: hram_wh Date: Thu, 3 Nov 2022 10:53:53 +0530 Subject: [PATCH 6/9] readme section for tools content customization Signed-off-by: hram_wh --- 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 = ( ); ``` + +## 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; -}) => { +export const DefaultExplorePage = () => { const configApi = useApi(configApiRef); const organizationName = configApi.getOptionalString('organization.name') ?? 'Backstage'; @@ -41,7 +38,7 @@ export const DefaultExplorePage = (props: { - + ); 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 }) => { +export const ExplorePage = () => { 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 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 }) => { +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 }) => { ); }; -export const ToolExplorerContent = (props: { - title?: string; - exploreTools?: Array; -}) => ( +export const ToolExplorerContent = (props: { title?: string }) => ( Discover the tools in your ecosystem. - + ); From 551d57244743d62b827ed09e199e440cfc07f130 Mon Sep 17 00:00:00 2001 From: hram_wh Date: Thu, 3 Nov 2022 16:01:07 +0530 Subject: [PATCH 7/9] minor changes Signed-off-by: hram_wh --- .changeset/bright-pillows-build.md | 2 +- plugins/explore/README.md | 12 +++++++++++- .../ToolExplorerContent/ToolExplorerContent.tsx | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/.changeset/bright-pillows-build.md b/.changeset/bright-pillows-build.md index 65517a6595..9939fddf42 100644 --- a/.changeset/bright-pillows-build.md +++ b/.changeset/bright-pillows-build.md @@ -2,4 +2,4 @@ '@backstage/plugin-explore': patch --- -Added ability to customize the explore plugin tools tab content +Added a section to explore plugin README that describes the customization of explore tools content. diff --git a/plugins/explore/README.md b/plugins/explore/README.md index b28fd8ceb6..7fa088ab9a 100644 --- a/plugins/explore/README.md +++ b/plugins/explore/README.md @@ -94,7 +94,17 @@ export const apis: AnyApiFactory[] = [ api: exploreToolsConfigRef, deps: {}, factory: () => ({ - /* pass the tools array */ + /* pass the tools array + i.e. tools = [ + { + title: 'New Relic', + description:'new relic plugin, + url: '/newrelic', + image: 'https://i.imgur.com/L37ikrX.jpg', + tags: ['newrelic', 'proxy', 'nerdGraph'], + }, + ] + */ }), }), diff --git a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx index 92ba9b7b16..5404c67393 100644 --- a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx +++ b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx @@ -59,7 +59,7 @@ const Body = () => { return ( - {tools?.map((tool, index) => ( + {tools.map((tool, index) => ( ))} From b8ec39aba5379d235d7c6452cbc73edb94e24cdd Mon Sep 17 00:00:00 2001 From: hram_wh Date: Thu, 3 Nov 2022 16:11:46 +0530 Subject: [PATCH 8/9] prettier fix Signed-off-by: hram_wh --- plugins/explore/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/explore/README.md b/plugins/explore/README.md index 7fa088ab9a..5038f3e5f0 100644 --- a/plugins/explore/README.md +++ b/plugins/explore/README.md @@ -94,7 +94,7 @@ export const apis: AnyApiFactory[] = [ api: exploreToolsConfigRef, deps: {}, factory: () => ({ - /* pass the tools array + /* pass the tools array i.e. tools = [ { title: 'New Relic', From d7ffce99843ad045a322122c55af9b8b120e163f Mon Sep 17 00:00:00 2001 From: hram_wh Date: Thu, 3 Nov 2022 19:39:11 +0530 Subject: [PATCH 9/9] changes Signed-off-by: hram_wh --- plugins/explore/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/plugins/explore/README.md b/plugins/explore/README.md index 5038f3e5f0..94ab0984a0 100644 --- a/plugins/explore/README.md +++ b/plugins/explore/README.md @@ -94,8 +94,10 @@ export const apis: AnyApiFactory[] = [ api: exploreToolsConfigRef, deps: {}, factory: () => ({ - /* pass the tools array - i.e. tools = [ + async getTools() { + return tools; + }, + /* e.g. tools = [ { title: 'New Relic', description:'new relic plugin, @@ -104,7 +106,7 @@ export const apis: AnyApiFactory[] = [ tags: ['newrelic', 'proxy', 'nerdGraph'], }, ] - */ + */ }), }),