Adds tooltip for compose menu button

Author: byteplow

src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx

@@ -70,8 +70,9 @@ export function RoomListHeaderView(): JSX.Element {
                             <ComposeMenu vm={vm} />
                         ) : (
                             <IconButton
-                                aria-label={_t("action|start_chat")}
+                                aria-label={_t("action|new_conversation")}
                                 onClick={(e) => vm.createChatRoom(e.nativeEvent)}
+                                tooltip={_t("action|new_conversation")}
                             >
                                 <ComposeIcon color="var(--cpd-color-icon-secondary)" />
                             </IconButton>
@@ -163,7 +164,7 @@ function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element {
             side="right"
             align="start"
             trigger={
-                <IconButton aria-label={_t("action|add")}>
+                <IconButton aria-label={_t("action|new_conversation")} tooltip={_t("action|new_conversation")}>
                     <ComposeIcon color="var(--cpd-color-icon-secondary)" />
                 </IconButton>
             }

src/i18n/strings/en_EN.json

@@ -93,6 +93,7 @@
         "maximise": "Maximise",
         "mention": "Mention",
         "minimise": "Minimise",
+        "new_conversation": "New conversation",
         "new_room": "New room",
         "new_video_room": "New video room",
         "next": "Next",

test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx

@@ -57,7 +57,7 @@ describe("<RoomListHeaderView />", () => {
             mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
 
             const { asFragment } = render(<RoomListHeaderView />);
-            expect(screen.queryByRole("button", { name: "Add" })).toBeInTheDocument();
+            expect(screen.queryByRole("button", { name: "New conversation" })).toBeInTheDocument();
             expect(asFragment()).toMatchSnapshot();
         });
 
@@ -66,18 +66,18 @@ describe("<RoomListHeaderView />", () => {
             mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displayComposeMenu: false });
 
             const { asFragment } = render(<RoomListHeaderView />);
-            expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
+            expect(screen.queryByRole("button", { name: "New conversation" })).toBeInTheDocument();
             expect(asFragment()).toMatchSnapshot();
 
-            await user.click(screen.getByRole("button", { name: "Start chat" }));
+            await user.click(screen.getByRole("button", { name: "New conversation" }));
             expect(defaultValue.createChatRoom).toHaveBeenCalled();
         });
 
         it("should display all the buttons when the menu is opened", async () => {
             const user = userEvent.setup();
             mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
             render(<RoomListHeaderView />);
-            const openMenu = screen.getByRole("button", { name: "Add" });
+            const openMenu = screen.getByRole("button", { name: "New conversation" });
             await user.click(openMenu);
 
             await user.click(screen.getByRole("menuitem", { name: "Start chat" }));
@@ -101,7 +101,7 @@ describe("<RoomListHeaderView />", () => {
             });
 
             render(<RoomListHeaderView />);
-            await user.click(screen.getByRole("button", { name: "Add" }));
+            await user.click(screen.getByRole("button", { name: "New conversation" }));
 
             expect(screen.queryByRole("menuitem", { name: "New room" })).toBeNull();
             expect(screen.queryByRole("menuitem", { name: "New video room" })).toBeNull();
@@ -157,7 +157,7 @@ describe("<RoomListHeaderView />", () => {
             });
 
             render(<RoomListHeaderView />);
-            await user.click(screen.getByRole("button", { name: "Add" }));
+            await user.click(screen.getByRole("button", { name: "Open space menu" }));
 
             expect(screen.queryByRole("menuitem", { name: "Invite" })).toBeNull();
             expect(screen.queryByRole("menuitem", { name: "Space Setting" })).toBeNull();