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

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

workspaces/global-floating-action-button/plugins/global-floating-action-button/app-config.dynamic.yaml

@@ -0,0 +1,14 @@
+dynamicPlugins:
+  frontend:
+    red-hat-developer-hub.backstage-plugin-global-floating-action-button:
+      mountPoints:
+        - mountPoint: application/provider
+          importName: DynamicGlobalFloatingActionButton
+        - mountPoint: application/listener
+          importName: DynamicGlobalFloatingActionButtonRouteListener
+        - mountPoint: global.floatingactionbutton/component
+          config:
+            icon: github
+            label: 'Git'
+            toolTip: 'Github'
+            to: https://github.com/rhdh-plugins

workspaces/global-floating-action-button/plugins/global-floating-action-button/dev/ExampleComponent/ExampleComponent.tsx

@@ -15,9 +15,6 @@
  */
 
 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 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>
 );

workspaces/global-floating-action-button/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}

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();

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"

workspaces/global-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;

workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/DynamicGlobalFloatingActionButton.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { useFabMountPoints } from '../hooks/useFabMountPoints';
+import { GlobalFloatingActionButton } from './GlobalFloatingActionButton';
+import { FloatingActionButton } from '../types';
+
+/**
+ * Dynamic Global Floating Action Button
+ *
+ * @public
+ */
+export const DynamicGlobalFloatingActionButton = () => {
+  const allFabMountPoints = useFabMountPoints();
+
+  const floatingButtons = (allFabMountPoints || []).map(
+    fab => fab?.config,
+  ) as FloatingActionButton[];
+
+  return <GlobalFloatingActionButton floatingButtons={floatingButtons || []} />;
+};

workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FAB.tsx

@@ -85,10 +85,25 @@ export const FAB = ({
   const newWindow = isExternal && !!/^https?:/.exec(actionButton.to!);
   const navigateTo = () =>
     actionButton.to && !isExternal ? navigate(actionButton.to) : '';
+
+  if (!actionButton.label) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Label is missing from your FAB component(s). A label is required for the aria-label attribute.',
+    );
+  }
   const labelText =
-    actionButton.label.length > 20
+    (actionButton.label || '').length > 20
       ? `${actionButton.label.slice(0, actionButton.label.length)}...`
       : actionButton.label;
+
+  if (!actionButton.icon) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Icon is missing from your FAB component(s). An icon is required to render a FAB button.',
+    );
+    return null;
+  }
   const getColor = () => {
     if (actionButton.color) {
       return actionButton.color;
@@ -119,7 +134,7 @@ export const FAB = ({
           size={size || actionButton.size || 'medium'}
           color={getColor()}
           aria-label={actionButton.label}
-          data-testid={actionButton.label
+          data-testid={(actionButton.label || '')
             .replace(' ', '-')
             .toLocaleLowerCase('en-US')}
           onClick={actionButton.onClick || navigateTo}