feat(fab): created dynamic fab to be integrated in the RHDH app

redhat-developer · Jan 23, 2025 · f4dab37 · f4dab37
1 parent b47ad99
commit f4dab37
Show file tree

Hide file tree

Showing 18 changed files with 464 additions and 71 deletions.
diff --git a/workspaces/global-floating-action-button/.changeset/funny-jars-itch.md b/workspaces/global-floating-action-button/.changeset/funny-jars-itch.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-floating-action-button': patch
+---
+
+created dynamic fab to be integrated in the RHDH app
diff --git a/...s/global-floating-action-button/plugins/global-floating-action-button/README.md b/...s/global-floating-action-button/plugins/global-floating-action-button/README.md
@@ -10,6 +10,56 @@ This plugin has been added to the example app in this workspace, meaning it can
 
 ### Installation
 
+#### Installing as a dynamic plugin?
+
+The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:
+
+- Follow https://github.com/redhat-developer/rhdh/blob/main/docs/dynamic-plugins/installing-plugins.md
+- Add content of `app-config.dynamic.yaml` into `app-config.local.yaml`.
+- To configure a plugin as a Floating Action Button (FAB), you need to specify the `global.floatingactionbutton/component` mount point in your plugin configuration, as shown below using the bulk-import plugin as an example:
+
+  ```yaml
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-bulk-import:
+        # start of fab config
+        mountPoints:
+          - mountPoint: global.floatingactionbutton/component
+            config:
+              slot: 'page-end'
+              icon: bulkImportIcon
+              label: 'Bulk import'
+              toolTip: 'Register multiple repositories in bulk'
+              to: /bulk-import/repositories
+        # end of fab config
+        appIcons:
+          - name: bulkImportIcon
+            importName: BulkImportIcon
+        dynamicRoutes:
+          - path: /bulk-import/repositories
+            importName: BulkImportPage
+            menuItem:
+              icon: bulkImportIcon
+              text: Bulk import
+  ```
+
+- To configure a Floating Action Button (FAB) that opens an external link, specify the `global.floatingactionbutton/component` mount point in the `backstage-plugin-global-floating-action-button` plugin, as shown below:
+
+  ```yaml
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-global-floating-action-button:
+        mountPoints:
+          - mountPoint: application/provider
+            importName: DynamicGlobalFloatingActionButton
+          - mountPoint: global.floatingactionbutton/component
+            config:
+              icon: github
+              label: 'Git'
+              toolTip: 'Github'
+              to: https://github.com/redhat-developer/rhdh-plugins
+  ```
+
 #### Procedure
 
 1. Install the Global floating action button plugin using the following command:
