From 08e871efe4f9583aa9e996b1ad467a50fa2cd229 Mon Sep 17 00:00:00 2001 From: Christoph Jerolimov Date: Thu, 12 Dec 2024 20:11:44 +0100 Subject: [PATCH] feat(marketplace): prepare usage as dynamic plugin (add app-config.dynamic.yaml examples and export icon and content) Signed-off-by: Christoph Jerolimov --- workspaces/marketplace/Makefile | 71 +++++++++++++++++++ .../marketplace/app-config.dynamic.yaml | 31 ++++++++ .../packages/app/src/components/Root/Root.tsx | 3 +- .../package.json | 3 +- .../plugins/marketplace-backend/package.json | 2 +- .../plugins/marketplace-common/package.json | 2 +- .../marketplace/app-config.dynamic.yaml | 15 ++++ .../plugins/marketplace/package.json | 3 +- .../plugins/marketplace/report.api.md | 7 ++ ...gTab.tsx => MarketplaceCatalogContent.tsx} | 2 +- .../src/components/MarketplacePage.tsx | 4 +- .../plugins/marketplace/src/index.ts | 2 +- .../plugins/marketplace/src/plugin.ts | 29 +++++++- 13 files changed, 162 insertions(+), 12 deletions(-) create mode 100644 workspaces/marketplace/Makefile create mode 100644 workspaces/marketplace/app-config.dynamic.yaml create mode 100644 workspaces/marketplace/plugins/marketplace/app-config.dynamic.yaml rename workspaces/marketplace/plugins/marketplace/src/components/{MarketplaceCatalogTab.tsx => MarketplaceCatalogContent.tsx} (96%) diff --git a/workspaces/marketplace/Makefile b/workspaces/marketplace/Makefile new file mode 100644 index 000000000..bee14bb88 --- /dev/null +++ b/workspaces/marketplace/Makefile @@ -0,0 +1,71 @@ +workspace=marketplace + +# This variables defines the showcase and dynamic-plugins-root paths. +# +# The default expects that you have this redhat-developer/rhdh-plugins +# repo and janus-idp/backstage-showcase repo side by side incl. the +# org structure. +# +# If you don't have the org structure locally you can override this +# with make arguments like this: +# +# make showcase=../../../backstage-showcase +# +# Or use an absolute path: +# +# make showcase=~/git/backstage-showcase +showcase=../../../../janus-idp/backstage-showcase + +# The dynamic-plugins-root has two more ../.. because it's relative +# to the plugins/* folders +dproot=../../${showcase}/dynamic-plugins-root + +clean=true + +dev=true + +fix: + @echo + @echo fix and format ${workspace} workspace + @echo + yarn tsc:full + yarn build:api-reports:only + +add-to-showcase: add-frontend-to-showcase add-backend-to-showcase add-catalog-modules-to-showcase copy-config-to-showcase + +add-frontend-to-showcase: + @echo + @echo Will build and install ${workspace} frontend into ${showcase} + @echo + cd plugins/marketplace && npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root "${dproot}" --clean "${clean}" --dev "${dev}" + +add-backend-to-showcase: + @echo + @echo Will build and install ${workspace} backend into ${showcase} + @echo + cd plugins/marketplace-backend && npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root "${dproot}" --clean "${clean}" --dev "${dev}" + +add-catalog-modules-to-showcase: + @echo + @echo Will build and install catalog modules into ${showcase} + @echo + cd plugins/catalog-backend-module-marketplace && npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root "${dproot}" --clean "${clean}" --dev "${dev}" --embed-package "@red-hat-developer-hub/backstage-plugin-marketplace-common" + +copy-config-to-showcase: + @echo + @echo Copy app-config.dynamic.yaml into ${showcase} + @echo + cp app-config.dynamic.yaml "${showcase}/app-config-marketplace.local.yaml" + @echo + @echo You can start your showcase now with + @echo + @echo yarn dev + @echo + +remove-from-showcase: + @echo + @echo Remove packages from ${showcase} + @echo + rm -rf "${dproot}/red-hat-developer-hub-backstage-plugin-marketplace" + rm -rf "${dproot}/red-hat-developer-hub-backstage-plugin-marketplace-backend-dynamic" + rm -rf "${dproot}/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic" diff --git a/workspaces/marketplace/app-config.dynamic.yaml b/workspaces/marketplace/app-config.dynamic.yaml new file mode 100644 index 000000000..234db9e6c --- /dev/null +++ b/workspaces/marketplace/app-config.dynamic.yaml @@ -0,0 +1,31 @@ +catalog: + locations: + # Examples from https://github.com/redhat-developer/rhdh-plugins/tree/main/workspaces/marketplace/examples + - type: url + target: https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/marketplace/examples/all-orgs.yaml + rules: + - allow: [Group] + - type: url + target: https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/marketplace/examples/all-plugins.yaml + rules: + - allow: [Plugin] + - type: url + target: https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/marketplace/examples/all-pluginlists.yaml + rules: + - allow: [PluginList] + +dynamicPlugins: + frontend: + red-hat-developer-hub.backstage-plugin-marketplace: + appIcons: + - name: marketplace + importName: MarketplaceIcon + dynamicRoutes: + - path: /marketplace + importName: MarketplacePage + menuItem: + icon: marketplace + text: Marketplace + mountPoints: + - mountPoint: admin.page.plugins/cards + importName: MarketplaceCatalogContent diff --git a/workspaces/marketplace/packages/app/src/components/Root/Root.tsx b/workspaces/marketplace/packages/app/src/components/Root/Root.tsx index e01611059..746ad910f 100644 --- a/workspaces/marketplace/packages/app/src/components/Root/Root.tsx +++ b/workspaces/marketplace/packages/app/src/components/Root/Root.tsx @@ -19,7 +19,6 @@ import HomeIcon from '@material-ui/icons/Home'; import ExtensionIcon from '@material-ui/icons/Extension'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; -import MarketplaceIcon from '@material-ui/icons/ShoppingBasketOutlined'; import LogoFull from './LogoFull'; import LogoIcon from './LogoIcon'; import { @@ -44,6 +43,8 @@ import SearchIcon from '@material-ui/icons/Search'; import { MyGroupsSidebarItem } from '@backstage/plugin-org'; import GroupIcon from '@material-ui/icons/People'; +import { MarketplaceIcon } from '@red-hat-developer-hub/backstage-plugin-marketplace'; + const useSidebarLogoStyles = makeStyles({ root: { width: sidebarConfig.drawerWidthClosed, diff --git a/workspaces/marketplace/plugins/catalog-backend-module-marketplace/package.json b/workspaces/marketplace/plugins/catalog-backend-module-marketplace/package.json index 333285cc1..faa6a955d 100644 --- a/workspaces/marketplace/plugins/catalog-backend-module-marketplace/package.json +++ b/workspaces/marketplace/plugins/catalog-backend-module-marketplace/package.json @@ -1,7 +1,7 @@ { "name": "@red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace", "description": "The marketplace backend module for the catalog plugin.", - "version": "0.1.0", + "version": "0.0.0", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", @@ -27,7 +27,6 @@ "url": "https://github.com/redhat-developer/rhdh-plugins", "directory": "workspaces/marketplace/plugins/catalog-backend-module-marketplace" }, - "sideEffects": false, "scripts": { "start": "backstage-cli package start", "build": "backstage-cli package build", diff --git a/workspaces/marketplace/plugins/marketplace-backend/package.json b/workspaces/marketplace/plugins/marketplace-backend/package.json index 214cdbc77..2668eaf24 100644 --- a/workspaces/marketplace/plugins/marketplace-backend/package.json +++ b/workspaces/marketplace/plugins/marketplace-backend/package.json @@ -1,6 +1,6 @@ { "name": "@red-hat-developer-hub/backstage-plugin-marketplace-backend", - "version": "0.1.0", + "version": "0.0.0", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", diff --git a/workspaces/marketplace/plugins/marketplace-common/package.json b/workspaces/marketplace/plugins/marketplace-common/package.json index 617e43593..69887d2a8 100644 --- a/workspaces/marketplace/plugins/marketplace-common/package.json +++ b/workspaces/marketplace/plugins/marketplace-common/package.json @@ -1,7 +1,7 @@ { "name": "@red-hat-developer-hub/backstage-plugin-marketplace-common", "description": "Common functionalities for the marketplace plugin", - "version": "0.1.0", + "version": "0.0.0", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", diff --git a/workspaces/marketplace/plugins/marketplace/app-config.dynamic.yaml b/workspaces/marketplace/plugins/marketplace/app-config.dynamic.yaml new file mode 100644 index 000000000..f729cdc7a --- /dev/null +++ b/workspaces/marketplace/plugins/marketplace/app-config.dynamic.yaml @@ -0,0 +1,15 @@ +dynamicPlugins: + frontend: + red-hat-developer-hub.backstage-plugin-marketplace: + appIcons: + - name: marketplace + importName: MarketplaceIcon + dynamicRoutes: + - path: /marketplace + importName: MarketplacePage + menuItem: + icon: marketplace + text: Marketplace + mountPoints: + - mountPoint: admin.page.plugins/cards + importName: MarketplaceCatalogContent diff --git a/workspaces/marketplace/plugins/marketplace/package.json b/workspaces/marketplace/plugins/marketplace/package.json index d7ea3f9a0..941563a00 100644 --- a/workspaces/marketplace/plugins/marketplace/package.json +++ b/workspaces/marketplace/plugins/marketplace/package.json @@ -1,6 +1,6 @@ { "name": "@red-hat-developer-hub/backstage-plugin-marketplace", - "version": "0.1.0", + "version": "0.0.0", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", @@ -63,6 +63,7 @@ "react-router-dom": "^6.3.0" }, "files": [ + "app-config.dynamic.yaml", "dist" ] } diff --git a/workspaces/marketplace/plugins/marketplace/report.api.md b/workspaces/marketplace/plugins/marketplace/report.api.md index 7f0f14aa3..d21cd9a14 100644 --- a/workspaces/marketplace/plugins/marketplace/report.api.md +++ b/workspaces/marketplace/plugins/marketplace/report.api.md @@ -6,9 +6,16 @@ /// import { BackstagePlugin } from '@backstage/core-plugin-api'; +import { IconComponent } from '@backstage/core-plugin-api'; import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; +// @public +export const MarketplaceCatalogContent: () => JSX_2.Element; + +// @public (undocumented) +export const MarketplaceIcon: IconComponent; + // @public export const MarketplacePage: () => JSX_2.Element; diff --git a/workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogTab.tsx b/workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogContent.tsx similarity index 96% rename from workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogTab.tsx rename to workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogContent.tsx index f443cbf41..9fc7c2a58 100644 --- a/workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogTab.tsx +++ b/workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogContent.tsx @@ -23,7 +23,7 @@ import { usePlugins } from '../hooks/usePlugins'; import { MarketplaceCatalogGrid } from './MarketplaceCatalogGrid'; import { SearchTextField } from './SearchTextField'; -export const MarketplaceCatalogTab = () => { +export const MarketplaceCatalogContent = () => { const plugins = usePlugins(); return ( diff --git a/workspaces/marketplace/plugins/marketplace/src/components/MarketplacePage.tsx b/workspaces/marketplace/plugins/marketplace/src/components/MarketplacePage.tsx index 701649ea3..32f56e48f 100644 --- a/workspaces/marketplace/plugins/marketplace/src/components/MarketplacePage.tsx +++ b/workspaces/marketplace/plugins/marketplace/src/components/MarketplacePage.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { Page, Header, TabbedLayout } from '@backstage/core-components'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { MarketplaceCatalogTab } from './MarketplaceCatalogTab'; +import { MarketplaceCatalogContent } from './MarketplaceCatalogContent'; import { MarketplaceEntryAboutDrawer } from './MarketplaceEntryAboutDrawer'; import { MarketplaceEntryInstallDrawer } from './MarketplaceEntryInstallDrawer'; @@ -29,7 +29,7 @@ export const MarketplacePage = () => (
- + diff --git a/workspaces/marketplace/plugins/marketplace/src/index.ts b/workspaces/marketplace/plugins/marketplace/src/index.ts index 8db6e94da..636952634 100644 --- a/workspaces/marketplace/plugins/marketplace/src/index.ts +++ b/workspaces/marketplace/plugins/marketplace/src/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { marketplacePlugin, MarketplacePage } from './plugin'; +export * from './plugin'; diff --git a/workspaces/marketplace/plugins/marketplace/src/plugin.ts b/workspaces/marketplace/plugins/marketplace/src/plugin.ts index a90ebd2af..0bb86372f 100644 --- a/workspaces/marketplace/plugins/marketplace/src/plugin.ts +++ b/workspaces/marketplace/plugins/marketplace/src/plugin.ts @@ -15,12 +15,16 @@ */ import { createApiFactory, - createRoutableExtension, createPlugin, + createRoutableExtension, + createComponentExtension, discoveryApiRef, fetchApiRef, + type IconComponent, } from '@backstage/core-plugin-api'; +import MUIMarketplaceIcon from '@mui/icons-material/ShoppingBasketOutlined'; + import { rootRouteRef } from './routes'; import { marketplaceApiRef, MarketplaceClient } from './api'; @@ -50,7 +54,7 @@ export const marketplacePlugin = createPlugin({ }); /** - * Marketplace Page + * Marketplace page with header and tabs. * @public */ export const MarketplacePage = marketplacePlugin.provide( @@ -61,3 +65,24 @@ export const MarketplacePage = marketplacePlugin.provide( mountPoint: rootRouteRef, }), ); + +/** + * Marketplace catalog content without header and tabs. + * @public + */ +export const MarketplaceCatalogContent = marketplacePlugin.provide( + createComponentExtension({ + name: 'MarketplaceCatalogContent', + component: { + lazy: () => + import('./components/MarketplaceCatalogContent').then( + m => m.MarketplaceCatalogContent, + ), + }, + }), +); + +/** + * @public + */ +export const MarketplaceIcon: IconComponent = MUIMarketplaceIcon;