Skip to content

Commit

Permalink
feat(fab): add new mountpoints support for providers and listeners
Browse files Browse the repository at this point in the history
  • Loading branch information
debsmita1 committed Jan 28, 2025
1 parent 92fd715 commit d61135e
Show file tree
Hide file tree
Showing 18 changed files with 880 additions and 75 deletions.
1 change: 1 addition & 0 deletions .rhdh/docker/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-back
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import-backend-dynamic/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import-backend-dynamic/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-floating-action-button/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-floating-action-button/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/parfuemerie-douglas-scaffolder-backend-module-azure-repositories-dynamic/package.json ./dynamic-plugins/wrappers/parfuemerie-douglas-scaffolder-backend-module-azure-repositories-dynamic/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/pagerduty-backstage-plugin/package.json ./dynamic-plugins/wrappers/pagerduty-backstage-plugin/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/pagerduty-backstage-plugin-backend-dynamic/package.json ./dynamic-plugins/wrappers/pagerduty-backstage-plugin-backend-dynamic/package.json
Expand Down
11 changes: 11 additions & 0 deletions app-config.dynamic-plugins.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,17 @@ dynamicPlugins:
config:
layout:
position: above-main-content
red-hat-developer-hub.backstage-plugin-global-floating-action-button:
mountPoints:
- mountPoint: application/listener
importName: DynamicGlobalFloatingActionButton
- mountPoint: global.floatingactionbutton/component
importName: NullComponent
config:
icon: github
label: 'Git'
toolTip: 'Github'
to: https://github.com/redhat-developer/rhdh
red-hat-developer-hub.backstage-plugin-dynamic-home-page:
dynamicRoutes:
- path: /
Expand Down
1 change: 1 addition & 0 deletions docker/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-back
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-catalog-backend-module-marketplace-dynamic/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import-backend-dynamic/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-bulk-import-backend-dynamic/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-floating-action-button/package.json ./dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-floating-action-button/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/parfuemerie-douglas-scaffolder-backend-module-azure-repositories-dynamic/package.json ./dynamic-plugins/wrappers/parfuemerie-douglas-scaffolder-backend-module-azure-repositories-dynamic/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/pagerduty-backstage-plugin/package.json ./dynamic-plugins/wrappers/pagerduty-backstage-plugin/package.json
COPY $EXTERNAL_SOURCE_NESTED/dynamic-plugins/wrappers/pagerduty-backstage-plugin-backend-dynamic/package.json ./dynamic-plugins/wrappers/pagerduty-backstage-plugin-backend-dynamic/package.json
Expand Down
32 changes: 32 additions & 0 deletions docs/dynamic-plugins/frontend-plugin-wiring.md
Original file line number Diff line number Diff line change
Expand Up @@ -454,6 +454,38 @@ Here are the default catalog entity routes in the default order:

The visibility of a tab is derived from the kind of entity that is being displayed along with the visibility guidance mentioned in "[Using mount points](#using-mount-points)".

## Adding application listeners

The users can add application listeners using the `application/listener` mount point. Below is an example that uses the aforesaid mount point to configure a floating action button:

```yaml
# app-config.yaml
dynamicPlugins:
frontend:
red-hat-developer-hub.backstage-plugin-global-floating-action-button: # plugin_package_name same as `scalprum.name` key in plugin's `package.json`
mountPoints:
- mountPoint: application/listener # mount point for adding a listener
importName: DynamicGlobalFloatingActionButton # add your listener component here
```
Users can configure multiple application listeners by adding entries to the `mountPoints` field.

## Adding application providers

The users can add application providers using the `application/provider` mount point. Below is an example that uses the aforesaid mount point to configure a context provider:

```yaml
# app-config.yaml
dynamicPlugins:
frontend:
red-hat-developer-hub.backstage-plugin-test-plugin: # plugin_package_name same as `scalprum.name` key in plugin's `package.json`
mountPoints:
- mountPoint: application/provider # mount point for adding a provider
importName: ProviderComponent # add your provider component here
```
Users can configure multiple application providers by adding entries to the `mountPoints` field.

## Provide additional Utility APIs

Backstage offers a Utility API mechanism that provide ways for plugins to communicate during their entire life cycle. Utility APIs are registered as:
Expand Down
18 changes: 18 additions & 0 deletions dynamic-plugins.default.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -536,6 +536,24 @@ plugins:
layout:
position: above-main-content

