Add tab to download csv file of the list of users in a room

patches/add-tab-to-download-csv-file-of-the-list-of-users-in-a-room/matrix-react-sdk+3.71.1.patch

@@ -0,0 +1,91 @@
+diff --git a/node_modules/matrix-react-sdk/src/components/views/right_panel/RoomSummaryCard.tsx b/node_modules/matrix-react-sdk/src/components/views/right_panel/RoomSummaryCard.tsx
+index a32d8da..416e678 100644
+--- a/node_modules/matrix-react-sdk/src/components/views/right_panel/RoomSummaryCard.tsx
++++ b/node_modules/matrix-react-sdk/src/components/views/right_panel/RoomSummaryCard.tsx
+@@ -17,7 +17,14 @@ limitations under the License.
+ import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+ import classNames from "classnames";
+ import { Room } from "matrix-js-sdk/src/models/room";
+-
++import { keys } from "lodash"; /* :TCHAP: */
++
++// src/components/views/right_panel/RoomSummaryCard.tsx
++// src/components/views/elements/Tooltip.tsx
++import Tooltip, { Alignment } from "../elements/Tooltip"; /* :TCHAP: */
++import { useTimeoutToggle } from "../../../hooks/useTimeoutToggle"; /* :TCHAP: */
++import { generateAndDownloadTextFile } from "../../../../../../src/tchap/util/TchapExportFiles"; /* :TCHAP: */
++import { useRoomContext } from "../../../contexts/RoomContext";
+ import MatrixClientContext from "../../../contexts/MatrixClientContext";
+ import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
+ import BaseCard, { Group } from "./BaseCard";
+@@ -274,6 +281,7 @@ const onRoomSettingsClick = (ev: ButtonEvent): void => {
+
+ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose }) => {
+     const cli = useContext(MatrixClientContext);
++    const context = useRoomContext();
+
+     const onShareRoomClick = (): void => {
+         Modal.createDialog(ShareDialog, {
+@@ -287,6 +295,20 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
+         });
+     };
+
++    /* :TCHAP:
++        add a tab to download the list of users in current room
++        so that they can create new rooms with the same users
++    */ 
++    const onRoomExportMemberEmailsClick = async (): Promise<void> => {
++        const members = keys(context?.room?.currentState?.members);
++        generateAndDownloadTextFile({
++            fileName: "members",
++            format: "txt",
++            content: members.join(",")
++        });
++    }
++    /* end :TCHAP: */ 
++    
+     const onRoomPollHistoryClick = (): void => {
+         Modal.createDialog(PollHistoryDialog, {
+             room,
+@@ -295,6 +317,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
+         });
+     };
+
++
+     const isRoomEncrypted = useIsEncrypted(cli, room);
+     const roomContext = useContext(RoomContext);
+     const e2eStatus = roomContext.e2eStatus;
+@@ -328,6 +351,11 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
+     const memberCount = useRoomMemberCount(room);
+     const pinningEnabled = useFeatureEnabled("feature_pinning");
+     const pinCount = usePinnedEvents(pinningEnabled ? room : undefined)?.length;
++    /* :TCHAP: add tooltip for export room member list button */
++    const [exportRoomMembersYooltipVisible, setExportRoomMembersYooltipVisible] = useState(false);
++    const onExportRoomMembersEnter = () => setExportRoomMembersYooltipVisible(true);
++    const onExportRoomMembersLeave = () => setExportRoomMembersYooltipVisible(false);
++    /* end :TCHAP: */
+
+     return (
+         <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
+@@ -357,6 +385,21 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
+                         {_t("Export chat")}
+                     </Button>
+                 )}
++                {/* :TCHAP: */ !isVideoRoom && (
++                    <Button
++                        className="mx_RoomSummaryCard_icon_export"
++                        onClick={onRoomExportMemberEmailsClick}
++                        onMouseEnter={onExportRoomMembersEnter}
++                        onMouseLeave={onExportRoomMembersLeave}
++                    >
++                        {_t("Export room members (txt)")}
++                        <Tooltip
++                            label={_t("By clicking, you will download the list of participants from this room in the form of Tchap identifiers, which you can then copy and paste into another room to have the same participants as in this room.")}
++                            alignment={Alignment.Top}
++                            visible={exportRoomMembersYooltipVisible}
++                        />
++                    </Button>
++                ) /* end :TCHAP */}
+                 <Button
+                     data-testid="shareRoomButton"
+                     className="mx_RoomSummaryCard_icon_share"

patches/patches.json

@@ -211,5 +211,12 @@
         "files": [
             "src/stores/RoomViewStore.tsx"
         ]
+    },
+    "add-tab-to-download-csv-file-of-the-list-of-users-in-a-room": {
+        "github-issue": "https://github.com/tchapgouv/tchap-web-v4/issues/593",
+        "package": "matrix-react-sdk",
+        "files": [
+            "src/components/views/right_panel/RoomSummaryCard.tsx"
+        ]
     }
 }

src/tchap/i18n/strings/tchap_translations.json

@@ -934,5 +934,13 @@
   "Please only proceed if you're sure you've lost all of your other devices and your Security Key.": {
     "fr": "Veuillez ne continuer que si vous êtes certain d’avoir perdu tous vos autres appareils et votre Code de Récupération.",
     "en": "Please only proceed if you're sure you've lost all of your other devices and your Recovery Code."
+  },
+  "Export room members (txt)": {
+    "fr": "Exporter les membres du salon (txt)",
+    "en": "Export room members (txt)"
+  },
+  "By clicking, you will download the list of participants from this room in the form of Tchap identifiers, which you can then copy and paste into another room to have the same participants as in this room.": {
+    "fr": "En cliquant vous téléchargerez la liste des participants de ce salon sous la forme d'indentifiants Tchap, que vous pourrez ensuite copier-coller dans un autre salon pour avoir les mêmes participants que dans ce salon",
+    "en": "By clicking, you will download the list of participants from this room in the form of Tchap identifiers, which you can then copy and paste into another room to have the same participants as in this room."
   }
 }

src/tchap/util/TchapExportFiles.ts

@@ -0,0 +1,22 @@
+export const generateAndDownloadTextFile = ({
+    fileName,
+    format,
+    content
+}: {
+    fileName: string,
+    format: "csv" | "txt",
+    content: string
+}) => {
+    const formats = {
+        csv: "csv",
+        txt: "plain",
+    };
+    const contentToSend = `data:text/${formats[format]};charset=utf-8,${content}`;
+    const encodedUri = encodeURI(contentToSend);
+    const link = document.createElement("a");
+
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", `${fileName}.${format}`);
+    document.body.appendChild(link); // Required for firefox
+    link.click(); // download the data file named "emails.csv".
+}