fix(fab): allow custom fab component

[debsmita1]

Hey, I just made a Pull Request!

Part of : https://issues.redhat.com/browse/RHIDP-9381
Fixes: https://issues.redhat.com/browse/RHDHBUGS-1215

Solution description:

With this change, users can provide their custom FAB component while still being able to configure properties such as priority and slot. When a custom FAB is provided, users only need to configure the slot and priority in the config, the custom fab can encapsulate it's own tooltip and onClick actions

Config for custom Component:

- mountPoint: global.floatingactionbutton/config
  importName: NullComponent
  config:
    Component: Chatbot
    priority: -1

Chatbot

export const Chatbot = () => {
  const { isOpen, togglePanel } = useChatPanel();

  return (
    <Tooltip title={isOpen ? 'Close Chat' : 'Open Chat'} placement="left">
      <Fab
        size="small"
        color={isOpen ? 'default' : 'primary'}
        onClick={togglePanel}
        aria-label={isOpen ? 'Close chat' : 'Open chat'}
        sx={{
          transition: 'all 0.3s ease',
        }}
      >
        {isOpen ? <CloseIcon /> : <ChatIcon />}
      </Fab>
    </Tooltip>
  );
};

Screen.Recording.2025-12-11.at.11.27.28.PM.mov

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-global-floating-action-button	workspaces/global-floating-action-button/plugins/global-floating-action-button	patch	v1.7.0

[debsmita1]

I chose to add a Component in the config instead of using the mountPoint "importName" to render the custom Component, because the Components are lazy loaded and RHDH will not be able to determine if a component returns null or not. We need NullComponent as importName for actions with "to" config, as without an importName, the mountPoint is ignored.

FAB dynamicConfig:

- mountPoint: global.floatingactionbutton/config
  importName: NullComponent
  config:
    icon: github
    label: 'Git'
    showLabel: true
    toolTip: 'Github'
    to: https://github.com/redhat-developer/rhdh

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud