feat(marketplace): prepare usage as dynamic plugin (add app-config.dy…

…namic.yaml examples and export icon and content) (#167) * feat(marketplace): prepare usage as dynamic plugin (add app-config.dynamic.yaml examples and export icon and content) Signed-off-by: Christoph Jerolimov <[email protected]> * fix(marketplace): add mui v5 workaround so that it looks correct when loaded as dynamic plugin Signed-off-by: Christoph Jerolimov <[email protected]> --------- Signed-off-by: Christoph Jerolimov <[email protected]>
redhat-developer · Dec 13, 2024 · c3ff204 · c3ff204
1 parent 0f319d7
commit c3ff204
Show file tree

Hide file tree

Showing 13 changed files with 170 additions and 12 deletions.
diff --git a/workspaces/marketplace/Makefile 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 <command like copy>
+#
+# Or use an absolute path:
+#
+#   make showcase=~/git/backstage-showcase <command like copy>
+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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,9 +6,16 @@
 /// <reference types="react" />
 
 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/.../src/components/MarketplaceCatalogTab.tsx → .../components/MarketplaceCatalogContent.tsx b/.../src/components/MarketplaceCatalogTab.tsx → .../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
@@ -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 = () => (
       <Header title="Plugins" />
       <TabbedLayout>
         <TabbedLayout.Route path="/" title="Catalog">
-          <MarketplaceCatalogTab />
+          <MarketplaceCatalogContent />
         </TabbedLayout.Route>
       </TabbedLayout>
     </Page>

diff --git a/workspaces/marketplace/plugins/marketplace/src/index.ts b/workspaces/marketplace/plugins/marketplace/src/index.ts
@@ -13,4 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { marketplacePlugin, MarketplacePage } from './plugin';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
+
+ClassNameGenerator.configure(componentName => {
+  return componentName.startsWith('v5-')
+    ? componentName
+    : `v5-${componentName}`;
+});
+
+export * from './plugin';
diff --git 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;