fix(fab): render fab at all times (#652)

Author: debsmita1

workspaces/global-floating-action-button/.changeset/tidy-glasses-jump.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-floating-action-button': patch
+---
+
+render fab on document body when the target element is not found

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

@@ -49,21 +49,36 @@ beforeEach(() => {
   document.body.innerHTML = '<div class="BackstagePage-root-123"></div>';
 });
 
+const renderFab = (htmlContent: string) => {
+  document.body.innerHTML = htmlContent;
+  render(
+    <FloatingButton
+      floatingButtons={[
+        {
+          icon: <AddIcon />,
+          label: 'Add',
+        },
+      ]}
+      slot={Slot.BOTTOM_LEFT}
+    />,
+  );
+};
+
 describe('Floating Button', () => {
   it('should render a floating button', () => {
-    render(
-      <FloatingButton
-        floatingButtons={[
-          {
-            icon: <AddIcon />,
-            label: 'Add',
-            color: 'primary',
-            toolTip: 'Main menu',
-          },
-        ]}
-        slot={Slot.BOTTOM_LEFT}
-      />,
-    );
+    renderFab('<div class="BackstagePage-root-123"></div>');
+    expect(screen.getByTestId('floating-button')).toBeInTheDocument();
+    expect(screen.getByTestId('AddIcon')).toBeInTheDocument();
+  });
+
+  it('should render a floating button in the UI when the `BackstagePage-root` classname is not found', () => {
+    renderFab('<div class="BackstagePage-xxx-123"></div>');
+    expect(screen.getByTestId('floating-button')).toBeInTheDocument();
+    expect(screen.getByTestId('AddIcon')).toBeInTheDocument();
+  });
+
+  it('should render a floating button when the `BackstagePage-root` classname is not found but the html tag is found', () => {
+    renderFab('<main class="BackstagePage-xxx-123"></div>');
     expect(screen.getByTestId('floating-button')).toBeInTheDocument();
     expect(screen.getByTestId('AddIcon')).toBeInTheDocument();
   });

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

@@ -59,7 +59,9 @@ export const FloatingButton = ({
 
   React.useEffect(() => {
     const checkTargetElement = () => {
-      const element = document.querySelector('[class^="BackstagePage-root"]');
+      const element =
+        document.querySelector('[class^="BackstagePage-root"]') ??
+        document.querySelector('main');
       if (element) {
         setTargetElement(element);
       } else {
@@ -80,9 +82,7 @@ export const FloatingButton = ({
   if (fabs?.length === 0) {
     return null;
   }
-  if (!targetElement) {
-    return null;
-  }
+
   let fabDiv;
   if (fabs.length > 1) {
     fabDiv = (