@veecode-platform/backstage-plugin-global-floating-action-button-dynamic

Global floating action button for Backstage

This plugin enables you to add a floating button, with or without submenu options, to your desired pages.

Getting started

This plugin has been added to the example app in this workspace, meaning it can be accessed by running yarn start from this directory, and then navigating to /test-global-floating-action.

For administrators

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/config mount point in your plugin configuration, as shown below using the bulk-import plugin as an example:

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # start of fab config
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage # It is necessary to specify an importName because mount point without an associated component is not allowed.
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                  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 Floating Action Button(s) (FAB) that opens an external link, specify the global.floatingactionbutton/config mount point in the backstage-plugin-global-floating-action-button plugin, as shown below:

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-global-floating-action-button:
            mountPoints:
              - mountPoint: application/listener
                importName: DynamicGlobalFloatingActionButton
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent # It is necessary to specify an importName because mount point without an associated component is not allowed.
                config:
                  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>'
                  label: 'Quay'
                  showLabel: true
                  toolTip: 'Quay'
                  to: 'https://quay.io'
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent
                config:
                  icon: github
                  label: 'Git'
                  toolTip: 'Github'
                  to: https://github.com/redhat-developer/rhdh-plugins
  

• To configure a Floating Action Button (FAB) that opens multiple options, define the global.floatingactionbutton/config mount point in the same slot for multiple actions. The default slot is page-end when not specified.

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # start of fab config
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage # It is necessary to specify an importName because mount point without an associated component is not allowed.
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                  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
  
  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-global-floating-action-button:
            mountPoints:
              - mountPoint: application/listener
                importName: DynamicGlobalFloatingActionButton
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent # It is necessary to specify an importName because mount point without an associated component is not allowed.
                config:
                  icon: github
                  label: 'Git'
                  toolTip: 'Github'
                  to: https://github.com/redhat-developer/rhdh-plugins
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent # It is necessary to specify an importName because mount point without an associated component is not allowed.
                config:
                  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>'
                  label: 'Quay'
                  showLabel: true
                  toolTip: 'Quay'
                  to: 'https://quay.io'
  

• To configure a Floating Action Button(FAB) to display only on specific pages, configure the global.floatingactionbutton/config mount point in the backstage-plugin-global-floating-action-button plugin and set the visibleOnPaths property, as shown below:

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # start of fab config
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage # It is necessary to specify an importName because mount point without an associated component is not allowed.
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                  label: 'Bulk import'
                  toolTip: 'Register multiple repositories in bulk'
                  to: /bulk-import/repositories
                  visibleOnPaths: ['/catalog', '/settings']
            # end of fab config
            appIcons:
              - name: bulkImportIcon
                importName: BulkImportIcon
            dynamicRoutes:
              - path: /bulk-import/repositories
                importName: BulkImportPage
                menuItem:
                  icon: bulkImportIcon
                  text: Bulk import
  

  In this example, the bulk import Floating Action Button(FAB) is visible only on the /catalog and /settings pages, while it remains hidden on all other pages.

• To hide a Floating Action Button(FAB) on specific pages, configure the global.floatingactionbutton/config mount point in the backstage-plugin-global-floating-action-button plugin and set the excludeOnPaths property, as shown below:

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # start of fab config
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage # It is necessary to specify an importName because mount point without an associated component is not allowed.
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                  label: 'Bulk import'
                  toolTip: 'Register multiple repositories in bulk'
                  to: /bulk-import/repositories
                  excludeOnPaths: ['/bulk-import']
            # end of fab config
            appIcons:
              - name: bulkImportIcon
                importName: BulkImportIcon
            dynamicRoutes:
              - path: /bulk-import/repositories
                importName: BulkImportPage
                menuItem:
                  icon: bulkImportIcon
                  text: Bulk import
  

  In this example, the bulk import Floating Action Button(FAB) will be hidden on the /bulk-import page, while it appears on all other pages.

Static Installation

• Install the Global floating action button plugin using the following command:

  yarn workspace app add @red-hat-developer-hub/backstage-plugin-global-floating-action-button
  

• Add GlobalFloatingActionButton component to packages/app/src/components/Root/Root.tsx with the desired actions you want to associate with your floating buttons:

  /* highlight-add-next-line */
  import {
    GlobalFloatingActionButton,
    Slot,
  } from '@red-hat-developer-hub/backstage-plugin-global-floating-action-button';
  
  export const Root = ({ children }: PropsWithChildren<{}>) => (
    <SidebarPage>
      {/* ... */}
      {/* highlight-add-start */}
      <GlobalFloatingActionButton
        floatingButtons={[
          {
            color: 'success',
            icon: <CreateComponentIcon />,
            label: 'Create',
            toolTip: 'Create entity',
            to: '/create',
          },
          {
            slot: Slot.BOTTOM_LEFT,
            icon: <LibraryBooks />,
            label: 'Docs',
            toolTip: 'Docs',
            to: '/docs',
          },
        ]}
      />
      {/* highlight-add-end */}
      {/* ... */}
    </SidebarPage>
  );
  

Floating Action Button Parameters

Name	Type	Description	Notes
slot	enum	The position where the fab will be placed. Valid values: PAGE_END, BOTTOM_LEFT.	[optional] default to PAGE_END.
label	String	A name for your action button.	required
icon	String React.ReactElement SVG image icon HTML image icon	An icon for your floating button. Recommended to use filled icons from the Material Design library	optional
showLabel	Boolean	To display the label next to your icon.	optional
size	'small' 'medium' 'large'	A name for your action button.	[optional] default to 'medium'
color	'default' 'error' 'info' 'inherit' 'primary' 'secondary' 'success' 'warning'	The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.	[optional] default to 'default'.
onClick	React.MouseEventHandler	the action to be performed on onClick.	optional
to	String	Specify an href if the action button should open a internal/external link.	optional
toolTip	String	The text to appear on hover.	optional
priority	number	When multiple sub-menu actions are displayed, the button can be prioritized to position either at the top or the bottom.	optional
visibleOnPaths	string[]	The action button will appear only on the specified paths and will remain hidden on all other paths.	[optional] default to displaying on all paths.
excludeOnPaths	string[]	The action button will be hidden only on the specified paths and will appear on all other paths.	[optional] default to displaying on all paths.

NOTE

If multiple floating button actions are assigned to the same Slot, they will appear as sub-menu options within the floating button.