frontend: RestartMultipleButton: Wrap MenuItem in MenuList

Vaishnav-Dhaval · Vaishnav-Dhaval · commit 1c1b652c3f97 · 2026-02-10T22:05:47.000+05:30
diff --git a/frontend/src/components/common/Resource/RestartMultipleButton.stories.tsx b/frontend/src/components/common/Resource/RestartMultipleButton.stories.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import MenuList from '@mui/material/MenuList';
 import { Meta, StoryFn } from '@storybook/react';
 import { getTestDate } from '../../../helpers/testHelpers';
 import { TestContext } from '../../../test';
@@ -62,3 +63,10 @@ MenuButtonStyle.args = {
   ] as RestartableResource[],
   buttonStyle: 'menu',
 };
+MenuButtonStyle.decorators = [
+  Story => (
+    <MenuList>
+      <Story />
+    </MenuList>
+  ),
+];
diff --git a/frontend/src/components/common/Resource/RestartMultipleButton.tsx b/frontend/src/components/common/Resource/RestartMultipleButton.tsx
@@ -102,24 +102,26 @@ export default function RestartMultipleButton(props: RestartMultipleButtonProps)
         }}
         icon="mdi:restart"
       />
-      <ConfirmDialog
-        open={openDialog}
-        title={t('translation|Restart items')}
-        description={<RestartMultipleButtonDescription items={items} />}
-        handleClose={() => setOpenDialog(false)}
-        onConfirm={() => {
-          handleRestart();
-          dispatchRestartEvent({
-            resources: items,
-            status: EventStatus.CONFIRMED,
-          });
-          if (afterConfirm) {
-            afterConfirm();
-          }
-        }}
-        cancelLabel={t('Cancel')}
-        confirmLabel={t('Restart')}
-      />
+      {openDialog && (
+        <ConfirmDialog
+          open={openDialog}
+          title={t('translation|Restart items')}
+          description={<RestartMultipleButtonDescription items={items} />}
+          handleClose={() => setOpenDialog(false)}
+          onConfirm={() => {
+            handleRestart();
+            dispatchRestartEvent({
+              resources: items,
+              status: EventStatus.CONFIRMED,
+            });
+            if (afterConfirm) {
+              afterConfirm();
+            }
+          }}
+          cancelLabel={t('Cancel')}
+          confirmLabel={t('Restart')}
+        />
+      )}
     </>
   );
 }
diff --git a/frontend/src/components/common/Resource/__snapshots__/RestartMultipleButton.AfterConfirmCallback.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/RestartMultipleButton.AfterConfirmCallback.stories.storyshot
@@ -11,6 +11,5 @@
         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
-    <div />
   </div>
 </body>
diff --git a/frontend/src/components/common/Resource/__snapshots__/RestartMultipleButton.Default.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/RestartMultipleButton.Default.stories.storyshot
@@ -11,6 +11,5 @@
         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
-    <div />
   </div>
 </body>
diff --git a/frontend/src/components/common/Resource/__snapshots__/RestartMultipleButton.MenuButtonStyle.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/RestartMultipleButton.MenuButtonStyle.stories.storyshot
@@ -1,26 +1,31 @@
 <body>
   <div>
-    <li
-      class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1sgjfx9-MuiButtonBase-root-MuiMenuItem-root"
-      role="menuitem"
+    <ul
+      class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
+      role="menu"
       tabindex="-1"
     >
-      <div
-        class="MuiListItemIcon-root css-cveggr-MuiListItemIcon-root"
-      />
-      <div
-        class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+      <li
+        class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1sgjfx9-MuiButtonBase-root-MuiMenuItem-root"
+        role="menuitem"
+        tabindex="-1"
       >
-        <span
-          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
+        <div
+          class="MuiListItemIcon-root css-cveggr-MuiListItemIcon-root"
+        />
+        <div
+          class="MuiListItemText-root css-tlelie-MuiListItemText-root"
         >
-          Restart items
-        </span>
-      </div>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </li>
-    <div />
+          <span
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
+          >
+            Restart items
+          </span>
+        </div>
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </li>
+    </ul>
   </div>
 </body>
