Add Title prop in SupportButton

Co-authored-by: Victor Perera <v-vperera@expediagroup.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/tall-bears-taste.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add title prop in SupportButton component

packages/core-components/src/components/SupportButton/SupportButton.test.tsx

@@ -21,8 +21,9 @@ import {
   RenderResult,
   waitFor,
   fireEvent,
+  screen,
 } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { wrapInTestApp, renderInTestApp } from '@backstage/test-utils';
 import { SupportButton } from './SupportButton';
 
 const SUPPORT_BUTTON_ID = 'support-button';
@@ -41,6 +42,12 @@ describe('<SupportButton />', () => {
     );
   });
 
+  it('supports passing a title', async () => {
+    await renderInTestApp(<SupportButton title="Custom title" />);
+    fireEvent.click(screen.getByTestId(SUPPORT_BUTTON_ID));
+    expect(screen.getByText('Custom title')).toBeInTheDocument();
+  });
+
   it('shows popover on click', async () => {
     let renderResult: RenderResult;
 

packages/core-components/src/components/SupportButton/SupportButton.tsx

@@ -24,19 +24,18 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
+  Typography,
   makeStyles,
   Popover,
 } from '@material-ui/core';
-import React, {
-  Fragment,
-  MouseEventHandler,
-  PropsWithChildren,
-  useState,
-} from 'react';
+import React, { Fragment, MouseEventHandler, useState } from 'react';
 import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks';
 import { Link } from '../Link';
 
-type Props = {};
+type SupportButtonProps = {
+  title?: string;
+  children?: React.ReactNode;
+};
 
 const useStyles = makeStyles({
   popoverList: {
@@ -78,7 +77,7 @@ const SupportListItem = ({ item }: { item: SupportItem }) => {
   );
 };
 
-export const SupportButton = ({ children }: PropsWithChildren<Props>) => {
+export const SupportButton = ({ title, children }: SupportButtonProps) => {
   const { items } = useSupportConfig();
 
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -121,13 +120,20 @@ export const SupportButton = ({ children }: PropsWithChildren<Props>) => {
         onClose={popoverCloseHandler}
       >
         <List className={classes.popoverList}>
+          {title && (
+            <ListItem alignItems="flex-start">
+              <Typography variant="subtitle1">{title}</Typography>
+            </ListItem>
+          )}
           {React.Children.map(children, (child, i) => (
-            <ListItem alignItems="flex-start" key={i}>
+            <ListItem alignItems="flex-start" key={`child-${i}`}>
               {child}
             </ListItem>
           ))}
           {items &&
-            items.map((item, i) => <SupportListItem item={item} key={i} />)}
+            items.map((item, i) => (
+              <SupportListItem item={item} key={`item-${i}`} />
+            ))}
         </List>
         <DialogActions>
           <Button color="primary" onClick={popoverCloseHandler}>