Feature: Copy Ferdium info from the 'About' dialog into the clipboard (#402)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

4 files changed, 47 insertions, 43 deletions

diff --git a/src/environment-remote.ts b/src/environment-remote.ts
index 0cd5d2ce4..bb14448a3 100644
--- a/src/environment-remote.ts
+++ b/src/environment-remote.ts
@@ -1,5 +1,4 @@
 import { join } from 'path';
-import osName from 'os-name';
 import { api as electronApi } from './electron-util';
 import {
   LIVE_FERDIUM_API,
@@ -14,16 +13,7 @@ import {
   LOCAL_TODOS_FRONTEND_URL,
   PRODUCTION_TODOS_FRONTEND_URL,
 } from './config';
-import {
-  chromeVersion,
-  electronVersion,
-  isWindows,
-  nodeVersion,
-  osArch,
-} from './environment';
-
-// @ts-expect-error Cannot find module './buildInfo.json' or its corresponding type declarations.
-import * as buildInfo from './buildInfo.json';
+import { isWindows } from './environment';
 
 export const { app } = electronApi;
 export const ferdiumVersion: string = app.getVersion();
@@ -89,17 +79,3 @@ export const API_VERSION: string = 'v1';
 export const WS_API: string = wsApi;
 export const WEBSITE: string = web;
 export const TODOS_FRONTEND: string = todos;
-
-export function aboutAppDetails(): string {
-  return [
-    `Version: ${ferdiumVersion}`,
-    `Electron: ${electronVersion}`,
-    `Chrome: ${chromeVersion}`,
-    `Node.js: ${nodeVersion}`,
-    `Platform: ${osName()}`,
-    `Arch: ${osArch}`,
-    `Build date: ${new Date(Number(buildInfo.timestamp))}`,
-    `Git SHA: ${buildInfo.gitHashShort}`,
-    `Git branch: ${buildInfo.gitBranch}`,
-  ].join('\n');
-}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f4871f207..1690a6067 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -115,6 +115,7 @@
   "menu.services": "Services",
   "menu.services.activatePreviousService": "Activate previous service",
   "menu.services.addNewService": "Add New Service...",
+  "menu.services.copyToClipboard": "Copy to clipboard",
   "menu.services.goHome": "Home",
   "menu.services.setNextServiceActive": "Activate next service",
   "menu.todos": "Todos",
diff --git a/src/index.ts b/src/index.ts
index 0fccac6e9..786b95a69 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,7 +26,6 @@ import { DEFAULT_APP_SETTINGS, DEFAULT_WINDOW_OPTIONS } from './config';
 import { isMac, isWindows, isLinux, altKey } from './environment';
 import {
   isDevMode,
-  aboutAppDetails,
   userDataRecipesPath,
   userDataPath,
 } from './environment-remote';
@@ -166,11 +165,6 @@ if (!retrieveSettingValue('enableGPUAcceleration', false)) {
   app.disableHardwareAcceleration();
 }
 
-app.setAboutPanelOptions({
-  applicationVersion: aboutAppDetails(),
-  version: '',
-});
-
 const createWindow = () => {
   // Remember window size
   const mainWindowState = windowStateKeeper({
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index d3a3163b9..7b048d3fa 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -9,6 +9,7 @@ import {
 } from '@electron/remote';
 import { autorun, observable } from 'mobx';
 import { defineMessages } from 'react-intl';
+import osName from 'os-name';
 import {
   CUSTOM_WEBSITE_RECIPE_ID,
   GITHUB_FERDIUM_URL,
@@ -27,8 +28,12 @@ import {
   addNewServiceShortcutKey,
   splitModeToggleShortcutKey,
   muteFerdiumShortcutKey,
+  electronVersion,
+  chromeVersion,
+  nodeVersion,
+  osArch,
 } from '../environment';
-import { aboutAppDetails, ferdiumVersion } from '../environment-remote';
+import { ferdiumVersion } from '../environment-remote';
 import { todoActions } from '../features/todos/actions';
 import { workspaceActions } from '../features/workspaces/actions';
 import { workspaceStore } from '../features/workspaces/index';
@@ -36,6 +41,9 @@ import apiBase, { serverBase } from '../api/apiBase';
 import { openExternalUrl } from '../helpers/url-helpers';
 import globalMessages from '../i18n/globalMessages';
 
+// @ts-expect-error Cannot find module '../buildInfo.json' or its corresponding type declarations.
+import * as buildInfo from '../buildInfo.json';
+
 const menuItems = defineMessages({
   edit: {
     id: 'menu.edit',
@@ -325,6 +333,14 @@ const menuItems = defineMessages({
     id: 'menu.services.goHome',
     defaultMessage: 'Home',
   },
+  ok: {
+    id: 'global.ok',
+    defaultMessage: 'Ok',
+  },
+  copyToClipboard: {
+    id: 'menu.services.copyToClipboard',
+    defaultMessage: 'Copy to clipboard',
+  },
 });
 
 function getActiveService() {
@@ -797,10 +813,6 @@ class FranzMenu {
       accelerator: `${altKey()}+F`,
       submenu: [
         {
-          label: intl.formatMessage(menuItems.about),
-          role: 'about',
-        },
-        {
           type: 'separator',
         },
         {
@@ -856,15 +868,36 @@ class FranzMenu {
       ],
     });
 
+    const aboutAppDetails = [
+      `Version: ${ferdiumVersion}`,
+      `Electron: ${electronVersion}`,
+      `Chrome: ${chromeVersion}`,
+      `Node.js: ${nodeVersion}`,
+      `Platform: ${osName()}`,
+      `Arch: ${osArch}`,
+      `Build date: ${new Date(Number(buildInfo.timestamp))}`,
+      `Git SHA: ${buildInfo.gitHashShort}`,
+      `Git branch: ${buildInfo.gitBranch}`,
+    ].join('\n');
+
     const about = {
       label: intl.formatMessage(menuItems.about),
       click: () => {
-        dialog.showMessageBox({
-          type: 'info',
-          title: 'Ferdium',
-          message: 'Ferdium',
-          detail: aboutAppDetails(),
-        });
+        dialog
+          .showMessageBox({
+            type: 'info',
+            title: 'Ferdium',
+            message: 'Ferdium',
+            detail: aboutAppDetails,
+            buttons: [intl.formatMessage(menuItems.copyToClipboard), intl.formatMessage(menuItems.ok)],
+          })
+          .then(result => {
+            if (result.response === 0) {
+              clipboard.write({
+                text: aboutAppDetails,
+              });
+            }
+          });
       },
     };
 
@@ -889,7 +922,7 @@ class FranzMenu {
         },
       );
 
-      tpl[5].submenu.unshift(about, {
+      tpl[0].submenu.unshift(about, {
         type: 'separator',
       });
     } else {