fix(global-header): fix to show empty state when help items available (#1232)

Author: divyanshiGupta

workspaces/global-header/.changeset/many-pans-vanish.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Show empty state when no help items available

workspaces/global-header/plugins/global-header/report.api.md

@@ -177,7 +177,7 @@ export interface HeaderIconProps {
 // @public
 export const HelpDropdown: ComponentType<HelpDropdownProps>;
 
-// @public
+// @public (undocumented)
 export interface HelpDropdownProps {
   // (undocumented)
   layout?: CSSProperties;

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.test.tsx

@@ -35,6 +35,8 @@ const MockComponent = ({ title, icon }: any) => (
   </div>
 );
 
+const MockNullComponent = () => null;
+
 describe('HelpDropdown', () => {
   const mockHandleOpen = jest.fn();
   const mockHandleClose = jest.fn();
@@ -49,20 +51,52 @@ describe('HelpDropdown', () => {
     });
   });
 
-  it('returns null when there are no mount points', async () => {
+  it('shows empty state when there are no mount points', async () => {
     (useHelpDropdownMountPoints as jest.Mock).mockReturnValue([]);
 
-    const { container } = await renderInTestApp(<HelpDropdown />);
+    await renderInTestApp(<HelpDropdown />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
 
-    expect(container.firstChild).toBeNull();
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(await screen.findByText('No support links')).toBeInTheDocument();
   });
 
-  it('returns null when mount points is undefined', async () => {
+  it('shows empty state when mount points is undefined', async () => {
     (useHelpDropdownMountPoints as jest.Mock).mockReturnValue(undefined);
 
-    const { container } = await renderInTestApp(<HelpDropdown />);
+    await renderInTestApp(<HelpDropdown />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(await screen.findByText('No support links')).toBeInTheDocument();
+  });
+
+  it('shows empty state when all components return null', async () => {
+    const mockMountPoints: HelpDropdownMountPoint[] = [
+      {
+        Component: MockNullComponent,
+        config: {
+          props: {
+            title: 'Null Component',
+          },
+          priority: 1,
+        },
+      },
+    ];
+
+    (useHelpDropdownMountPoints as jest.Mock).mockReturnValue(mockMountPoints);
+
+    await renderInTestApp(<HelpDropdown />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button'));
 
-    expect(container.firstChild).toBeNull();
+    expect(await screen.findByText('No support links')).toBeInTheDocument();
   });
 
   it('renders help dropdown button when mount points exist', async () => {

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.tsx

@@ -14,44 +14,112 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react';
-import type { CSSProperties } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import type { ComponentType, CSSProperties } from 'react';
 import { HeaderDropdownComponent } from './HeaderDropdownComponent';
 import { useDropdownManager } from '../../hooks';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import { useHelpDropdownMountPoints } from '../../hooks/useHelpDropdownMountPoints';
 import { MenuSection } from './MenuSection';
+import { DropdownEmptyState } from './DropdownEmptyState';
+import SupportAgentIcon from '@mui/icons-material/SupportAgent';
+import { useValidComponentTracker } from '../../hooks/useValidComponentTracker';
 
 /**
  * @public
- * Props for Help Dropdown
  */
 export interface HelpDropdownProps {
   layout?: CSSProperties;
 }
 
+const ValidityTracker = ({
+  Component,
+  props,
+  componentId,
+  onValidityChange,
+}: {
+  Component: ComponentType<any>;
+  props: any;
+  componentId: string;
+  onValidityChange: (componentId: string, isValid: boolean) => void;
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkContent = () => {
+      if (!contentRef.current) return;
+
+      const element = contentRef.current;
+      const hasText = (element.textContent?.trim().length ?? 0) > 0;
+      const hasChildren = element.children.length > 0;
+      const hasChildNodes = element.childNodes.length > 0;
+
+      // A component is valid if it renders ANY content at all
+      const componentIsValid = hasText || hasChildren || hasChildNodes;
+
+      onValidityChange(componentId, componentIsValid);
+    };
+
+    // Check after component has had time to render (longer timeout for lazy components)
+    const timer1 = setTimeout(checkContent, 500);
+    const timer2 = setTimeout(checkContent, 1500); // Double check later
+
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+    };
+  }, [componentId, onValidityChange]);
+
+  try {
+    return (
+      <div ref={contentRef}>
+        <Component {...props} />
+      </div>
+    );
+  } catch (error) {
+    onValidityChange(componentId, false);
+    return null;
+  }
+};
+
 export const HelpDropdown = ({ layout }: HelpDropdownProps) => {
   const { anchorEl, handleOpen, handleClose } = useDropdownManager();
-
   const helpDropdownMountPoints = useHelpDropdownMountPoints();
 
-  const menuItems = useMemo(() => {
+  const { shouldShowEmpty, updateComponentValidity } = useValidComponentTracker(
+    helpDropdownMountPoints?.length ?? 0,
+  );
+
+  // Create all mount point items with validity tracking
+  const allMenuItems = useMemo(() => {
     return (helpDropdownMountPoints ?? [])
-      .map(mp => ({
-        Component: mp.Component,
-        icon: mp.config?.props?.icon,
-        label: mp.config?.props?.title,
-        link: mp.config?.props?.link,
-        tooltip: mp.config?.props?.tooltip,
-        style: mp.config?.style,
-        priority: mp.config?.priority ?? 0,
-      }))
+      .map((mp, index) => {
+        const componentId = `${mp.config?.props?.title || 'helpItem'}-${
+          mp.config?.priority || 0
+        }-${index}`;
+
+        return {
+          componentId,
+          Component: () => (
+            <ValidityTracker
+              Component={mp.Component}
+              props={mp.config?.props || {}}
+              componentId={componentId}
+              onValidityChange={updateComponentValidity}
+            />
+          ),
+          icon: mp.config?.props?.icon,
+          label: mp.config?.props?.title,
+          link: mp.config?.props?.link,
+          tooltip: mp.config?.props?.tooltip,
+          style: mp.config?.style,
+          priority: mp.config?.priority ?? 0,
+        };
+      })
       .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
-  }, [helpDropdownMountPoints]);
+  }, [helpDropdownMountPoints, updateComponentValidity]);
 
-  if (menuItems.length === 0) {
-    return null;
-  }
+  const menuItems = allMenuItems;
 
   return (
     <HeaderDropdownComponent
@@ -66,7 +134,17 @@ export const HelpDropdown = ({ layout }: HelpDropdownProps) => {
       onClose={handleClose}
       anchorEl={anchorEl}
     >
-      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />
+      {!shouldShowEmpty ? (
+        <MenuSection hideDivider items={menuItems} handleClose={handleClose} />
+      ) : (
+        <DropdownEmptyState
+          title="No support links"
+          subTitle="Your administrator needs to set up support links."
+          icon={
+            <SupportAgentIcon sx={{ fontSize: 64, color: 'text.disabled' }} />
+          }
+        />
+      )}
     </HeaderDropdownComponent>
   );
 };

workspaces/global-header/plugins/global-header/src/hooks/useValidComponentTracker.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 { useState, useEffect, useCallback } from 'react';
+
+export const useValidComponentTracker = (totalComponents: number) => {
+  const [validComponents, setValidComponents] = useState<Set<string>>(
+    new Set(),
+  );
+  const [checkedComponents, setCheckedComponents] = useState<Set<string>>(
+    new Set(),
+  );
+
+  // Reset when mount points change (user switch, permission changes)
+  useEffect(() => {
+    setValidComponents(new Set());
+    setCheckedComponents(new Set());
+  }, [totalComponents]);
+
+  const updateComponentValidity = useCallback(
+    (componentId: string, isValid: boolean) => {
+      setValidComponents(prev => {
+        const newSet = new Set(prev);
+        if (isValid) {
+          newSet.add(componentId);
+        } else {
+          newSet.delete(componentId);
+        }
+        return newSet;
+      });
+
+      setCheckedComponents(prev => new Set(prev).add(componentId));
+    },
+    [],
+  );
+
+  const allChecked = checkedComponents.size >= totalComponents;
+  const hasValidComponents = validComponents.size > 0;
+  const shouldShowEmpty = allChecked && !hasValidComponents;
+
+  return {
+    shouldShowEmpty,
+    updateComponentValidity,
+  };
+};