Merge pull request #6227 from SimonBrandner/feature/copy-version/17603

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
+import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton";
 import { _t, getCurrentLanguage } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
-import AccessibleButton from "../../../elements/AccessibleButton";
 import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
@@ -69,6 +69,18 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         if (this.closeCopiedTooltip) this.closeCopiedTooltip();
     }
 
+    private getVersionInfo(): { appVersion: string, olmVersion: string } {
+        const brand = SdkConfig.get().brand;
+        const appVersion = this.state.appVersion || 'unknown';
+        let olmVersion = MatrixClientPeg.get().olmVersion;
+        olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : '<not-enabled>';
+
+        return {
+            appVersion: `${_t("%(brand)s version:", { brand })} ${appVersion}`,
+            olmVersion: `${_t("Olm version:")} ${olmVersion}`,
+        };
+    }
+
     private onClearCacheAndReload = (e) => {
         if (!PlatformPeg.get()) return;
 
@@ -173,17 +185,26 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         );
     }
 
-    onAccessTokenCopyClick = async (e) => {
+    private async copy(text: string, e: ButtonEvent) {
         e.preventDefault();
-        const target = e.target; // copy target before we go async and React throws it away
+        const target = e.target as HTMLDivElement; // copy target before we go async and React throws it away
 
-        const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
+        const successful = await copyPlaintext(text);
         const buttonRect = target.getBoundingClientRect();
         const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
             ...toRightOf(buttonRect, 2),
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         });
         this.closeCopiedTooltip = target.onmouseleave = close;
+    }
+
+    private onAccessTokenCopyClick = (e: ButtonEvent) => {
+        this.copy(MatrixClientPeg.get().getAccessToken(), e);
+    };
+
+    private onCopyVersionClicked = (e: ButtonEvent) => {
+        const { appVersion, olmVersion } = this.getVersionInfo();
+        this.copy(`${appVersion}\n${olmVersion}`, e);
     };
 
     render() {
@@ -232,11 +253,6 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
             );
         }
 
-        const appVersion = this.state.appVersion || 'unknown';
-
-        let olmVersion = MatrixClientPeg.get().olmVersion;
-        olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : '<not-enabled>';
-
         let updateButton = null;
         if (this.state.canUpdate) {
             updateButton = <UpdateCheckButton />;
@@ -275,6 +291,8 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
             );
         }
 
+        const { appVersion, olmVersion } = this.getVersionInfo();
+
         return (
             <div className="mx_SettingsTab mx_HelpUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("Help & About") }</div>
@@ -291,8 +309,15 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                 <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
                     <span className='mx_SettingsTab_subheading'>{ _t("Versions") }</span>
                     <div className='mx_SettingsTab_subsectionText'>
-                        { _t("%(brand)s version:", { brand }) } { appVersion }<br />
-                        { _t("olm version:") } { olmVersion }<br />
+                        <div className="mx_HelpUserSettingsTab_copy">
+                            { appVersion }<br />
+                            { olmVersion }<br />
+                            <AccessibleTooltipButton
+                                title={_t("Copy")}
+                                onClick={this.onCopyVersionClicked}
+                                className="mx_HelpUserSettingsTab_copyButton"
+                            />
+                        </div>
                         { updateButton }
                     </div>
                 </div>
@@ -308,12 +333,12 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                             <summary>{ _t("Access Token") }</summary><br />
                             <b>{ _t("Your access token gives full access to your account."
                                + " Do not share it with anyone." ) }</b>
-                            <div className="mx_HelpUserSettingsTab_accessToken">
+                            <div className="mx_HelpUserSettingsTab_copy">
                                 <code>{ MatrixClientPeg.get().getAccessToken() }</code>
                                 <AccessibleTooltipButton
                                     title={_t("Copy")}
                                     onClick={this.onAccessTokenCopyClick}
-                                    className="mx_HelpUserSettingsTab_accessToken_copy"
+                                    className="mx_HelpUserSettingsTab_copyButton"
                                 />
                             </div>
                         </details><br />