From d2c31b132ed67efd883f2217ac3e1a36f02ee89a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Thu, 10 Jun 2021 11:00:34 +0200
Subject: [PATCH] Add Title prop in SupportButton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Victor Perera <v-vperera@expediagroup.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .changeset/tall-bears-taste.md                |  5 ++++
 .../SupportButton/SupportButton.test.tsx      |  9 ++++++-
 .../SupportButton/SupportButton.tsx           | 26 ++++++++++++-------
 3 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/tall-bears-taste.md

diff --git a/.changeset/tall-bears-taste.md b/.changeset/tall-bears-taste.md
new file mode 100644
index 0000000000..050c47867c
--- /dev/null
+++ b/.changeset/tall-bears-taste.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add title prop in SupportButton component
diff --git a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx b/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
index 6d6b9fd477..7c6cab99c1 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
+++ b/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;
 
diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx
index 6c6de8abe3..96cc308f74 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.tsx
+++ b/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}>