From 9b1f1188868f427b8cf426ad4e16c700a76f0666 Mon Sep 17 00:00:00 2001
From: David Langley <langley.dave@gmail.com>
Date: Fri, 30 Jan 2026 16:03:54 +0000
Subject: [PATCH] Make the stories code more DRY

---
 .../RoomListItemMoreOptionsMenu.stories.tsx   | 52 +++++--------------
 .../RoomListItemNotificationMenu.stories.tsx  | 38 ++++----------
 2 files changed, 25 insertions(+), 65 deletions(-)

diff --git a/packages/shared-components/src/room-list/RoomListItem/RoomListItemMoreOptionsMenu.stories.tsx b/packages/shared-components/src/room-list/RoomListItem/RoomListItemMoreOptionsMenu.stories.tsx
index 5b1ac48d4c..e30bdf5b55 100644
--- a/packages/shared-components/src/room-list/RoomListItem/RoomListItemMoreOptionsMenu.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListItem/RoomListItemMoreOptionsMenu.stories.tsx
@@ -73,23 +73,19 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Closed state
-export const Default: Story = {
-    args: {
-        canMarkAsRead: false,
-        canMarkAsUnread: true,
-        isFavourite: false,
-        isLowPriority: false,
-    },
+// Reusable play function to open the menu
+const openMenu: Story["play"] = async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "More Options" });
+    await userEvent.click(trigger);
 };
 
+// Closed state
+export const Default: Story = {};
+
 // Open state - default (can mark as unread, favourite off, low priority off)
 export const Open: Story = {
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "More Options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 // Open state - can mark as read (has unread messages)
@@ -98,11 +94,7 @@ export const OpenCanMarkAsRead: Story = {
         canMarkAsRead: true,
         canMarkAsUnread: false,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "More Options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 // Open state - favourite enabled
@@ -110,11 +102,7 @@ export const OpenFavouriteOn: Story = {
     args: {
         isFavourite: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "More Options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 // Open state - low priority enabled
@@ -122,11 +110,7 @@ export const OpenLowPriorityOn: Story = {
     args: {
         isLowPriority: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "More Options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 // Open state - without invite option (DM or no permission)
@@ -134,11 +118,7 @@ export const OpenWithoutInvite: Story = {
     args: {
         canInvite: false,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "More Options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 // Open state - without copy room link (DM room)
@@ -146,9 +126,5 @@ export const OpenWithoutCopyLink: Story = {
     args: {
         canCopyRoomLink: false,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "More Options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
diff --git a/packages/shared-components/src/room-list/RoomListItem/RoomListItemNotificationMenu.stories.tsx b/packages/shared-components/src/room-list/RoomListItem/RoomListItemNotificationMenu.stories.tsx
index e0b5dbc09b..2ea9d10817 100644
--- a/packages/shared-components/src/room-list/RoomListItem/RoomListItemNotificationMenu.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListItem/RoomListItemNotificationMenu.stories.tsx
@@ -73,12 +73,15 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {
-        roomNotifState: RoomNotifState.AllMessages,
-    },
+// Reusable play function to open the menu
+const openMenu: Story["play"] = async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Notification options" });
+    await userEvent.click(trigger);
 };
 
+export const Default: Story = {};
+
 export const Muted: Story = {
     args: {
         roomNotifState: RoomNotifState.Mute,
@@ -86,45 +89,26 @@ export const Muted: Story = {
 };
 
 export const Open: Story = {
-    args: {
-        roomNotifState: RoomNotifState.AllMessages,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "Notification options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 export const OpenMuted: Story = {
     args: {
         roomNotifState: RoomNotifState.Mute,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "Notification options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 export const AllMessagesLoud: Story = {
     args: {
         roomNotifState: RoomNotifState.AllMessagesLoud,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "Notification options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };
 
 export const MentionsOnly: Story = {
     args: {
         roomNotifState: RoomNotifState.MentionsOnly,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const trigger = canvas.getByRole("button", { name: "Notification options" });
-        await userEvent.click(trigger);
-    },
+    play: openMenu,
 };