# Group: Global floating action button
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
disabled: true
pluginConfig:
dynamicPlugins:
frontend:
red-hat-developer-hub.backstage-plugin-global-floating-action-button:
mountPoints:
- mountPoint: application/context
importName: DynamicGlobalFloatingActionButton
- mountPoint: global.floatingactionbutton/component
importName: NullComponent
config:
icon: github
label: 'Git'
toolTip: 'Github'
to: https://github.com/redhat-developer/rhdh

# Homepage
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-dynamic-home-page
disabled: false
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"backstage": {
"role": "frontend-plugin",
"supported-versions": "1.35.0",
"pluginId": "red-hat-developer-hub-backstage-plugin-bulk-import-backend",
"pluginId": "red-hat-developer-hub-backstage-plugin-bulk-import",
"pluginPackages": [
"red-hat-developer-hub-backstage-plugin-bulk-import",
"red-hat-developer-hub-backstage-plugin-bulk-import-backend"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist-dynamic
dist-scalprum
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("@backstage/cli/config/eslint-factory")(__dirname);
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
{
"name": "red-hat-developer-hub-backstage-plugin-global-floating-action-button",
"version": "0.0.3",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "Apache-2.0",
"publishConfig": {
"access": "public",
"main": "dist/index.esm.js",
"types": "dist/index.d.ts"
},
"backstage": {
"role": "frontend-plugin",
"supported-versions": "1.32.5",
"pluginId": "red-hat-developer-hub-backstage-plugin-global-floating-action-button",
"pluginPackages": [
"red-hat-developer-hub-backstage-plugin-global-floating-action-button"
]
},
"sideEffects": false,
"scripts": {
"tsc": "tsc",
"build": "backstage-cli package build",
"lint:check": "backstage-cli package lint",
"test": "backstage-cli package test --passWithNoTests --coverage",
"clean": "backstage-cli package clean",
"export-dynamic": "janus-cli package export-dynamic-plugin --in-place",
"export-dynamic:clean": "run export-dynamic --clean"
},
"dependencies": {
"@mui/material": "5.16.13",
"@red-hat-developer-hub/backstage-plugin-global-floating-action-button": "0.0.3"
},
"devDependencies": {
"@backstage/cli": "0.28.2",
"@janus-idp/cli": "1.18.5",
"typescript": "5.6.3"
},
"scalprum": {
"name": "red-hat-developer-hub.backstage-plugin-global-floating-action-button",
"exposedModules": {
"PluginRoot": "./src/index.ts"
}
},
"files": [
"dist",
"dist-scalprum",
"app-config.yaml"
],
"keywords": [
"backstage",
"plugin"
],
"repository": {
"type": "git",
"url": "https://github.com/redhat-developer/rhdh",
"directory": "dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-floating-action-button"
},
"author": "Red Hat",
"homepage": "https://red.ht/rhdh",
"bugs": "https://issues.redhat.com/browse/RHIDP"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/className";

ClassNameGenerator.configure((componentName) => {
return componentName.startsWith("v5-")
? componentName
: `v5-${componentName}`;
});

export * from "@red-hat-developer-hub/backstage-plugin-global-floating-action-button";
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"extends": "@backstage/cli/config/tsconfig.json",
"include": ["src", "dev", "migrations"],
"exclude": ["node_modules"],
"compilerOptions": {
"outDir": "../../../dist-types/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-floating-action-button",
"rootDir": "."
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": ["//"],
"tasks": {
"tsc": {
"outputs": [
"../../../dist-types/dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-floating-action-button/**"
]
}
}
}
123 changes: 64 additions & 59 deletions packages/app/src/components/AppBase/AppBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import { entityPage } from '../catalog/EntityPage';
import DynamicRootContext from '../DynamicRoot/DynamicRootContext';
import { LearningPaths } from '../learningPaths/LearningPathsPage';
import { Root } from '../Root';
import { ApplicationListener } from '../Root/ApplicationListener';
import { ApplicationProvider } from '../Root/ApplicationProvider';
import ConfigUpdater from '../Root/ConfigUpdater';
import { SearchPage } from '../search/SearchPage';
import { settingsPage } from '../UserSettings/SettingsPages';
Expand Down Expand Up @@ -74,66 +76,69 @@ const AppBase = () => {
<OAuthRequestDialog />
<AppRouter>
<ConfigUpdater />
<ApplicationListener />
<Root>
<FlatRoutes>
<Route
path="/catalog"
element={
<CatalogIndexPage pagination columns={myCustomColumnsFunc} />
}
/>
<Route
path="/catalog/:namespace/:kind/:name"
element={<CatalogEntityPage />}
>
{entityPage(entityTabOverrides)}
</Route>
<Route
path="/create"
element={
<ScaffolderPage
headerOptions={{ title: 'Software Templates' }}
/>
}
>
<ScaffolderFieldExtensions>
{scaffolderFieldExtensions.map(
({ scope, module, importName, Component }) => (
<Component key={`${scope}-${module}-${importName}`} />
),
)}
</ScaffolderFieldExtensions>
scaffolderFieldExtensions
</Route>
<Route path="/api-docs" element={<ApiExplorerPage />} />
<Route
path="/catalog-import"
element={
<RequirePermission permission={catalogEntityCreatePermission}>
<CatalogImportPage />
</RequirePermission>
}
/>
<Route path="/search" element={<BackstageSearchPage />}>
<SearchPage />
</Route>
<Route path="/settings" element={<UserSettingsPage />}>
{settingsPage}
</Route>
<Route path="/catalog-graph" element={<CatalogGraphPage />} />
<Route path="/learning-paths" element={<LearningPaths />} />
{dynamicRoutes.map(
({ Component, staticJSXContent, path, config: { props } }) => (
<Route
key={path}
path={path}
element={<Component {...props} />}
>
{staticJSXContent}
</Route>
),
)}
</FlatRoutes>
<ApplicationProvider>
<FlatRoutes>
<Route
path="/catalog"
element={
<CatalogIndexPage pagination columns={myCustomColumnsFunc} />
}
/>
<Route
path="/catalog/:namespace/:kind/:name"
element={<CatalogEntityPage />}
>
{entityPage(entityTabOverrides)}
</Route>
<Route
path="/create"
element={
<ScaffolderPage
headerOptions={{ title: 'Software Templates' }}
/>
}
>
<ScaffolderFieldExtensions>
{scaffolderFieldExtensions.map(
({ scope, module, importName, Component }) => (
<Component key={`${scope}-${module}-${importName}`} />
),
)}
</ScaffolderFieldExtensions>
scaffolderFieldExtensions
</Route>
<Route path="/api-docs" element={<ApiExplorerPage />} />
<Route
path="/catalog-import"
element={
<RequirePermission permission={catalogEntityCreatePermission}>
<CatalogImportPage />
</RequirePermission>
}
/>
<Route path="/search" element={<BackstageSearchPage />}>
<SearchPage />
</Route>
<Route path="/settings" element={<UserSettingsPage />}>
{settingsPage}
</Route>
<Route path="/catalog-graph" element={<CatalogGraphPage />} />
<Route path="/learning-paths" element={<LearningPaths />} />
{dynamicRoutes.map(
({ Component, staticJSXContent, path, config: { props } }) => (
<Route
key={path}
path={path}
element={<Component {...props} />}
>
{staticJSXContent}
</Route>
),
)}
</FlatRoutes>
</ApplicationProvider>
</Root>
</AppRouter>
</AppProvider>
Expand Down
20 changes: 20 additions & 0 deletions packages/app/src/components/Root/ApplicationListener.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { useContext } from 'react';

import { ErrorBoundary } from '@backstage/core-components';

import DynamicRootContext from '../DynamicRoot/DynamicRootContext';

export const ApplicationListener = () => {
const { mountPoints } = useContext(DynamicRootContext);
const listeners = mountPoints['application/listener'] ?? [];
return listeners.map(({ Component }, index) => {
return (
<ErrorBoundary
// eslint-disable-next-line react/no-array-index-key
key={index}
>
<Component />
</ErrorBoundary>
);
});
};
25 changes: 25 additions & 0 deletions packages/app/src/components/Root/ApplicationProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { useContext } from 'react';

import { ErrorBoundary } from '@backstage/core-components';

import DynamicRootContext from '../DynamicRoot/DynamicRootContext';

export const ApplicationProvider = ({
children,
}: React.PropsWithChildren<{}>) => {
const { mountPoints } = useContext(DynamicRootContext);
const providers = mountPoints['application/provider'] ?? [];
if (providers.length === 0) {
return children;
}
return providers.map(({ Component }, index) => {
return (
<ErrorBoundary
// eslint-disable-next-line react/no-array-index-key
key={index}
>
<Component>{children}</Component>
</ErrorBoundary>
);
});
};
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ export const InternalPluginsMap: Record<string, string> = {
'./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import',
'red-hat-developer-hub-backstage-plugin-global-header':
'./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header',
'red-hat-developer-hub-backstage-plugin-global-floating-action-button':
'./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button',
'red-hat-developer-hub-backstage-plugin-dynamic-home-page':
'./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-dynamic-home-page',
'red-hat-developer-hub-backstage-plugin-marketplace':
Expand Down
Loading

0 comments on commit d61135e

Please sign in to comment.