@@ -29,7 +79,8 @@ This plugin has been added to the example app in this workspace, meaning it can
 
    export const Root = ({ children }: PropsWithChildren<{}>) => (
      <SidebarPage>
-       ... /* highlight-add-start */
+      {...}
+      {/* highlight-add-start */}
        <GlobalFloatingActionButton
          floatingButtons={[
            {
@@ -48,7 +99,8 @@ This plugin has been added to the example app in this workspace, meaning it can
            },
          ]}
        />
-       /* highlight-add-end */ ...
+       {/* highlight-add-end */}
+       {...}
      </SidebarPage>
    );
    ```

diff --git a/...obal-floating-action-button/plugins/global-floating-action-button/app-config.dynamic.yaml b/...obal-floating-action-button/plugins/global-floating-action-button/app-config.dynamic.yaml
@@ -0,0 +1,6 @@
+dynamicPlugins:
+  frontend:
+    red-hat-developer-hub.backstage-plugin-global-floating-action-button:
+      mountPoints:
+        - mountPoint: application/provider
+          importName: DynamicGlobalFloatingActionButton
diff --git a/...on-button/plugins/global-floating-action-button/dev/ExampleComponent/ExampleComponent.tsx b/...on-button/plugins/global-floating-action-button/dev/ExampleComponent/ExampleComponent.tsx
@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import AddIcon from '@mui/icons-material/Add';
-import GitIcon from '@mui/icons-material/GitHub';
-import MenuIcon from '@mui/icons-material/Menu';
+import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 
@@ -29,12 +26,15 @@ import {
   ContentHeader,
   HeaderLabel,
   SupportButton,
-  GitHubIcon,
 } from '@backstage/core-components';
 import { ExampleFetchComponent } from './ExampleFetchComponent';
-import { GlobalFloatingActionButton, Slot } from '../../src';
+import { FloatingActionButton, GlobalFloatingActionButton } from '../../src';
 
-export const ExampleComponent = () => (
+export const ExampleComponent = ({
+  floatingButtons,
+}: {
+  floatingButtons?: FloatingActionButton[];
+}) => (
   <Page themeId="tool">
     <Header
       title="Welcome to global-floating-action-button!"
@@ -59,54 +59,7 @@ export const ExampleComponent = () => (
           <ExampleFetchComponent />
         </Grid>
       </Grid>
-      <GlobalFloatingActionButton
-        floatingButtons={[
-          {
-            color: 'success',
-            icon: <GitIcon />,
-            label: 'Git repo',
-            showLabel: true,
-            to: 'https://github.com/xyz',
-            toolTip: 'Git',
-          },
-
-          {
-            color: 'info',
-            label: 'Quay',
-            to: 'https://quay.io',
-            toolTip: 'Quay',
-            icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>',
-          },
-          {
-            slot: Slot.BOTTOM_LEFT,
-            color: 'success',
-            icon: <AddIcon />,
-            label: 'Add',
-            toolTip: 'Add',
-            to: '/test-global-floating-action',
-            priority: 100,
-          },
-          {
-            slot: Slot.BOTTOM_LEFT,
-            color: 'success',
-            label: 'Github',
-            icon: <GitHubIcon />,
-            toolTip: 'Github',
-            to: 'https://github.com/xyz',
-            priority: 200,
-            visibleOnPaths: ['/test-global-floating-action'],
-          },
-          {
-            color: 'success',
-            icon: <MenuIcon />,
-            label: 'Menu',
-            toolTip: 'Menu',
-            to: 'https://github.com/xyz',
-            priority: 200,
-            excludeOnPaths: ['/test-global-floating-action'],
-          },
-        ]}
-      />
+      <GlobalFloatingActionButton floatingButtons={floatingButtons || []} />
     </Content>
   </Page>
 );
diff --git a/...tton/plugins/global-floating-action-button/dev/ExampleComponent/ExampleFetchComponent.tsx b/...tton/plugins/global-floating-action-button/dev/ExampleComponent/ExampleFetchComponent.tsx
@@ -120,6 +120,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
 
   const data = users.map(user => {
     return {
+      id: user.name,
       avatar: (
         <img
           src={user.picture}

diff --git a/workspaces/global-floating-action-button/plugins/global-floating-action-button/dev/index.tsx b/workspaces/global-floating-action-button/plugins/global-floating-action-button/dev/index.tsx
@@ -15,18 +15,165 @@
  */
 
 import React from 'react';
-import { createDevApp } from '@backstage/dev-utils';
+import { createDevApp, DevAppPageOptions } from '@backstage/dev-utils';
+import AddIcon from '@mui/icons-material/Add';
+import GitIcon from '@mui/icons-material/GitHub';
+import MenuIcon from '@mui/icons-material/Menu';
+import { GitHubIcon } from '@backstage/core-components';
+import { ScalprumContext, ScalprumState } from '@scalprum/react-core';
+import { PluginStore } from '@openshift/dynamic-plugin-sdk';
+
 import { ExampleComponent } from './ExampleComponent/ExampleComponent';
+import {
+  DynamicGlobalFloatingActionButton,
+  FloatingActionButton,
+  Slot,
+} from '../src';
+
+const mockFloatingButtons: FloatingActionButton[] = [
+  {
+    color: 'success',
+    icon: <GitIcon />,
+    label: 'Git repo',
+    showLabel: true,
+    to: 'https://github.com/xyz',
+    toolTip: 'Git',
+  },
+
+  {
+    color: 'info',
+    label: 'Quay',
+    to: 'https://quay.io',
+    toolTip: 'Quay',
+    icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>',
+  },
+  {
+    slot: Slot.BOTTOM_LEFT,
+    color: 'success',
+    icon: <AddIcon />,
+    label: 'Add',
+    toolTip: 'Add',
+    to: '/test-global-floating-action',
+    priority: 100,
+  },
+  {
+    slot: Slot.BOTTOM_LEFT,
+    color: 'success',
+    label: 'Github',
+    icon: <GitHubIcon />,
+    toolTip: 'Github',
+    to: 'https://github.com/xyz',
+    priority: 200,
+    visibleOnPaths: ['/test-global-floating-action'],
+  },
+  {
+    color: 'success',
+    icon: <MenuIcon />,
+    label: 'Menu',
+    toolTip: 'Menu',
+    to: 'https://github.com/xyz',
+    priority: 200,
+    excludeOnPaths: ['/test-global-floating-action'],
+  },
+];
+
+const createPage = ({
+  navTitle,
+  path,
+  component,
+}: {
+  navTitle: string;
+  component: React.ReactElement;
+  pageTitle: string;
+  path: string;
+}): DevAppPageOptions => {
+  const scalprumState: ScalprumState = {
+    initialized: true,
+    api: {
+      dynamicRootConfig: {
+        mountPoints: {
+          'global.floatingactionbutton/component': [
+            {
+              staticJSXContent: null,
+              config: {
+                color: 'success',
+                icon: 'github',
+                label: 'DP: Git repo',
+                showLabel: true,
+                to: 'https://github.com/xyz',
+                toolTip: 'Git',
+              },
+            },
+            {
+              staticJSXContent: null,
+              config: {
+                color: 'info',
+                label: 'Quay',
+                to: 'https://quay.io',
+                toolTip: 'Quay',
+                icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>',
+              },
+            },
+            {
+              staticJSXContent: null,
+              config: {
+                slot: 'bottom-left',
+                color: 'success',
+                label: 'Github',
+                icon: 'github',
+                toolTip: 'Github',
+                to: 'https://github.com/xyz',
+                priority: 200,
+                visibleOnPaths: ['/test-global-floating-action-3'],
+              },
+            },
+          ],
+        },
+      },
+    },
+    config: {},
+    pluginStore: new PluginStore(),
+  };
+
+  const pageContent = (
+    <ScalprumContext.Provider value={scalprumState}>
+      <DynamicGlobalFloatingActionButton />
+      {component}
+    </ScalprumContext.Provider>
+  );
+
+  return {
+    element: pageContent,
+    title: navTitle,
+    path,
+  };
+};
 
 createDevApp()
   .addPage({
-    element: <ExampleComponent />,
+    element: <ExampleComponent floatingButtons={mockFloatingButtons} />,
     title: 'Page 1',
     path: '/test-global-floating-action',
   })
   .addPage({
-    element: <ExampleComponent />,
+    element: <ExampleComponent floatingButtons={mockFloatingButtons} />,
     title: 'Page 2',
     path: '/test-global-floating-action-2',
   })
+  .addPage(
+    createPage({
+      navTitle: 'Page 3',
+      pageTitle: 'Page 3',
+      path: '/test-global-floating-action-3',
+      component: <ExampleComponent />,
+    }),
+  )
+  .addPage(
+    createPage({
+      navTitle: 'Page 4',
+      pageTitle: 'Page 4',
+      path: '/test-global-floating-action-4',
+      component: <ExampleComponent />,
+    }),
+  )
   .render();
diff --git a/workspaces/global-floating-action-button/plugins/global-floating-action-button/package.json b/workspaces/global-floating-action-button/plugins/global-floating-action-button/package.json
@@ -39,6 +39,7 @@
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@mui/styles": "5.16.13",
+    "@scalprum/react-core": "0.9.3",
     "classnames": "^2.5.1",
     "react-use": "^17.2.4"
   },
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@backstage/cli": "^0.28.0",
     "@backstage/dev-utils": "^1.1.2",
+    "@openshift/dynamic-plugin-sdk": "5.0.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"

diff --git a/...obal-floating-action-button/plugins/global-floating-action-button/report.api.md b/...obal-floating-action-button/plugins/global-floating-action-button/report.api.md
@@ -8,6 +8,21 @@
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react';
 
+// @public
+export const DynamicGlobalFloatingActionButton: React.ComponentType;
+
+// @public
+export const dynamicGlobalFloatingActionButtonPlugin: BackstagePlugin<
+  {},
+  {},
+  {}
+>;
+
+// @public
+export type FABMountPoint = {
+  config?: FloatingActionButton;
+};
+
 // @public
 export type FloatingActionButton = {
   slot?: Slot;