From 69ee8d75f49e6db3be98e3043a7f96d6dcfcd9d9 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Wed, 8 Nov 2023 14:50:44 +0100
Subject: [PATCH] Remove button prop

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/odd-scissors-eat.md                           | 9 +++++++++
 .../src/components/InputSelector/InputSelector.tsx       | 2 +-
 .../src/components/UserListPicker/UserListPicker.tsx     | 1 -
 .../CostInsightsNavigation/CostInsightsNavigation.tsx    | 1 -
 .../components/PersonalListPicker/PersonalListPicker.tsx | 1 -
 .../src/components/ListTasksPage/OwnerListPicker.tsx     | 1 -
 6 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/odd-scissors-eat.md

diff --git a/.changeset/odd-scissors-eat.md b/.changeset/odd-scissors-eat.md
new file mode 100644
index 0000000000..cc0d957eec
--- /dev/null
+++ b/.changeset/odd-scissors-eat.md
@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-bazaar': patch
+---
+
+Remove `button` prop from used MaterialUI `MenuItem` component fixing incompatibility with MaterialUI v5.
diff --git a/plugins/bazaar/src/components/InputSelector/InputSelector.tsx b/plugins/bazaar/src/components/InputSelector/InputSelector.tsx
index b7e9ecd96a..69907f9b3e 100644
--- a/plugins/bazaar/src/components/InputSelector/InputSelector.tsx
+++ b/plugins/bazaar/src/components/InputSelector/InputSelector.tsx
@@ -60,7 +60,7 @@ export const InputSelector = ({ name, options, control, error }: Props) => {
           >
             {options.map(option => {
               return (
-                <MenuItem button key={option} value={option}>
+                <MenuItem key={option} value={option}>
                   {option}
                 </MenuItem>
               );
diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
index 854a1cb1b7..d9b32289ae 100644
--- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
+++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
@@ -243,7 +243,6 @@ export const UserListPicker = (props: UserListPickerProps) => {
                 <MenuItem
                   role="none presentation"
                   key={item.id}
-                  button
                   divider
                   onClick={() => setSelectedUserFilter(item.id)}
                   selected={item.id === filters.user?.value}
diff --git a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
index 507016f391..0bdfed3855 100644
--- a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
@@ -44,7 +44,6 @@ const NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {
   const [, setScroll] = useScroll();
   return (
     <MenuItem
-      button
       data-testid={`menu-item-${navigation}`}
       className={classes.menuItem}
       onClick={() => setScroll(navigation)}
diff --git a/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx b/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx
index 1172f2f6fa..b3c6d7b486 100644
--- a/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx
+++ b/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx
@@ -261,7 +261,6 @@ export const PersonalListPicker = () => {
                 <MenuItem
                   role="none presentation"
                   key={item.id}
-                  button
                   divider
                   onClick={() => setSelectedPersonalFilter(item.id)}
                   selected={item.id === selectedPersonalFilter}
diff --git a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx
index ee383569ee..86384275a7 100644
--- a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx
+++ b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx
@@ -111,7 +111,6 @@ export const OwnerListPicker = (props: {
               {group.items.map(item => (
                 <MenuItem
                   key={item.id}
-                  button
                   divider
                   ContainerProps={{ role: 'menuitem' }}
                   onClick={() => onSelectOwner(item.id as 'owned' | 'all')}