feat: add the NewRoomButton component

public/locales/en/roomsTab.json

@@ -2,6 +2,7 @@
     "title": "Rooms",
     "searchBoxPlaceholder": "Filter rooms",
     "button": "New room",
+    "buttonHelp": "Open Watcha in a new tab to create a new room",
     "headers": {
         "name": "Name",
         "creator": "Creator",

public/locales/fr/roomsTab.json

@@ -2,6 +2,7 @@
     "title": "Salons",
     "searchBoxPlaceholder": "Filtrer les salons",
     "button": "Nouveau salon",
+    "buttonHelp": "Ouvrir Watcha dans un nouvel onglet pour créer un nouveau salon",
     "headers": {
         "name": "Nom",
         "creator": "Créateur",

src/NewRoomButton.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import OverlayTrigger from "react-bootstrap/OverlayTrigger";
+import Popover from "react-bootstrap/Popover";
+
+import Button from "./NewItemButton";
+
+export default () => {
+    const { t } = useTranslation("roomsTab");
+
+    const popover = (
+        <Popover>
+            <Popover.Content>{t("buttonHelp")}</Popover.Content>
+        </Popover>
+    );
+
+    return (
+        <OverlayTrigger placement="left" overlay={popover}>
+            <span className="d-inline-block">
+                <Button
+                    onClick={() => window.open("/#/new", "_blank")}
+                    {...{ t }}
+                />
+            </span>
+        </OverlayTrigger>
+    );
+};

src/RoomsTab.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import { useTranslation, withTranslation } from "react-i18next";
 
 import { useMatrixClientContext } from "./contexts";
-import Button from "./NewItemButton";
+import NewRoomButton from "./NewRoomButton";
 import TableTab, { compareLowerCase } from "./TableTab";
 
 const ns = "roomsTab";
@@ -34,9 +34,6 @@ export default () => {
         resolve,
     };
 
-    const NewRoomButton = withTranslation(ns)(Button);
-    const newItemButton = <NewRoomButton onClick={() => {}} />;
-
     const columns = useMemo(
         () => [
             {
@@ -76,7 +73,8 @@ export default () => {
         <TableTab
             itemList={roomList}
             setItemList={setRoomList}
-            {...{ requestParams, columns, initialState, newItemButton, ns }}
+            newItemButton={<NewRoomButton />}
+            {...{ requestParams, columns, initialState, ns }}
         />
     );
 };