Added support for automatically opening a file after it is downloaded in desktop mode. #4194

Author: pravesh-sharma

runtime/package.json

@@ -7,7 +7,7 @@
   "type": "module",
   "main": "src/js/pgadmin.js",
   "scripts": {
-    "start": "electron .",
+    "start": "electron --trace-warnings .",
     "linter": "yarn run eslint -c .eslintrc.js ."
   },
   "packageManager": "[email protected]",
@@ -18,6 +18,7 @@
   "dependencies": {
     "axios": "^1.8.1",
     "electron-context-menu": "^4.0.5",
+    "electron-dl": "^4.0.0",
     "electron-store": "^10.0.0"
   }
 }

runtime/src/js/pgadmin.js

@@ -16,6 +16,7 @@ import { spawn } from 'child_process';
 import { fileURLToPath } from 'url';
 import { setupMenu } from './menu.js';
 import contextMenu from 'electron-context-menu';
+import { CancelError, download } from 'electron-dl';
 
 const configStore = new Store({
   defaults: {
@@ -126,6 +127,28 @@ function reloadApp() {
   currWin.webContents.reload();
 }
 
+async function downloadFile(payload) {
+  const currWin = BrowserWindow.getFocusedWindow();
+  try {
+    await download(currWin, payload.downloadUrl, {
+      filename: payload.fileName,
+      saveAs: payload.show_save_prompt,
+      onProgress: (progress) => {
+        currWin.webContents.send('download-progress', progress);
+      },
+      onCompleted: (item) => {
+        currWin.webContents.send('download-complete', item);
+        if (payload.open_file_after_download)
+          shell.openPath(item.path);
+      },
+    });
+  } catch (error) {
+    if (!(error instanceof CancelError)) {
+      misc.writeServerLog(error);
+    }
+  }
+}
+
 // This functions is used to start the pgAdmin4 server by spawning a
 // separate process.
 function startDesktopMode() {
@@ -369,6 +392,7 @@ ipcMain.on('log', (text) => ()=>{
   misc.writeServerLog(text);
 });
 ipcMain.on('reloadApp', reloadApp);
+ipcMain.on('downloadFile', (_, payload) => downloadFile(payload));
 ipcMain.handle('checkPortAvailable', async (_e, fixedPort)=>{
   try {
     await misc.getAvailablePort(fixedPort);

runtime/src/js/pgadmin_preload.js

@@ -24,4 +24,5 @@ contextBridge.exposeInMainWorld('electronUI', {
   showSaveDialog: (options) => ipcRenderer.invoke('showSaveDialog', options),
   log: (text)=> ipcRenderer.send('log', text),
   reloadApp: ()=>{ipcRenderer.send('reloadApp');},
+  downloadFile: (payload) => ipcRenderer.send('downloadFile', payload),
 });

runtime/yarn.lock

@@ -1550,6 +1550,7 @@ __metadata:
     axios: ^1.8.1
     electron: 34.3.0
     electron-context-menu: ^4.0.5
+    electron-dl: ^4.0.0
     electron-store: ^10.0.0
     eslint: ^9.21.0
   languageName: unknown

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/schema_diff_table_utils.py

@@ -219,7 +219,8 @@ def table_constraint_comp(source_table, target_table):
                              'unique_constraint': ['col_count',
                                                    'condeferrable',
                                                    'condeffered',
-                                                   'columns', 'indnullsnotdistinct'],
+                                                   'columns',
+                                                   'indnullsnotdistinct'],
                              'check_constraint': ['consrc'],
                              'exclude_constraint': ['amname',
                                                     'indconstraint',

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -40,7 +40,7 @@ import Replication from './Replication';
 import { getExpandCell } from '../../../static/js/components/PgReactTableStyled';
 import CodeMirror from '../../../static/js/components/ReactCodeMirror';
 import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded';
-import { getBrowser } from '../../../static/js/utils';
+import { downloadFile } from '../../../static/js/utils';
 import RefreshButton from './components/RefreshButtons';
 
 function parseData(data) {
@@ -453,22 +453,7 @@ function Dashboard({
     let fileName = 'data-' + new Date().getTime() + extension;
 
     try {
-      let respBlob = new Blob([respData], {type : 'text/'+type}),
-        urlCreator = window.URL || window.webkitURL,
-        download_url = urlCreator.createObjectURL(respBlob),
-        link = document.createElement('a');
-
-      document.body.appendChild(link);
-
-      if (getBrowser() == 'IE' && window.navigator.msSaveBlob) {
-        // IE10: (has Blob, but not a[download] or URL)
-        window.navigator.msSaveBlob(respBlob, fileName);
-      } else {
-        link.setAttribute('href', download_url);
-        link.setAttribute('download', fileName);
-        link.click();
-      }
-      document.body.removeChild(link);
+      downloadFile(respData, fileName, `text/${type}`);
     } catch {
       setSsMsg(gettext('Failed to download the logs.'));
     }

web/pgadmin/misc/__init__.py

@@ -15,7 +15,8 @@
 from pgadmin.user_login_check import pga_login_required
 from pathlib import Path
 from pgadmin.utils import PgAdminModule, get_binary_path_versions
-from pgadmin.utils.constants import PREF_LABEL_USER_INTERFACE
+from pgadmin.utils.constants import PREF_LABEL_USER_INTERFACE, \
+    PREF_LABEL_DOWNLOADS
 from pgadmin.utils.csrf import pgCSRFProtect
 from pgadmin.utils.session import cleanup_session_files
 from pgadmin.misc.themes import get_all_themes
@@ -119,6 +120,28 @@ def register_preferences(self):
                 'default or the workspace selected at the time of opening)'
             )
         )
+        self.preference.register(
+            'file_downloads', 'open_file_after_download',
+            gettext("Automatically open downloaded files?"),
+            'boolean', False,
+            category_label=PREF_LABEL_DOWNLOADS,
+            help_str=gettext(
+                '''This setting applies only in desktop mode.
+                 When set to True, the downloaded file will open
+                 in the system's default application for that file type.'''
+            )
+        )
+        self.preference.register(
+            'file_downloads', 'prompt_for_download_location',
+            gettext("Prompt for the download location?"),
+            'boolean', True,
+            category_label=PREF_LABEL_DOWNLOADS,
+            help_str=gettext(
+                'This setting applies only in desktop mode. '
+                'When set to True, a save file prompt will '
+                'be shown after downloading a file.'
+            )
+        )
 
     def get_exposed_url_endpoints(self):
         """

web/pgadmin/static/js/Explain/svg_download.js

@@ -7,6 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import getApiInstance from '../api_instance';
+import { downloadFile } from '../utils';
 
 function convertImageURLtoDataURI(api, image) {
   return new Promise(function(resolve, reject) {
@@ -42,13 +43,6 @@ export function downloadSvg(svg, svgName) {
   }
 
   Promise.all(image_promises).then(function() {
-    let blob = new Blob([svgElement.outerHTML], {type: 'image/svg+xml'});
-    let svgURL = (window.URL || window.webkitURL).createObjectURL(blob);
-    let newElement = document.createElement('a');
-    newElement.href = svgURL;
-    newElement.setAttribute('download', svgName);
-    document.body.appendChild(newElement);
-    newElement.click();
-    document.body.removeChild(newElement);
+    downloadFile(svgElement.outerHTML, svgName, 'image/svg+xml');
   });
 }

web/pgadmin/static/js/utils.js

@@ -369,14 +369,16 @@ export function checkTrojanSource(content, isPasteEvent) {
   }
 }
 
-export function downloadBlob(blob, fileName) {
-  if (getBrowser() == 'IE' && window.navigator.msSaveBlob) {
+export async function downloadBlob(blob, fileName) {
+  const {open_file_after_download, show_save_prompt} = usePreferences.getState().getPreferencesForModule('misc');
+  const urlCreator = window.URL || window.webkitURL;
+  const downloadUrl = urlCreator.createObjectURL(blob);
+  if (getBrowser().name == 'IE' && window.navigator.msSaveBlob) {
     // IE10+ : (has Blob, but not a[download] or URL)
     window.navigator.msSaveBlob(blob, fileName);
+  } else if (getBrowser().name == 'Electron') {
+    await window.electronUI.downloadFile({downloadUrl, fileName, open_file_after_download, show_save_prompt});
   } else {
-    const urlCreator = window.URL || window.webkitURL;
-    const downloadUrl = urlCreator.createObjectURL(blob);
-
     const link = document.createElement('a');
     link.setAttribute('href', downloadUrl);
     link.setAttribute('download', fileName);
@@ -388,6 +390,19 @@ export function downloadBlob(blob, fileName) {
   }
 }
 
+export async function downloadUrlData(downloadUrl, fileName) {
+  const {open_file_after_download, show_save_prompt} = usePreferences.getState().getPreferencesForModule('misc');
+  if (getBrowser().name == 'Electron') {
+    window.electronUI.downloadFile({downloadUrl, fileName, open_file_after_download, show_save_prompt});
+  } else {
+    let link = document.createElement('a');
+    link.setAttribute('href', downloadUrl);
+    link.setAttribute('download', fileName);
+    link.click();
+    link.remove();
+  }
+}
+
 export function downloadFile(textData, fileName, fileType) {
   const respBlob = new Blob([textData], {type : fileType});
   downloadBlob(respBlob, fileName);

web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx

@@ -37,6 +37,7 @@ import pgAdmin from 'sources/pgadmin';
 import { styled } from '@mui/material/styles';
 import BeforeUnload from './BeforeUnload';
 import { isMac } from '../../../../../../static/js/keyboard_shortcuts';
+import { downloadUrlData } from '../../../../../../static/js/utils';
 
 /* Custom react-diagram action for keyboard events */
 export class KeyboardShortcutAction extends Action {
@@ -760,11 +761,7 @@ export default class ERDTool extends React.Component {
       }
       toPng(this.canvasEle, {width, height})
         .then((dataUrl)=>{
-          let link = document.createElement('a');
-          link.setAttribute('href', dataUrl);
-          link.setAttribute('download', this.getCurrentProjectName() + '.png');
-          link.click();
-          link.remove();
+          downloadUrlData(dataUrl, `${this.getCurrentProjectName()}.png`);
         }).catch((err)=>{
           console.error(err);
           let msg = gettext('Unknown error. Check console logs');