feat(global-header): add help dropdown and support for quickstart button

Author: divyanshiGupta

workspaces/global-header/.changeset/green-beds-buy.md

@@ -0,0 +1,7 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': minor
+---
+
+**BREAKING**: `SupportButton` is now a `MenuItem` and `style` config prop can be used to update color, size and other required css properties.
+
+Add `HelpDropdown` in global header plugin.

workspaces/global-header/plugins/global-header/app-config.dynamic.yaml

@@ -65,11 +65,22 @@ dynamicPlugins:
               title: RHDH Local
               icon: developerHub
               link: https://github.com/redhat-developer/rhdh-local
-
+              
         - mountPoint: global.header/component
-          importName: SupportButton
+          importName: HelpDropdown
           config:
             priority: 80
+        
+        - mountPoint: global.header/help
+          importName: QuickstartButton
+          config:
+            priority: 100
+
+        - mountPoint: global.header/help
+          importName: SupportButton
+          config:
+            priority: 10
+
 
         - mountPoint: global.header/component
           importName: NotificationButton
@@ -98,4 +109,4 @@ dynamicPlugins:
         - mountPoint: global.header/profile
           importName: LogoutButton
           config:
-            priority: 10
+            priority: 10

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

@@ -5,7 +5,7 @@
 ```ts
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import type { ComponentType } from 'react';
-import type { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 
 // @public
@@ -343,29 +343,18 @@ export const StarredDropdown: () => JSX_2.Element;
 // @public (undocumented)
 export const SupportButton: ({
   title,
-  tooltip,
-  color,
-  size,
   to,
-  layout,
+  icon,
+  tooltip,
+  style,
 }: SupportButtonProps) => JSX_2.Element | null;
 
 // @public (undocumented)
 export interface SupportButtonProps {
   // (undocumented)
-  color?:
-    | 'inherit'
-    | 'default'
-    | 'primary'
-    | 'secondary'
-    | 'error'
-    | 'info'
-    | 'success'
-    | 'warning';
-  // (undocumented)
-  layout?: CSSProperties;
+  icon?: string;
   // (undocumented)
-  size?: 'small' | 'medium' | 'large';
+  style?: CSSProperties;
   // (undocumented)
   title?: string;
   // (undocumented)

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

@@ -0,0 +1,72 @@
+/*
+ * 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 { useMemo } from 'react';
+import type { 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';
+
+/**
+ * @public
+ * Props for Help Dropdown
+ */
+export interface HelpDropdownProps {
+  layout?: CSSProperties;
+}
+
+export const HelpDropdown = ({ layout }: HelpDropdownProps) => {
+  const { anchorEl, handleOpen, handleClose } = useDropdownManager();
+
+  const helpDropdownMountPoints = useHelpDropdownMountPoints();
+
+  const menuItems = 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,
+      }))
+      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [helpDropdownMountPoints]);
+
+  if (menuItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <HeaderDropdownComponent
+      isIconButton
+      tooltip="Help"
+      buttonContent={<HelpOutlineIcon />}
+      buttonProps={{
+        color: 'inherit',
+        sx: layout,
+      }}
+      onOpen={handleOpen}
+      onClose={handleClose}
+      anchorEl={anchorEl}
+    >
+      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />
+    </HeaderDropdownComponent>
+  );
+};

workspaces/global-header/plugins/global-header/src/components/SupportButton/SupportButton.test.tsx

@@ -41,19 +41,18 @@ const configWithoutSupportUrl = mockApis.config({
 
 describe('SupportButton', () => {
   it('renders a button when the support url is defined', async () => {
-    const { getByRole } = await renderInTestApp(
+    const { getByTestId } = await renderInTestApp(
       <TestApiProvider apis={[[configApiRef, configWithSupportUrl]]}>
         <SupportButton />
       </TestApiProvider>,
     );
-    expect(getByRole('link')).toBeInTheDocument();
-    expect(getByRole('link').getAttribute('aria-label')).toEqual(
-      'Support, Opens in a new window',
-    );
-    expect(getByRole('link').getAttribute('href')).toEqual(
+    expect(getByTestId('support-button')).toBeInTheDocument();
+    expect(getByTestId('support-button').getAttribute('href')).toEqual(
       'https://access.redhat.com/products/red-hat-developer-hub',
     );
-    expect(getByRole('link').getAttribute('target')).toEqual('_blank');
+    expect(getByTestId('support-button').getAttribute('target')).toEqual(
+      '_blank',
+    );
   });
 
   it('renders no button when the support url is not defined', async () => {
@@ -66,34 +65,30 @@ describe('SupportButton', () => {
   });
 
   it('uses the to prop also when the support url is defined', async () => {
-    const { getByRole } = await renderInTestApp(
+    const { getByTestId } = await renderInTestApp(
       <TestApiProvider apis={[[configApiRef, configWithSupportUrl]]}>
         <SupportButton to="https://access.redhat.com/documentation/en-us/red_hat_developer_hub" />
       </TestApiProvider>,
     );
-    expect(getByRole('link')).toBeInTheDocument();
-    expect(getByRole('link').getAttribute('aria-label')).toEqual(
-      'Support, Opens in a new window',
-    );
-    expect(getByRole('link').getAttribute('href')).toEqual(
+    expect(getByTestId('support-button').getAttribute('href')).toEqual(
       'https://access.redhat.com/documentation/en-us/red_hat_developer_hub',
     );
-    expect(getByRole('link').getAttribute('target')).toEqual('_blank');
+    expect(getByTestId('support-button').getAttribute('target')).toEqual(
+      '_blank',
+    );
   });
 
   it('uses the to prop also when the support url is not defined', async () => {
-    const { getByRole } = await renderInTestApp(
+    const { getByTestId } = await renderInTestApp(
       <TestApiProvider apis={[[configApiRef, configWithoutSupportUrl]]}>
         <SupportButton to="https://access.redhat.com/documentation/en-us/red_hat_developer_hub" />
       </TestApiProvider>,
     );
-    expect(getByRole('link')).toBeInTheDocument();
-    expect(getByRole('link').getAttribute('aria-label')).toEqual(
-      'Support, Opens in a new window',
-    );
-    expect(getByRole('link').getAttribute('href')).toEqual(
+    expect(getByTestId('support-button').getAttribute('href')).toEqual(
       'https://access.redhat.com/documentation/en-us/red_hat_developer_hub',
     );
-    expect(getByRole('link').getAttribute('target')).toEqual('_blank');
+    expect(getByTestId('support-button').getAttribute('target')).toEqual(
+      '_blank',
+    );
   });
 });

workspaces/global-header/plugins/global-header/src/components/SupportButton/SupportButton.tsx

@@ -14,50 +14,31 @@
  * limitations under the License.
  */
 
-import type { CSSProperties } from 'react';
 import { configApiRef, useApiHolder } from '@backstage/core-plugin-api';
-import { Link as BackstageLink } from '@backstage/core-components';
-
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import HelpIcon from '@mui/icons-material/HelpOutline';
+import { Link } from '@backstage/core-components';
+import MenuItem from '@mui/material/MenuItem';
+import { MenuItemLink } from '../MenuItemLink/MenuItemLink';
+import { CSSProperties } from 'react';
 
 /**
  * @public
  */
 export interface SupportButtonProps {
+  icon?: string;
   title?: string;
-  tooltip?: string;
-  color?:
-    | 'inherit'
-    | 'default'
-    | 'primary'
-    | 'secondary'
-    | 'error'
-    | 'info'
-    | 'success'
-    | 'warning';
-  size?: 'small' | 'medium' | 'large';
   to?: string;
-  layout?: CSSProperties;
+  tooltip?: string;
+  style?: CSSProperties;
 }
-
-// Backstage Link automatically detects external links and emits analytic events.
-const Link = (props: any) => (
-  <BackstageLink {...props} color="inherit" externalLinkIcon={false} />
-);
-
 /**
  * @public
  */
 export const SupportButton = ({
   title = 'Support',
-  tooltip,
-  color = 'inherit',
-  size = 'small',
   to,
-  layout,
+  icon = 'support',
+  tooltip,
+  style,
 }: SupportButtonProps) => {
   const apiHolder = useApiHolder();
   const config = apiHolder.get(configApiRef);
@@ -67,26 +48,19 @@ export const SupportButton = ({
     return null;
   }
 
-  const isExternalLink =
-    supportUrl.startsWith('http://') || supportUrl.startsWith('https://');
-
   return (
-    <Box sx={layout}>
-      <Tooltip
-        title={tooltip ?? `${title}${isExternalLink ? ' (external link)' : ''}`}
-      >
-        <div>
-          <IconButton
-            component={Link}
-            color={color}
-            size={size}
-            to={supportUrl}
-            aria-label={title}
-          >
-            <HelpIcon fontSize={size} />
-          </IconButton>
-        </div>
-      </Tooltip>
-    </Box>
+    <MenuItem
+      to={supportUrl}
+      component={Link}
+      sx={{ cursor: 'pointer', width: '100%', color: 'inherit', ...style }}
+      data-testid="support-button"
+    >
+      <MenuItemLink
+        to={supportUrl}
+        title={title}
+        icon={icon}
+        tooltip={tooltip}
+      />
+    </MenuItem>
   );
 };

workspaces/global-header/plugins/global-header/src/defaultMountPoints/defaultMountPoints.tsx

@@ -25,6 +25,7 @@ import {
   ApplicationLauncherDropdownMountPoint,
   CreateDropdownMountPoint,
   GlobalHeaderComponentMountPoint,
+  HelpDropdownMountPoint,
   ProfileDropdownMountPoint,
 } from '../types';
 import { NotificationButton } from '../components/NotificationButton/NotificationButton';
@@ -34,6 +35,7 @@ import { Spacer } from '../components/Spacer/Spacer';
 import { StarredDropdown } from '../components/HeaderDropdownComponent/StarredDropdown';
 import { ApplicationLauncherDropdown } from '../components/HeaderDropdownComponent/ApplicationLauncherDropdown';
 import { CompanyLogo } from '../components/CompanyLogo/CompanyLogo';
+import { HelpDropdown } from '../components/HeaderDropdownComponent/HelpDropdown';
 
 /**
  * default Global Header Components mount points
@@ -98,7 +100,7 @@ export const defaultGlobalHeaderComponentsMountPoints: GlobalHeaderComponentMoun
       },
     },
     {
-      Component: SupportButton,
+      Component: HelpDropdown,
       config: {
         priority: 80,
       },
@@ -158,6 +160,26 @@ export const defaultProfileDropdownMountPoints: ProfileDropdownMountPoint[] = [
   },
 ];
 
+export const defaultHelpDropdownMountPoints: HelpDropdownMountPoint[] = [
+  {
+    Component: MenuItemLink as ComponentType,
+    config: {
+      priority: 100,
+      props: {
+        title: 'Quickstart',
+        icon: 'quickstart',
+        link: 'https://docs.redhat.com/en/documentation/red_hat_developer_hub/1.6/',
+      },
+    },
+  },
+  {
+    Component: SupportButton,
+    config: {
+      priority: 10,
+    },
+  },
+];
+
 export const defaultApplicationLauncherDropdownMountPoints: ApplicationLauncherDropdownMountPoint[] =
   [
     {