Ensure that the query history date format in Desktop mode matches the format of the locale of the pgadmin server. #5495

Format the time based on pgadmin servers locale.

docs/en_US/release_notes_6_17.rst

@@ -23,3 +23,5 @@ Housekeeping
 
 Bug fixes
 *********
+
+  | `Issue #5495 <https://github.com/pgadmin-org/pgadmin4/issues/5495>`_ -  Ensure that the query history date format in Desktop mode matches the format of the locale of the pgadmin server.

web/pgadmin/browser/__init__.py

@@ -649,6 +649,17 @@ def utils():
     except Exception:
         pg_libpq_version = 0
 
+    # Get the pgadmin server's locale
+    default_locale = ''
+    if current_app.PGADMIN_RUNTIME:
+        import locale
+        try:
+            locale_info = locale.getdefaultlocale()
+            if len(locale_info) > 0:
+                default_locale = locale_info[0].replace('_', '-')
+        except Exception:
+            current_app.logger.debug('Failed to get the default locale.')
+
     for submodule in current_blueprint.submodules:
         snippets.extend(submodule.jssnippets)
     return make_response(
@@ -671,7 +682,8 @@ def utils():
             platform=sys.platform,
             qt_default_placeholder=QT_DEFAULT_PLACEHOLDER,
             vw_edt_default_placeholder=VW_EDT_DEFAULT_PLACEHOLDER,
-            enable_psql=config.ENABLE_PSQL
+            enable_psql=config.ENABLE_PSQL,
+            pgadmin_server_locale=default_locale
         ),
         200, {'Content-Type': MIMETYPE_APP_JS})
 

web/pgadmin/browser/templates/browser/js/utils.js

@@ -61,6 +61,9 @@ define('pgadmin.browser.utils',
   /* GET Binary Path Browse config */
   pgAdmin['enable_binary_path_browsing'] = '{{ current_app.config.get('ENABLE_BINARY_PATH_BROWSING') }}' == 'True';
 
+  /* GET the pgadmin server's locale */
+  pgAdmin['pgadmin_server_locale'] =  '{{pgadmin_server_locale}}';
+
   // Define list of nodes on which Query tool option doesn't appears
   let unsupported_nodes = pgAdmin.unsupported_nodes = [
      'server_group', 'server', 'coll-tablespace', 'tablespace',

web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx

@@ -10,6 +10,7 @@ import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 import { PANELS, QUERY_TOOL_EVENTS } from '../QueryToolConstants';
 import gettext from 'sources/gettext';
+import pgAdmin from 'sources/pgadmin';
 import _ from 'lodash';
 import clsx from 'clsx';
 import { Box, Grid, List, ListItem, ListSubheader } from '@material-ui/core';
@@ -116,6 +117,17 @@ export const QuerySources = {
   },
 };
 
+function getDateFormatted(date) {
+  if (pgAdmin['pgadmin_server_locale'] !== '')
+    return date.toLocaleDateString(pgAdmin['pgadmin_server_locale']);
+  return date.toLocaleDateString();
+}
+
+function getTimeFormatted(time) {
+  if (pgAdmin['pgadmin_server_locale'] !== '')
+    return time.toLocaleTimeString(pgAdmin['pgadmin_server_locale']);
+  return time.toLocaleTimeString();
+}
 
 class QueryHistoryUtils {
   constructor() {
@@ -131,18 +143,14 @@ class QueryHistoryUtils {
     return this.dateAsGroupKey(entry.start_time) + this.formatEntryDate(entry.start_time) + (entry.subKey ?? '');
   }
 
-  getDateFormatted(date) {
-    return date.toLocaleDateString();
-  }
-
   formatEntryDate(date) {
     return moment(date).format('HH:mm:ss');
   }
 
   isDaysBefore(date, before) {
     return (
-      this.getDateFormatted(date) ===
-      this.getDateFormatted(moment().subtract(before, 'days').toDate())
+      getDateFormatted(date) ===
+      getDateFormatted(moment().subtract(before, 'days').toDate())
     );
   }
 
@@ -183,7 +191,7 @@ class QueryHistoryUtils {
   }
 
   getGroupHeader(entry) {
-    return this.getDatePrefix(entry.start_time)+this.getDateFormatted(entry.start_time);
+    return this.getDatePrefix(entry.start_time)+getDateFormatted(entry.start_time);
   }
 
   getGroups() {
@@ -326,7 +334,7 @@ function QueryHistoryDetails({entry}) {
       {entry.info && <Box className={classes.infoHeader}>{entry.info}</Box>}
       <Box padding="0.5rem" data-label="history-detail">
         <Grid container>
-          <Grid item sm={4}>{entry.start_time.toLocaleDateString() + ' ' + entry.start_time.toLocaleTimeString()}</Grid>
+          <Grid item sm={4}>{getDateFormatted(entry.start_time) + ' ' + getTimeFormatted(entry.start_time)}</Grid>
           <Grid item sm={4}>{entry?.row_affected > 0 && entry.row_affected}</Grid>
           <Grid item sm={4}>{entry.total_time}</Grid>
         </Grid>