Fixed an issue where unexpected error messages are displayed when users change the language via preferences. Fixes #7267

docs/en_US/release_notes_6_8.rst

@@ -25,3 +25,4 @@ Bug fixes
   | `Issue #7238 <https://redmine.postgresql.org/issues/7238>`_ -  Fixed an issue where foreign key is not removed even if the referred table is removed in ERD.
   | `Issue #7257 <https://redmine.postgresql.org/issues/7257>`_ -  Support running the container under OpenShift with alternate UIDs.
   | `Issue #7261 <https://redmine.postgresql.org/issues/7261>`_ -  Correct typo in the documentation.
+  | `Issue #7267 <https://redmine.postgresql.org/issues/7267>`_ -  Fixed an issue where unexpected error messages are displayed when users change the language via preferences.

web/pgadmin/browser/server_groups/servers/static/js/binary_path.ui.js

@@ -49,7 +49,13 @@ export default class BinaryPathSchema extends BaseUISchema {
       },
       {
         id: 'binaryPath', label: gettext('Binary Path'), cell: 'file', type: 'file',
-        isvalidate: true, controlProps: { dialogType: 'select_folder', supportedTypes: ['*', 'sql', 'backup'], dialogTitle: 'Select folder' },
+        isvalidate: true,
+        controlProps: {
+          dialogType: 'select_folder',
+          supportedTypes: ['*', 'sql', 'backup'],
+          dialogTitle: gettext('Select folder'),
+          placeholder: pgAdmin.server_mode == 'False' ? gettext('Select binary path...') : gettext('Enter binary path...')
+        },
         hideBrowseButton: pgAdmin.server_mode == 'True',
         validate: (data) => {
           const api = getApiInstance();

web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx

@@ -166,6 +166,7 @@ export default function PreferencesComponent({ ...props }) {
   const [initValues, setInitValues] = React.useState({});
   const [loadTree, setLoadTree] = React.useState(0);
   const api = getApiInstance();
+  const firstTreeElement = React.useRef('');
 
   useEffect(() => {
     const pref_url = url_for('preferences.index');
@@ -194,6 +195,10 @@ export default function PreferencesComponent({ ...props }) {
           'isExpanded': true,
         };
 
+        if(firstTreeElement.current.length == 0) {
+          firstTreeElement.current = node.label;
+        }
+
         node.children.forEach(subNode => {
           let sid = Math.floor(Math.random() * 1000);
           let nodeData = {
@@ -258,7 +263,7 @@ export default function PreferencesComponent({ ...props }) {
 
         let _val = element.value.split('|');
         preferencesValues[element.id] = { 'warning': _val[0], 'alert': _val[1] };
-      } else if (subNode.label == 'Results grid' && node.label == 'Query Tool') {
+      } else if (subNode.label == gettext('Results grid') && node.label == gettext('Query Tool')) {
         setResultsOptions(element, subNode, preferencesValues, type);
       } else {
         element.type = type;
@@ -327,10 +332,10 @@ export default function PreferencesComponent({ ...props }) {
   }
   function addNote(node, subNode, nodeData, preferencesData, note = '') {
     // Check and add the note for the element.
-    if (subNode.label == 'Nodes' && node.label == 'Browser') {
+    if (subNode.label == gettext('Nodes') && node.label == gettext('Browser')) {
       note = [gettext('This settings is to Show/Hide nodes in the browser tree.')].join('');
     } else {
-      note = [gettext(note)].join('');
+      note = [note].join('');
     }
 
     if (note && note.length > 0) {
@@ -374,7 +379,7 @@ export default function PreferencesComponent({ ...props }) {
 
     // Listen added preferences tree node event to expand the newly added node on tree load.
     pgAdmin.Browser.Events.on('preferences:tree:added', (item) => {
-      if (item._parent._fileName == 'Browser' && item._parent.isExpanded && !prefTreeInit.current) {
+      if (item._parent._fileName == firstTreeElement.current && item._parent.isExpanded && !prefTreeInit.current) {
         pgAdmin.Browser.ptree.tree.setActiveFile(item._parent._children[0], false);
       }
       else if (item.type == FileType.Directory) {

web/pgadmin/preferences/static/js/components/PreferencesTree.jsx

@@ -40,7 +40,7 @@ export default function PreferencesTree({ pgBrowser, data }) {
       },
       sortComparator: (a, b) => {
         // No nee to sort Query tool options.
-        if (a._parent && a._parent._fileName == 'Query Tool') return 0;
+        if (a._parent && a._parent._fileName == gettext('Query Tool')) return 0;
         // Sort alphabetically
         if (a.constructor === b.constructor) {
           return pgAdmin.natural_sort(a.fileName, b.fileName);

web/pgadmin/static/js/components/FormComponents.jsx

@@ -60,6 +60,7 @@ const useStyles = makeStyles((theme) => ({
   formLabel: {
     margin: theme.spacing(0.75, 0.75, 0.75, 0.75),
     display: 'flex',
+    wordBreak: 'break-word'
   },
   formLabelError: {
     color: theme.palette.error.main,
@@ -407,12 +408,17 @@ FormInputText.propTypes = {
 /* Using the existing file dialog functions using showFileDialog */
 export function InputFileSelect({ controlProps, onChange, disabled, readonly, isvalidate = false, hideBrowseButton=false,validate, ...props }) {
   const inpRef = useRef();
+  let textControlProps = {};
+  if(controlProps?.placeholder) {
+    const {placeholder} = controlProps;
+    textControlProps = {placeholder};
+  }
   const onFileSelect = (value) => {
     onChange && onChange(decodeURI(value));
     inpRef.current.focus();
   };
   return (
-    <InputText ref={inpRef} disabled={disabled} readonly={readonly} onChange={onChange} {...props} endAdornment={
+    <InputText ref={inpRef} disabled={disabled} readonly={readonly} onChange={onChange} controlProps={textControlProps} {...props} endAdornment={
       <>
         {!hideBrowseButton &&
         <IconButton onClick={() => showFileDialog(controlProps, onFileSelect)}

web/pgadmin/static/js/helpers/ModalProvider.jsx

@@ -191,6 +191,7 @@ function PaperComponent(props) {
             ...position,
           });
         }}
+        dragHandleClassName="modal-drag-area"
       >
         <Paper {...props} style={{ width: '100%', height: '100%', maxHeight: '100%', maxWidth: '100%' }} />
       </Rnd>
@@ -245,7 +246,7 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, fullScr
         fullWidth={isFullWidth}
         disableBackdropClick
       >
-        <DialogTitle>
+        <DialogTitle className='modal-drag-area'>
           <Box className={classes.titleBar}>
             <Box className={classes.title} marginRight="0.25rem" >{title}</Box>
             {